beautiful : Fashion « Templates « HTML / CSS

beautiful
     

<!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>Beautiful</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
?#Container {
  left: 0px;
  top: 0px;
  width: 820px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  background-image: url('beautiful-images/tablexpand.jpg');
}
#header_ {
  float: left;
  left: 0px;
  top: 0px;
  width: 820px;
  height: 322px;
  background-image: url('beautiful-images/header.jpg');
}
#header_ ul.navi{
  width: 750px;
  display: block;
  position: absolute;
  top: 286px;
  left: 50px;
  padding: 0;
  margin: 0;
  background: none;
}
#header_ ul.navi li{
  border-width: 1px;
  background: url(beautiful-images/saparation.gif) no-repeat right;
  height: 22px;
  padding: 0 18px 0 5px;
  margin: 0;
  display: block;
  float: left;
}
#header_ ul.navi li a{
  font: 14px/21px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  text-indent: 0px;
  padding: 0 0 0 33px;
  font-weight: bold;
  margin: 0;
  width: inherit;
  letter-spacing: -1px;
  background-repeat: no-repeat;
  background-image: url('beautiful-images/button.png');
}
#header_ ul.navi li a:hover{
  color: #FFFF99;
  text-decoration: none;
  background-repeat: no-repeat;
  background-image: url('beautiful-images/button_over.png');
}

#left_ {
  float: left;
  left: 0px;
  top: 322px;
  width: 230px;
  background-image: url('beautiful-images/left.jpg');
}
#left_ h2{
  font: 29px/24px "Calisto MT";
  color: #336699;
  font-weight: normal;
  display: block;
  letter-spacing: -1px;
  word-spacing: 0em;
  text-indent: 0px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 10px;
  padding-top: 6px;
  padding-left: 41px;
}
#left_ p{
  background: no-repeat;
  color: #333333;
  padding: 0 0 0 45px;
  width: 175px;
  display: block;
  font: 12px/18px Tahoma;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  letter-spacing: 0px;
}
#left_ p span{
  color: #CC0000;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0px;
}
#left_ p span.bg{
  color: #799fbb;
}
#left_ p a{
  font: 13px/12px "trebuchet MS";
  font-weight: normal;
  color: #003366;
  text-decoration: underline;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
#left_ p a:hover{
  background: no-repeat;
  color: #CC3300;
  font-weight: normal;
  text-decoration: underline;
}

#right_ {
  float: left;
  left: 230px;
  top: 322px;
  width: 590px;
  background-image: url('beautiful-images/right.jpg');
}
#right_ h2{
  font: 29px/24px "Calisto MT";
  color: #336699;
  font-weight: normal;
  display: block;
  letter-spacing: -1px;
  word-spacing: 0em;
  text-indent: 0px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
}
#right_ p{
  background: no-repeat;
  color: #333333;
  padding: 0 0 0 10px;
  width: 535px;
  display: block;
  font: 12px/20px Tahoma;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  letter-spacing: 0px;
}
#right_ p span{
  color: #CC0000;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0px;
}
#right_ p span.bg{
  color: #799fbb;
}
#right_ p a{
  font: 13px/12px "trebuchet MS";
  font-weight: normal;
  color: #003366;
  text-decoration: underline;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
#right_ p a:hover{
  background: no-repeat;
  color: #CC3300;
  font-weight: normal;
  text-decoration: underline;
}

#tablexpand_ {
  float: left;
  left: 0px;
  top: 628px;
  width: 820px;
  height: 8px;
  background-image: url('beautiful-images/tablexpand.jpg');
}
#footer1_ {
  float: left;
  left: 0px;
  top: 636px;
  width: 820px;
  height: 18px;
  background-image: url('beautiful-images/footer1.jpg');
}
#footer2_ {
  float: left;
  left: 0px;
  top: 654px;
  width: 820px;
  background-image: url('beautiful-images/footer2.jpg');
}
#footer2_  p{
  background: no-repeat;
  color: #333333;
  padding: 0;
  margin: 0 0 0 45px;
  width: 731px;
  display: block;
  font: 13px/17px "trebuchet MS";
  text-align: center;
}
#footer2_  p span{
  color: #333333;
  font-weight: bold;
}
#footer2_  p span.bg{
  color: #799fbb;
}
#footer2_  p a{
  font: 13px/12px "trebuchet MS";
  font-weight: bold;
  color: #003366;
  text-decoration: underline;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
#footer2_  p a:hover{
  background: no-repeat;
  color: #CC0000;
}

body {
  margin: 0px;
  background-image: url('beautiful-images/bg.jpg');
  background-repeat: repeat-x;
  background-color: #82efff;
}
.clear{
  clear:both;
}

</style>


</head>
<body>
<div id="Container">
  <div id="header_">
    <ul class="navi">
      <li><a href="http://www.free-css.com/">Home Page</a></li>
      <li><a href="http://www.free-css.com/">Travel Package</a></li>
      <li><a href="http://www.free-css.com/">About The Beach</a></li>
      <li><a href="http://www.free-css.com/">Photos Gallery</a></li>
      <li><a href="http://www.free-css.com/">Latest Events</a></li>
    </ul>
  </div>
  <div id="left_">
    <h2>latest events</h2>
    <p><span>Saturday,</span> Dorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo conse. </p>
    <p>&nbsp;</p>
    <p>Donsectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.</p>
    <p>&nbsp;</p>
    <p><a href="http://www.free-css.com/">read more</a></p>
    <p>&nbsp;</p>
    <p><span>Saturday,</span> Dorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commdo conseq. </p>
  </div>
  <div id="right_">
    <h2>Welcome To Beautiful Beach!</h2>
    <p><span class="style1">Beautiful Beach</span> is a W3C compliance XHTML 
      template designed by WebTemplatePortal.com. This template is designed 100% tableless and tested and 
      compatible with major browser. You're freely to modify this template to suit your needs, we only ask you not to remove the link back to WebTemplatePortal.com. </p>
    <p>&nbsp;</p>
    <p>This template is under the <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> License. That's mean you can modify the design to suit your needs but you must provided a link back to WebTemplatePortal.com </p>
    <p>&nbsp;</p>
    <p>Download more free XHTML templates at WebTemplatePortal.com.</p>
    <p class="style1">&nbsp;</p>
    <p>Downloads 1000's of premium web templates at our sister site at DeonixDesign.com.</p>
    <p>&nbsp;</p>
  </div>
  <div class="clear"></div>
  <div id="footer1_"> &nbsp;</div>
  <div id="footer2_">
    <p>&nbsp;</p>
    <p>Designed by <a href="http://www.webtemplateportal.com/">WebTemplatePortal.com</a><br />
      This template is under the <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> License.<br />
      <br />
      <span>Adipiscing elit sed diam nonummy nibh commodo consequat sit amets. Sorem ipsum dolor sit amet, consectetuer adipiscing.</span></p>
    <p>&nbsp;</p>
    <p> <a target="_blank" href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="" height="31" width="88" border="0" /></a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	fashion-blog
2.	fashion-brand
3.	fashion-store
4.	fashion 2
5.	FashionClub
6.	fashionhouse
7.	fashionhut
8.	fashionista
9.	Celebrere
10.	celebrity
11.	Beauty&Style
12.	beauty-design
13.	beauty-secrets
14.	beautycompany
15.	beautysalon
16.	beautysecrets
17.	metamorph_beauty
18.	agedbeauty
19.	face
20.	facing
21.	metamorph_middleage
22.	clothes-collection
23.	clothesfashion
24.	metamorph_sweetlove
25.	e16-fashion-club
26.	freshair
27.	wbfashion
28.	ruby
29.	shining-star
30.	shopping