simplestyle_4 : Design 7 « Templates « HTML / CSS

HTML / CSS » Templates » Design 7 
simplestyle_4
  

<!DOCTYPE HTML>
<html>

<head>
  <title>simplestyle_4 - 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: #F5F5EE;
  color: #555;}

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

img
border: 0;}

h1, h2, h3, h4, h5, h6 
color: #362C20;
  letter-spacing: 0em;
  padding: 0 0 5px 0;}

h1, h2, h3
font: normal 170'century gothic', arial;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;
  color: #000;}

h2
font-size: 160%;
  padding: 9px 0 5px 0;
  color: #009FBC;}

h3
font-size: 140%;
  padding: 5px 0 0 0;}

h4, h6
color: #009FBC;
  padding: 0 0 5px 0;
  font: normal 110% arial;
  text-transform: uppercase;}

h5, h6
color: #888;
  font: normal 95% arial;
  letter-spacing: normal;
  padding: 0 0 15px 0;}

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

a:hover
text-decoration: none;}

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;
  line-height: 1.5em;}

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

ol li
margin: 0 0 11px 0;}

.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;}

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

#header
background: #323534 url(back.pngrepeat-x;
  height: 177px;}

#logo
width: 880px;
  position: relative;
  height: 140px;
  background: transparent;}

#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: #E4EC04;}

#logo_text a:hover .logo_colour
color: #FFF;}

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

#menubar
width: 880px;
  height: 46px;

ul#menu
float: right;
  margin: 0;}

ul#menu li
float: left;
  padding: 0 0 0 9px;
  list-style: none;
  margin: 1px 2px 0 0;
  background: #5A5A5A 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 35px 5px 28px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #5A5A5A url(tab.pngno-repeat 1000;

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

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

ul#menu li.selected a, ul#menu li.selected a:hover
background: #00C6F0 url(tab_selected.pngno-repeat 1000;
  color: #FFF;}

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

#site_content
width: 880px;
  overflow: hidden;
  margin: 20px auto auto;
  padding: 0 0 10px 0;

#sidebar_container
float: right;
  width: 224px;}

.sidebar_top
width: 222px;
  height: 14px;
  background: transparent url(side_top.pngno-repeat;}

.sidebar_base
width: 222px;
  height: 14px;
  background: url(side_base.pngno-repeat;}

.sidebar
float: right;
  width: 222px;
  padding: 0;
  margin: 0 0 16px 0;}

.sidebar_item
background: url(side_back.pngrepeat-y;
  padding: 0 15px;
  width: 192px;}

.sidebar li a.selected
color: #444;

.sidebar ul
margin: 0;

#content
text-align: left;
  width: 620px;
  padding: 0 0 0 5px;
  float: left;}
  
#content ul
margin: 2px 0 22px 0px;}

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

#footer
width: 100%;
  font-family: 'trebuchet ms', sans-serif;
  font-size: 100%;
  height: 80px;
  padding: 28px 0 5px 0;
  text-align: center; 
  background: #3B3939 url(footer.pngrepeat-x;
  color: #A8AA94;}

#footer p
line-height: 1.7em;
  padding: 0 0 10px 0;}

#footer a
color: #A8AA94;
  text-decoration: none;}

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

.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: 5px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}
  
.form_settings .submit
font: 100% arial; 
  border: 0
  width: 99px; 
  margin: 0 0 0 212px; 
  height: 33px;
  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: 310px;}

.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: #E5E5DB;
  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_4</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 id="sidebar_container">
        <div class="sidebar">
          <div class="sidebar_top"></div>
          <div class="sidebar_item">
            <!-- 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>
          </div>
          <div class="sidebar_base"></div>
        </div>
        <div class="sidebar">
          <div class="sidebar_top"></div>
          <div class="sidebar_item">
            <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>
          </div>
          <div class="sidebar_base"></div>
        </div>
        <div class="sidebar">
          <div class="sidebar_top"></div>
          <div class="sidebar_item">
            <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_4-style/search.png" alt="Search" title="Search" />
              </p>
            </form>
          </div>
          <div class="sidebar_base"></div>
        </div>
      </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>
      </div>
    </div>
    <div id="content_footer"></div>
    <div id="footer">
      <p><a href="index.html">Home</a> | <a href="examples.html">Examples</a> | <a href="page.html">A Page</a> | <a href="another_page.html">Another Page</a> | <a href="contact.html">Contact Us</a></p>
      <p>Copyright &copy; simplestyle_4 | <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></p>
    </div>
  </div>
</body>
</html>

   
    
  
Related examples in the same category
1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
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.