webdesigninfo
<!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>Webdesigninfo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */
* html, body {
margin:0;
padding:0;
}
body {
background:#3162a5 url(webdesigninfo-img/bg.gif) repeat-x top;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color:#fff;
line-height: 1.8em;
}
h2,h3,h4,h5,h6{
font:16px Arial, Helvetica, sans-serif;
font-weight:bold;
}
p{
font:11px verdana;
color:#fff;
line-height:16px;
}
.read-more a{
font:11px verdana;
text-align:right;
text-decoration:none;
color:#fff;
float:right;
margin-right:25px;
}
.read-more a:hover{
text-decoration:underline;
}
a{
text-decoration:none;
color:#fff;
}
a:hover{
text-decoration:underline;
}
#wrapper {
width:100%;
margin:0 auto;
padding:0;
}
#header{
width:100%;
height:121px;
}
#logo{
width:333px;
height:66px;
float:left;
margin-top:25px;
margin-left:15px;
clear:left;
}
#logo img{
border:0;
}
#nav{
float:right;
list-style:none;
text-align:left;
margin-top:90px;
}
#nav li{
list-style:none;
text-decoration:none;
display:inline;
text-align:right;
margin-left:5px;
margin-right:5px;
padding:5px;
}
#nav li a{
color:#666;
font:bold 12px Verdana;
text-decoration:none;
}
#nav li a:hover{
color:#3465ac;
}
#container{
width:100%;
margin-top:15px;
}
#main{
width:95%;
height:auto;
margin:8px;
padding:8px;
}
#first-col{
margin-left:10px;
float:left;
width:30%;
height:auto;
padding:8px;
}
#second-col{
float:left;
width:30%;
height:auto;
margin-left:10px;
padding:8px;
}
#third-col{
float:left;
width:30%;
height:auto;
margin-left:10px;
padding:8px;
}
#footer{
clear:both;
background:#1f4e87 url(webdesigninfo-img/footer_bg.gif) repeat-x;
height:92px;
width:100%;
}
.copyrights{
font:10px verdana;
color:#fff;
text-align:center;
padding-top:70px;
}
#footer a{
font:10px verdana;
text-decoration:none;
color:#fff;
text-transform:capitalize;
}
#footer a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"> <a href="http://www.free-css.com/"><img src="webdesigninfo-img/logo.gif" width="333" height="66" alt="" /></a> </div>
<ul id="nav">
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">ABOUT</a></li>
<li><a href="http://www.free-css.com/">WORKS</a></li>
<li><a href="http://www.free-css.com/">BLOG</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
<div id="container">
<div id="main">
<h2>WELCOME TO WEBDESIGNINFO</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit tortor, fringilla sed, facilisis sed, sagittis eget, diam. Aenean vitae leo at nunc venenatis bibendum. Donec aliquet molestie ligula. Duis dignissim consectetuer odio. Aliquam sodales consectetuer purus. Cras ut libero vitae risus accumsan mollis. Nullam lectus neque, mattis imperdiet, sodales ut, mollis quis, pede. Ut blandit mi non nibh. Etiam volutpat risus id turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque scelerisque leo sit amet massa. Proin congue velit et augue. </p>
<p>Sed nulla nulla, venenatis sit amet, nonummy ut, semper et, turpis. Cras ac nulla congue elit adipiscing fringilla. Curabitur vel elit. Fusce aliquet. Donec diam. Mauris lacinia imperdiet pede. Vivamus varius neque at risus. Vivamus eu diam fermentum enim facilisis sodales. Maecenas placerat eros in lectus. Praesent sit amet mauris at magna commodo feugiat. Morbi vitae mi auctor metusvarius fermentum. Morbi sagittis mollis orci. </p>
<p>Donec tristique nunc sit amet erat facilisis laoreet. Nam pretium ultrices sem. Ut commodo lacus sed nulla. Praesent et erat et dolor luctus auctor. Quisque eu risus quis ligula vehicula lacinia. Cras sapien felis, dapibus a, molestie eu, fringilla ut, ipsum.Donec quis eros a nunc consectetuer mollis. Ut consectetuer. Nullam et dui. Cras vulputate. Proin aliquam dolor et mauris. Aliquam arcu diam, tempus at, rutrum id, adipiscing ac, nulla. Fusce consequat magna sit amet nunc. Ut semper eleifend nibh. Etiam tempor. Sed risus eros, feugiat tempor, pharetra vitae, mollis sit amet, nulla. </p>
<div class="read-more"> <a href="http://www.free-css.com/">read more....</a> </div>
</div>
<div id="first-col">
<h2>COMPANY OVERVIEW</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit tortor, fringilla sed, facilisis sed, sagittis eget, diam. Aenean vitae leo at nunc venenatis bibendum. Donec aliquet molestie ligula. Duis dignissim consectetuer odio. Aliquam sodales consectetuer purus. </p>
<p>Nullam lectus neque, mattis imperdiet, sodales ut, mollis quis, pede. Ut blandit mi non nibh. Etiam volutpat risus id turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque scelerisque leo sit amet massa. Proin congue velit et augue. </p>
<div class="read-more"> <a href="http://www.free-css.com/">read more....</a> </div>
</div>
<div id="second-col">
<h2>SERVICES</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit tortor, fringilla sed, facilisis sed, sagittis eget, diam. Aenean vitae leo at nunc venenatis bibendum. Donec aliquet molestie ligula. Duis dignissim consectetuer odio. Aliquam sodales consectetuer purus. </p>
<p>Nullam lectus neque, mattis imperdiet, sodales ut, mollis quis, pede. Ut blandit mi non nibh. Etiam volutpat risus id turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque scelerisque leo sit amet massa. Proin congue velit et augue. </p>
<div class="read-more"> <a href="http://www.free-css.com/">read more....</a> </div>
</div>
<div id="third-col">
<h2>SOLUTIONS</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla elit tortor, fringilla sed, facilisis sed, sagittis eget, diam. Aenean vitae leo at nunc venenatis bibendum. Donec aliquet molestie ligula. Duis dignissim consectetuer odio. Aliquam sodales consectetuer purus. </p>
<p>Nullam lectus neque, mattis imperdiet, sodales ut, mollis quis, pede. Ut blandit mi non nibh. Etiam volutpat risus id turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque scelerisque leo sit amet massa. Proin congue velit et augue. </p>
<div class="read-more"> <a href="http://www.free-css.com/">read more....</a> </div>
</div>
</div>
<div id="footer">
<div class="copyrights"> Template Powered By <a href="http://webdesigninfo.wordpress.com">webdesigninfo</a> </div>
</div>
</div>
</body>
</html>
Related examples in the same category