pastelflowers
<!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>PASTEL FLOWERS</title>
<style type='text/css'>
html, body {
margin : 0;
padding : 0;
}
body {
font : 73% Arial, Helvetica, "Trebuchet MS", Arial, Tahoma, sans-serif;
background : #D5DBE1;
color : #555;
}
/*WRAP*/
#wrap {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
}
/*BANNER*/
#masthead {
height:200px;
padding: 0;
margin-bottom: 0;
background: #B5B5B5 url(pastelflowers-images/masthead.jpg) top center no-repeat;
}
/*MAIN CONTAINER*/
#container {
width: 770px;
border: 0px solid #aaa;
margin-left: auto;
margin-right: auto;
padding: 0;
line-height: 1.8em;
}
/*TOP NAVIGATION*/
#menu {
height: 50px;
padding: 0;
margin-bottom: 0;
background-color: #D5DBE1;
}
#menu{position:relative;display:block;height:21px;font-size:1em;
font-weight:bold;background:transparent url(pastelflowers-images/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;}
#menu ul{margin:0;padding:0;list-style-type:none;width:auto;}
#menu ul li{display:block;float:left;margin: 0 1px 0 0;}
#menu ul li a{display:block;float:left;color:#333;text-decoration:none;
padding:4px 20px 0 20px;height:18px;}
#menu ul li a:hover,#menu ul li a.current{color:#000;
background:transparent url(pastelflowers-images/bgON.gif) repeat-x top left;}
/*MAIN CONTENT*/
#content {
padding: 1em;
margin: 0 320px 0 0;
background: #D5DBE1;
}
/*SIDEBAR*/
#sidebar {
float: right;
width: 280px;
margin: 15px 0 0 0;
padding: 0 1em 0 1em;
background:#EBEBEB;
}
/*SIDE NAV*/
#navcontainer {
width : 280px;
margin : 0 0 20px 0;
}
#navcontainer ul {
margin-left : 0;
padding-left : 0;
list-style-type : none;
}
#navcontainer a {text-decoration : none;
display : block;
padding : 3px;
width : 280px;
border-bottom : 1px solid #eee;
background : #D5DBE1;
color : #666;
}
#navcontainer a:link, #navlist a:visited {
color : #666;
background : #D5DBE1;
}
#navcontainer a:hover {text-decoration : none;
background : #C9D2DF;
color : #fff;
}
/*FOOTER*/
#footer {
clear: both;
height: 100px;
padding: 0;
margin-top: 20px;
text-align: center;
color: #333;
background: #B5B5B5 url(pastelflowers-images/footer.jpg) top center no-repeat;
}
/*TYPOGRAPHY*/
h1 {
margin: 0;
padding: 20px 0 20px 5px;
font-size: 160%;
letter-spacing: 3px;
color: #333;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
/*IMAGES*/
.right {
float: right;
border: 0px solid #656C4A;
margin: 5px 0 10px 0;
padding: 10px;
}
/*LINKS*/
a:link, a:visited {
color : #DD618A;
background : inherit;
text-decoration : underline;
}
a:hover {
color : #666;
background : inherit;
text-decoration : none;
}
a img {
border: 0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="wrap">
<div id="masthead">
<h1>Your Company Name</h1>
</div>
<div id="container">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Our Work</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div id="sidebar">
<h1>Side Content</h1>
<div id="navcontainer">
<ul>
<li><a href="http://www.free-css.com/">SNAPP HAPPY</a></li>
<li><a href="http://www.free-css.com/">OPEN DESIGNS</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/"> CSS PLAY</a></li>
<li><a href="http://www.free-css.com/">LISTAMATIC</a></li>
<li><a href="http://www.free-css.com/"> LAYOUTGALA</a></li>
<li><a href="http://www.free-css.com/"> BLUEROBOT</a></li>
</ul>
</div>
<p><img class="right" src="pastelflowers-images/img.jpg" alt="" /> Mauris ultricies neque nec augue. Aenean vehicula. Ut dictum. Vivamus placerat diam nec velit. Suspendisse ornare. Ut viverra. Mauris sagittis nisl sed ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus placerat metus eu urna. Etiam dictum. Aliquam eu dui eu ante euismod tristique. Donec posuere augue varius mi. Nunc erat ligula, ultrices eu, ultrices sed, sodales ut, magna. Mauris ultricies neque nec augue. </p>
</div>
<div id="content">
<h1>Welcome to <span style="color:#b29b35;">Pastel Flowers</span> Template</h1>
<blockquote> This template has been tested in Mozilla Firefox and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. It will work in browser widths of 800x600, 1024x768 & 1280x1064. The images used in this template are courtesy of <a href="http://www.sxc.hu/" title="free images">stock xchng</a>. The top navigation menu is from <a href="http://www.13styles.com/" title="free CSS menus">13 Styles</a> and has been amended to suit this template.<br />
For more FREE CSS templates visit <a href="http://www.mitchinson.net" title="Snapp Happy">my website</a>.</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse in odio et nibh volutpat eleifend. Donec rutrum, risus sed auctor malesuada, augue felis placerat neque, vel vestibulum odio erat eget felis. Phasellus id mauris eu urna sagittis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris elementum elit et ipsum. Cras ornare magna eu felis. Morbi convallis. Nunc fermentum, odio sed ornare ultricies, urna odio egestas sem, vel scelerisque nisi neque vitae lectus. Proin dolor. Vestibulum condimentum urna dignissim arcu. Nullam interdum. Proin lacinia, magna ut scelerisque facilisis, augue sem tempor purus, consequat suscipit tellus ligula et justo. Nam magna. Donec magna sapien, aliquam non, egestas eu, hendrerit nec, quam. Donec commodo auctor lectus. Suspendisse rhoncus. Proin tincidunt euismod nisi. Cras nibh ante, ultrices non, placerat quis, placerat id, est. Suspendisse sed quam volutpat lacus faucibus venenatis.</p>
<p>Mauris ultricies neque nec augue. Aenean vehicula. Ut dictum. Vivamus placerat diam nec velit. Suspendisse ornare. Ut viverra. Mauris sagittis nisl sed ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus placerat metus eu urna. Etiam dictum. Aliquam eu dui eu ante euismod tristique. Donec posuere augue varius mi. Nunc erat ligula, ultrices eu, ultrices sed, sodales ut, magna.</p>
</div>
</div>
</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>
</body>
</html>
Related examples in the same category