favorite-cakes : Design 2 « Templates « HTML / CSS

favorite-cakes

     

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Favarite Cakes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
/* CSS Document */

body {
background-color:#F5E9D9; margin:0; color:#4D4747;
}
img {
  border:none;
}
div, h2, a, img, p {
  margin:0; padding:0;
}
.spacer {
  line-height:0; font-size:0; clear:both;
}
#frame {
width:761px;
height:895px;
background-color:#FFFFFF;
margin:auto; color:#4D4747;
}

#container1 {
width:751px;
height:142px;
padding-left:5px;
padding-right:5px;
float:left;
background-color:#FFFFFF; color:#4D4747;
}

#header1 {
width:185px;
height:142px;
background-color:#551001;
float:left; color:#4D4747;
}

#header2 {
width:280px;
height:102px;
float:left;
padding-left:24px;
padding-top:40px;
}

#header3 {
width:262px;
height:142px;
float:right;
}

#header3a {
width:240px;
height:43px;
background-color:#FFFFFF;
float:right;
padding-top:67px;
padding-right:22px;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#AA8780;
}

.nav a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#AA8780; background-color:inherit;
font-weight:normal;
text-decoration:none;
}

.nav:hover{
  color:#6D2517; background-color:inherit;
}

#header3b {
width:262px;
height:32px;
background-color:#AC3A02; color:inherit;
float:left;
}

#header3b1 {
width:176px; height:27px; float:left;
background:#AC3A02 url(favorite-cakes-images/corner_1.gif) top left no-repeat;
padding-left:24px; color:#4D4747; padding-top:5px; text-indent:-2000px;
}

#header3b2 {
width:50px;
height:32px;
background-color:#AC3A02; color:#4D4747;
float:right;
background-image:url(favorite-cakes-images/corner_2.gif);
background-repeat:no-repeat;
background-position:top right;
}

#container2 {
width:751px;
height:195px;
padding-left:5px;
padding-right:5px;
}

#container2a {
width:489px;
height:195px;
background:#551001 url(favorite-cakes-images/pic_fruit.jpg) 34px 0 no-repeat;
float:left; color:#4D4747;
}

#container2b {
width:260px;
height:193px;
border:1px solid #F2DBBA;
background-color:#F5E9D9; color:#4D4747;
float:right;
}

#container2b1 {
width:220px;
height:Auto;
background-color:#F5E9D9;
margin:auto;
padding-top:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02;
text-align:justify;
}

.container2b2 {
width:200px;
height:22px;
border-bottom:2px solid #F5E9D9;
background-color:#F2DBB9; color:#4D4747;
padding-left:20px;
margin:auto;
}

.links {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#551001; background-color:inherit;
font-weight:bold;
text-decoration:none;
}

.links:hover {
  color:#C15740;background-color:inherit;
}

#container3 {
width:751px;
height:350px;
padding-left:5px;
padding-right:5px;
}

#container3a {
width:151px;
height:498px;
background-color:#551001;
float:left; color:#4D4747;
padding-left:34px;
}

.container3a1 {
width:121px;
height:24px;
border-top:1px solid #AA8880;
padding-left:22px;
padding-top:7px;
}

#container3b {
width:304px;
height:495px;
float:left;
margin:0 0 12px;
}

#container3b1 {
width:240px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#4D4747;
font-weight:normal;
text-decoration:none;
margin:16px 32px 0px 32px;
text-align:justify;
line-height:14px; background-color:inherit;
}
#container3b1 h2 {
  height:33px; text-indent:-2000px;
  background:url(favorite-cakes-images/welcome.gif) 0 10px no-repeat;
}

.container3b2 {
width:240px;
height:28px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF0000;
font-weight:normal;
text-decoration:none;
margin:0px 0px 0px 32px;
text-align:right;
background-color:inherit;
}
.container3b2:hover {
color:#830202; background-color:inherit;
}

#container3b3 {
width:227px;
height:28px;
background:#AC3A02 url(favorite-cakes-images/latest_masterpiece.gif) 14px 50% no-repeat;
padding-left:13px;  color:#4D4747;
padding-top:9px;
margin:0px 32px 0px 32px;
text-indent:-2000px;
}

#container3b4 {
width:238px;
height:202px; color:#4D4747;
background-color:#F5E9D9;
margin:0px 32px 0px 32px;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
background-image:url(favorite-cakes-images/pic_girl.jpg);
background-repeat:no-repeat;
background-position:top right;
}

#container3b4a {
width:100px;
height:176px;
background-color:#F5E9D9;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02;
line-height:14px;
padding-left:10px;
padding-top:15px;
}

.brown {
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#7E1A02; background-color:inherit;
  text-decoration:none;
  font-weight:normal;
}
.brown:hover {
color:#3B0B00; background-color:inherit;
text-decoration:underline;
}

#container3c {
width:262px;
height:490px;
float:left;
margin:0 0 12px;
}

.container3c1 {
width:231px;
height:30px;
background-color:#AC3A02; color:#4D4747;
padding-top:7px;
padding-left:9px;
margin-top:22px;
}
.container3c1 h2 {
  background:url(favorite-cakes-images/hot_offer.gif) 0 0 no-repeat; text-indent:-2000px;
}

.special {
  margin-top:55px;
}
.special h2 {
  background:url(favorite-cakes-images/some_specials.gif) 0 0 no-repeat; text-indent:-2000px;
}
#container3c2 {
width:238px;
height:130px;
background-color:#F5E9D9; color:#4D4747;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
background-image:url(favorite-cakes-images/cake.jpg);
background-repeat:no-repeat;
background-position:bottom left;
}

#container3c2a {
width:104px;
height:31px;
float:right;
padding-right:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
line-height:12px;
}

#container3c2a1 {
width:80px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight:normal;
text-align:justify;
float:right;
padding-left:24px;
}

.container3c2a2 {
width:188px; color:#4D4747;
height:179px;
background-color:#F5E9D9;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
padding-left:25px;
padding-right:25px;
padding-top:22px;
}

.img {
width:99px;
height:86px;
float:left;
}
.img1 {
width:99px;
height:79px;
float:left;
}

.text {
width:80px;
height:78px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
line-height:12px;
float:right;
text-align:justify;
}

.dummy  {
clear:both;
}

a {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
text-align:right;
}

a:hover {
color:#B25B46; background-color:inherit;
text-decoration:underline;
text-align:right;
}

.blank {
width:186px;
height:86px;

}

#container4 {
width:751px;
padding-left:5px;
padding-right:5px;
background-color:#FFFFFF; color:#4D4747;
margin:0px 0px 0 0px;
}

#container4a {
width:489px;
height:32px;
background-color:#E0E0E0; color:#4D4747;
float:left;
}

#container4b {
width:262px;
height:22px;
background-color:#551001;
float:right;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
padding-top:10px;
}
#container4 p {
  text-align:center; clear:both; padding:15px 0;
  font:12px/18px Arial, Helvetica, sans-serif;
}

</style>


</head>
<body>
<div id="frame">
  <div id="container1">
    <div id="header1"> </div>
    <div id="header2"><a href="http://www.free-css.com/"><img src="favorite-cakes-images/favarite.gif" alt="" width="198" height="36"></a> </div>
    <div id="header3a">
      <div class="nav"><a href="http://www.free-css.com/" class="nav">Home</a> | <a href="http://www.free-css.com/" class="nav">Search</a> | <a href="http://www.free-css.com/">Contacts</a></div>
    </div>
    <div id="header3b">
      <h2 id="header3b1">Choose on Occassion</h2>
      <div id="header3b2"> </div>
    </div>
  </div>
  <div id="container2">
    <div id="container2a">&nbsp;</div>
    <div id="container2b">
      <div id="container2b1">Lorem ipsum dolor sit amet, orci mauris, neque lacinia nibh ullamcorper vestibulum, imperdiet duis at inceptos, neque cras arcu, tincidunt ante odio. </div>
      <div class="container2b2" style="margin-top:13px;"><img src="favorite-cakes-images/icon_arrow.gif" alt="" width="8" height="7"> <img src="favorite-cakes-images/blank.gif" alt="" width="25" height="1"> <a href="http://www.free-css.com/" class="links">Wedding</a></div>
      <div class="container2b2"><img src="favorite-cakes-images/icon_arrow.gif" alt="" width="8" height="7"> <img src="favorite-cakes-images/blank.gif" alt="" width="25" height="1"> <a href="http://www.free-css.com/" class="links">Birthday</a></div>
      <div class="container2b2"><img src="favorite-cakes-images/icon_arrow.gif" alt="" width="8" height="7"> <img src="favorite-cakes-images/blank.gif" alt="" width="25" height="1"> <a href="http://www.free-css.com/" class="links">Babies</a></div>
      <div class="container2b2"><img src="favorite-cakes-images/icon_arrow.gif" alt="" width="8" height="7"> <img src="favorite-cakes-images/blank.gif" alt="" width="25" height="8"> <a href="http://www.free-css.com/" class="links">Special Events</a></div>
    </div>
  </div>
  <div id="container3">
    <div id="container3a">
      <div class="container3a1" style="margin-top:16px;"><a href="http://www.free-css.com/"><img src="favorite-cakes-images/about_us.gif" alt="" width="48" height="11" border="0"></a> </div>
      <div class="container3a1"><a href="http://www.free-css.com/"><img src="favorite-cakes-images/services.gif" alt="" width="46" height="12" border="0"></a> </div>
      <div class="container3a1"><a href="http://www.free-css.com/"><img src="favorite-cakes-images/food_gallery.gif" alt="" width="66" height="13" border="0"></a> </div>
      <div class="container3a1"><a href="http://www.free-css.com/"><img src="favorite-cakes-images/pricing_ordering.gif" alt="" width="98" height="14" border="0"></a> </div>
      <div class="container3a1"><a href="http://www.free-css.com/"><img src="favorite-cakes-images/delivery.gif" alt="" width="105" height="14" border="0"></a> </div>
      <div class="container3a1">&nbsp;</div>
    </div>
    <div id="container3b">
      <div id="container3b1" style="line-height:14px;">
        <h2>Welcome to our Website</h2>
        <br>
        This is Website, a free, fully standards-compliant CSS template designed by Free CSS Templates. <br />
        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 commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </div>
      <div class="container3b2"><a href="http://www.free-css.com/" class="container3b2">Read more</a></div>
      <h2 id="container3b3">Latest Masterpiece</h2>
      <div id="container3b4">
        <div id="container3b4a"><strong>Lorem ipsum</strong> dolor sit amet, orci mauris, neque lacinia nibh ullamcorper vestibulum, imperdiet duis at inceptos, neque cras arcu, tincid-<br>
          unt ante odio. <br>
          <br>
          <a href="http://www.free-css.com/" class="brown">Click here...</a> </div>
      </div>
    </div>
    <div id="container3c">
      <div class="container3c1">
        <h2>Hot Offer</h2>
      </div>
      <div id="container3c2">
        <div id="container3c2a" style="margin-top:10px;"><img src="favorite-cakes-images/best_recipes.gif" alt="" width="104" height="23"><br>
          <br>
          <div id="container3c2a1"><strong>Lorem ipsum</strong> dolor sit amet,<br>
            orci mauris,<br>
            neque lacinia nibh ullamcor<br>
            <div align="right"><a href="http://www.free-css.com/">...more</a></div>
          </div>
        </div>
      </div>
      <div class="container3c1 special">
        <h2>Some Special</h2>
      </div>
      <div class="container3c2a2">
        <div class="blank">
          <div class="img"><img src="favorite-cakes-images/cake1.jpg" alt="" width="84" height="75"></div>
          <div class="text"><strong>Lorem ipsum</strong> dolor sit amet, orci mauris, neque lacinia nibh ullamcor<br>
            <div align="right"><a href="http://www.free-css.com/">...more</a></div>
          </div>
        </div>
        <div class="blank">
          <div class="img"><img src="favorite-cakes-images/cake2.jpg" alt="" width="84" height="75"> </div>
          <div class="text"><strong>Lorem ipsum</strong> dolor sit amet, orci mauris, neque lacinia nibh ullamcor<br>
            <div align="right"><a href="http://www.free-css.com/">...more</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="container4">
    <div id="container4a">&nbsp;</div>
    <div id="container4b">Copyright  2006. All rights reserved.</div>
    <br class="spacer">
    <br class="spacer">
    <p>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></p>
  </div>
</div>
</body>
</html>

Related examples in the same category

1.	metamorph_drop
2.	metamorph_energybolt
3.	metamorph_exit
4.	metamorph_global
5.	metamorph_glowing
6.	metamorph_host
7.	metamorph_icybreeze
8.	metamorph_interiordesign
9.	metamorph_interstate60
10.	metamorph_lotr
11.	metamorph_lyrics_lt
12.	metamorph_melancholy_lt
13.	metamorph_mercuryworld
14.	metamorph_metaform
15.	metamorph_models
16.	metamorph_nuke
17.	metamorph_oldheavens
18.	metamorph_palmbeach
19.	metamorph_strongrey_lt
20.	metamorph_thames
21.	metamorph_transitional
22.	metamorph_tropic
23.	metamorph_truncata
24.	metamorph_tubes
25.	metamorph_tunel
26.	ablaze
27.	aboutfruts
28.	abrasive
29.	abscond
30.	abstraction
31.	acallia-development
32.	accomplishable
33.	actualbiz
34.	adhesive
35.	adios
36.	advantage
37.	aero-solutions
38.	aerolyk
39.	affection
40.	agency
41.	ahoy
42.	al-infolabs
43.	alexx-c
44.	alieninvasion
45.	alpha
46.	altered
47.	altruism
48.	ambiance
49.	amoreira
50.	angryhornet
51.	anibanner01
52.	AnotherSquare
53.	anther
54.	anthropod
55.	Antikoerperchen
56.	antiquity
57.	aphotic
58.	applique
59.	aprilshowers
60.	Arbenting-MinimalistResumeTemplate
61.	expanding-portfolio
62.	experience
63.	expertvision
64.	exploitable
65.	ezine02
66.	familiar
67.	featherlight
68.	featuring
69.	femflex1
70.	fernando1
71.	fertilization
72.	Fibre
73.	fibreglass
74.	filaments
75.	findingpeace
76.	firerescuesquad
77.	fivestar
78.	Flair Template
79.	flair
80.	flan2
81.	flange
82.	flattering
83.	flavour
84.	fleur
85.	flightandfight
86.	fluidity
87.	fluidsolution
88.	flyover-builders
89.	WP-Bliss
90.	website-design
91.	website-traffic