blueworld : Blue « Templates « HTML / CSS

HTML / CSS » Templates » Blue 
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.jpgno-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.gifrepeat-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.gifrepeat-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.gifno-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.gifno-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.gifleft center no-repeat;
}
#col3 ul li a:hover {
background: #f2f2f2 url(blueworld-images/icon.gifleft 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*/
{
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 &amp; 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>&nbsp;</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> | &copy; 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
1.metamorph_blue
2.metamorph_bluefeather
3.metamorph_blueflower
4.metamorph_blueglowing
5.metamorph_bluemadness
6.metamorph_bluemess_lt2
7.metamorph_bluerock
8.metamorph_bluething
9.metamorph_bluewave
10.metamorph_bubbleblue_lt
11.metamorph_bubblesonblue
12.metamorph_lightblue
13.metamorph_shiningblue
14.metamorph_simpleblue
15.metamorph_uberblue
16.metamorph_wavesinblue
17.blue-hosting
18.blue-neutral
19.blue-pigment1
20.blue-sky
21.blue-white
22.blue-wood
23.Blue 1
24.blue99
25.blueblogtemplate
26.bluebottle
27.BlueBridge
28.bluebrush
29.bluebusiness
30.bluecarbon
31.bluecorporation
32.bluediamond
33.blueflex
34.BlueFlower
35.BlueFresh
36.bluegray
37.blueled
38.blueminimal
39.blueminimalsidebar
40.blueprism
41.Blueshine
42.blueshuffle
43.BlueSpace
44.BlueSquareShadow
45.bluesurge
46.bluethickline
47.bluetoolkit
48.bluewave
49.blueweb
50.bluey
51.blue_circles
52.blue_sky
53.blue_space
54.blue_trees
55.bublue-studio
56.bussinesblue
57.fain-blue
58.fairyblue
59.basicblue
60.CleanandBlue
61.cleanblue
62.freecss_blue
63.flyingblue
64.easy-blue
65.FunkyCoolBlue
66.genericblue
67.gallery-blue
68.MonsterBlue
69.Simple_Blue
70.wide-blue
71.a_bit_modern_bigBlue
72.mistyblue
73.portal_blue
74.SimplyBlue
75.sleekcssblue
76.Sexy_Blue
77.WonderfulBlue
78.sweetbuzzblue
79.light-blue
80.groovyblue
81.iblue2b
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.