capsicum : Design 3 « Templates « HTML / CSS

HTML / CSS » Templates » Design 3 
capsicum
     

<!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>
<title>Capsicum</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

{
  margin: 0;
  padding: 0;
}

body {
  background: #F4E7DB url(capsicum-images/img01.gifrepeat-x;
  font: normal small Georgia, "Times New Roman", Times, serif;
  color: #A4896D;
}

h1, h2, h3 {
  color: #B43939;
}

h2 {
  margin-bottom: .8em;
  font-size: 2em;
  font-weight: normal;
}

h3 {
  margin-bottom: 1em;
  font-size: small;
}

p, blockquote, ul, ol {
  margin-bottom: 1.4em;
  line-height: 1.8em;
}

{
}

blockquote {
  margin-left: 3em;
  margin-right: 3em;
  padding: 1em 1em 0 1em;
  background: #FAF3ED;
  border: 1px dotted #C7894C;
  font-style: italic;
  color: #C7894C;
}

ul {
  margin-left: 3em;
}

ul li {
}

ol {
  margin-left: 3em;
}

ol li {
}

{
  text-decoration: none;
  color: #B43939;
}

a:hover {
  text-decoration: underline;
}

img {
}

.hr hr {
  display: none;
}

.hr {
  clear: left;
  height: 70px;
  background: url(capsicum-images/img04.gifno-repeat center;
}

/* Boxed Style */

.boxed {
  margin-bottom: 20px;
  padding-bottom: 16px;
  background: url(capsicum-images/img06.gifno-repeat center bottom;
}

.boxed .title {
  background: url(capsicum-images/img05.gifno-repeat right;
  font-size: 1.6em;
}

.boxed .content {
  border-bottom: 1px dotted #C7894C;
}

/* Logo */

#logo {
  height: 40px;
  padding: 20px 40px;
}

#logo h1 {
  float: left;
  font-size: 2.6em;
}

#logo h2 {
  float: left;
  padding: .75em 0 0 .4em;
  font-size: 1.4em;
  font-style: italic;
}

#logo a {
  color: #F4E7DB;
}

/* Content */

#content {
}

/* Content > Main */

#main {
  margin: 0 260px 0 20px;
  padding: 15px;
  background: #FFFFFF;
  border: 5px solid #C7894C;
}

#extra {
  height: 31px;
  margin: 0 260px 0 20px;
  background: url(capsicum-images/img02.gifrepeat-x;
}

/* Content > Main > Welcome */

#welcome {
}

/* Content > Main > Example */

#example {
}

/* Content > Sidebar */

#sidebar {
  float: right;
  width: 220px;
  padding: 60px 20px 0 0;
}

/* Content > Sidebar > Login */

#login {
}

#login form {
}

#login fieldset {
  border: none;
}

#login legend {
  display: none;
}

#login label {
  font-size: x-small;
  font-weight: bold;
}

#login input {
  margin-bottom: 5px;
  padding: 2px 5px;
  border: 1px solid #B43939;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

#inputtext1, #inputtext2 {
  color: #B43939;
}

#inputsubmit1 {
  background: #B43939;
  color: #FFFFFF;
}

/* Content > Sidebar > Menu */

#menu {
  margin-bottom: 30px;
  border-bottom: 4px solid #C7894C;
}

#menu ul {
  margin: 0;
  list-style: none;
  line-height: normal;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  padding: 10px;
  border-top: 1px solid #C7894C;
  font-weight: bold;
}

#menu a:hover, #menu .active a {
  background: #C7894C;
  text-decoration: none;
  color: #FFFFFF;
}

/* Content > Sidebar > Updates*/

#updates {
}

#updates ul {
  margin: 0;
  list-style: none;
}

#updates h3 {
  margin: 0;
  font-size: x-small;
}

#updates p {
  margin-bottom: 1.4em;
  font-size: smaller;
  line-height: normal;
}

/* Content > Sidebar > Partners*/

#partners {
}

#partners .content {
  padding: 10px 0;
}

#partners ul {
  margin: 0;
  border-bottom: 1px solid #D1BC5C;
  list-style: none;
  line-height: normal;
}

#partners li {
  padding: 10px;
  border-top: 1px solid #D1BC5C;
}

/* Footer */

#footer {
  clear: both;
  padding: 20px 40px 40px 40px;
  background: #734415;
}

#footer p {
  margin: 0;
  font-size: x-small;
  color: #C7894C;
}

#footer a {
  text-decoration: underline;
  color: #C7894C;
}

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

/* Footer > Legal */

#legal {
}

/* Footer > Links */

#links {
}

</style>


</head>
<body>
<div id="logo">
  <h1><a href="http://www.free-css.com/">Capsicum</a></h1>
  <h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="content">
  <div id="sidebar">
    <div id="menu">
      <ul>
        <li class="active"><a href="http://www.free-css.com/">Homepage</a></li>
        <li><a href="http://www.free-css.com/">About Us</a></li>
        <li><a href="http://www.free-css.com/">Products</a></li>
        <li><a href="http://www.free-css.com/">Services</a></li>
        <li><a href="http://www.free-css.com/">Clients</a></li>
        <li><a href="http://www.free-css.com/">Support</a></li>
      </ul>
    </div>
    <div id="login" class="boxed">
      <h2 class="title">Client Account</h2>
      <div class="content">
        <form id="form1" method="post" action="http://www.free-css.com/">
          <fieldset>
          <legend>Sign-In</legend>
          <label for="inputtext1">Client ID:</label>
          <input id="inputtext1" type="text" name="inputtext1" value="" />
          <label for="inputtext2">Password:</label>
          <input id="inputtext2" type="password" name="inputtext2" value="" />
          <input id="inputsubmit1" type="submit" name="inputsubmit1" value="Sign In" />
          <p><a href="http://www.free-css.com/">Forgot your password?</a></p>
          </fieldset>
        </form>
      </div>
    </div>
    <div id="updates" class="boxed">
      <h2 class="title">Recent Updates</h2>
      <div class="content">
        <ul>
          <li>
            <h3>March 52007</h3>
            <p><a href="http://www.free-css.com/">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula&#8230;</a></p>
          </li>
          <li>
            <h3>March 32007</h3>
            <p><a href="http://www.free-css.com/">Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh&#8230;</a></p>
          </li>
          <li>
            <h3>February 282007</h3>
            <p><a href="http://www.free-css.com/">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum&#8230;</a></p>
          </li>
          <li>
            <h3>February 252007</h3>
            <p><a href="http://www.free-css.com/">Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam nequea&#8230;</a></p>
          </li>
          <li>
            <h3>February 202007</h3>
            <p><a href="http://www.free-css.com/">Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros&#8230;</a></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="main">
    <div id="welcome">
      <h2>Welcome to Capsicum!</h2>
      <img src="capsicum-images/img03.jpg" alt="" width="180" height="140" style="position: relative; float: left; margin-right: 1em;" />
      <p><strong>Capsicum</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo is from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p>
    </div>
    <div class="hr">
      <hr />
    </div>
    <div id="example">
      <h2>Examples of Common Tags</h2>
      <p>This is an example of a paragraph followed by a blockquote. In posuere  eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula.  Pellentesque viverra vulputate enim. Aliquam erat volutpat lorem ipsum  dolorem.</p>
      <blockquote>
        <p>Pellentesque tristique ante ut  risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum  id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec  placerat odio</p>
      </blockquote>
      <h3>Heading Level Three</h3>
      <p>This is another example of a paragraph followed by an unordered list. In posuere  eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula.  Pellentesque viverra vulputate enim. Aliquam erat volutpat lorem ipsum  dolorem.</p>
      <p>An ordered list example:</p>
      <ol>
        <li>List item number one</li>
        <li>List item number two</li>
        <li>List item number thre</li>
      </ol>
    </div>
  </div>
  <div id="extra"></div>
</div>
<div id="footer">
  <p id="legal">Copyright &copy; 2007 Capsicum. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
  <p id="links"><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Terms of Use</a></p>
</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.capricious
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.