unnamed : Design 8 « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Design 8

unnamed

   

<!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=utf-8" />
<title>Unnamed | Free CSS Template by Rambling Soul</title>
<style type='text/css'>
@charset "utf-8";
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-color: #FFFFFF;
  background-image: url(images/bg.jpg);
  background-repeat: repeat-x;
}
* {
  margin: 0px;
  padding: 0px;
}
#wrap {
  width: 794px;
  margin-right: auto;
  margin-left: auto;
}
#wrap #topbar {
  height: 65px;
}
#wrap #topbar h1 {
  font-size: 35px;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  display: block;
  padding-top: 20px;
  padding-bottom: 0px;
}
#wrap #header #menu {
  margin-left: 540px;
}
#wrap #header #menu ul {
  list-style-type: none;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
}
#wrap #header #menu li {
  display: block;
  height: 33px;
  margin-bottom: 6px;
  margin-top: 4px;
}
#wrap #header #menu a {
  background-image: url(images/topmenu.png);
  background-repeat: no-repeat;
  display: block;
  height: 25px;
  padding-top: 8px;
  padding-right: 10px;
  padding-left: 10px;
  color: #95A637;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
#wrap #topbar span {
  color: #999900;
}
#wrap #header {
  background-image: url(images/header.jpg);
  background-repeat: no-repeat;
  height: 168px;
}
#wrap #header #menu a:visited, active {
  background-image: url(images/topmenu.png);
  background-repeat: no-repeat;
  display: block;
  height: 25px;
  padding-top: 8px;
  padding-right: 10px;
  padding-left: 10px;
  color: #95A637;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
#wrap #header #menu a:hover {
  background-image: url(images/topmenu.png);
  background-repeat: no-repeat;
  display: block;
  height: 25px;
  padding-top: 8px;
  padding-right: 10px;
  padding-left: 10px;
  color: #030301;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  background-position: 0px -33px;
}
#wrap #mainpage {
  margin-top: 10px;
  margin-bottom: 10px;
}
#wrap #mainpage #content {
  float: left;
  width: 525px;
}
#wrap #mainpage #sidebar {
  margin-left: 528px;
  background-image: url(images/sidebarbg2.jpg);
  background-repeat: repeat-y;
  background-position: left;
}
#wrap #mainpage #sidebar .sidebartop {
  background-image: url(images/sidebarbg1.jpg);
  background-repeat: no-repeat;
  background-position: left;
  display: block;
  height: 35px;
  padding-left: 25px;
  padding-right: 15px;
}
#wrap #mainpage #sidebar .sidebarbottom {
  background-image: url(images/sidebarbg3.jpg);
  background-repeat: no-repeat;
  background-position: left;
  height: 56px;
  display: block;
  padding-left: 25px;
}
#wrap #mainpage #sidebar .sidebarmain {
  padding-right: 15px;
  padding-left: 25px;
}
.clear2 {
  display: block;
  clear: right;
}
#wrap #mainpage #sidebar .sidebarmain li {
  height: 25px;
  display: block;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #EBE9ED;
}
#wrap #mainpage #sidebar .sidebarmain a {
  display: block;
  height: 20px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  color: #999999;
  text-decoration: none;
}

#wrap #mainpage #sidebar .sidebarmain ul {
  list-style-type: none;
  margin-bottom: 15px;
}
.clear {
  clear: both;
  display: block;
}
#wrap #mainpage #content p {
  line-height: 18px;
  color: #666666;
  margin-bottom: 20px;
}
#content h1,#content h2,#content h3,#content h4,#content h5 {
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  padding-left: 5px;
  margin-bottom: 15px;
  font-weight: normal;
}
#wrap #mainpage #content blockquote {
  display: block;
  margin: 10px;
  background-image: url(images/blockquote.gif);
  background-repeat: no-repeat;
  background-position: 5px 2px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 25px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
}

#wrap #mainpage #content ul {
  list-style-type: none;
  padding: 10px;
  color: #666666;
}
#wrap #mainpage #content code {
  background-color: #EBE9ED;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  padding: 5px;
  display: block;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FAFAFE;
  white-space: pre;
}
#wrap #mainpage #content .postinfo {
  background-image: url(images/postinforbg.gif);
  background-repeat: no-repeat;
  background-position: center bottom;
  display: block;
  height: 50px;
  text-align: center;
  font-size: 10px;
  clear: left;
}
#wrap #mainpage #content .right {
  float: right;
  margin-bottom: 5px;
  margin-left: 5px;
}
#wrap #mainpage #content tr {
}
#wrap #mainpage #content td {
  padding: 5px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CCCCCC;
}



#wrap #mainpage #content ul li {
  display: block;
  background-image: url(images/listbullet.gif);
  background-repeat: no-repeat;
  background-position: 2px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 25px;
}
#wrap #mainpage #content ol {
  padding: 10px;
  color: #666666;
  list-style-position: inside;
  list-style-type: decimal;
}
#wrap #mainpage #content ol li {
  padding: 3px;
}


.smalldesc {
  display: block;
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  text-transform: none;
  color: #666666;
}
#wrap #mainpage #sidebar .sidebartop h2 {
  padding-top: 10px;
}
#footer {
  background-color: #FFFFFF;
  background-image: url(images/footerbg.gif);
  background-repeat: repeat-x;
  background-position: left bottom;
  height: 140px;
}
#footer #footercontent {
  width: 794px;
  margin-top: 15px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 35px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}
a {
  color: #999900;
}

#content h1 {
  font-size: 26px;
}
#wrap #mainpage #sidebar  h2 {
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  display: block;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #EBE9ED;
}

#content h2 {
  font-size: 20px;
}
#content h3 {
  font-size: 18px;
}
#content h4 {
  font-size: 16px;
}
#content h5 {
  font-size: 14px;
}
#wrap #mainpage #sidebar .sidebarmain a:visited, active {
  display: block;
  height: 20px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  color: #999999;
  text-decoration: none;
}
#wrap #mainpage #sidebar .sidebarmain a:hover {
  display: block;
  height: 20px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  color: #666666;
  text-decoration: none;
  background-color: #FBFCFF;
}
a:visited, active {
  color: #4B4C06;
}
a:hover {
  color: #999999;
  text-decoration: none;
}
#wrap #mainpage #content #quicklinks {
  float: right;
  width: 225px;
  background-color: #FFFFFF;
  margin-top: 35px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  background-image: url(images/sidebox2.gif);
  background-repeat: repeat-y;
}
#wrap #mainpage #content #quicklinks .qltop {
  background-image: url(images/sidebox1.gif);
  background-repeat: no-repeat;
  height: 22px;
  display: block;
}
#wrap #mainpage #content #quicklinks .qlbttm {
  background-image: url(images/sidebox3.gif);
  background-repeat: no-repeat;
  height: 34px;
  display: block;
}

#wrap #mainpage #content #quicklinks ul {
  list-style-type: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-left: 20px;
}
#wrap #mainpage #content #quicklinks h2 {
  font-size: 14px;
  text-transform: uppercase;
  color: #B7A677;
  display: block;
  font-weight: bold;
  text-align: center;
  margin-top: 0px;
  margin-right: 20px;
  margin-bottom: 0px;
  margin-left: 20px;
  background-color: #E3DCCA;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #C7B994;
  padding: 3px;
}

#wrap #mainpage #content #quicklinks li {
  display: block;
  height: 22px;
  background-image: none;
  background-position: 0px 0px;
  padding: 0px;
}
#wrap #mainpage #content #quicklinks a {
  height: 19px;
  padding-top: 3px;
  display: block;
  padding-right: 5px;
  padding-left: 20px;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #DED6BE;
  color: #334B01;
  text-decoration: none;
  background-image: url(images/bullet.gif);
  background-repeat: no-repeat;
  background-position: 2px;
}
#wrap #mainpage #content #quicklinks a:visited, active {
  height: 19px;
  padding-top: 3px;
  display: block;
  padding-right: 5px;
  padding-left: 20px;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #DED6BE;
  color: #334B01;
  text-decoration: none;
  background-image: url(images/bullet.gif);
  background-repeat: no-repeat;
  background-position: 2px;
}
#wrap #mainpage #content #quicklinks a:hover {
  height: 19px;
  padding-top: 3px;
  display: block;
  padding-right: 5px;
  padding-left: 20px;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #CEC29F;
  color: #333333;
  text-decoration: none;
  background-image: url(images/bullet.gif);
  background-repeat: no-repeat;
  background-position: 2px;
  background-color: #ffffff;
}
#wrap #header #menu .active a {
  background-image: url(images/topmenu.png);
  background-repeat: no-repeat;
  display: block;
  height: 25px;
  padding-top: 8px;
  padding-right: 10px;
  padding-left: 10px;
  color: #030301;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  background-position: 0px -33px;
}
#wrap #mainpage #content table {
  width: 98%;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #CCCCCC;
  border-right-color: #999999;
  border-bottom-color: #999999;
  border-left-color: #CCCCCC;
}
#wrap #mainpage #content th {
  padding: 5px;
  background-color: #E9E9E9;
  text-transform: uppercase;
  color: #000000;
  text-align: left;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CCCCCC;
}
#wrap #mainpage #content .contactform .clear2 {
  clear: left;
  line-height: 1px;
  margin: 0px;
  padding: 0px;
}

#wrap #mainpage #content img {
  background-color: #EFEFEF;
  border: 1px solid #D8D8D8;
  padding: 5px;
}
#wrap #mainpage #content .left {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
}


form {margin:0; padding:0;}
.textfield {display: block; float:left; width:190px; background-color: #F3F4E8; margin:3px;  border: 1px solid #D6D9AE;}
label {  display: block;  float: left; text-align:right; font-weight:bold; width: 150px; margin:3px; padding: 5px;}
.button {display: block; float:left; padding:0px; background-color:#E3E6C8; margin:3px;  border: 2px solid #efefef; color:#999933;}
.textfield:hover {background:#FBFCF8;}
.textfield:focus {background:#ffffff;}
#wrap #topbar a {
  color: #000000;
  text-decoration: none;
}
#wrap #topbar a:visited, active, hover {
  color: #000000;
  text-decoration: none;
}
</style>


</head>

<body>

<div id="wrap">
<div id="topbar">
<h1>Rambling<span>Soul</span></h1>

</div>
<div id="header">
<div id="menu">
  <ul>
    <li><a href="index.html">Welcome Page</a></li>
    <li><a href="tables.html">example of tables</a></li>
    <li class="active"><a href="forms.html">Example of Forms</a></li>
    <li><a href="otherstuff.html">Other Stuff</a></li>

  </ul>
</div>
</div>
<div id="mainpage">
<div id="content">

<h1>Contact Form</h1>

<form action="#">
<div class="contactform">
<label for="Name">Name:</label>
<input class="textfield" name="Name" type="text" />
<div class="clear2"></div>
<label for="Email">Email:</label><input class="textfield" name="Email" type="text" />
<div class="clear2"></div>
<label for="Age">Age:</label>
<input class="textfield" name="Age" type="text" />
<div class="clear2"></div>

<label for="Comments">Comments/Questions:</label>
<textarea class="textfield" name="Comments" cols="30" rows="8"></textarea>

<div class="clear2"></div>
<label for="Submit"><span class="hide">Submit</span></label>
<input name="Submit" type="button" class="button" value="Submit" />
<div class="clear2"></div>
</div>
</form>
<p class="postinfo"> Post Info -  <a href="#">Category</a> | <a href="#">0 Comments</a></p>
</div>


<div id="sidebar">
<div class="sidebartop">
<h2>Categories</h2>
</div>
<div class="sidebarmain"> 
  <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Programming</a></li>
    <li><a href="#">Gadgets</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">Entertainment</a></li>
    <li><a href="#">Personal</a></li>
    <li><a href="#">Free Downloads</a></li>
  </ul>
  
 <h2>Recent Posts<span class="smalldesc">Dummy Links Not working</span></h2>
   <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Programming</a></li>
    <li><a href="#">Gadgets</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">Entertainment</a></li>
    <li><a href="#">Personal</a></li>
    <li><a href="#">Free Downloads</a></li>
  </ul>
</div>
<p class="clear2">&nbsp;</p>
<span class="sidebarbottom">&nbsp;</span>
</div>

<p class="clear"></p>



</div>


</div>
<div id="footer">
<div id="footercontent">
<p>Your Site Name &copy; All rights reserved | Valid XHTML | <a href="#">Put</a> | <a href="#">Any</a> | <a href="#">Links </a>| <a href="#">Here </a></p>
<p class="smalldesc"><a href="http://www.ramblingsoul.com">CSS Layout</a> by Rambling Soul</p>
  </div>

</div>

</body>
</html>








Related examples in the same category

1.sprayedstrokes
2.Square
3.squarely
4.st-valentines-day
5.stacko
6.stamp
7.standardissue
8.standardized
9.starburst
10.stardust
11.stargazer
12.stark
13.steppingstone
14.stichy
15.stickybud
16.stickynotes
17.Stock
18.streetclock
19.strict
20.strockes
21.students-site
22.stygian
23.stylevantage1-0
24.stylish
25.stylized
26.subdued
27.subordinate
28.substance
29.substantial
30.superior
31.supplementary
32.surpris
33.surreal
34.sweatbee
35.swift
36.switchr
37.sworm
38.Symisun_01
39.symphonic
40.symphonyofhorror
41.synchronize
42.Synergy
43.systematized
44.tabbed
45.tangular
46.tardy
47.tcm
48.tealzine
49.team_three
50.templatika
51.Tenebrific
52.terje1_winter
53.terrafirma
54.terrafirma2
55.The-Carbon
56.the-dark-one
57.the-island
58.the-mmozine
59.the-music-studio
60.the-new-audi
61.the-synopsis
62.the-themepod
63.the-web-news
64.theacmegroup
65.thechosenone
66.thelatest
67.themanor
68.tinytemplate
69.themissing-piece
70.thermal
71.thesite
72.thetechies
73.thewall
74.the_gig
75.thisistext
76.throughout
77.thunder
78.ticktocklight
79.time
80.Timeless Template
81.timeless
82.timemanager
83.toolkit
84.tooplain
85.topbusiness
86.topgadgets
87.topworks
88.tornpaperdocom
89.totaltouch
90.towers
91.traditionalist
92.transient
93.transition
94.transport
95.trialservices
96.trikea-static
97.trinityinstitute
98.tropical-evening
99.tropical
100.truenature
101.turn-out-mag
102.Turnesol
103.turnitup
104.turrion-development
105.tv-archade
106.twirling
107.twisted
108.Typography
109.ultimateweb
110.unbound-1.0
111.uncomplicated
112.undefined
113.Underground
114.undertaking
115.UnderWraps
116.undiscovered
117.unembellished
118.unilluminated
119.uniq
120.unite
121.universal
122.unknown
123.unlink
124.unqualified
125.urbanartist
126.usabilityreport
127.variety
128.vectorlover1-0
129.vegetable
130.veggie
131.ventix
132.vertical
133.verticals
134.vertigo
135.VeryGreen
136.VIBE
137.vibrant
138.Village
139.vintage-style
140.violetrays
141.visioninc
142.visions
143.vitruvius
144.vivid
145.Viziora
146.voodoo-dolls
147.voodoodollyv2.0
148.voyage
149.WaiveLive
150.walls
151.wanderer
152.warmblue
153.warped
154.watchthis
155.watercolored-portfolio
156.waterfactory
157.waterfall
158.waterfalls
159.WaterPool
160.we think
161.web-application
162.web-design-studio
163.web-design
164.web-hosting
165.web-shop
166.web2
167.webdesign
168.webdesigninfo
169.webmob
170.websitedesignx
171.webvision
172.Web_Application
173.wellness
174.whatsyoursolution
175.wickedred
176.widecommerce
177.widget
178.widgetlike
179.wildgoose
180.wing-the-air
181.winglobal
182.wiremesh
183.world-of-warcraft
184.xenlog
185.xgallery
186.xhtmldesign
187.xhtmldev_rainbow
188.xhtmldev_RealEstate
189.xodafields0.2
190.ynt
191.yosemite
192.your-blazing-app
193.yourhost
194.yourministry
195.zillanine