capricious : Design 3 « Templates « HTML / CSS

HTML / CSS » Templates » Design 3 
capricious
     

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Capricious - a free css template</title>
<style type='text/css'>
/** global **/
body {
  margin:40px auto;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#333;
  background:#006600 url('capricious-images/body-bg.png') repeat-x;
}
{
  margin:0;
  padding:0;
}


/** element defaults **/
table {
  width:100%;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  text-align:left;
}
th, td {
  padding:5px 10px;
}
th {
  color:#fff;
  border-top:3px solid #004400;
  background-color:#006600;
}
td {
  border-bottom:1px solid #f4f4f4;
}
code, blockquote {
  display:block;
  border-left:5px solid #ddd;
  padding:10px;
  margin-bottom:20px;
}
blockquote p {
  font-style:italic;
  font-family:Georgia, "Times New Roman", Times, serif;
  margin:0;
  height: 1%;
}
{
  line-height:1.9em;
  margin-bottom:20px;
}
{
  color:#1A601A;
}
a:hover {
  color:#333;
}
a:focus {
  outline:none;
}
fieldset {
  display:block;
  border:none;
  border-top:1px solid #e0e0e0;
}
fieldset legend {
  font-weight:bold;
  font-size:13px;
  padding-right:10px;
  color:#222;
}
fieldset form {
  padding-top:15px;
}
fieldset p label {
  float:left;
  width:150px;
  font-family:Arial, Helvetica, sans-serif;
}
fieldset form input, fieldset form select, fieldset form textarea {
  padding:5px;
  color:#333333;
  font-size:13px;
  font-family:Arial, Helvetica, sans-serif;
  border:1px solid #ddd;
}
fieldset form input.formbutton {
  margin-left:150px;
  background:#006600;
  border:none;
  border-bottom:3px solid #004400;
  color:#ffffff;
  font-weight:bold;
  padding:5px 10px;
  font-size:13px;
}
h1 {
  font-size:45px;
}
h2 {
  color:#2f2f2f;
  font-family:Arial,Helvetica,sans-serif;
  font-size:30px;
  font-weight:bold;
  letter-spacing:-2px;
  padding:0 0 5px;
  margin:0;
}
h3 {
  color:#001400;
  font-size:20px;
  padding-bottom:10px;
}
h4 {
  padding-bottom:10px;
  font-size:15px;
  color:#006600;
}
h5 {
  padding-bottom:10px;
  font-size:13px;
  color:#666666;
}
ul, ol {
  margin:0 0 35px 35px;
}
li {
  padding-bottom:5px;
}


/** wrapper **/
div#wrapper-outer {
  width:940px;
  margin:0px auto;
  background:#fff url('capricious-images/wrapper-top.jpg') no-repeat scroll top left;
}
div#wrapper {
  width:920px;
  margin:0px auto;
  padding:10px 10px 40px;
  background:transparent url('capricious-images/footer.jpg') no-repeat scroll bottom center;
}


/** sitename **/
div#sitename h1 {
  color:#549FC7;
  font-size:48px;
  font-weight:bold;
  letter-spacing:-5px;
  margin:0;
  padding:25px 10px 35px 15px;
}
div#sitename h1 a,
div#sitename h1 a:hover {
  color:#004300;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:normal;
  letter-spacing:-1px;
  text-decoration:none;
}


/** nav **/
div#nav {
  background:#006600 url('capricious-images/nav-bg.jpg') repeat-x scroll top left;
  height:40px;
}
div#nav ul {
  margin:0;
  padding:0;
  list-style:none;
  float:left;
  border-right:1px solid #09232F;
}
div#nav ul li {
  float:left;
  padding-bottom:0;
  display:block;
}
div#nav ul li a,
div#nav ul li a:visited,
div#nav ul li a:active,
div#nav ul li a:link {
  color:#fff;
  display:block;
  float:left;
  text-decoration:none;
  font-size:10px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-weight:bold;
  cursor:pointer;
  text-transform:uppercase;
}
div#nav ul li.current a {
  color:#0D570C;
  background:transparent url('capricious-images/item-right.jpg') no-repeat scroll top right;
}
div#nav ul li.current a span,
div#nav ul li.current a:visited span,
div#nav ul li.current a:hover span,
div#nav ul li.current a:active span,
div#nav ul li.current a:link span {
  background:transparent url('capricious-images/item-left.jpg') no-repeat scroll top left;
  border:none;
  padding:18px 15px 16px;
}
div#nav ul li.current a {
  margin-top:-6px;
}
div#nav ul li a span {
  padding:14px 15px 14px;
  border-right:1px solid #126F11;
  border-left:1px solid #072C07;
  display:block;
  float:left;
  background:transparent none;
}
div#nav ul li a:hover span {
  background:transparent url('capricious-images/nav-bg-hover.jpg') repeat-x scroll top left;



/** body **/
div#body {
  padding:10px 5px;
  background:#fff url('capricious-images/content-bg.jpg') repeat-x scroll top left;
}


/** content+sidebar styles **/
div#content {
  width:635px;
}
div.column-left {
  float:left;
  margin-right:20px;
}
div.column-right {
  float:right;
}
div#sidebar {
  width:230px;
}
div#sidebar ul {
  margin:0;
  padding:0;
  list-style:none;
}
div#sidebar li ul {
  border-top:1px solid #ddd;
  margin-bottom:20px;
}
div#sidebar li ul li {
  display:block;
  padding:10px 15px;
  color:#777;
}
div#sidebar li ul li a {
  color:#006600;
  text-decoration:none;
  font-weight:bold;
}
div#sidebar li ul li a:hover {
  color:#001800;
  text-decoration:underline;
}
div#sidebar h4 
  color:#444;
  font-family: Arial, Helvetica, sans-serif;
  font-size:20px;
  font-weight: normal;
  margin:0;
  padding:7px 10px;
}


/** footer **/
div#footer {
  background:#004E00;
  padding:20px 20px;
  color:#fff;
  border-bottom:2px solid #001200;
}
div#footer p {
  color:#fff;
  margin:0;
  font-size:11px;
  width:50%;
}
div#footer p.left float:left; }
div#footer p.right float:right; text-align:right; }
div#footer p a {
  color:#fff;
  font-weight:bold;
  text-decoration:none;
  border-bottom:1px solid #fff;
}
div#footer p a:hover {
  background-color:#006600;
}


/** clear fix **/
.clear:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
 
.clear {
  display: inline-block;
}
.clear {
  display: block;
}

</style>


</head>

<body>
<div id="wrapper-outer">
  <div id="wrapper">
    <div id="sitename">
      <h1><a href="#">Capricious</a></h1>
    </div>
    <div id="nav">
      <ul class="clear">
      
        <!-- MENU -->
        <li><a href="index.html"><span>Home</span></a></li>
        <li class="current"><a href="examples.html"><span>Examples</span></a></li>
        <li><a href="#"><span>Widgets</span></a></li>
        <li><a href="#"><span>Portfolio</span></a></li>
        <li><a href="#"><span>Solutions</span></a></li>
        <li><a href="#"><span>Contact</span></a></li>
        <!-- END MENU -->
        
      </ul>
    </div>
    <div id="body" class="clear">
      <div id="sidebar" class="column-right">
        <ul>  
          <li>
            <h4>Links</h4>
            <ul>
              <li><a href="http://www.spyka.net" title="spyka Webmaster resources">spyka webmaster</a></li>

              <li><a href="http://www.justfreetemplates.com" title="free web templates">Free web templates</a></li>
              <li><a href="http://www.spyka.net/forums" title="webmaster forums">Webmaster forums</a></li>
              <li><a href="http://www.awesomestyles.com/mybb-themes" title="mybb themes">MyBB themes</a></li>
              <li><a href="http://www.awesomestyles.com" title="free phpbb3 themes">phpBB3 styles</a></li>
    
            </ul>
          </li>
          
          <li>

            <h4>Categories</h4>
            <ul>
              <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
              <li><a href="#">Quisque consequat nunc a felis.</a></li>
              <li><a href="#">Suspendisse consequat magna at.</a></li>
              <li><a href="#">Etiam eget diam id ligula rhoncus.</a></li>

              <li><a href="#">Sed in mauris non nibh.</a></li>
            </ul>
          </li>
          <li>
            <h4>Sponsors</h4>
            <ul>
    
              <li><a href="http://www.themeforest.net/?ref=spykawg" title="premium templates">ThemeForest</a> - premium HTML templates, WordPress themes and PHP scripts</li>

              <li><a href="http://www.dreamhost.com/r.cgi?259541" title="web hosting">Web hosting</a> - 50 dollars off when you use promocode <strong>awesome50</strong></li>
              <li><a href="http://www.4templates.com/?aff=spykawg" title="4templates">4templates</a> - brilliant premium templates</li>
            </ul>
          </li>
  
        </ul>
      </div>
      <div id="content" class="column-left">
                <h2>Examples</h2>
    
                <h1>Heading H1</h1>
                <h2>Heading H2</h2>
                <h3>Heading H3</h3>
                <h4>Heading H4</h4>
                <h5>Heading H5</h5>
                
                
                <p>&nbsp;</p>
    
                
                <h3>Lists</h3>
                <ul>
    
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                </ul>
                        
                <ol>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                </ol>
    
                <p>&nbsp;</p>
    
                
                    
                <h3>Code and blockquote</h3>
                <code>&lt;? echo('Hello world'); ?&gt;</code>
    
                <blockquote><p>Mauris sit amet tortor in urna tincidunt aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p></blockquote>
    
                
                <p>&nbsp;</p>
    
                
                
                
                <h3>Table</h3>
                <table cellspacing="0">
                    <tbody><tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Age</th>
    
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>John Smith</td>
                        <td>28</td>
                    </tr>
                    <tr>
    
                        <td>2</td>
                        <td>Fred James</td>
                        <td>49</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Rachel Johnson</td>
                        <td>19</td>
                    </tr>
    
                </tbody></table>
    
                <p>&nbsp;</p>
    
                
                <h3>Form</h3>
                <fieldset>
                    <legend>Form legend</legend>
                    <form action="#" method="get">
                        <p><label for="name">Name:</label>
                        <input name="name" id="name" value="" type="text" /></p>
                        <p><label for="email">Email:</label>
                        <input name="email" id="email" value="" type="text" /></p>
                        <p><label for="message">Message:</label>
                        <textarea cols="37" rows="11" name="message" id="message"></textarea></p>
                        <p><input name="send" style="margin-left: 150px;" class="formbutton" value="Send" type="submit" /></p>
                    </form>
                </fieldset>

      </div>
    </div>
    <div id="footer" class="clear">
      <p class="left">&copy; 2009 sitename.</p>
      <p class="right">Design by <a href="http://www.spyka.net">Free CSS Templates</a> and <a href="http://www.justfreetemplates.com">Free Web Templates</a></p>
    </div>
  </div>
</div>
</body>
</html>

   
    
    
    
    
  
Related examples in the same category
1.blankspace
2.Blasphemy
3.blended
4.blewwave
5.blootoon
6.blush
7.boardroom
8.BOOM
9.boorish
10.boosting
11.bordered
12.boswell
13.bounderies
14.boxedtype
15.boxes_template
16.boxybox
17.branches
18.breaking_ontop
19.brewedcoffee
20.brightfolio
21.brightsideoflife1.0
22.Broadcaster
23.broadsheet
24.brycesunrise
25.bucolic
26.burgeon
27.buzz
28.BW
29.bwdec2007
30.calliope
31.callofduty2
32.candiiclouds
33.cantya-studio
34.canuckington-post
35.canvass
36.capsicum
37.carbonated
38.carbonizer
39.carlmelon
40.caronline
41.carrera
42.castellated
43.catch_info
44.cattleya
45.center-stage
46.COIL
47.col1
48.col2
49.col3
50.collaboration
51.collectiveblue
52.collegemusic
53.colorus
54.colosseum
55.columna
56.combination
57.ComingSoon
58.commission
59.communication-1.0
60.communication-co
61.communication
62.community-live
63.compiled
64.complete-collection
65.complimentary
66.component
67.compressed
68.compromise
69.compus
70.conceptnova
71.concrete
72.concurrence
73.condition
74.conglomerate
75.conjunction
76.connection
77.connections
78.consulting-co
79.contemplate
80.convergence
81.cookiefusion
82.Copy of modify
83.corporattica
84.Cosmopolitan
85.counterstrike
86.cover
87.coverage
88.coxswain
89.creamburn
90.crisp2
91.criterion
92.crystalblack
93.css-heaven-1
94.cssgallery
95.cssheaven-2
96.cssmajesty
97.cubismo
98.cultivated
99.cultureshock
100.cupofcoffee
101.customary
102.customize
103.cyano
104.cyanspark
105.cyberarray
106.daleri-mega
107.daleri-structure
108.dalmatians
109.danmyaz1
110.dapple
111.david-kruger
112.deardiary
113.decorative
114.deepimpact
115.deerpark
116.dekada
117.delta
118.delzep_enterprise
119.description
120.deserted
121.desertsand
122.design-gallery
123.design-studio
124.design10
125.Design9
126.designersstudio
127.designersworld
128.designgalo
129.designhq
130.designstudio
131.Design_Agency
132.deskspace
133.detachable
134.deviation
135.devision
136.dewdrops
137.dezinstudio
138.didactic
139.Did_My_Time
140.differential
141.digitalweb
142.dimension
143.diminishing
144.dirtylicious
145.disambiguation
146.discovery
147.distillate
148.distinctive
149.diversity
150.DJ
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.