moderna
<!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>MODERNA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 73% "lucida sans", tahoma, "Trebuchet MS", arial, verdana, sans-serif;
color : #555;
background : #f7f7f7;
}
#container {
width : 99.5%;
margin-left : auto;
margin-right : auto;
padding : 0;
line-height : 1.5em;
}
#banner {
height : 150px;
padding : 0;
background : #f7f7f7 url(moderna-images/image00.jpg) no-repeat;
color : #333;
}
#banner h1 {margin : 0;
padding : 5px;
background : transparent;
color : #fff;
}
#navlist {
padding : 4px 5px 5px 0;
margin : 0 0 20px 0;
text-align : left;
letter-spacing : 3px;
color : #fff;
background : #476042;
}
#navlist li {
list-style : none;
margin : 0;
display : inline;
}
#navlist li a {
padding : 5px 0.75em;
margin : 0;
color : #fff;
background : #476042;
text-decoration : none;
}
#navlist li a:link {
color : #fff;
background : #476042;
}
#navlist li a:visited {
color : #fff;
background : #476042;
}
#navlist li a:hover {
color : #000;
background : #7ABA2E;
}
#navlist li a#current {
color : #fff;
background : #7ABA2E;
}
.menu ul li {
line-height : 1.8em;
margin : 0 10px 0 0;
padding : 0;
list-style-type : square;
color : #476042;
background : inherit;
}
.menu ul li a {
color : #f17c0b;
background : inherit;
}
.menu ul li a:hover {
color : #7ABA2E;
background : inherit;
}
#content {
padding : 0;
margin-left : 170px;
margin-right : 170px;
border-left : 1px dashed #333;
border-right : 1px dashed #333;
color : #555;
background-color : #f7f7f7;
}
#content p {
margin : 20px;
}
#sidebar-a {
float : left;
width : 140px;
margin-left : 5px;
padding : 0 5px 0 5px;
color : #666;
background : #f7f7f7;
}
#sidebar-b {
float : right;
width : 140px;
margin : 0 5px 0 0 ;
padding : 0 5px 15px 5px;
color : #333;
background : #faf8e9;
}
#footer {
clear : both;
padding : 5px;
margin : 0;
background : #476042;
color : #f7f7f7;
}
a {
text-decoration : none;
color : #f17c0b;
background : inherit;
}
a:hover {
text-decoration : underline;
color : #aaa;
background : inherit;
}
a img {
border : 0;
}
.border {
padding : 10px;
margin : 10px;
border : 1px solid #476042;
}
.imgleft {
float : left;
border : 1px solid #90b905;
margin : 5px 10px 10px 15px;
padding : 5px;
}
h1 {
margin : 20px;
padding : 5px;
font-size : 150%;
letter-spacing : 3px;
color : #fff;
background : #476042;
}
h2 {
padding-left : 20px;
font-size : 140%;
text-transform : uppercase;
letter-spacing : 10px;
color : #476042;
background : inherit;
}
h3 {
padding : 5px;
text-transform : uppercase;
font-size : 110%;
color : #fff;
background : #476042;
}
h4 {
padding : 5px;
text-transform : uppercase;
font-size : 110%;
color : #fff;
background : #f17c0b;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
.clear {
clear : both;
width : 100%;
}
.col3,.col3center {
float: left;
width: 30.5%;
}
.col3center {
margin: 0 3%;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<h1>Your <span style="color: #000;">Company</span> Name</h1>
</div>
<ul id="navlist">
<li id="active"><a id="current" 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/">GALLERY</a></li>
<li><a href="http://www.free-css.com/">PRODUCTS</a></li>
<li><a href="http://www.free-css.com/">LINKS</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
<div id="sidebar-a">
<h2>Links</h2>
<div class="menu">
<ul>
<li><a href="http://www.free-css.com/">Snapp Happy</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>
<p><img class="border" src="moderna-images/image02.jpg" alt="box" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. </p>
</div>
<div id="sidebar-b">
<h3>Information</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien.</p>
<h3>Gallery</h3>
<img class="border" src="moderna-images/image02.jpg" alt="box" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. </p>
</div>
<div id="content">
<h2>Welcome to <span style="font-weight:bold; color:#891E18;">Moderna</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 IE6/7. The page validates as XHTML 1.0 Transitional using valid CSS.<br />
For more FREE CSS templates visit my website.</blockquote>
<p><img class="imgleft" src="moderna-images/image02.jpg" alt="box" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque <a href="http://www.free-css.com/">egestas</a>. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. </p>
<p>This is a <a href="http://www.free-css.com/">link</a> to nowhere. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. </p>
<div class="col3">
<h1>Article 1</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">BBC News</a></li>
<li><a href="http://www.free-css.com/">Hartlepool Today</a></li>
<li><a href="http://www.free-css.com/"> SV Horizons</a></li>
</ul>
</div>
</div>
<div class="col3center">
<h1>Article 2</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">OWD</a></li>
<li><a href="http://www.free-css.com/">CSS Drive</a></li>
<li><a href="http://www.free-css.com/">Listamatic</a></li>
</ul>
</div>
</div>
<div class="col3">
<h1>Article 3</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Stu Nicholls</a></li>
<li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
<li><a href="http://www.free-css.com/">Jay Kay</a></li>
</ul>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
<div id="footer"> <a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | 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