spasaloon : Design 7 « Templates « HTML / CSS

HTML / CSS » Templates » Design 7 
spasaloon
  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Spa Saloon</title>
<style type='text/css'>
body {
  font-family: Arial, Verdana, Geneva, helvetica, sans-serif;
  margin: 0px;
  background-image: url(spasaloon-images/back.gif);
  background-repeat: repeat-x;
  background-color:#871902;
    font-size: 12px;
    color: #222;
}

table {
  font-size: 12px;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: #b60000;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}

h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 30px;
  color: #b60000;
  font-weight: normal;
  margin: 0px;
  padding-top: 0px;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: normal;
  margin: 0px;
}

a:link {
  color: #871902;
  text-decoration: none;
}

a:visited {
  color: #871902;
  text-decoration: none;
}

a:hover {
  color: #000;
  text-decoration: underline;
}

#container_big {
  width: 794px;
  padding: 0px;
  margin: 0px;
}

#container {
  float: left;
  position: relative;
  width: 794px;
  text-align: left;
  padding: 0px;
}


#header {
  float: left;
  position: relative;
  width: 794px;
  height: 77px;
  text-align: left;
  background-image: url(spasaloon-images/header.gif);
  background-repeat: no-repeat;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

#menu {
  float: right;
  position: absolute;
  width: 450px;
  height: 29px;
  right: 0px;
  font-size: 13px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  text-align: center;
  top: 47px;
}

#navigation a
{
color: #fff;
text-decoration: none;
padding-left: 13px;


#navigation a span
{
background: url("spasaloon-images/a_link_r.gif"right top no-repeat;
padding-right: 13px;
padding-top: 6px;
}

#navigation a, #navigation a span
{
display: block;
float: left;
height: 36px;
}

#navigation a:hover
{
color: #fff;
background: #fff url("spasaloon-images/a_hover.gif"left top no-repeat;
text-decoration: none;
padding-left: 13px
}

#navigation a:hover span
{
background: url("spasaloon-images/a_hover_r.gif"right top no-repeat;
padding-right: 13px;
padding-top: 6px;
}

#navigation
{
list-style: none;
padding: 0;
margin: 0;
height: 36px;
}

#navigation li
{
float: left;
display: block;
margin: 0;
padding: 0;
margin-left: 4px;;
height: 36px;
}


#steps {
  float: left;
  position: relative;
  width: 794px;
  height: 221px;
  left: 0px;
  background-image: url(spasaloon-images/banner.jpg);
  background-repeat: no-repeat;
  color: #222;
  top: 0px;
  margin-bottom: 0px;
  overflow: hidden;
}

.box {
  float: left;
  position: relative;
  width: 235px;
  margin-left: 10px;
}


#content {
  float: left;
  position: relative;
  width: 794px;
  text-align: left;
  padding: 0px;
  overflow: hidden;
  background-image: url(spasaloon-images/content_back.gif);
  background-repeat: repeat-y;
  background-color: #FFFFFF;
}

#right {
  width: 247px;;
  float: right;
  position: relative;
  right: 6px;
  background: #CCCC66;
  top: 4px;
  color: #fff;
  background: #871902;
}

#right a {
  color: #fff;
}

#right h1 {
  color: white;
}

#main {
  float: left;
  position: relative;
  width: 535px;
  left: 6px;
}

#footer {
  float: left;
  position: relative;
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  width: 794px;
  background-image: url(spasaloon-images/footer.gif);
  background-repeat: no-repeat;
  vertical-align: middle;
  text-align: center; 
  color: #eaeaea;
  padding-top: 5px;
  height: 41px;
}

#footer img {
  margin: 2px;
  border: solid 3px #F2D2A8;
}

#footer a {
  color: #fff;
  margin-left: 5px;
  margin-right: 5px;
}

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

input, textarea, button 
  background-color: #fff;
  color: #94C00D;
  border: solid 2px #94C00D;
  font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
  font-size: 10px;
  height: 20px;
  margin-top: 4px;
}

.btn {
  border: 0px;
  margin-top: 4px;
  margin-bottom: 0px;
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  height: 20px;
  position: absolute;
}

ul {
  list-style-type: square;
}

#ttitle {
  background-color: #900000;
  color: #FFFFFF;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}


h1#logo {color:#fff; padding-top: 15px; padding-left: 30px;
#slogan{color:#fff;  padding-left: 30px;

</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div align="center">
  <div id="container_big">
    <div id="container">
      <div id="header">
        <h1 id="logo">SPA SALOON</h1>
        <div id="slogan">LIFESTYLE SALON SPA</div>
        <div id="menu" style="text-align: center;">
          <ul id="navigation">
            <li><a href="http://www.free-css.com/"><span>HOME</span></a></li>
            <li><a href="http://www.free-css.com/"><span>SPA</span></a></li>
            <li><a href="http://www.free-css.com/"><span>MASSAGE</span></a></li>
            <li><a href="http://www.free-css.com/"><span>SALON</span></a></li>
            <li><a href="http://www.free-css.com/"><span>CONTACT US</span></a></li>
          </ul>
        </div>
      </div>
      <div id="content">
        <div id="steps">
          <div style="float: left; position: relative; width: 400px; left: 110px; top: 15px;">
            <h2>About our services</h2>
            <p>This is SPA SALOON, a free, fully standards-compliant CSS template designed by Free CSS Templates. This free template is released under a Creative Commons Attributions 2.5 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>
          </div>
        </div>
        <div id="main">
          <h1>Content item title</h1>
          <p>This is SPA SALOON, a free, fully standards-compliant CSS template designed by Free CSS Templates. This free template is released under a Creative Commons Attributions 2.5 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 :<a href="http://www.free-css.com/"><strong>Find out more &raquo;</strong></a> <br clear="all" />
            <img src="spasaloon-images/hr.gif" vspace="3" alt="" /></p>
          <h1>Content item title</h1>
          <p>This is SPA SALOON, a free, fully standards-compliant CSS template designed by Free CSS Templates. This free template is released under a Creative Commons Attributions 2.5 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 :<a href="http://www.free-css.com/"><strong>Find out more &raquo;</strong></a></p>
        </div>
        <div id="right">
          <div><img src="spasaloon-images/right_top.gif" alt="" /></div>
          <div style="margin-left: 5px; margin-right: 4px;">
            <h1>Content title</h1>
            <p>This is SPA SALOON, a free, fully standards-compliant CSS template designed by Free CSS Templates. This free template is released under a Creative Commons Attributions 2.5 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 :<strong><a href="http://www.free-css.com/">Read More...</a></strong></p>
          </div>
          <div><img src="spasaloon-images/right_bottom.gif" alt="" /></div>
        </div>
        <br clear="all" />
      </div>
    </div>
    <div id="footer"> &copy; 2007 <a href="http://www.free-css.com/"><strong>SiteName.com</strong></a> <br />
      Designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>, Thanks to <a href="http://www.dubaiapartments.biz/">Dubai Apartments</a> </div>
  </div>
</div>
</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.settings
86.shallowgrunge
87.shalom-typo
88.shape
89.she
90.showcase
91.sifiso
92.silenceandharmony
93.SILK
94.Simpatico
95.sindromk
96.singapore
97.sinorcaish
98.six-oh-six
99.sixpence
100.sixties_style
101.skipopia
102.skitemplate
103.sky
104.sliced
105.slight_amnesia
106.socialnet
107.softenedcells
108.solemnity
109.solitude
110.soloss
111.solutions
112.somewhere-peaceful
113.soniatemplate
114.space
115.spaced
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.