blush
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BLUSH</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin-top : 5px;
padding : 0;
text-align : left;
font : 76% "Trebuchet MS", verdana, arial, sans-serif;
background : #333;
color : #666;
}
#container {
width : 750px;
margin-left : auto;
margin-right : auto;
padding : 0;
border : 5px solid #666;
line-height : 1.7em;
background : #eee;
color : #666;
}
/*TOP BANNER*/
#topimg {
height : 100px;
padding : 0;
margin : 0;
background : #7e0101 url(blush-img/banner.jpg) no-repeat left top;
color : #666;
}
#topimg h1 {
float : right;
margin : 10px 50px 0 0;
font-size : 1.8em;
letter-spacing: 3px;
background : transparent;
color : #eee;
}
/*TOP NAVIGATION*/
#tabsE {
float : left;
width : 750px;
border-top : 5px solid #666;
border-bottom : 5px solid #666;
margin-bottom : 20px;
font-size : 1.3em;
background : #bc1f26;
color : #666;
}
#tabsE ul {
margin : 0;
padding : 0 5px 0 0;
list-style : none;
}
#tabsE li {
display : inline;
margin : 0;
padding : 0;
}
#tabsE a {
float : left;
background : url(blush-img/tableftE.gif) no-repeat left top;
margin : 0;
padding : 0 0 0 0;
text-decoration : none;
}
#tabsE a span {
float : left;
display : block;
background : url(blush-img/tabrightE.gif) no-repeat right top;
padding : 5px 15px 4px 6px;
color : #fff;
}
#tabsE a span {
float : none;
}
#tabsE a:hover span {
color : #fff;
background : inherit;
}
#tabsE a:hover {
background-position : 0% -42px;
}
#tabsE a:hover span {
background-position : 100% -42px;
}
/*MAIN CONTENT*/
#content {
margin : 0 0 5px 165px;
padding : 0;
border-left : 1px solid #ddd;
background : #eee;
color : #666;
}
#content a:link, #content a:visited {
text-decoration : none;
background : inherit;
color : #bc1f26;
}
#content a:hover {
text-decoration : underline;
background : inherit;
color : #996681;
}
/*SIDEBAR*/
#sidebar {
clear : both;
float : left;
margin : 0;
width : 150px;
background : #eee;
color : #333;
}
/*SIDE MENU*/
.sidemenu ul {
list-style-type : none;
text-align : left;
background : inherit;
color : #1f85bd;
}
.sidemenu ul li {
display : block;
margin-bottom: 10px;
color : #BC1F26;
background : inherit;
}
.sidemenu ul li a {
background : transparent url(blush-img/list-off-red.gif) no-repeat left center;
padding-left : 15px;
font : normal 1em "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration : none;
color :#666;
}
.sidemenu ul li a:hover {
background : transparent url(blush-img/list-on.gif) no-repeat left center;
color : #BC1F26;
}
.sidemenu ul li a#current {
background : transparent url(blush-img/list-active.gif) no-repeat left center;
color : #333;
}
/*FOOTER*/
#footer {
clear : both;
height : 45px;
padding : 5px;
margin-top : 5px;
border-top : 5px solid #666;
background : #bc1f26;
color : #eee;
}
#footer a:link, #footer a:visited {
text-decoration : none;
background : inherit;
color : #333;
}
#footer a:hover {
border-bottom : 1px dashed #f7cdbf;
background : inherit;
color : #f7cdbf;
}
/*TYPOGRAPHY*/
p {
margin : 20px;
}
h2 {
margin-left : 15px;
text-transform : uppercase;
font-size : 120%;
letter-spacing: 3px;
background : inherit;
color : #000;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
</style>
</head>
<body>
<div id="container">
<div id="topimg">
<h1>Your Company Name</h1>
</div>
<div id="tabsE">
<ul>
<li><a href="http://www.free-css.com/" title="Link 1"><span>Home</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 2"><span>Link 2</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 3"><span>Link 3</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 4"><span>Link 4</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 5"><span>Link 5</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 6"><span>Link 6</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 7"><span>Link 7</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 8"><span>Link 8</span></a></li>
</ul>
</div>
<div id="sidebar">
<h2>Main Menu</h2>
<div class="sidemenu">
<ul>
<li><a href="http://www.free-css.com/">homepage</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<h2>Sub Menu</h2>
<div class="sidemenu">
<ul>
<li><a href="http://www.free-css.com/">Snapp Happy</a></li>
<li><a href="http://www.free-css.com/">TODC</a></li>
<li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
<li><a href="http://www.free-css.com/">James Koster</a> </li>
<li><a href="http://www.free-css.com/">OSWD</a></li>
<li><a href="http://www.free-css.com/">CSS play</a></li>
<li><a href="http://www.free-css.com/">Listamatic</a></li>
</ul>
</div>
<h2>Sub Menu</h2>
<div class="sidemenu">
<ul>
<li><a href="http://www.free-css.com/">OWD</a></li>
<li><a href="http://www.free-css.com/">W3schools</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>Welcome to <span style="font-weight:bold; color:#810101;"> BLUSH </span> Template</h2>
<blockquote>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. The side menu is from <a href="http://www.free-css.com/">Listamatic</a>. <br />
For more FREE templates visit my website.</blockquote>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. </p>
<div style="float: right; width: 120px; height: 5em; padding:10px; margin:10px; font-family: Georgia, arial, helvetica; font-size: 16px; line-height: 1.5em; color: #336633;"> <span style="color:#333;"><img src="blush-img/quote.gif" alt="quote"/>.... this is a </span><span style="color:#996681;">magazine style </span><span style="color: #999;">pullquote .... <img src="blush-img/unquote.gif" alt="unquote"/></span> </div>
<p>This is a <a href="http://www.free-css.com/">link</a> to nowhere. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. </p>
</div>
<div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>
This work is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></div>
</div>
</body>
</html>
Related examples in the same category