baseline : Design « Templates « HTML / CSS

baseline
    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--

Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title      : Baseline
Version    : 1.0
Released   : 20070730
Description: A three-column, fixed-width template ideal for 1024x768 resolution.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Baseline by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
  margin: 0;
  padding: 0;
}

body, th, td {
  background: #FFFFFF url(baseline-images/img01.gif) repeat-x;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #666666;
}

h1, h2 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: normal;
}

h1 {
  font-size: 197%;
}

h2 {
  font-size: 167%;
}

h3 {
  margin-bottom: 1em;
  text-transform: uppercase;
  font-size: 100%;
  color: #000000;
}

p, ul, ol {
  margin-bottom: 1.5em;
  line-height: 1.6em;
}

p {
}

ol {
}

ul {
  list-style: none;
}

ul li {
  padding-left: 10px;
  background: url(baseline-images/img16.gif) no-repeat 0px 10px;
}

a:link {
  color: #3490F8;
}

a:hover, a:active {
  text-decoration: none;
  color: #F89934;
}

a:visited {
  color: #666666;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 20px 10px 0;
}

img.right {
  float: right;
  margin: 0 0 10px 20px;
}

.byline {
  color: #CCCCCC;
}

.col-one {
  float: left;
}

.col-two {
  float: right;
}

.two-cols {
}

.two-cols .col-one, .two-cols .col-two {
  width: 250px;
}

/* Boxes */

.box-orange {
  background: url(baseline-images/img09.gif) repeat-x;
}

.box-orange .section {
  background: url(baseline-images/img11.gif) no-repeat right top;
  font-size: 100%;
  color: #FFFFFF;
}

.box-orange .section b {
  display: block;
  height: 23px;
  padding: 7px 0 0 10px;
  background: url(baseline-images/img10.gif) no-repeat;
}

.box-orange .content {
  padding: 20px;
}

.box-blue {
  background: url(baseline-images/img13.gif) repeat-x;
}

.box-blue .section {
  background: url(baseline-images/img15.gif) no-repeat right top;
  font-size: 100%;
  color: #FFFFFF;
}

.box-blue .section b {
  display: block;
  height: 23px;
  padding: 7px 0 0 10px;
  background: url(baseline-images/img14.gif) no-repeat;
}

.box-blue .content {
  padding: 20px;
}

.box-pink {
  background: url(baseline-images/img17.gif) repeat-x;
}

.box-pink .section {
  background: url(baseline-images/img19.gif) no-repeat right top;
  font-size: 100%;
  color: #FFFFFF;
}

.box-pink .section b {
  display: block;
  height: 23px;
  padding: 7px 0 0 10px;
  background: url(baseline-images/img18.gif) no-repeat;
}

.box-pink .content {
  padding: 20px;
}

/* Header */

#header {
  width: 960px;
  height: 92px;
  margin: 0 auto;
}

/* Logo */

#logo {
  float: left;
}

#logo h1, #logo h2 {
  float: left;
}

#logo h1 {
  padding-top: 40px;
  text-transform: lowercase;
  font-size: 34px;
  font-weight: normal;
}

#logo h2 {
  padding: 63px 0 0 3px;
  text-transform: uppercase;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
}

#logo a {
  text-decoration: none;
  color: #000000;
}

/* Search */

#search {
  float: right;
  width: 300px;
  padding-top: 55px;
}

#search form {
}

#search fieldset {
  border: none;
}

#searchinput, #searchsubmit {
  font: bold 100% Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
}

#searchinput {
  padding: 2px 5px;
  width: 198px;
  background: #FFFFFF url(baseline-images/img02.gif) repeat-x;
  border: 1px solid #FFFFFF;
}

#searchsubmit {
  padding: 0 2px;
  background: #F4A652 url(baseline-images/img03.gif) repeat-x;
  border: 1px solid #000000;
  text-transform: lowercase;
}

/* Menu */

#menu {
  width: 960px;
  height: 30px;
  margin: 0 auto;
}

#menu ul {
  margin: 0;
  list-style: none;
  line-height: normal;
}

#menu li {
  display: block;
  float: left;
  margin-right: 1px;
  padding: 0;
  background: #FFFFFF;
}

#menu a {
  display: block;
  float: left;
  background: url(baseline-images/img07.gif) no-repeat;
  text-decoration: none;
  color: #666666;
}

#menu a:hover {
  color: #1777B1;
}

#menu b {
  display: block;
  float: left;
  height: 23px;
  padding: 7px 20px 0 20px;
  background: url(baseline-images/img08.gif) no-repeat right top;
  cursor: hand;  
}

#menu li.active {
  background: #CFCECE url(baseline-images/img04.gif) repeat-x;
}

#menu li.active a {
  background: url(baseline-images/img06.gif) no-repeat right top;
  color: #C90404;
}

#menu li.active b {
  background: url(baseline-images/img05.gif) no-repeat;
}

/* Page */

#page {
  width: 960px;
  margin: 0 auto;
  padding: 30px 0 0 0;
}

/* Content */

#content {
  float: left;
  width: 520px;
}

/* Feature */

#feature {
  margin-bottom: 20px;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 420px;
}

#sidebar .col-one {
  width: 200px;
}

#sidebar .col-two {
  width: 200px;
}

/* Footer */

#footer {
  height: 100px;
  padding: 20px;
  background: #DDDDDD;
  border-top: 1px solid #999999;
}

#footer p {
  margin: 0;
  text-align: center;
  font-size: 85%;
}

</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Baseline</a></h1>
    <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
  </div>
  <div id="search">
    <form method="get" action="">
      <fieldset>
      <input id="searchinput" type="text" name="searchinput" value="" />
      <input id="searchsubmit" type="submit" value="Search" />
      </fieldset>
    </form>
  </div>
</div>
<div id="menu">
  <ul>
    <li class="active"><a href="http://www.free-css.com/"><b>Home</b></a></li>
    <li><a href="http://www.free-css.com/"><b>Blogs</b></a></li>
    <li><a href="http://www.free-css.com/"><b>Forums</b></a></li>
    <li><a href="http://www.free-css.com/"><b>About</b></a></li>
    <li><a href="http://www.free-css.com/"><b>Contact</b></a></li>
  </ul>
</div>
<div id="page">
  <div id="content">
    <div id="feature" class="box-orange">
      <h2 class="section"><b>Feature Article</b></h2>
      <div class="content"> <img src="baseline-images/img12.jpg" alt="" width="160" height="160" class="right" />
        <h1>Welcome to Our Website!</h1>
        <p class="byline"><small>By John Doe</small></p>
        <p>Baseline is a free template from Free CSS Templates released under a Creative Commons Attribution 2.5 License. The photo is from PDPhoto.org. You"re free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
        <p><a href="http://www.free-css.com/"><strong>Get more free CSS templates&hellip;</strong></a></p>
      </div>
    </div>
    <div class="two-cols">
      <div class="box-blue col-one">
        <h2 class="section"><b>Lorem Ipsum Dolor</b></h2>
        <div class="content">
          <p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Dolor dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh lorem ipsum dolor sit amet.</p>
          <p> Augue praesent a lacus at urna congue rutrum. Dolor dictum integer nisl risus. <a href="http://www.free-css.com/">Read more&hellip;</a></p>
        </div>
      </div>
      <div class="box-pink col-two">
        <h2 class="section"><b>Pellentesque Quis</b></h2>
        <div class="content">
          <ul class="list">
            <li><a href="http://www.free-css.com/">Ut semper vestibulum est</a></li>
            <li><a href="http://www.free-css.com/">Vestibulum luctus venenatis</a></li>
            <li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
            <li><a href="http://www.free-css.com/">Vestibulum luctus venenatis</a></li>
            <li><a href="http://www.free-css.com/">Etiam malesuada rutrum enim</a></li>
            <li><a href="http://www.free-css.com/">Aenean elementum facilisis</a></li>
            <li><a href="http://www.free-css.com/">Ut tincidunt elit vitae augue</a></li>
            <li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
            <li><a href="http://www.free-css.com/">Etiam malesuada rutrum enim</a></li>
            <li><a href="http://www.free-css.com/">Aenean elementum facilisis</a></li>
            <li><a href="http://www.free-css.com/">Sed quis odio sagittis leo</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="sidebar" class="two-cols">
    <div class="col-one">
      <div class="box-blue">
        <h2 class="section"><b>Categories</b></h2>
        <div class="content">
          <ul>
            <li>
              <h3><a href="http://www.free-css.com/">Pede vel arcu</a></h3>
              <ul>
                <li><a href="http://www.free-css.com/">Aliquet pretium</a></li>
                <li><a href="http://www.free-css.com/">Pellentesque qui</a></li>
                <li><a href="http://www.free-css.com/">Integer sit amet</a></li>
                <li><a href="http://www.free-css.com/">Elit non gravida</a></li>
                <li><a href="http://www.free-css.com/">Blandit </a><a href="http://www.free-css.com/">lorem ipsum</a></li>
                <li><a href="http://www.free-css.com/">Dolor sit amet</a></li>
              </ul>
            </li>
            <li>
              <h3><a href="http://www.free-css.com/">Adipiscing elit</a></h3>
              <ul>
                <li><a href="http://www.free-css.com/">Nec erat sit amet</a></li>
                <li><a href="http://www.free-css.com/">Pellentesque congue</a></li>
                <li><a href="http://www.free-css.com/">Cras vitae metus</a></li>
                <li><a href="http://www.free-css.com/">Risus pellentesque</a></li>
                <li><a href="http://www.free-css.com/">Maecenas vitae orci</a></li>
                <li><a href="http://www.free-css.com/">Vitae tellus feugiat</a></li>
                <li><a href="http://www.free-css.com/">Etiam ac tortor eu</a></li>
              </ul>
            </li>
            <li>
              <h3><a href="http://www.free-css.com/">Metus euismod</a></h3>
              <ul>
                <li><a href="http://www.free-css.com/">Duis non ante in</a></li>
                <li><a href="http://www.free-css.com/">Commodo euismod</a></li>
                <li><a href="http://www.free-css.com/">Nec erat sit amet</a></li>
                <li><a href="http://www.free-css.com/">Pellentesque congue</a></li>
                <li><a href="http://www.free-css.com/">Risus pellentesque</a></li>
                <li><a href="http://www.free-css.com/">Maecenas vitae orci</a></li>
                <li><a href="http://www.free-css.com/">Vitae tellus eleifend</a></li>
                <li><a href="http://www.free-css.com/">Etiam ac tortor eu</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-two">
      <div class="box-pink">
        <h2 class="section"><b>Sponsors</b></h2>
        <div class="content"><a href="http://www.free-css.com/"><img src="baseline-images/img20.jpg" alt="" width="160" height="600" /></a></div>
      </div>
    </div>
  </div>
  <div style="clear: both;">&nbsp;</div>
</div>
<div id="footer">
  <p id="legal">Copyright &copy; 2007 Simpletex. All Rights Reserved | Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
  <p id="links"><a href="http://www.free-css.com/">Privacy Policy</a> | <a href="http://www.free-css.com/">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
</div>
</body>
</html>
Related examples in the same category

1.	wcsst-10
2.	wcsst-11
3.	wcsst-12
4.	wcsst-15
5.	wcsst-16
6.	wcsst-17
7.	wcsst-18
8.	wcsst-19
9.	wcsst-2
10.	wcsst-20
11.	wcsst-21
12.	wcsst-22
13.	wcsst-23
14.	wcsst-24
15.	wcsst-25
16.	wcsst-26
17.	wcsst-3
18.	wcsst-4
19.	wcsst-5
20.	wcsst-6
21.	beez-design
22.	metamorph_camomile
23.	metamorph_champagne
24.	metamorph_clover
25.	metamorph_dao
26.	metamorph_dna
27.	metamorph_lilac
28.	metamorph_lilium
29.	metamorph_lime
30.	metamorph_limemint_lt
31.	metamorph_lionpride
32.	metamorph_swallowtail-indexl
33.	metamorph_synchronized_lt
34.	metamorph_temple
35.	metamorph_vectorart
36.	metamorph_wow
37.	wcsst-7
38.	wcsst-9
39.	bouquet
40.	beautifulday
41.	bedazzled
42.	Beehives
43.	beez
44.	begeodan
45.	cleo-studio
46.	cloverleaf
47.	CMS Style
48.	dragonfly
49.	nautica
50.	Nautica022
51.	Nautica02Liquid
52.	Nautica03
53.	Nautica04
54.	nautica05
55.	nautica05dark
56.	nautica08
57.	nauticax
58.	soothing