st-valentines-day : Design 8 « Templates « HTML / CSS






st-valentines-day

   

<!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" xml:lang="en" lang="en">
<head>
<title>St. Valentines Day | About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* TAGS */
* {margin:0;padding:0}
body {background:#e6fbff;font-family:Tahoma,Arial,helvetica,sans-serif;font-size:100%;line-height:1em;color:#5e5e5e;min-width:1000px}
object {vertical-align:top;outline:none}
input, textarea, select {font-family:Tahoma,Arial,helvetica,sans-serif;font-size:1em;vertical-align:middle;font-weight:normal}
p {margin:0;padding:0}
img {border:0;vertical-align:top;text-align:left}
/* ALIGMENT */
.fleft {float:left}
.fright {float:right}
.clear {clear:both}
.alignright {text-align:right}
.aligncenter {text-align:center}
.wrapper {width:100%;overflow:hidden}
.container {width:100%}
/* TAILING */
.tail-top {background:url(st-valentines-day-images/tail-top.gif) left top repeat-x #fff}
.tail-bottom {background:url(st-valentines-day-images/tail-bottom.gif) left bottom repeat-x}
/* GLOBAL */
#header, #content, #footer {font-size:0.75em;width:1000px;margin:0 auto}
.col-1, .col-2, .col-3 {float:left}
/* FORMS */
#form .form {height:29px;width:100%;overflow:hidden}
#form input {width:119px;float:left;padding:1px 0 1px 3px;background:#fff;border:1px solid #a7ccce;vertical-align:top;line-height:1.2em;margin-right:5px}
#form a {float:left}
#contacts-form {clear:right;width:100%;overflow:hidden}
#contacts-form fieldset {border:none;float:left}
#contacts-form .field {clear:both;height:22px}
#contacts-form label {float:left;width:97px;font-weight:bold;color:#5e5e5e}
#contacts-form input {width:347px;padding:1px 0 1px 3px;border:1px solid #5eb2c1;color:#70635b;float:left}
#contacts-form textarea {width:347px;height:360px;padding:1px 0 1px 3px;border:1px solid #5eb2c1;color:#70635b;float:left;margin-bottom:15px;overflow:auto}
#contacts-form a {color:#e62525}
/* LISTS  */
ul, ol {list-style:none}
.site-nav {padding-top:11px}
.site-nav li {float:left;font-size:17px;line-height:1.2em;text-transform:uppercase;padding:2px 42px 0 42px;background:url(st-valentines-day-images/divider.gif) repeat-y right top}
.site-nav li a {text-decoration:none;color:#133439}
.site-nav li a:hover {color:#e93434}
.site-nav li.last {background:none;padding-right:0}
.nav-list {position:absolute;right:113px;top:52px}
.nav-list li {float:left;padding:6px 17px 6px 15px;background:url(st-valentines-day-images/divider1.gif) repeat-y right top}
.nav-list li.last {background:none;padding-right:0}
.list li {padding:0 0 8px 11px;background:url(st-valentines-day-images/marker1.gif) no-repeat left 5px}
.list li a {color:#133439}
.list1 {margin-top:-15px}
.list1 li {color:#393939;padding-top:15px}
.list1 li b {display:block;padding-bottom:6px}
.list1 li a {text-decoration:none;color:#393939}
.list1 li a:hover {background:#fff}
.list2 {margin-top:-5px}
.list2 li {width:100%;overflow:hidden;vertical-align:top;padding-top:15px}
.list2 li img {float:left;margin:-10px 12px 0 0}
.list2 li b {display:block;padding-bottom:5px}
.list2 li b a {color:#5eb2c1;text-decoration:none} 
.list2 li b a:hover {color:#000}
.list3 {margin-top:-9px}
.list3 li {width:100%;overflow:hidden;vertical-align:top;padding-top:10px}
.list3 li img {float:left;margin:6px 12px 0 0}
.list3 li b {display:block;padding-bottom:5px}
.list3 li b a {color:#5eb2c1;text-decoration:none} 
.list3 li b a:hover {color:#000}
.list4 {padding-bottom:17px}
.list4 li {font-weight:bold;padding:0 0 5px 8px;background:url(st-valentines-day-images/marker2.gif) no-repeat left 6px}
.list4 li ul {padding-top:5px;margin-bottom:-5px}
.list4 li a {color:#e62525}
/* OTHER */
.img-box span {display:block;padding-top:20px;text-align:center;color:#133439}
.img-box span b {display:block;color:#e62525}
.img-box a {text-decoration:none}
p {margin-bottom:18px}
.p1 {margin-bottom:0}
.phone {float:right;margin-right:30px}
/* TXT, LINKS, LINES, TITLES */
a {color:#bc3027;outline:none}
a:hover {text-decoration:none}
h2 {font-size:24px;line-height:1.2em;text-transform:uppercase;color:#133439;margin-bottom:20px}
h2 span {color:#878787;padding-left:60px;display:inline-block}
h2 b {color:#e62525;position:relative;top:1px}
h2 strong {color:#5eb2c1;position:relative;top:1px}
h3 {font-size:20px;line-height:1.2em;color:#133439;text-transform:uppercase;margin-bottom:15px;font-weight:normal}
/* BOXES */
.box {background:url(st-valentines-day-images/box-tail.gif) repeat-y left top;width:208px;margin-bottom:20px}
.box .top {background:url(st-valentines-day-images/box-top.gif) no-repeat left top}
.box .bot {background:url(st-valentines-day-images/box-bot.gif) no-repeat left bottom;min-height:313px;height:auto!important;height:313px}
.box .inner, .box1 .inner, .box2 .inner {padding:25px 30px 25px 30px}
.box1 {background:url(st-valentines-day-images/box1-tail.gif) repeat-y left top;width:208px}
.box1 .top {background:url(st-valentines-day-images/box1-top.gif) no-repeat left top}
.box1 .bot {background:url(st-valentines-day-images/box1-bot.gif) no-repeat left bottom;min-height:289px;height:auto!important;height:289px}
.box2 {background:url(st-valentines-day-images/box2-tail.gif) repeat-y left top;width:208px}
.box2 .top {background:url(st-valentines-day-images/box2-top.gif) no-repeat left top}
.box2 .bot {background:url(st-valentines-day-images/box2-bot.gif) no-repeat left bottom;min-height:432px;height:auto!important;height:432px}
.box2 h3 {color:#7a2d2e}
.box3 {background:#f3f3f3;width:504px}
.box3 .top {background:url(st-valentines-day-images/box3-top.gif) no-repeat left top}
.box3 .bot {background:url(st-valentines-day-images/box3-bot.gif) no-repeat left bottom}
.box3 .inner {padding:25px 25px 20px 30px}
.box3 h3 {margin-bottom:9px}
.form-box {width:208px;background:url(st-valentines-day-images/form-box-tail.gif) repeat-y left top;margin-bottom:20px}
.form-box .top {background:url(st-valentines-day-images/form-box-top.gif) no-repeat left top}
.form-box .bot {min-height:170px;height:auto!important;height:170px;background:url(st-valentines-day-images/form-box-bot.gif) no-repeat left bottom}
.form-box .inner {padding:26px 20px 40px 30px}
.form-box h3, .form-box p {color:#fff}
.form-box h3 {margin-bottom:10px}
.form-box p {margin-bottom:6px}
.form-box a {color:#fbcec6}
/* HEADER */
#header {height:440px;background:url(st-valentines-day-images/header-bg.jpg) no-repeat left top;position:relative}
#header .logo {position:absolute;left:41px;top:63px}
/* CONTENT */
#content .col-1, #content .col-2 {margin-right:20px}
#content .col-1 {width:208px}
#content .col-2 {width:504px}
#content .col-3 {width:208px;float:right}
#content .indent {padding:30px 20px 40px 20px}
#content .indent1 {padding:20px 20px 30px 30px}
#content .inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-100px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:11px}

/* FOOTER  */
#footer {height:85px;background:url(st-valentines-day-images/footer-bg.gif) no-repeat left top}
#footer p {text-align:center;padding-top:33px;color:#133439}
#footer p a {color:#e62525}
#footer img {position:relative;top:-4px}

</style>


<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_700.font.js" type="text/javascript"></script>
</head>
<body id="page2">
<div class="tail-top">
  <div class="tail-bottom">
    <!-- HEADER -->
    <div id="header">
      <ul class="site-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about-us.html">About Us</a></li>
        <li><a href="articles.html">Articles</a></li>
        <li><a href="contact-us.html">Contact Us</a></li>
        <li class="last"><a href="sitemap.html">Site Map</a></li>
      </ul>
      <div class="nav-list">
        <ul>
          <li><a href="#"><img src="st-valentines-day-images/pic1.gif" alt="" /></a></li>
          <li class="last"><a href="#"><img src="st-valentines-day-images/pic2.gif" alt="" /></a></li>
        </ul>
      </div>
      <div class="logo"><a href="#"><img src="st-valentines-day-images/logo.gif" alt="" /></a></div>
    </div>
    <!-- CONTENT -->
    <div id="content">
      <div class="inner_copy">More <a href="#">Website Templates</a> @ Templates.com!</div>
      <div class="indent">
        <div class="wrapper">
          <div class="col-1">
            <div class="box">
              <div class="top">
                <div class="bot">
                  <div class="inner">
                    <h3>Categories:</h3>
                    <ul class="list">
                      <li><a href="#">Autumn Gifts</a></li>
                      <li><a href="#">Cookie Bouquets</a></li>
                      <li><a href="#">Engravable Gifts</a></li>
                      <li><a href="#">Flowers and Plants</a></li>
                      <li><a href="#">For Couples</a></li>
                      <li><a href="#">For Dad</a></li>
                      <li><a href="#">For Her</a></li>
                      <li><a href="#">For Him</a></li>
                      <li><a href="#">For Kids</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="box1">
              <div class="top">
                <div class="bot">
                  <div class="inner">
                    <h3>What&rsquo;s New?</h3>
                    <div class="img-box"><a href="#"><img src="st-valentines-day-images/extra-img.jpg" alt="" /><span>Product #045<b>$49.99</b></span></a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-2">
            <div class="indent1">
              <h2>About <b>Your Website</b></h2>
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione.</p>
              <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
            </div>
            <div class="box3">
              <div class="top">
                <div class="bot">
                  <div class="inner">
                    <h3>About Your Team:</h3>
                    <ul class="list3">
                      <li><img src="st-valentines-day-images/img-wrapper.gif" alt="" /><b><a href="#">Team Member One</a></b> He is supposed to be the most important member of your team. Ususally this is the person who started the website. Maybe it is worth to write why he made such a desicion, what inspired him and what are his plans for the future.</li>
                      <li><img src="st-valentines-day-images/img-wrapper.gif" alt="" /><b><a href="#">Another Team Member</a></b> We are completly lost on what he's responsible for but we hope that you know it ;) We also hope that you will tell it to the rest of the world including us by placing some real text here.</li>
                      <li><img src="st-valentines-day-images/img-wrapper.gif" alt="" /><b><a href="#">The Last Team Member</a></b> We are completly lost on what he's responsible for but we hope that you know it ;) We also hope that you will tell it to the rest of the world including us by placing some real text here.</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-3">
            <div class="form-box">
              <div class="top">
                <div class="bot">
                  <div class="inner">
                    <h3>Site Search:</h3>
                    <form action="#" method="post" id="form">
                      <div class="form">
                        <input type="text" />
                        <a href="#"><img src="st-valentines-day-images/button-search.gif" alt="" /></a></div>
                      <p>Use keywords to find the product you are looking for.</p>
                      <div><a href="#">Advanced Search</a></div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div class="box2">
              <div class="top">
                <div class="bot">
                  <div class="inner">
                    <h3>Latest News:</h3>
                    <ul class="list1">
                      <li><b><a href="#">Jan 25, 2010</a></b>Satus error sit voluptatem accusatium dolorem.</li>
                      <li><b><a href="#">Jan 12, 2010</a></b>Totam rem aperiam, eaque ipsa quae sequi nesciunt eque porro.</li>
                      <li><b><a href="#">Jan 02, 2010</a></b>Nemo enim ipsam volupta- tem qoluptas sed.</li>
                      <li><b><a href="#">Dec 27, 2009</a></b>Dolores eos qui ratione voluptatem.</li>
                      <li><b><a href="#">Dec 13, 2009</a></b>Satus error sit voluptatem accusatium dolorem</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- FOOTER -->
    <div id="footer">
      <p>Copyright - Type in Your Name Here &nbsp; &nbsp; &nbsp; &nbsp;Designed by &nbsp;<a href="http://www.templates.com"><img alt="" src="st-valentines-day-images/templates-logo.gif" /></a>&nbsp; Your Provider of <a href="http://www.templates.com">Website Templates</a></p>
    </div>
  </div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>

   
    
    
  








Related examples in the same category

1.sprayedstrokes
2.Square
3.squarely
4.stacko
5.stamp
6.standardissue
7.standardized
8.starburst
9.stardust
10.stargazer
11.stark
12.steppingstone
13.stichy
14.stickybud
15.stickynotes
16.Stock
17.streetclock
18.strict
19.strockes
20.students-site
21.stygian
22.stylevantage1-0
23.stylish
24.stylized
25.subdued
26.subordinate
27.substance
28.substantial
29.superior
30.supplementary
31.surpris
32.surreal
33.sweatbee
34.swift
35.switchr
36.sworm
37.Symisun_01
38.symphonic
39.symphonyofhorror
40.synchronize
41.Synergy
42.systematized
43.tabbed
44.tangular
45.tardy
46.tcm
47.tealzine
48.team_three
49.templatika
50.Tenebrific
51.terje1_winter
52.terrafirma
53.terrafirma2
54.The-Carbon
55.the-dark-one
56.the-island
57.the-mmozine
58.the-music-studio
59.the-new-audi
60.the-synopsis
61.the-themepod
62.the-web-news
63.theacmegroup
64.thechosenone
65.thelatest
66.themanor
67.tinytemplate
68.themissing-piece
69.thermal
70.thesite
71.thetechies
72.thewall
73.the_gig
74.thisistext
75.throughout
76.thunder
77.ticktocklight
78.time
79.Timeless Template
80.timeless
81.timemanager
82.toolkit
83.tooplain
84.topbusiness
85.topgadgets
86.topworks
87.tornpaperdocom
88.totaltouch
89.towers
90.traditionalist
91.transient
92.transition
93.transport
94.trialservices
95.trikea-static
96.trinityinstitute
97.tropical-evening
98.tropical
99.truenature
100.turn-out-mag
101.Turnesol
102.turnitup
103.turrion-development
104.tv-archade
105.twirling
106.twisted
107.Typography
108.ultimateweb
109.unbound-1.0
110.uncomplicated
111.undefined
112.Underground
113.undertaking
114.UnderWraps
115.undiscovered
116.unembellished
117.unilluminated
118.uniq
119.unite
120.universal
121.unknown
122.unlink
123.unnamed
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