cleanblue : Blue « Templates « HTML / CSS

cleanblue

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CLEAN BLUE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html, body { 
margin : 0;
padding : 0;
} 
body { 
font : 73% "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
background : #f2f2f2 url(cleanblue-images/bg.gif) repeat-y top center;
} 
      /*WRAP*/ 
#container { 
width : 750px;
margin : 0 auto;
border : 10px solid #fff;
line-height : 2em;
background : #f2f2f2;
color : #666;
} 
      /*TOP BANNER*/ 
#top { 
padding : 0;
height : 100px;
background : #8fb8cc url(cleanblue-images/head.jpg) no-repeat;
color : #484500;
} 
#top h1 { 
padding : 5px 0 0 25px;
margin : 0;
font-size : 140%;
letter-spacing : 5px;
}
      /*TOP NAVIGATION*/ 
#navcontainer { 
border-bottom : 10px solid #fff;
} 
#navcontainer ul { 
text-align : center;
padding-bottom : 5px;
padding-top : 5px;
padding-left : 0;
margin-top : 0;
margin-bottom : 0;
margin-left : 0;
background : #036;
color : white;
width : 100%;
font-family : Arial, Helvetica, sans-serif;
line-height : 18px;
} 
#navcontainer ul li { 
display : inline;
padding-left : 0;
padding-right : 0;
padding-bottom : 5px;
padding-top : 5px;
} 
#navcontainer ul li a { 
padding-left : 10px;
padding-right : 10px;
padding-bottom : 5px;
padding-top : 5px;
color : white;
text-decoration : none;
border-right : 1px solid #fff;
} 
#navcontainer ul li a:hover { 
background : #369;
color : white;
} 
#navcontainer #active { 
border-left : 1px solid #fff;
}  
      /*LEFT SIDEBAR*/ 
#leftnav { 
float : left;
width : 200px;
margin : 0;
padding : 1em;
} 
#leftnav p { 
margin : 0 0 1em 0;
} 
#leftnavmenu { 
list-style : none;
float : left;
width : 200px;
margin : 30px 0 30px 0;
padding : 0;
font-size : 0.9em;
} 
#leftnavmenu ul { 
list-style : none;
width : 150px;
margin : 0 0 20px 0;
padding : 0;
font-size : 1.1em;
} 
#leftnavmenu li { 
margin-bottom : 2px;
} 
#leftnavmenu li a { 
font-weight : bold;
height : 20px;
text-decoration : none;
color : #505050;
background : #eaeaea url(cleanblue-images/up.gif) no-repeat left center;
display : block;
padding : 4px 0 0 30px;
border-left : 0 solid #8fb8cc;
} 
#leftnavmenu li a:hover { 
background : #8fb8cc url(cleanblue-images/right.gif) no-repeat left center;
color : #fff;
border-left : 0 solid #003366;
} 
      /*MAIN CONTENT*/ 
#content { 
margin-left : 240px;
border-left : 10px solid #fff;
padding : 1em;
} 
#content p { 
padding : 0 2em 0 2em;
} 
      /*FOOTER*/ 
#footer { 
clear : both;
margin : 0;
padding : 0;
font-size : 0.9em;
border-top : 10px solid #fff;
color : #fff;
background : #8fb8cc;
}
* > html #footer img { 
margin : 0;
} 
#footer p { 
padding : 0 0 0 5px;
} 
      /*TYPOGRAPHY*/ 
h2 { 
margin : 1em 0 0.5em 0;
font-size : 130%;
letter-spacing : 5px;
}
blockquote {
padding : 5px;
font-weight : bold;
font-style : italic;
color : #b29b35;
} 
 
.quote { 
border-top : 1px solid #8fb8cc;
padding : 10px;
color : #036;
} 
      /*SEARH BAR*/
form { 
float : right;
margin-bottom : 20px;
margin-right : 15px;
} 
input.search { 
width : 100px;
border : none;
background : url(cleanblue-images/input.gif);
padding : 4px;
} 
input.login { 
width : 75px;
border : none;
background : url(cleanblue-images/logininput.gif);
padding : 4px;
} 
       /*LINKS*/
a:link, a:visited { 
color : #2480ad;
background : transparent;
text-decoration : none;
} 
a:hover { 
color : #036;
background : #8fb8cc;
text-decoration : none;
} 
a img { 
border : none;
} 
      /*IMAGESS*/
.imgleft { 
float : left;
padding : 5px;
margin-right : 10px;
}
      /*CLASS*/
.post { 
background-color : #eee;
padding : 3px;
margin : 20px 10px 0 5px;
border : 0 dashed #8a795d;
font-size : 80%;
} 
.post .date { 
background : url(cleanblue-images/clock.gif) no-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;
} 
.post .comments { 
background : url(cleanblue-images/comment.gif) no-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;
} 
.post .readmore { 
background : url(cleanblue-images/document.gif) no-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;
} 

</style>


</head>
<body>
<div id="container">
  <div id="top">
    <h1>Company Name</h1>
    <div class="search">
      <form method="post" action="http://www.free-css.com/">
        <p>
          <input type="text" name="search" value="demo only" class="search" />
          <input type="submit" value="Search" class="searchSubmit" />
        </p>
      </form>
    </div>
  </div>
  <div id="navcontainer">
    <ul id="navlist">
      <li id="active"><a href="http://www.free-css.com/" id="current">Item one</a></li>
      <li><a href="http://www.free-css.com/">Item two</a></li>
      <li><a href="http://www.free-css.com/">Item three</a></li>
      <li><a href="http://www.free-css.com/">Item four</a></li>
      <li><a href="http://www.free-css.com/">Item five</a></li>
    </ul>
  </div>
  <div id="leftnav">
    <h2>More Links</h2>
    <ul id="leftnavmenu">
      <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>
    <h2>Archives</h2>
    <ul>
      <li><a href="http://www.free-css.com/">January</a></li>
      <li><a href="http://www.free-css.com/">February</a></li>
      <li><a href="http://www.free-css.com/">March</a></li>
      <li><a href="http://www.free-css.com/">April</a></li>
      <li><a href="http://www.free-css.com/">May</a></li>
    </ul>
    <p class="quote">Happiness is a journey, not a destination.</p>
  </div>
  <div id="content">
    <h2>Welcome to <span style="font-weight:bold; color:#b29b35;">Clean Blue</span> Template</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy quam, nec lobortis tellus purus eget turpis. Vestibulum placerat sagittis lorem. Praesent interdum ultricies massa. Morbi dolor.</p>
    <p class="post"> <a href="http://www.free-css.com/" class="readmore">Read more</a> <a href="http://www.free-css.com/" class="comments">Comments (3)</a> <span class="date">March 28, 2007</span> </p>
    <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 &amp; 1280x1064. The images used in this template are courtesy of <a href="http://codehaus.org/~bwalding/eclipse-icons/" title="Opensource Software Community">The Codehaus</a>.<br />
      For more FREE CSS templates visit <a href="http://www.mitchinson.net" title="Snapp Happy">my website</a>.</blockquote>
    <h2>Previous Article</h2>
    <p><img class="imgleft" src="cleanblue-images/1.png" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy quam, nec lobortis tellus purus eget turpis. Vestibulum placerat sagittis lorem. Praesent interdum ultricies massa. Morbi dolor. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. </p>
    <p class="post"> <a href="http://www.free-css.com/" class="readmore">Read more</a> <a href="http://www.free-css.com/" class="comments">Comments (3)</a> <span class="date">March 28, 2007</span> </p>
  </div>
  <div id="footer">
    <p><a href="http://www.free-css.com/">homepage</a> | <a href="http://www.free-css.com/">contact</a> | &copy; 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></p>
  </div>
</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.	blueworld
51.	bluey
52.	blue_circles
53.	blue_sky
54.	blue_space
55.	blue_trees
56.	bublue-studio
57.	bussinesblue
58.	fain-blue
59.	fairyblue
60.	basicblue
61.	CleanandBlue
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