settings : Design 7 « Templates « HTML / CSS

HTML / CSS » Templates » Design 7 
settings
  

<!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      : SettingsVersion    : 1.0
Released   : 20081010
Description: A two-column, fixed-width and lightweight template ideal for 1024x768 resolutions. Suitable for blogs and small websites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Settings 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;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #6D6D6D;
}

h1, h2, h3 {
  margin: 0;
  text-transform: lowercase;
  font-weight: normal;
  color: #78CC00;
}

h1 {
  letter-spacing: -1px;
  font-size: 32px;
}

h2 {
  font-size: 23px;
}

p, ul, ol {
  margin: 0 0 2em 0;
  text-align: justify;
  line-height: 26px;
}

a:link {
  color: #7AD000;
}

a:hover, a:active {
  text-decoration: none;
  color: #7AD000;
}

a:visited {
  color: #7AD000;
}

img {
  border: none;
}

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

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

/* Form */

form {
  margin: 0;
  padding: 0;
}

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

legend {
  display: none;
}

input, textarea, select {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #333333;
}

#wrapper {
  background: #7ACF00 url(settings-images/img03.jpg);
}

/* Header */

#header {
  width: 900px;
  height: 80px;
  margin: auto 20px auto;
  padding-top: 10px;
}

#logo {
  float: left;
  height: 120px;
  margin-left: 30px;
}

#logo h1 {
  font-size: 38px;
  color: #3399CC;
}

#logo h1 sup {
  vertical-align: text-top;
  font-size: 24px;
}

#logo h1 a {
  color: #FFFFFF;
}

#logo h2 {
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #FFFFFF;
}

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

/* Menu */

#menu {
  float: right;
}

#menu ul {
  margin: 0;
  padding: 28px 0 0 0;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  margin-left: 5px;
  background: #6AB000;
  padding: 7px 10px;
  text-decoration: none;
  font-size: 15px;
  color: #FFFFFF;
}

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

#menu .active a {
}

/* Page */

#page {
  width: 900px;
  margin: auto;
  padding: 20px 20px;
}

/* Content */

#content {
  float: left;
  width: 590px;
  padding: 0px 30px 0px 30px;
}

/* Post */

.post {
}

.post .title {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 10px solid #EDEDED;
}

.post .entry {
}

.post .meta {
  margin: 0;
  padding: 15px 0 60px 0;
  background: url(settings-images/img04.jpgrepeat-x left 30%;
}

.post .meta p {
  margin: 0;
  line-height: normal;
}

.post .meta .byline {
  float: left;
  color: #0000FF;
}

.post .meta .links {
  float: left;
}

.post .meta .more {
  width: 185px;
  height: 35px;
  padding: 5px 0px 5px 0px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 11px;
}

.post .meta .comments {
  padding: 5px 0px 5px 0px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 11px;
}

.post .meta b {
  display: none;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 230px;
}

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

#sidebar li {
  margin-bottom: 40px;
}

#sidebar li ul {
}

#sidebar li li {
  margin: 0;
  padding: 3px 0;
  border-bottom: 1px dashed #D1D1D1;
}

#sidebar li li a {
  margin: 0;
  padding-left: 25px;
  background: url(settings-images/img01.pngno-repeat left 50%;
}

#sidebar h2 {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 10px solid #EDEDED;
  font-size: 18px;
  font-weight: normal;
}

#sidebar a {
  text-decoration: none;
  color: #6D6D6D;
}

/* Search */

#search {
}

#search h2 {
  margin-bottom: 20px;
}

#s {
  width: 150px;
  margin-right: 5px;
  padding: 3px;
  border: 1px solid #F0F0F0;
}

#x {
  padding: 3px;
  background: #ECECEC url(settings-images/img08.gifrepeat-x left bottom;
  border: none;
  text-transform: lowercase;
  font-size: 11px;
  color: #4F4F4F;
}

/* Boxes */

.box1 {
  padding: 20px;
  background: url(settings-images/img05.gifno-repeat;
}

.box2 {
  color: #BABABA;
}

.box2 h2 {
  margin-bottom: 15px;
  background: url(settings-images/img10.gifrepeat-x left bottom;
  font-size: 16px;
  color: #FFFFFF;
}

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

.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited  {
  color: #EDEDED;
}

/* Footer */

#footer {
  height: 400px;
  min-height: 74px;
  padding: 10px 0 0 0;
  background: #979797 url(settings-images/img02.jpgrepeat-x left top;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
}

html>body #footer {
  height: auto;
}

#legal {
  clear: both;
  padding-top: 20px;
  text-align: center;
  text-transform: uppercase;
  font-size: 10px;
  color: #353535;
}

#legal a {
  font-weight: bold;
  color: #FFFFFF;
}

</style>


</head>
<body>
<div id="wrapper">
<!-- start header -->
<div id="header">
  <div id="logo">
    <h1><a href="#">Settings<sup></sup></a></h1>
    <h2>Designed by FreeCSSTemplates</h2>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><a href="#">homepage</a></li>
      <li><a href="#">photo gallery</a></li>
      <li><a href="#">about us</a></li>
      <li><a href="#">links</a></li>
      <li><a href="#">contact us</a></li>
    </ul>
  </div>
</div>
<!-- end header -->
</div>

<!-- start page -->
<div id="page">
  <!-- start content -->
  <div id="content">
    <div class="post">
      <h1 class="title">Welcome to Settings</h1>
      <div class="entry">
        <p>This is Settings, a free, fully standards-compliant CSS template designed byFreeCssTemplates<a href="http://www.nodethirtythree.com/"></a> for <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you’re pretty much free to do whatever you want with it (even use it commerciallyprovided you keep the links in the footer intact. Aside from that, have fun with it :)</p>
        <p>Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. In hac habitasse platea.</p>
      </div>
      <div class="meta">
        <p class="links"><a href="#" class="more">Read full article</a>&nbsp;&nbsp;&raquo;&nbsp;&nbsp;<a href="#" class="comments">View Comments (32)</a></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title">Lorem Ipsum Dolor Volutpat</h2>
      <div class="entry">
        <p>Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. In hac habitasse platea. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero. </p>
      </div>
      <div class="meta">
        <p class="links"><a href="#" class="more">Read full article</a>&nbsp;&nbsp;&raquo;&nbsp;&nbsp;<a href="#" class="comments">View Comments (32)</a></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title">Lorem Ipsum Dolor Volutpat</h2>
      <div class="entry">
        <p>Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. In hac habitasse platea. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. In hac habitasse platea.</p>
      </div>
      <div class="meta">
        <p class="links"><a href="#" class="more">Read full article</a>&nbsp;&nbsp;&raquo;&nbsp;&nbsp;<a href="#" class="comments">View Comments (32)</a></p>
      </div>
    </div>
  </div>
  <!-- end content -->
  <!-- start sidebar -->
  <div id="sidebar">
    <ul>
      <li id="search">
        <h2><b class="text1">Search</b></h2>
        <form method="get" action="">
          <fieldset>
          <input type="text" id="s" name="s" value="" />
          <input type="submit" id="x" value="Search" />
          </fieldset>
        </form>
      </li>
      <li>
        <h2><strong>Lorem</strong> Ipsum</h2>
        <ul>
          <li><a href="#">Fusce dui neque fringilla</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
        </ul>
      </li>
      <li>
        <h2><b>Volutpat</b> Dolore</h2>
        <ul>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
        </ul>
      </li>
      <li>
        <h2><b>Volutpat</b> Dolore</h2>
        <ul>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end sidebar -->
  <div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
  <p id="legal">(c2008 YourSite. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end footer -->
</body>
</html>

   
    
  
Related examples in the same category
1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.reference
60.regeneracy
61.rehabilitation
62.reinvent
63.replenish
64.republic
65.resizeme
66.resplendissant
67.revolt-01
68.ridinghood
69.rockband
70.rogue
71.Rothko
72.route66
73.rust
74.safe-as-houses
75.sahara
76.sampling
77.Sapphire
78.schemermag
79.scotchmark
80.scribbled
81.secretlab
82.seduction
83.selcouth
84.sensa
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.