simplestyle_1 : Design 7 « Templates « HTML / CSS

HTML / CSS » Templates » Design 7 
simplestyle_1
  

<!DOCTYPE HTML>
<html>

<head>
  <title>simplestyle_1 - another page</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<style type='text/css'>
html
height: 100%;}

*
margin: 0;
  padding: 0;}

body
font: normal .80em 'trebuchet ms', arial, sans-serif;
  background: #F4F4EE;
  color: #5D5D5D;}

p
padding: 0 0 20px 0;
  line-height: 1.7em;}

img
border: 0;}

h1, h2, h3, h4, h5, h6 
font: normal 175'century gothic', arial, sans-serif;
  color: #43423F;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;}

h2
font: normal 175'century gothic', arial, sans-serif;
  color: #B60000;}

h3
font: normal 165'century gothic', arial, sans-serif;}

h4, h5, h6
margin: 0;
  padding: 0 0 5px 0;
  font: normal 120% arial, sans-serif;
  color: #B60000;}

h5, h6
font: italic 95% arial, sans-serif;
  color: #888;}

h6
color: #362C20;}

a, a:hover
outline: none;
  text-decoration: underline;
  color: #A4AA04;}

a:hover
text-decoration: none;
  color: #5D5D5D;}

.left
float: left;
  width: auto;
  margin-right: 10px;}

.right
float: right; 
  width: auto;
  margin-left: 10px;}

.center
display: block;
  text-align: center;
  margin: 20px auto;}

blockquote
margin: 20px 0
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF;}

ul
margin: 2px 0 22px 17px;}

ul li
list-style-type: circle;
  margin: 0 0 6px 0
  padding: 0 0 4px 5px;}

ol
margin: 8px 0 22px 20px;}

ol li
margin: 0 0 11px 0;}

#main, #logo, #menubar, #content_header, #site_content, #content_footer, #footer
margin-left: auto; 
  margin-right: auto;}

#main
padding-bottom: 20px;}

#header
background: #3A332D;
  height: 170px;
  margin-bottom: 30px;}

#logo
width: 878px;
  position: relative;
  height: 134px;
  background: #3A332D url(logo.pngno-repeat;}

#logo #logo_text 
position: absolute; 
  top: 10px;
  left: 0;}

#logo h1, #logo h2
font: normal 300'century gothic', arial, sans-serif;
  border-bottom: 0;
  text-transform: none;
  margin: 0 0 0 9px;}

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
padding: 22px 0 0 0;
  color: #FFF;
  letter-spacing: 0.1em;
  text-decoration: none;}

#logo_text h1 a .logo_colour
color: #ECEF01;}

#logo_text h2
font-size: 120%;
  padding: 4px 0 0 0;
  color: #A8AA94;}

#menubar
height: 44px;
  width: 940px;
  margin: 1px auto auto;

ul#menu
float: right;}

ul#menu li
float: left;
  padding: 0 0 0 6px;
  list-style: none;
  margin: 2px 2px 0 0;
  background: #635B53 url(tab.pngno-repeat 0 0;}

ul#menu li a
font: normal 100'trebuchet ms', sans-serif;
  display: block; 
  float: left; 
  height: 20px;
  padding: 6px 28px 5px 22px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #635B53 url(tab.pngno-repeat 1000;

ul#menu li.tab_selected a
height: 20px;
  padding: 6px 28px 5px 22px;}

ul#menu li.selected
margin: 2px 2px 0 0;
  background: #635B53 url(tab_selected.pngno-repeat 0 0;}

ul#menu li.selected a, ul#menu li.selected a:hover
background: #635B53 url(tab_selected.pngno-repeat 1000;
  color: #111;}

ul#menu li a:hover
color: #ECEF01;}

#content_header, #content_footer
width: 940px;
  background: url(content_header.pngno-repeat;
  height: 14px;}

#content_footer
background: url(content_footer.pngno-repeat;}

#site_content
width: 878px;
  overflow: hidden;
  margin: auto auto;
  padding: 0 20px 20px 40px;
  background: #FFF;
  border-left: 1px solid #ECECE0;
  border-right: 1px solid #ECECE0;

.sidebar
float: right;
  width: 190px;
  padding: 0 15px 20px 15px;}

.sidebar ul
width: 178px; 
  padding: 4px 0 0 0
  margin: 4px 0 30px 0;}

.sidebar li
list-style: none; 
  padding: 0 0 7px 0}

.sidebar li a, .sidebar li a:hover
padding: 0 0 0 25px;
  display: block;
  background: transparent url(link.pngno-repeat left center;

.sidebar li a.selected
color: #444;
  text-decoration: none;

#content
text-align: left;
  width: 613px;
  padding: 0;}

#content ul
margin: 2px 0 22px 0px;}

#content ul li
list-style-type: none;
  background: url(bullet.pngno-repeat;
  margin: 0 0 6px 0
  padding: 0 0 4px 25px;
  line-height: 1.5em;}

#footer
width: 916px;
  font: normal 90% arial, sans-serif;
  height: 28px;
  margin-top: 20px;
  padding: 20px 0 5px 0;
  text-align: center; 
  background: transparent;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.1em;}

#footer a, #footer a:hover
color: #888;
  text-decoration: none;}

#footer a:hover
color: #333;}

.search
color: #5D5D5D; 
  border: 1px solid #BBB; 
  width: 134px; 
  padding: 4px; 
  font: 100% arial, sans-serif;}

.form_settings
margin: 15px 0 0 0;}

.form_settings p
padding: 0 0 4px 0;}

.form_settings span
float: left; 
  width: 200px; 
  text-align: left;}
  
.form_settings input, .form_settings textarea
padding: 2px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}
  
.form_settings .submit
font: 100% arial; 
  border: 1px solid; 
  width: 99px; 
  margin: 0 0 0 206px; 
  height: 26px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #3B3B3B; 
  color: #FFF;}

.form_settings textarea, .form_settings select
font: 100% arial; 
  width: 299px;}

.form_settings select
width: 304px;}

.form_settings .checkbox
margin: 4px 0
  padding: 0
  width: 14px;
  border: 0;
  background: none;}

.separator
width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;}
  
table
margin: 10px 0 30px 0;}

table tr th, table tr td
background: #3B3B3B;
  color: #FFF;
  padding: 7px 4px;
  text-align: left;}
  
table tr td
background: #CCCCCC;
  color: #47433F;
  border-top: 1px solid #FFF;}


</style>


</head>

<body>
  <div id="main">
    <div id="header">
      <div id="logo">
        <div id="logo_text">
          <!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="index.html">simple<span class="logo_colour">style_1</span></a></h1>
          <h2>Simple. Contemporary. Website Template.</h2>
        </div>
      </div>
      <div id="menubar">
        <ul id="menu">
          <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
          <li><a href="index.html">Home</a></li>
          <li><a href="examples.html">Examples</a></li>
          <li><a href="page.html">A Page</a></li>
          <li class="selected"><a href="another_page.html">Another Page</a></li>
          <li><a href="contact.html">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <div id="content_header"></div>
    <div id="site_content">
      <div class="sidebar">
        <!-- insert your sidebar items here -->
        <h3>Latest News</h3>
        <h4>New Website Launched</h4>
        <h5>January 1st, 2010</h5>
        <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
        <p></p>
        <h4>New Website Launched</h4>
        <h5>January 1st, 2010</h5>
        <p>2010 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
        <h3>Useful Links</h3>
        <ul>
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
          <li><a href="#">link 4</a></li>
        </ul>
        <h3>Search</h3>
        <form method="post" action="#" id="search_form">
          <p>
            <input class="search" type="text" name="search_field" value="Enter keywords....." />
            <input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="simplestyle_1-style/search.png" alt="Search" title="Search" />
          </p>
        </form>
      </div>
      <div id="content">
        <!-- insert the page content here -->
        <h1>Another Page</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
      </div>
    </div>
    <div id="content_footer"></div>
    <div id="footer">
      Copyright &copy; simplestyle_1 | <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.html5webtemplates.co.uk">design from HTML5webtemplates.co.uk</a>
    </div>
  </div>
</body>
</html>

   
    
  
Related examples in the same category
1.SimpleSimple
2.simplestyle_2
3.simplestyle_3
4.simplestyle_4
5.simplestyle_5
6.simplestyle_6
7.pomodoro
8.portcentral
9.portfolio-extended
10.portfolio
11.postscriptum
12.powderpuff
13.power
14.precision
15.predilection
16.premiumseries
17.prepaid
18.presented
19.pressurized
20.prideandprejudice
21.primitiveelement
22.printing
23.pristine
24.private-lawyer-co
25.product-landing-page
26.production
27.ProductPackage
28.programme
29.progress
30.projection
31.proofing
32.Prosperity
33.province
34.purensimple
35.purgatory_shuffle
36.puzzled
37.quadrangle
38.quartz-istorage
39.quatrain
40.racetrackplaya
41.radiance
42.rainonleaves
43.ramblingsoul-2
44.ramblingsoul-9
45.ramblingsoul3
46.ramblingsoul4
47.ramblingsoul5
48.ramblingsoul7
49.ramblingsoul_2
50.ramblingsoul_3
51.random
52.rational
53.realize
54.realone
55.rebel-magazine
56.reckoning
57.recreations
58.reference
59.regeneracy
60.rehabilitation
61.reinvent
62.replenish
63.republic
64.resizeme
65.resplendissant
66.revolt-01
67.ridinghood
68.rockband
69.rogue
70.Rothko
71.route66
72.rust
73.safe-as-houses
74.sahara
75.sampling
76.Sapphire
77.schemermag
78.scotchmark
79.scribbled
80.secretlab
81.seduction
82.selcouth
83.sensa
84.settings
85.shallowgrunge
86.shalom-typo
87.shape
88.she
89.showcase
90.sifiso
91.silenceandharmony
92.SILK
93.Simpatico
94.sindromk
95.singapore
96.sinorcaish
97.six-oh-six
98.sixpence
99.sixties_style
100.skipopia
101.skitemplate
102.sky
103.sliced
104.slight_amnesia
105.socialnet
106.softenedcells
107.solemnity
108.solitude
109.soloss
110.solutions
111.somewhere-peaceful
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous
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.