fresh : Clear « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Clear

fresh

    

<!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>*FRESH*</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 73% "Trebuchet MS", arial, verdana, tahoma, sans-serif;
line-height : 1.7em;
color : #333;
background : #2e2e2e;
}
#container {
width : 750px;
margin-left : auto;
margin-right : auto;
padding : 5px;
color : #666;
background : #F2FAFD;
}
      /*BANNER*/
#banner {
height : 100px;
padding : 0 3px 0 0;
margin : 0;
color : #fff;
background : #0798da url(fresh-img/header.jpg) no-repeat;
}
#banner h1 {
margin : 0;
padding : 40px 0 0 90px;
border : none;
font-size : 2em;
letter-spacing: 5px;
text-align : left;
}
      /*TOP NAVIGATION*/
#navlist {
padding : 3px 0;
margin : 0;
border : none;
text-align : left;
letter-spacing: 2px;
color : #666;
background : #6FBF20;
}
#navlist li {
list-style : none;
margin : 0;
display : inline;
}
#navlist li a {
text-decoration : none;
padding : 3px 1.2em;
margin : 0;
border :none;
color : #333;
background : #cbeea8;
}
#navlist li a:link {
color : #333;
background : #b9e588;
}
#navlist li a:visited {
color : #333;
background : #b9e588;
}
#navlist li a:hover {
border : 0 solid #d2dcc9;
color : #fff;
background : #75c22a;
}
#navlist li a#current {
text-decoration : none;
color : #fff;
background : #75c22a;
border : none;
}
      /*3 COLUMNS*/
.intro,.intro2,.intro3 {
height : 250px;
margin : 3px 0 5px 0;
padding : 5px;
color : #555;
}
.intro {
float : left;
width : 240px;
border-bottom : 15px solid #6fbf20;
border-top : 15px solid #6fbf20;
background : #98d15f;
}
.intro2 {
float : right;
width : 238px;
border-bottom : 15px solid #a3d671;
border-top : 15px solid #a3d671;
background : #C7E6A8;
}
.intro3 {
float : left;
width : 240px;
border-bottom : 15px solid #8ccc4e;
border-top : 15px solid #8ccc4e;
background : #B4DE8B;
}
.separator {
float : left;
background : url(fresh-img/sep.png) no-repeat;
height : 225px;
width : 1px;
}
      /*RIGHT CONTENT*/
#content {
padding : 5px;
margin-left : 255px;
margin-bottom : 0;
border-top : 15px solid #1CA3E3;
color : #666;
background : #F2FAFD;
}
      /*LEFT SIDEBAR*/
#sidebar {
float : left;
width : 240px;
margin : 0 10px 0 0;
padding : 5px;
border-top : 15px solid #1CA3E3;
color : #666;
background : #F2FAFD;
}
#content p, #sidebar p {
padding : 5px 15px 5px 15px;
}
#content h1, #sidebar h1 {
margin : 0;
font : 1.5em "Trebuchet MS", verdana, tahoma, sans-serif;
padding : 0 0 0 20px;
color : #333;
background : transparent url(fresh-img/stop.png) left center no-repeat;
}
      /*FOOTER*/
#footer {
clear : both;
padding : 3px;
margin : 0 0 0 0;
font-size : 0.9em;
border-top : 5px solid #75c22a;
color : #333;
background : #0798da;
}
#footer a:link, #footer a:visited {
background : inherit;
color : #fff;
border-bottom : none;
}
#footer a:hover {
border-bottom : none;
background : inherit;
color : #333;
}
      /*TYPOGRAPHY*/
h2 {
padding : 0;
margin : 0 5px 0 5px;
letter-spacing: 3px;
font : 160% verdana, arial, "Trebuchet MS", tahoma, sans-serif;
color : #333;
background : inherit;
}
p strong {
font-style : italic;
color : #069;
}
      /*LINKS*/
a {
text-decoration :underline;
color : #069;
background : inherit;
}
a:hover {
text-decoration : none;
color : #333;
background : inherit;
}
a img {
border : 0;
}
      /*IMAGES*/
.img {
float : left;
padding : 4px;
margin : 4px;
border : 1px solid #556b2f;
}
.imgleft {
float : left;
padding-left : 15px;
}

</style>


</head>
<body>
<div id="container">
  <div id="banner">
    <h1>Your Company Name</h1>
  </div>
  <div id="navcontainer">
    <ul id="navlist">
      <li id="active"><a id="current" href="http://www.free-css.com/">Homepage</a></li>
      <li><a href="http://www.free-css.com/">Link One</a></li>
      <li><a href="http://www.free-css.com/">Link Two</a></li>
      <li><a href="http://www.free-css.com/">Link Three</a></li>
      <li><a href="http://www.free-css.com/">Link Four</a></li>
      <li><a href="http://www.free-css.com/">Link Five</a></li>
      <li><a href="http://www.free-css.com/">Link Six</a></li>
    </ul>
  </div>
  <div class="intro">
    <h2>Welcome to <span style="font-weight:bold; color:#069;">Fresh</span> Template</h2>
    <p><img class="imgleft" src="fresh-img/orb.png" alt="icon" title="icon" /> <strong>This template has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. For more templates visit <a href="http://www.mitchinson.net" title="my website">my website</a>.</strong> </p>
    <p>&raquo; <a href="http://www.free-css.com/">Read more</a></p>
  </div>
  <div class="separator"></div>
  <div class="intro2">
    <h2>Resources</h2>
    <p><img class="imgleft" src="fresh-img/orb.png" alt="icon" title="icon" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus. Phasellus sem lacus, tristique et, convallis non, mollis id ...</p>
    <p>&raquo; <a href="http://www.free-css.com/">Read more</a> </p>
  </div>
  <div class="intro3">
    <h2>About Us</h2>
    <p><img class="imgleft" src="fresh-img/orb.png" alt="icon" title="icon" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus. Phasellus sem lacus, tristique et, convallis non, mollis id ...</p>
    <p>&raquo; <a href="http://www.free-css.com/">Read more</a> </p>
  </div>
  <div style="clear:both;"></div>
  <div id="sidebar">
    <h1>News</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lacinia. Etiam iaculis felis id nisi. Cras eu sem. Aliquam erat volutpat. Vestibulum vehicula, lorem at fringilla porttitor, ligula turpis lacinia nibh, et vestibulum est nibh ut elit. Ut gravida. Etiam eleifend. Maecenas aliquam, mauris eu suscipit faucibus, lorem lacus faucibus dolor, eget faucibus velit magna eu lectus. </p>
    <h1>Links </h1>
    <ul>
      <li><a href="http://www.free-css.com/">Snapp Happy</a></li>
      <li><a href="http://www.free-css.com/">TODC</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/">OSWD</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>
    </ul>
  </div>
  <div id="content">
    <h1>This is a header - h1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lacinia. Etiam iaculis felis id nisi. Cras eu sem. Aliquam erat volutpat. Vestibulum vehicula, lorem at fringilla porttitor, ligula turpis lacinia nibh, et vestibulum est nibh ut elit. Ut gravida. Etiam eleifend. Maecenas aliquam, mauris eu suscipit faucibus, lorem lacus faucibus dolor, eget faucibus velit magna eu lectus.</p>
    <h1>This is a header - h1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lacinia. Etiam iaculis felis id nisi. Cras eu sem. Aliquam erat volutpat. Vestibulum vehicula, lorem at fringilla porttitor, ligula turpis lacinia nibh, et vestibulum est nibh ut elit. Ut gravida. Etiam eleifend. Maecenas aliquam, mauris eu suscipit faucibus, lorem lacus faucibus dolor, eget faucibus velit magna eu lectus.</p>
    <h1>This is a header - h1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lacinia. Etiam iaculis felis id nisi. Cras eu sem. Aliquam erat volutpat. Vestibulum vehicula, lorem at fringilla porttitor, ligula turpis lacinia nibh, et vestibulum est nibh ut elit. Ut gravida. Etiam eleifend. Maecenas aliquam, mauris eu suscipit faucibus, lorem lacus faucibus dolor, eget faucibus velit magna eu lectus.</p>
  </div>
  <div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">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><br/>
    This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>








Related examples in the same category

1.clean&green
2.clean-and-professional
3.clean-web-2.0
4.cleandesign
5.cleangrad
6.cleaninterface
7.cleanlayout
8.cleantype
9.Clean_and_Brite
10.clearandcrisp
11.clearbreeze
12.clearfocus
13.clearfootball
14.clearminimalist
15.clearpixels
16.clearsky
17.fresh-vege
18.FreshiFresh
19.freshmedia-01
20.freshness
21.freshscent
22.Elegant_Style
23.elegance
24.smooth
25.smoothandsleek
26.refresh