cleanblue : Blue « Templates « HTML / CSS

HTML / CSS » Templates » Blue 
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.gifrepeat-y top center;

      /*WRAP*/ 
#container 
width : 750px;
margin : 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.jpgno-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.gifno-repeat left center;
display : block;
padding : 4px 0 0 30px;
border-left : solid #8fb8cc;

#leftnavmenu li a:hover 
background : #8fb8cc url(cleanblue-images/right.gifno-repeat left center;
color : #fff;
border-left : 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 : dashed #8a795d;
font-size : 80%;

.post .date 
background : url(cleanblue-images/clock.gifno-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;

.post .comments 
background : url(cleanblue-images/comment.gifno-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;

.post .readmore 
background : url(cleanblue-images/document.gifno-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 282007</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 282007</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
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.