blueworld
<!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>BLUE WORLD</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
font: 73% helvetica, arial, "Trebuchet MS", sans-serif;
line-height : 2em;
color: #444;
background: #fff;
}
/*TOP BANNER*/
#header {
height: 125px;
margin: 0;
padding-bottom: 1em;
background: #fff url(blueworld-images/banner.jpg) no-repeat;
color: #000;
}
#header h1 {
padding: 80px 0 0 140px;
font-size: 170%;
color: #A0B842;
background:transparent;
}
/*TOP NAVIGATION*/
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(blueworld-images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(blueworld-images/dolphin_bg-over.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(blueworld-images/dolphin_left-on.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(blueworld-images/dolphin_right-on.gif) no-repeat top right;height:33px;}
/*3 COLUMNS*/
#gutter {
float: left;
width: 4%;
height: 1px;
}
#col1 {
float: left;
width: 50%;
margin-bottom: 1em;
padding-right: 2%;
}
#col2 {
float: left;
width: 15%;
margin-left: 2%;
margin-bottom: 1em;
padding-right: 2%;
}
#col3 {
float: left;
width: 15%;
margin-left: 4%;
margin-bottom: 2em;
}
/*COLUMN LINKS*/
#col3 ul {
list-style: none;
margin: 20px 0 10px 0;
padding: 0;
}
#col3 ul li {
display: inline;
padding: 0;
margin: 0;
}
#col3 ul li a {
display: block;
text-decoration: none;
margin: 0;
padding: 5px 0 5px 15px;
border-bottom: 1px solid #C0C0C0;
color: #3D8CB8;
background: transparent url(blueworld-images/icon.gif) left center no-repeat;
}
#col3 ul li a:hover {
background: #f2f2f2 url(blueworld-images/icon.gif) left center no-repeat;
color: #666;
}
#col3 p {
padding: 3px 0 0 0;
margin: 0;
line-height: 20px;
}
/*FOOTER*/
#footer {
clear: both;
height: 35px;
font-size : 0.9em;
background: #143D55;
border-top: 5px solid #A0B842;
color: #EDE4DF;
padding: 5px;
}
#footer a {
text-decoration: none;
color: #fff;
background: inherit;
}
#footer a:hover {
text-decoration: underline;
color: #ddd;
background: inherit;
}
/*TYPOGRAPHY*/
h1 {
margin : 0 0 0 0;
padding : 0 0 .3em 0;
text-transform: uppercase;
font-size : 150%;
color: #143D55;
background : transparent;
}
h2 {
margin: 0 0 0 0;
padding: 0.3em 0 .3em 0;
text-transform: uppercase;
letter-spacing : 5px;
font-size: 140%;
color: #A0B742;
background : inherit;
}
h3 {
width : 95%;
margin: 0 0 30px 0;
padding : 1em;
font-size: 95%;
border: 1px solid #3D8CB8;
color: #666;
background : #F3F3F3;
}
h4 {
margin: 0 0 0 0;
padding : 0.3em 0 .3em 0;
font-size: 110%;
font-weight : bold;
letter-spacing : 3px;
text-transform : none;
color: #A0B842;
background : inherit;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
/*LINKS*/
a {
text-decoration: underline;
color: #A0B842;
background: inherit;
}
a:hover {
text-decoration: none;
color: #3786B3;
background: inherit;
}
a img {
border: 0;
}
/*CLASS*/
.capital {
float:left;
color:#143C55;
font-size:100px;
line-height:70px;
padding:2px;
font-family: "Times New Roman", times, Sans-Sherif;
background: #fff;
}
/*IMAGES*/
.imgleft {
float: left;
padding: 5px;
margin-right: 5px;
border: none;
}
</style>
</head>
<body>
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="http://www.free-css.com/"><span>Home</span></a></li>
<li><a href="http://www.free-css.com/" class="current"><span>About Us</span></a></li>
<li><a href="http://www.free-css.com/"><span>Services</span></a></li>
<li><a href="http://www.free-css.com/"><span>Our Work</span></a></li>
<li><a href="http://www.free-css.com/"><span>Contact Us</span></a></li>
</ul>
</div>
</div>
<div id="header">
<h1><em>Your sitename</em></h1>
</div>
<div id="gutter"> </div>
<div id="col1">
<h1>Welcome to my World</h1>
<h4>A little bit about this website</h4>
<p><span class="capital"> L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Donec magna diam, bibendum non, rhoncus quis, lobortis vitae, nibh. Fusce sit amet erat quis mi lacinia vestibulum. Etiam cursus, magna sed faucibus tristique, lacus tellus tempor orci, ut pretium metus elit et sem. In sit amet dui ut diam rutrum placerat. Fusce ac purus at diam adipiscing feugiat. Maecenas ultricies cursus ante. Vivamus accumsan diam ut libero. Aliquam a nulla id mi sagittis adipiscing. Vivamus sagittis semper lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce auctor. Morbi at nisl. Cras nisi felis, eleifend eget, bibendum eu, malesuada at, erat. Etiam quis est. Maecenas quis dolor quis lacus fermentum condimentum. Cras consequat quam bibendum eros.</p>
<h3>
<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 640x480, 800x600, 1024x768 & 1280x1064.<br />
For more FREE templates visit my website.</blockquote>
</h3>
<p>Suspendisse potenti. Nullam faucibus felis eget tellus. Ut nec ipsum vel massa consectetuer suscipit. Donec turpis massa, commodo et, luctus nec, consequat sit amet, nisi. Maecenas quam lectus, iaculis luctus, tempus eu, dictum ac, diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eleifend tortor vitae nulla. Mauris non dui. Ut eu quam. Cras congue. Nam erat massa, interdum ut, auctor eu, aliquet ac, quam. Quisque dapibus orci vel dui. Donec posuere, metus sit amet varius suscipit, turpis velit aliquam ligula, sit amet sollicitudin augue nibh eget sapien. Donec arcu. Nunc sagittis, purus ac lobortis venenatis, felis sem dictum metus, vitae vulputate pede libero eget ante. Quisque nec mauris nec odio euismod sagittis. Aliquam tempus ipsum lobortis risus. Morbi urna pede, rhoncus sit amet, suscipit nec, malesuada a, ligula. Morbi elit arcu, vulputate et, fermentum at, volutpat eu, eros. Nullam a nulla.</p>
</div>
<div id="col2">
<h1> </h1>
<h3>Curabitur sit amet nunc. Sed pulvinar sapien sed lectus. Proin sapien. Curabitur id diam ac est varius scelerisque. In eget ante sit amet felis commodo varius. Nullam neque mauris, varius at, ornare non, rhoncus eleifend, justo. Nullam imperdiet convallis ligula. Nunc ultrices. Nunc in pede. Nunc interdum molestie velit.</h3>
<h3><em>Top menu courtesy of 13 STYLES.com.</em> Curabitur sit amet nunc. Sed pulvinar sapien sed lectus. Proin sapien. Curabitur sit amet nunc. Sed pulvinar sapien sed lectus. Proin sapien. Cras consequat quam bibendum eros.</h3>
<h3>Curabitur sit amet nunc. Sed pulvinar sapien sed lectus. Proin sapien. Curabitur id diam ac est varius scelerisque. In eget ante sit amet felis commodo varius. Nullam neque mauris, varius at, ornare non, rhoncus eleifend, justo. </h3>
</div>
<div id="col3">
<h2>More Links</h2>
<ul>
<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>
<h2>Daily Read</h2>
<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>
<li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
</ul>
<h2>Open Source</h2>
<ul>
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a href="http://www.free-css.com/">OWD</a></li>
<li><a href="http://www.free-css.com/">STYLESHOUT</a></li>
</ul>
</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> | 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