simple 1 : Simple « Templates « HTML / CSS

simple 1
  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
@charset "UTF-8";

/*
!!DO NOT DELETE THIS COMMENT!!

"Simple... v1.0" (12th December 2007) (C) Gordon Mackay.
- Website: http://gordonmac.com/
- Contact me: http://gordonmac.com/contact/
- Free stuff: http://gordonmac.com/downloads/
----------------------------------------------------
@Generic page styles
----------------------------------------------------*/

body
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: #333333;
  background: #FFFFFF;
  margin: 0px;
  padding: 20px 0;
  text-align: center;
}

p, ul, li
{
  line-height: 1.6em;
  margin: .6em 0 0 0;
}

/*
@Heading styles
----------------------------------------------------*/

h1, h2, h3, h4
{
  color: #313131;
  font-weight: normal;
  line-height: 1.8em;
  margin: .6em 0 0 0;
}

h2
{
  font-size: 1.4em;
}

h3
{
  font-size: 1.2em;
}

h4
{
  font-size: 1em;
  letter-spacing: .3em;
  text-transform: uppercase;
}

#heading-rss
{
  padding-left: 28px;
  font-size: 1.3em;
  background: transparent url(simple-images/bg_heading-rss.jpg) no-repeat left center;
}

#content-2-2 h2, #content-2-3 h2
{
  text-align: center;
}

/*
@Rounded heading styles
----------------------------------------------------*/

#content-1-left .rounded-heading
{
  font-size: 16px;
  line-height: normal;
  color: #FFFFFF;
  margin-right: 10px;
  background: #555555 url(simple-images/bg_roundedheading11T.jpg) no-repeat right top;
}

#content-1-left .rounded-heading span
{
  padding: 9px 20px 9px 10px;
  display: block;
  background: transparent url(simple-images/bg_roundedheading11B.jpg) no-repeat right bottom;
}

#content-2-1 .rounded-heading
{
  font-size: 16px;
  line-height: normal;
  color: #FFFFFF;
  margin-right: 10px;
  background: #555555 url(simple-images/bg_roundedheading21T.jpg) no-repeat right top;
}

#content-2-1 .rounded-heading span
{
  padding: 9px 20px 9px 10px;
  display: block;
  background: transparent url(simple-images/bg_roundedheading21B.jpg) no-repeat right bottom;
}

#content-1-right .rounded-heading
{
  background: #EEEEEE url(simple-images/bg_roundedheading12T.jpg) no-repeat left top;
  font-size: 16px;
  line-height: normal;
  color: #666666;
}

#content-1-right .rounded-heading span
{
  padding: 9px 10px;
  display: block;
  background: transparent url(simple-images/bg_roundedheading12B.jpg) no-repeat left bottom;
}

/*
@Link styles
----------------------------------------------------*/

a:link, a:visited
{
  color: #272d20;
}

a:hover, a:active
{
  color: #000000;
}

a img
{
  border: none;
}

/*
@Image Navigation styles
----------------------------------------------------*/

img.float-left
{
  float: left;
  margin: 0 6px 6px 0;
}

/*
@Wrapper styles
----------------------------------------------------*/

#wrapper-1
{
  width: 780px;
  margin: 0 auto;
  text-align: left;
}

#wrapper-content-1
{
  margin: 0;
  padding: 0;
  font-size: .65em;
  background-color: #DDD;
  border-top: 1px solid #FFFFFF;
  clear: both;
}

#wrapper-content-2
{
  margin: 0;
  padding: 0;
  background: #FFFFFF url(simple-images/bg_wrapper-content-2.jpg) repeat-y;
}


#content-1-right .content-padder
{
  padding: 0 10px 0 0;
}

#content-1-left .content-padder
{
  padding: 0 0 0 10px;
}

#content-2-1 .content-padder
{
  padding: 0 5px 0 10px;
}

#content-2-3 .content-padder
{
  padding: 0 10px 0 2px;
}

#content-2-2 .content-padder
{
  padding: 0 2px 0 10px;
}

/*
@Main Navigation styles
----------------------------------------------------*/

#hornav
{
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #9b9b9b url(simple-images/bg_hornav.jpg) repeat-x;
  font-size: .75em;
}

#hornav ul
{
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 1px;
}

#hornav ul li
{
  float: left;
  line-height: normal;
  margin: 0;
}

#hornav ul li a
{
  float: left;
  display: block;
  padding: 6px 24px;
  text-decoration: none;
  text-transform: uppercase;
  color: #FFFFFF;
  background: transparent url(simple-images/bg_horNav-link.jpg) top right no-repeat;
}

#hornav ul li a:hover, #hornav ul li a:active
{
  background: #666 url(simple-images/bg_horNav-link.jpg) top right no-repeat;
}

#hornav ul li a#current
{
  background: #9b9b9b url(simple-images/bg_horNav-link.jpg) repeat-x !important;
  color: #333333 !important;
  font-weight: bold;
}

/*
@Verical Navigation styles
----------------------------------------------------*/

.vertnav
{
  margin: .6em 0 0 0;
  padding: 0;
}

.vertnav ul
{
  margin: 0;
  list-style-type: none;
  line-height: normal;
  padding: 0;
  border-top: 1px solid #FFFFFF;
}

.vertnav ul li
{
  line-height: normal;
  margin: 0;
}

.vertnav a
{
  display: block;
  padding: 3px 6px;
  width: 139px;
  margin: 0;
  background-color: #C4C4C4;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
}

.vertnav a:link, .vertnav a:visited
{
  color: #666666;
  text-decoration: none;
}

.vertnav a:hover
{
  background-color: #D1E2EC;
  color: #333333;
}

/*
@Section tops and bottoms styles
----------------------------------------------------*/

#page-top
{
  margin: 0;
  padding: 0;
  height: 6px;
  background: #555555 url(simple-images/bg_page-top.jpg) no-repeat;
}

#content-1-bottom
{
  clear: both;
  margin: 0;
  padding: 0;
  height: 22px;
  font-size: 0;
  background: #DDDDDD url(simple-images/bg_content-1-bottom.jpg) no-repeat;
}

#content-2-bottom
{
  clear: both;
  margin: 0;
  padding: 0;
  height: 22px;
  font-size: 0;
  background: #DDDDDD url(simple-images/bg_content-2-bottom.jpg) no-repeat;
}

#page-bottom
{
  margin: 0;
  padding: 0;
  height: 6px;
  font-size: 0;
  background: #DDDDDD url(simple-images/bg_page-bottom.jpg) no-repeat;
}

/*
@Masthead styles
----------------------------------------------------*/

#branding
{
  margin: 0;
  padding: 0;
  background-color: #555555;
}

#branding h1
{
  color: #FFFFFF;
  font-size: 1.4em;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-weight: normal;
  padding: 40px 20px 40px 98px;
  background: transparent url(simple-images/bg_branding.jpg) no-repeat left center;
  line-height: normal;
  margin: 0;
  border-bottom: 1px solid #999999;
}

/*
@Column styles
----------------------------------------------------*/

#content-1-left
{
  float: left;
  width: 420px;
  margin: 0 15px 0 0;
  padding: 0;
}

#content-1-right
{
  float: left;
  width: 345px;
  margin: 0;
  padding: 0;
}

#content-2-1
{
  float: left;
  width: 420px;
  font-size: .8em;
}

#content-2-2
{
  float: left;
  width: 165px;
  margin: 0 15px;
  font-size: .7em;
}

#content-2-3
{
  float: left;
  width: 165px;
  font-size: .7em;
}

/*
@Footer styles
----------------------------------------------------*/

#footer
{
  margin: 0;
  padding: 0;
  background: #DDDDDD;
}

#footer p
{
  margin: 0;
  padding: 0 10px;
  background: #DDDDDD;
  line-height: normal;
  font-size: .7em;
}

/*
@Thumnail list styles
----------------------------------------------------*/

#thumblist
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

#thumblist li
{
  margin: 4px 0 0 0;
}

#thumblist li img
{
  width: 100px;
  border: 3px double #FFFFFF;
  background-color: #c4c4c4;
  padding: 15px;
}

/*
@Search form styles
----------------------------------------------------*/

#searchcontainer
{
  line-height: normal;
  background: #EEEEEE url(simple-images/bg_roundedheading12T.jpg) no-repeat left top;
  margin: .6em 0 0 0;
}

#searchcontainer div
{
  padding: 8px 10px;
  background: transparent url(simple-images/bg_roundedheading12B.jpg) no-repeat left bottom;
}

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

#searchcontainer form
{
  margin: 0;
  padding: 0 0 0 90px;
  line-height: normal;
  background: transparent url(simple-images/bg_searchform.jpg) no-repeat left center;
}

#searchcontainer form label {
  display: none;
}

#keywords, #btn-search
{
  vertical-align: middle;
}

#keywords
{
  border: 1px solid #FFFFFF;
  background: #DDDDDD;
  width: 120px;
  margin: 0;
  padding: 2px;
  font-size: 11px;
}

/*
@Floated note styles
----------------------------------------------------*/

p.sidenote
{
  width: 200px;
  float: left;
  background-color: #bdd5ef;
  padding: 1em;
  margin: .8em .6em 0 0;
  border: 1px solid #f4f4f4;
}

/*
@RSS list styles
----------------------------------------------------*/

#list-rss
{
  list-style-type: none;
  padding: 0;
}

#list-rss li
{
  padding: 0 0 0 14px;
  background: transparent url(simple-images/icn_download.jpg) no-repeat left center;
  line-height: normal;
  margin: 4px 0 0 0;
}

#list-rss li a
{
  padding: 3px 10px;
  display: block;
  border: 1px solid #FFFFFF;
  text-decoration: none;
  background-color: #d1e2ec;
  text-transform: uppercase;
}

#list-rss li a:hover, #list-rss li a:active
{
  background-color: #EEEEEE;
  color: #000000;
}


</style>


<!--[if lte IE 6]><style type="text/css">#hornav ul li, #hornav ul li a, #wrapper-content-1, #wrapper-content-2, #list-rss li a {height:1%;}</style><![endif]-->
<!--[if lt IE 6]><style type="text/css">.vertnav a { width: 147px; }</style><![endif]-->
</head>
<body>
<div id="wrapper-1">
  <div id="page-top">&nbsp;</div>
  <div id="branding">
    <h1>Simple&hellip;</h1>
  </div>
  <div id="hornav">
    <ul>
      <li><a id="current" href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Link</a></li>
      <li><a href="http://www.free-css.com/">Link</a></li>
      <li><a href="http://www.free-css.com/">Link</a></li>
      <li><a href="http://www.free-css.com/">Link</a></li>
      <li><a href="http://www.free-css.com/">Link</a></li>
    </ul>
  </div>
  <div id="wrapper-content-1">
    <div id="content-1-left">
      <h2 class="rounded-heading"><span>Content 1.1</span></h2>
      <div class="content-padder">
        <p><a href="http://www.free-css.com/"><img src="simple-images/placeholder1.jpg" alt="" /></a></p>
      </div>
    </div>
    <div id="content-1-right">
      <h2 class="rounded-heading"><span>Content 1.2</span></h2>
      <div class="content-padder">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pharetra faucibus ipsum.</p>
        <h3 id="heading-rss">RSS Feeds</h3>
        <ul id="list-rss">
          <li><a href="http://www.free-css.com/">Atom feed</a></li>
          <li><a href="http://www.free-css.com/">RSS feed</a></li>
          <li><a href="http://www.free-css.com/">Full posts</a></li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pharetra faucibus ipsum.</p>
      </div>
      <div id="searchcontainer">
        <div>
          <form method="post" action="http://www.free-css.com/">
            <p>
              <label for="keywords">Enter search term</label>
              <input type="text" size="18" name="keywords" id="keywords" value="" />
              <input type="image" name="submit" src="simple-images/btn_go.jpg" alt="Search" title="Search" id="btn-search" />
            </p>
          </form>
        </div>
      </div>
    </div>
    <div id="content-1-bottom">&nbsp;</div>
  </div>
  <div id="wrapper-content-2">
    <div id="content-2-1">
      <h2 class="rounded-heading"><span>Content 2.1</span></h2>
      <div class="content-padder">
        <p class="sidenote">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pharetra faucibus ipsum. Praesent id turpis et sem hendrerit aliquam. Morbi sit amet nisl.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pharetra faucibus ipsum. Praesent id turpis et sem hendrerit aliquam. Morbi sit amet nisl. Vivamus porta odio sit amet libero. Aliquam est lacus, porttitor ac, posuere in, gravida eget, ligula. Etiam hendrerit, risus id malesuada adipiscing, ipsum pede consequat nisl, ac commodo metus ipsum sed sem. Mauris quis erat. Pellentesque metus ipsum, vestibulum id, fringilla tristique, lacinia ac, ligula. In in libero nec lectus rhoncus congue. Nunc tincidunt mi sit amet massa. Duis varius urna quis lorem. Sed a diam ac enim facilisis accumsan.</p>
        <h3>Japanese&hellip; sure thing!</h3>
        <p lang="ja" xml:lang="ja" dir="ltr">??? ?? ????? ?????, ??? ???? ??????? ??, ?? ??? ???? ????? ??????? ?????? ????????? ?? ???, ??? ?? ?????? ??????, ??? ????? ?????? ?? ????? ?????? ?? ???, ??? ???? ????? ????????? ??, ??? ?????? ?????? ?? ??? ???? ???? ????????? ??, ?????? ??????? ?? ??? ????? ?????? ?? ??? ??? ?? ???? ?????, ??? ?? ???? ???? ?????, ????? ??????? ??? ???</p>
        <h4>Additional info:</h4>
        <p>This template has been tested and has been found to work perfectly in the following browsers:</p>
        <ul>
          <li>Safari</li>
          <li>Camino</li>
          <li>Firefox (Windows &amp; OS X)</li>
          <li>Opera (Windows &amp; OS X)</li>
          <li>Internet Explorer 5.01 - 7</li>
        </ul>
        <p>This page was lovingly crafted using <a target="_blank" href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict</a>, errorless CSS and orginal graphics drawn by Gordon Mackay in Adobe Fireworks CS3 instead of 2<sup>nd</sup> rate, free stock images.</p>
      </div>
    </div>
    <div id="content-2-2">
      <div class="content-padder">
        <h2>Content 2.2</h2>
        <p>Vivamus luctus mauris sed tortor.</p>
        <ul id="thumblist">
          <li><img src="simple-images/placeholder2.jpg" alt="" /></li>
          <li><img src="simple-images/placeholder3.jpg" alt="" /></li>
          <li><img src="simple-images/placeholder4.jpg" alt="" /></li>
          <li><img src="simple-images/placeholder5.jpg" alt="" /></li>
          <li><img src="simple-images/placeholder6.jpg" alt="" /></li>
        </ul>
      </div>
    </div>
    <div id="content-2-3">
      <div class="content-padder">
        <h2>Content 2.3</h2>
        <p>Vivamus luctus mauris sed tortor.</p>
        <div class="vertnav">
          <ul>
            <li><a href="http://www.free-css.com/">Link 1</a></li>
            <li><a href="http://www.free-css.com/">Link 2</a></li>
            <li><a href="http://www.free-css.com/">Link 3</a></li>
            <li><a href="http://www.free-css.com/">Link 4</a></li>
            <li><a href="http://www.free-css.com/">Link 5</a></li>
          </ul>
        </div>
        <p>Vivamus luctus mauris sed tortor. </p>
        <div class="vertnav">
          <ul>
            <li><a href="http://www.free-css.com/">Link 1</a></li>
            <li><a href="http://www.free-css.com/">Link 2</a></li>
            <li><a href="http://www.free-css.com/">Link 3</a></li>
            <li><a href="http://www.free-css.com/">Link 4</a></li>
            <li><a href="http://www.free-css.com/">Link 5</a></li>
          </ul>
        </div>
        <p>Pellentesque dolor sem, vestibulum sed, ultrices sed, placerat ac, tortor. Curabitur mauris. Donec sit amet nibh. Sed quis dui. Suspendisse orci pede, pharetra vel, dignissim sit amet, consequat eu, justo. Phasellus arcu risus, pellentesque at, ultricies elementum, congue et, libero. Donec semper placerat pede. Sed ante. Donec ut felis.</p>
      </div>
    </div>
    <div id="content-2-bottom">&nbsp;</div>
  </div>
  <div id="footer">
    <p>&copy; 2007 YourSite. All Rights Reserved | Design by <a href="http://gordonmac.com/">Gordon Mackay</a></p>
  </div>
  <div id="page-bottom">&nbsp;</div>
</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.	simple3column
9.	simpleandsleak
10.	simpleblog1-0
11.	simplecorp
12.	simplecurve
13.	simpleelegance03
14.	simpleevent
15.	SimpleMin
16.	simplepagedesign
17.	simplepassage
18.	simplepicture
19.	simples
20.	simplescheme-magazine
21.	simpletex
22.	simpleton
23.	simpletwocolumn
24.	simplex
25.	simplified
26.	simply_plain_v2