simpletex : Simple « Templates « HTML / CSS

simpletex
  

<!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      : Simpletex
Version    : 1.0
Released   : 20070725
Description: A two-column, fixed-width template with light color blend.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Simpletex 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
*/

body {
  margin: 0;
  padding: 0;
  background: #FFFFFF url(simpletex-images/img04.gif) repeat-x;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #7F7772;
}

h1, h2, h3 {
  margin-top: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #666666;
}

h1 {
  font-size: 197%;
}

h2 {
  font-size: 136%;
}

h3 {
  font-size: 100%;
  font-weight: bold;
}

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

p {
}

blockquote {
  font-style: italic;
}

ul {
}

ol {
}

a {
  color: #FFBF23;
}

a:hover {
  text-decoration: none;
}

small {
}

hr {
  display: none;
}

img {
  border: 1px solid #B2B2B2;
}

img.left {
  float: left;
  margin: 0 15px 0 0;
}

img.right {
  float: right;
  margin: 0 0 0 15px;
}

/* header */

#header {
  width: 770px;
  height: 100px;
  margin: 0 auto;
}

/* Logo */

#logo {
  float: left;
  width: 240px;
  height: 100px;
  background: #FFBF23 url(simpletex-images/img01.gif) no-repeat left bottom;
}

#logo h1, #logo h2 {
  margin: 0;
  text-transform: lowercase;
  text-align: center;
}

#logo h1 {
  padding-top: 15px;
  font-size: 36px;
}

#logo h2 {
  font-size: 12px;
}

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

/* Search */

#search {
  float: right;
  width: 280px;
  padding-top: 20px;
}

#search form {
  margin: 0;
  padding: 0;
}

#search fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

#search legend {
  display: none;
}

#searchinput, #searchsubmit {
  border: 1px solid #EDEBD5;
  font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #7F7772;
}

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

#searchsubmit {
  background: #FFFFFF url(simpletex-images/img03.gif) repeat-x left bottom;
}

/* Menu */

#menu {
  width: 770px;
  height: 70px;
  margin: -30px auto 0 auto;
}

#menu ul {
  float: right;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu li {
  float: left;
  display: block;
  height: 40px;
}

#menu li:hover {
  background: #F9F8F1;
}

#menu a {
  display: block;
  width: 60px;
  height: 35px;
  padding: 5px 20px 0 20px;
  text-align: center;
  text-decoration: none;
  text-transform: lowercase;
  font-weight: bold;
  color: #7F7772;
}

html>body #menu a {
  width: auto;
}

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

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

/* Page */

#page {
  width: 770px;
  margin: 0 auto 20px auto;
  background: url(simpletex-images/img07.gif) repeat-y 260px 0;
}

/* Content */

#content {
  float: right;
  width: 490px;
}

.title {
  padding-bottom: 5px;
  border-bottom: 1px solid #EDEBD5;
}

.twocols {
}

.twocols .col1 {
  float: left;
  width: 235px;
}

.twocols .col2 {
  float: right;
  width: 235px;
}

.list {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.list li {
  padding-left: 10px;
  background: url(simpletex-images/img10.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
  float: left;
  width: 240px;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar li {
  padding: 20px;
  background: url(simpletex-images/img11.gif) no-repeat;
}

#sidebar li ul {
}

#sidebar li li {
  padding: 5px 0;
  background: url(simpletex-images/img12.gif) repeat-x left bottom;
}

#sidebar h2 {
  border-bottom: 1px solid #EDEBD5;
  font-size: 114%;
  font-weight: bold;
}

#sidebar h3 {
  margin: 0;
}

#sidebar p {
  margin: 0;
  line-height: normal;
}

#sidebar a {
  text-decoration: none;
}

#sidebar a:hover {
  text-decoration: underline;
}

/* Footer */

#footer {
  clear: both;
  height: 100px;
  padding-top: 20px;
  background: #EDEBD5 url(simpletex-images/img08.gif) repeat-x;
}

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

</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Simpletex</a></h1>
    <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
  </div>
  <div id="search">
    <form id="searchform" method="get" action="">
      <fieldset>
      <legend>Search</legend>
      <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/">Home</a></li>
    <li><a href="http://www.free-css.com/">Products</a></li>
    <li><a href="http://www.free-css.com/">Support</a></li>
    <li><a href="http://www.free-css.com/">About</a></li>
    <li><a href="http://www.free-css.com/">Contact</a></li>
  </ul>
</div>
<hr />
<div id="page">
  <div id="content">
    <div>
      <h1 class="title">Welcome to Our Website!</h1>
      <p><img src="simpletex-images/img09.jpg" alt="" width="118" height="118" class="right" /></p>
      <p><strong>Simpletex</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  photo is from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You"re free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. <em>Enjoy :)</em></p>
      <h2>Praesent Scelerisque</h2>
      <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat:</p>
      <blockquote>
        <p>&ldquo;Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.&rdquo;</p>
      </blockquote>
    </div>
    <div class="twocols">
      <div class="col1">
        <h2 class="title">Lorem Ipsum Dolor</h2>
        <p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.</p>
        <p><a href="http://www.free-css.com/">Read more&hellip;</a></p>
      </div>
      <div class="col2">
        <h2 class="title">Pellentesque Quis</h2>
        <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 dui</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 ligula</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/">Sed quis odio sagittis leo vehicula</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="sidebar">
    <ul>
      <li>
        <h2>Recent Updates</h2>
        <ul>
          <li>
            <h3><span>6/25:</span> Semper vestibulum</h3>
            <p><a href="http://www.free-css.com/">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula&hellip;</a></p>
          </li>
          <li>
            <h3><span>6/21:</span> Posuere eleifend odio</h3>
            <p><a href="http://www.free-css.com/">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum&hellip;</a></p>
          </li>
          <li>
            <h3><span>6/17:</span> Vivamus fermentum</h3>
            <p><a href="http://www.free-css.com/">Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh&hellip;</a></p>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sagittis Convallis</h2>
        <ul>
          <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 dui</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 ligula</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/">Sed quis odio sagittis leo vehicula</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div style="clear: both;">&nbsp;</div>
</div>
<hr />
<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.	simple-blue
2.	simple-brown
3.	simple-elegance
4.	simple-jojo
5.	simple-personal
6.	simple-solution
7.	simple-type
8.	simple 1
9.	simple3column
10.	simpleandsleak
11.	simpleblog1-0
12.	simplecorp
13.	simplecurve
14.	simpleelegance03
15.	simpleevent
16.	SimpleMin
17.	simplepagedesign
18.	simplepassage
19.	simplepicture
20.	simples
21.	simplescheme-magazine
22.	simpleton
23.	simpletwocolumn
24.	simplex
25.	simplified
26.	simply_plain_v2