simplex : Simple « Templates « HTML / CSS

HTML / CSS » Templates » Simple 
simplex
  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Simplex</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type='text/css'>
body
{
  margin: 0;
  margin: auto;
  background: #f4f4f4 url(simplex-images/bg.giftop center repeat-y;
}
#header
{
  vertical-align: top;
  padding-bottom: 11px;
  padding-left: 18px;
  font-family: Georgia, Lucida, Arial, sans-serif;
  font-size: 11px;
  font-weight: lighter;
  color: #00008B;
  border-bottom: 1px solid #efefef;
}
.title
{
  font-size: 24px;
  font-style: italic;
  font-weight: bold;
  color: #90200A;
}
.darktitle
{
  font-size: 24px;
  font-style: italic;
  font-weight: bold;
  color: #000000;
}
#main
{
  width: 780px;
  height: auto;
  border-left: 1px solid #efefef;
  border-right: 1px solid #efefef;
  margin: auto auto;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: normal;
  color: #A52A2A;
}
h1, h2
{
    font-size: 12px;
  font-family:  Verdana, Arial, sans-serif;
  color: #191970;
  font-weight: bold;
  padding-left: 4px;
}
h3, h4
{
    font-size: 11px;
  font-family: Verdana, Arial, sans-serif;
  color:  #2F4F4F;
  font-weight: bold;
  padding-left: 8px;
}
#menu
{
  width: 150px;
  color: #00008B;
  font-family: Verdana, Arial, sans-serif;
}
#menu a:link, #menu a:visited
{
  width: 150px;
  margin: 1px 0 1px 0;
  padding: 4px 3px 4px 8px;
  background-color: transparent;
  color: #003366;
  text-decoration: none;
  font-family: Verdana, Arial, sans-serif;
  font-weight: normal;
  display: block;
}
#menu a:hover
{
  color: #A52A2A;
  text-decoration: none;
}
#topmenu
{
    text-align: right;
  padding-top: 1em;
  padding-right: 1em;
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
}
#topmenu a:link, #topmenu a:visited
{
  color: #ffffff;
    text-decoration: none;
    background-color: #000000
  border: 1px solid #666666;
  padding-top: .3em;
  padding-bottom: .3em;
  padding-left: .8em;
  padding-right: .8em;
}
#topmenu a:hover
{
  color: #ffffff;
  background-color: #90200A; 
  border: 1px solid #90200A;
    text-decoration: none;
  padding-top: .3em;
  padding-bottom: .3em;
  padding-left: .8em;
  padding-right: .8em;
}
#lefty
{
  margin: 8px;
  width: 150px;
  height: auto;
  color: #00008B;
  font-family: Verdana, Arial, sans-serif;
}
#lefty p
{
  width: 94%;
  padding: 12px;
  font-family: Verdana, Arial, sans-serif;
  background-color: #f9f9f9;
  color: #607080;
}
#block
{
  padding: 12px;
  font-family: Verdana, Arial, sans-serif;
  background-color: #f9f9f9;
  color: #607080;
}
#breadcrumb 
{
        text-align: right;
  color: #999999;
  padding-bottom: 11px;
}
#breadcrumb a:link, #breadcrumb a:visited
{
  color: #999999;
  text-decoration: none;
}
#breadcrumb a:hover
{
  color: #aaaaaa;
  text-decoration: none;
}
a:link, a:visited
{
  color: #003366;
  border-bottom: 1px solid #efefef;
  font-family: Verdana, Arial, sans-serif;
  text-decoration: none;
}
a:hover
{
  color: #A52A2A;
  text-decoration: none;
}
#content
{
  float: right;
  width: 570px;
  text-align: left;
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 11px;
  padding-right: 16px;
  border-left: 1px solid #efefef;
  font-family: Verdana, Arial, sans-serif;
  line-height: 145%;
  color: #607080;
}
#content h3, h4
{
  font-family: Verdana, Arial, sans-serif;
  color:  #2F4F4F;
  font-weight: bold;
        padding-left: 0px;
}
#footer
{
        text-align: center;
  padding: 11px;
  font-family: Verdana, Arial, sans-serif;
  font-weight: lighter;
  color: #cccccc;
}
hr
{
  border:0;
  border-bottom: 1px solid #efefef;
  height: 1px;
}
li
{
  list-style-type: none;
  line-height: 160%;
}

</style>


</head>
<body>
<div id="main">
  <div id="topmenu"> <a href="http://www.free-css.com/">Home</a><a href="http://www.free-css.com/">products</a><a href="http://www.free-css.com/">services</a><a href="http://www.free-css.com/">support</a><a href="http://www.free-css.com/">about us</a> </div>
  <div id="header"> <span class="title">sim<span class="darktitle">plex</span></span><br/>
  </div>
  <div id="content">
    <div id="breadcrumb"> <a href="http://www.free-css.com/">Home</a> &gt; <a href="http://www.free-css.com/">products</a> &gt; <a href="http://www.free-css.com/">one</a> </div>
    <div id="block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu est ut mi ornare placerat. Suspendisse felis odio, elementum non, blandit vel, auctor eget, nunc. Fusce convallis dignissim odio. Phasellus commodo egestas felis. Praesent eu sem at mi tempus egestas. Donec mollis. Morbi in lectus id magna dictum eleifend. </div>
    <h3>Heading area</h3>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu est ut mi ornare placerat. Suspendisse felis odio, elementum non, blandit vel, auctor eget, nunc. Fusce convallis dignissim odio. Phasellus commodo egestas felis. Praesent eu sem at mi tempus egestas. Donec mollis. Morbi in lectus id magna dictum eleifend. Morbi vel diam quis sapien sollicitudin lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In consequat facilisis turpis. Proin erat dui, dictum nec, tincidunt nec, pharetra nec, tellus. Curabitur facilisis, nulla a tincidunt gravida, leo pede porttitor odio, ac adipiscing felis leo sit amet justo. Nunc egestas sodales sem. Duis ac mauris eu enim scelerisque mattis.
    Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
    <h3>Heading area</h3>
    Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi.
    Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
    <h3>Heading areal</h3>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu est ut mi ornare placerat. Suspendisse felis odio, elementum non, blandit vel, auctor eget, nunc. Fusce convallis dignissim odio. Phasellus commodo egestas felis. Praesent eu sem at mi tempus egestas. Donec mollis. Morbi in lectus id magna dictum eleifend. Morbi vel diam quis sapien sollicitudin lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In consequat facilisis turpis. Proin erat dui, dictum nec, tincidunt nec, pharetra nec, tellus. Curabitur facilisis, nulla a tincidunt gravida, leo pede porttitor odio, ac adipiscing felis leo sit amet justo. Nunc egestas sodales sem. Duis ac mauris eu enim scelerisque mattis.
    Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
    <h3>Heading area</h3>
    Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi.
    Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
    <h3>Heading areal</h3>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu est ut mi ornare placerat. Suspendisse felis odio, elementum non, blandit vel, auctor eget, nunc. Fusce convallis dignissim odio. Phasellus commodo egestas felis. Praesent eu sem at mi tempus egestas. Donec mollis. Morbi in lectus id magna dictum eleifend. Morbi vel diam quis sapien sollicitudin lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In consequat facilisis turpis. Proin erat dui, dictum nec, tincidunt nec, pharetra nec, tellus. Curabitur facilisis, nulla a tincidunt gravida, leo pede porttitor odio, ac adipiscing felis leo sit amet justo. Nunc egestas sodales sem. Duis ac mauris eu enim scelerisque mattis.
    Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibhs, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
    <h3>Heading area</h3>
    Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi.
    Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum nibh, nonummy sit amet, gravida et, ultrices at, wisi. Pellentesque iaculis auctor risus. Nullam mauris. Etiam pede tortor, auctor at, aliquet sit amet, hendrerit.
    <h3>Heading area</h3>
    Vivamus tortor neque, ultricies vel, dignissim nec, porttitor pulvinar, wisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ipsum ni
    <div id="footer"> &copy; 2005 Your Company. All rights reserved. </div>
  </div>
  <div id="lefty">
    <div id="menu"> <a href="http://www.free-css.com/">News Archive</a> <a href="http://www.free-css.com/">Press Release</a> <a href="http://www.free-css.com/">Disclaimer</a> <a href="http://www.free-css.com/">Privacy Policy</a> </div>
    <p> A representative business story or maybe some testimonials could go inside this block. </p>
  </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.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.simpletex
23.simpleton
24.simpletwocolumn
25.simplified
26.simply_plain_v2
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.