wbfashion : Fashion « Templates « HTML / CSS

wbfashion
   

<!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>wbfashion</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
    padding:0;
    margin:0;
    outline:0;
}
.cl {
    font-size:0;
    line-height:0;
    height:0;
    display:block;
    clear:both;
}
body{
    background:url(images/bg.gif);
    font-family:Arial, sans-serif;
    color:#4e4e4e;
    font-size:11px;
    line-height:14px;
    padding-bottom:70px;
}
a{
    color:#ff00d2;
    text-decoration: underline;
    text-transform: uppercase;
}
a:hover{
    text-decoration:none
}
a img{
    border:0;
}
.shell{width:930px; margin:0 auto}

#header{height:102px;}
#header .right-part{float: right; display: inline; padding-top:35px}
#header .right-part p{text-align: right;}
#header .right-part a{text-align: right; margin-left:18px}
#header .right-part .search{padding-top:22px}
#header .right-part .search .field{width:205px; font-size: 11px; line-height: 13px; margin-top:4px; margin-left:18px; padding-left:2px; border:0; color:#b3b19d; text-transform: uppercase; background:#fff}
#header .right-part .search .btnp {float: left; display: inline;}
#header .right-part .search .btnp input{
  width:29px; 
  height:22px;
  font-size: 0; 
  line-height: 0px;
  text-indent: -4000px;
  background:url(images/go.gif);
  float: left;
  display: inline;
  cursor:pointer;
  border:0;
}
#header .right-part .search .fld{width:228px; height:22px; background:url(images/fld.gif); float: left; display: inline;}

h1#logo{
  background-image: none;
  font-size: 0;
  line-height:0;
  width:264px;
  height:48px;
  float: left;
  display: inline;
  padding-top:23px;
}
h1#logo a{
  display: block;
  text-indent: -4000px;
  height:48px;
  background:url(images/logo.gif);
}
h2{font-size: 20px; color:#2a2a2a; font-weight: normal; text-transform: uppercase; font-family: georgia, sans-serif; padding-bottom:8px; border-bottom:solid 2px #dedede; margin-right:5px}
h2 span{color:#ff0081}
h3{color:#0f89df; font-size: 15px; font-family: "trebuchet ms", sans-serif; text-transform: uppercase; line-height: 18px;}
h4{color:#0f89df; font-size: 12px; font-family: "trebuchet ms", sans-serif; text-transform: uppercase; line-height: 16px;}

.no-border{border-bottom:0;}

#content #main .box .right{float: right; display: inline;}

#nav{height:28px; background:url(images/pink-right.gif) no-repeat right 0; padding-right:5px; font-family: "trebuchet ms", sans-serif;}
#nav .inner{height:28px; background:url(images/pink-rep.gif) repeat-x}
#nav ul{list-style-type: none; font-size: 12px; text-transform: uppercase; font-weight: bold; height:28px}
#nav li{float: left; display: inline; background:url(images/li-bg.gif) no-repeat right 0; padding-right:1px }
#nav li a{float: left; display: inline; color:#fff; line-height: 28px; text-decoration: none; padding:0 11px}
#nav li a.first{background:url(images/pink-left.gif) no-repeat; }
#nav li.active a.first{background:#74ccef url(images/active.gif) no-repeat; }
#nav li.active a{background:#74ccef; color:#174f65; }

#content{padding-top:8px;}

a.view-all{font-size: 10px; text-transform: uppercase; color:#6b6b6b; text-decoration: none; background:url(images/grey-rounded.gif); width:109px; line-height:22px; text-align: center; margin-top:14px}

#main{width:623px; float: left; display: inline;}
#main .box{width:623px; background:url(images/box-rep.gif) repeat-y;  margin-bottom:8px}
#main .box .right-col{float: left; display: inline; width:302px; padding-left:8px; padding-top:5px}
#main .box .right-col h2{margin-bottom:10px;  }
#main .box .right-col .holder{width:143px; margin-bottom:20px; }
#main a.blue{color:#0f89df; text-decoration: none; font-weight: bold; float: left; margin-top:3px}

a.blue:hover { color:#ff00d2 !important;}

#main h2 a.rss{background:url(images/rss.gif); float: right; display: inline; width:19px; height:19px; text-indent: -4000px; line-height: 0; font-size: 0;}
#main .box a{float: left; display: inline;}
#main .box .holder{width:294px; position:relative; z-index: 1; float:left; display: inline;}
#main .box .holder a.play{
  width:29px; 
  height:29px; 
  position:absolute; 
  top:57px; 
  left:57px;
  z-index: 10; 
  display: block; 
  background:url(images/play.png); 
  text-indent: -4000px; 
  line-height: 0; 
  font-size: 0;
  cursor:pointer;
}
#main .box .holder .stripe{position:absolute; top:284px; left:44px; z-index: 10; height:84px; background:url(images/dot.png); width:245px}
#main .box .holder .stripe strong{font-family: "trebuchet ms", sans-serif; font-size: 23px; color:#00a2ff; text-transform: uppercase; line-height: 25px; padding:10px 0 0 13px; display: block;}
#main .box a img{display: block; border:solid 1px #dedede; padding:4px}
#main .box .top{width:623px; background:url(images/box-top.gif) no-repeat; }
#main .box .bottom{width:612px; background:url(images/box-bottom.gif) no-repeat 0 bottom; padding-top:12px; padding-left:11px; padding-bottom:10px}

#main .simple {width:609px; background:#fff; border:solid 1px #dcdcdc; padding-top:12px; padding-left:12px; padding-bottom:10px; margin-bottom:6px}
#main .simple .holder{width:143px; float: left; display: inline; margin-right:9px}
#main .simple a{ color:#0f89df; text-decoration: none;}
#main .simple a:hover{ color:#ff00d2; }
#main .simple a.image{float: left; display: inline;}
#main .simple a.image img{display: block; padding:4px; border:solid 1px #dedede;}

#main .frame{padding-top:19px}

.info{float: left; display: inline; width:420px; padding-left:8px}
.info span.date{color:#9b9b9b; display: block;}
.info p{padding-bottom:15px}

a.small{font-size: 10px; color:#6b6b6b; text-transform: uppercase; margin-right:15px}

.small-nav{height:29px; border-bottom:solid 1px #dedede; margin-left:-10px; margin-top:-10px; margin-bottom:8px}
.small-nav ul{list-style-type: none; font-family: georgia, sans-serif; text-transform: uppercase;}
.small-nav li{float: left; border-right:solid 1px #dedede; height:29px; line-height: 29px; padding:0 7px}
.small-nav li a{float: left; color:#232323; text-decoration: none;}
.small-nav li a:hover, .small-nav li a.active{color:#ff0081}

.description{width:155px; float: left; display: inline; padding-left:5px}
.description h4{padding-bottom:4px}
.description p{padding-bottom:10px; width:135px}

#sidebar{width:301px; float: right; display: inline; background:url(images/sidebar.gif) repeat-y; border-bottom:solid 1px #dcdcdc}
#sidebar .top{width:291px;  background:url(images/sidebar-top.gif) no-repeat; padding-top:15px; padding-left:10px}
#sidebar ul.pink{list-style-type: none; font-size: 12px; padding-top:10px; width:280px; border-bottom:solid 2px #dedede}
#sidebar ul.pink li{ background:url(images/bull.gif) no-repeat 0 3px; padding-left:15px; text-transform: uppercase; padding-bottom:10px}
#sidebar ul.pink li a{color:#f8379b; text-decoration: none;}
#sidebar ul.pink li a:hover{text-decoration: underline;}
#sidebar ul.blue{list-style-type: none; padding-top:10px; margin-bottom:30px}
#sidebar ul.blue li{border-bottom:solid 1px #ededed; padding-bottom:5px; padding-top:2px; font-size: 12px;}
#sidebar ul.blue li a{text-transform: none; color:#0f89df; }
#sidebar ul.blue small {color:#8e8e8e; display: block;}
#sidebar ul.blue small a{color:#ff00d2}



.ad{padding-top:12px;  margin-bottom:30px}
.ad a img{display: block; padding:1px; border:solid 1px #e4e4e4}
.ad small{font-size: 8px; text-transform: uppercase; display: block; color:#b0b0b0}

#footer{background:#fff; border:solid 1px #dcdcdc; height:70px; font-size: 10px; color:#515151; text-transform: uppercase; font-family: "trebuchet ms", sans-serif; text-align: right;}
#footer .right-area{float: right; display: inline; padding-top:25px; padding-right:17px}
#footer a.sm-logo{background:url(images/fashion.gif); width:155px; height:34px; float: left; text-indent: -4000px; line-height: 0; font-size: 0; margin:16px 0 0 20px; text-align: left;}


</style>


<!--[if IE 6]>
<style type="text/css" media="screen">
#main .box .holder a.play{background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='wbfashion-css/images/play.png', sizingMethod='image');}  
#main .box .holder .stripe{background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='wbfashion-css/images/dot.png', sizingMethod='scale');}  
</style>
<![endif]-->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-func.js" type="text/javascript"></script>
</head>
<body>
<!-- Shell -->
<div class="shell">
  <!-- Header -->
  <div id="header">
    <h1 id="logo"><a href="http://www.free-css.com/">wbfashion</a></h1>
    <div class="right-part">
      <p> <a href="http://www.free-css.com/">sign in</a> <a href="http://www.free-css.com/">create account</a> </p>
      <form action="http://www.free-css.com/" class="search" method="post">
        <div class="fld">
          <input type="text" class="field blink" title="search" value="search" />
        </div>
        <div class="btnp">
          <input type="submit" value="Submit" />
        </div>
      </form>
    </div>
  </div>
  <!-- End Header -->
  <!-- Navigation -->
  <div id="nav">
    <div class="inner">
      <ul>
        <li class="active"><a href="http://www.free-css.com/" class="first">home</a></li>
        <li><a href="http://www.free-css.com/">fashion news</a></li>
        <li><a href="http://www.free-css.com/">celebrities</a></li>
        <li><a href="http://www.free-css.com/">shopping</a></li>
        <li><a href="http://www.free-css.com/">beauty</a></li>
        <li><a href="http://www.free-css.com/">videos</a></li>
        <li><a href="http://www.free-css.com/">community</a></li>
      </ul>
    </div>
  </div>
  <!-- End Navigation -->
  <!-- Content -->
  <div id="content">
    <!-- Main -->
    <div id="main">
      <div class="box">
        <div class="top">
          <div class="bottom">
            <!-- Big Image -->
            <div class="holder">
              <div class="cl">&nbsp;</div>
              <div class="stripe"> <strong>The Singular Suit Project</strong> </div>
              <div class="cl">&nbsp;</div>
              <a href="http://www.free-css.com/"><img src="wbfashion-css/images/model.jpg" alt="" /></a>
              <div class="cl">&nbsp;</div>
              <a href="http://www.free-css.com/" class="view-all">view all videos</a> </div>
            <!-- End Big Image -->
            <!-- Videos -->
            <div class="right-col">
              <h2><a href="http://www.free-css.com/" class="rss">&nbsp;</a> Today's videos </h2>
              <div class="holder"> <a href="http://www.free-css.com/" class="play">&nbsp;</a>
                <div class="cl">&nbsp;</div>
                <a href="http://www.free-css.com/"><img src="wbfashion-css/images/pic1.jpg" alt="" /></a> <a href="http://www.free-css.com/" class="blue">Summer Uni 2009!</a>
                <div class="cl">&nbsp;</div>
              </div>
              <div class="holder right"> <a href="http://www.free-css.com/" class="play">&nbsp;</a> <a href="http://www.free-css.com/"><img src="wbfashion-css/images/pic2.jpg" alt="" /></a> <a href="http://www.free-css.com/" class="blue">Try Me by Farah Damji </a> </div>
              <div class="holder"> <a href="http://www.free-css.com/" class="play">&nbsp;</a>
                <div class="cl">&nbsp;</div>
                <a href="http://www.free-css.com/"><img src="wbfashion-css/images/pic5.jpg" alt="" /></a> <a href="http://www.free-css.com/" class="blue">eva models</a>
                <div class="cl">&nbsp;</div>
              </div>
              <div class="holder right"> <a href="http://www.free-css.com/" class="play">&nbsp;</a> <a href="http://www.free-css.com/"><img src="wbfashion-css/images/pic4.jpg" alt="" /></a> <a href="http://www.free-css.com/" class="blue">The Singular Suit Project</a> </div>
            </div>
            <!-- End Videos -->
            <div class="cl">&nbsp;</div>
          </div>
        </div>
      </div>
      <!-- Box  -->
      <div class="simple">
        <h2 class="no-border">daily beauty <span>reporter</span>!</h2>
        <a href="http://www.free-css.com/" class="image"><img src="wbfashion-css/images/leather.jpg" alt="" /></a>
        <div class="info">
          <h3><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></h3>
          <span>23.05.09</span>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis urna, rhoncus a tempus in, blandit vel nibh. Sed interdum erat eget lacus commodo mattis. Donec ac ante ut dui scelerisque consequat. Phasellus facilisis luctus elit ac sollicitudin. Curabitur pulvinar malesuada accumsan.</p>
          <p>Donec luctus mauris a velit aliquam in volutpat diam viverra. Nulla ipsum magna, pellentesque et imperdiet eget, interdum sed neque.</p>
          <p>Nullam tempor pellentesque pulvinar. Quisque elementum purus vitae urna vulputate molestie. Nam tortor tellus, pulvinar non pellentesque eget, aliquam vel ligula. Curabitur eleifend, diam ac pulvinar porttitor, massa elit lobortis ligula, a blandit nunc nulla vitae mauris. Nullam laoreet lacus ut quam sodales semper. Aliquam eu eros blandit </p>
        </div>
        <div class="cl">&nbsp;</div>
        <a href="http://www.free-css.com/" class="small">Previous news</a> <a href="http://www.free-css.com/" class="small">All news</a> <a href="http://www.free-css.com/" class="small">Next news</a>
        <div class="cl">&nbsp;</div>
      </div>
      <!-- End Box  -->
      <!-- Box  -->
      <div class="simple">
        <h2><a href="http://www.free-css.com/" class="rss">&nbsp;</a> celebreties</h2>
        <div class="cl">&nbsp;</div>
        <div class="frame">
          <div class="holder"> <a class="space image" href="http://www.free-css.com/"><img src="wbfashion-css/images/pics1.jpg" alt="" /></a>
            <div class="cl">&nbsp;</div>
            <a href="http://www.free-css.com/" class="blue">Lorem ipsum dolor sitamet</a> </div>
          <div class="holder"> <a class="space image" href="http://www.free-css.com/"><img src="wbfashion-css/images/pics2.jpg" alt="" /></a>
            <div class="cl">&nbsp;</div>
            <a href="http://www.free-css.com/" class="blue">Pellentesque turpisurna</a> </div>
          <div class="holder"> <a class="space image" href="http://www.free-css.com/"><img src="wbfashion-css/images/pics3.jpg" alt="" /></a>
            <div class="cl">&nbsp;</div>
            <a href="http://www.free-css.com/" class="blue">Phasellus facilisisluctus</a> </div>
          <div class="holder"> <a href="http://www.free-css.com/" class="image"><img src="wbfashion-css/images/pics4.jpg" alt="" /></a>
            <div class="cl">&nbsp;</div>
            <a href="http://www.free-css.com/" class="blue">uisque elementumpurus vitae urn</a> </div>
          <div class="cl">&nbsp;</div>
        </div>
        <div class="cl">&nbsp;</div>
      </div>
      <!-- End Box  -->
      <!-- Box  -->
      <div class="simple">
        <div class="small-nav">
          <ul>
            <li><a href="http://www.free-css.com/" class="active">Fashion news</a></li>
            <li><a href="http://www.free-css.com/">trends</a></li>
            <li><a href="http://www.free-css.com/">shopping</a></li>
            <li><a href="http://www.free-css.com/">beauty</a></li>
            <li><a href="http://www.free-css.com/">models</a></li>
          </ul>
          <div class="cl">&nbsp;</div>
        </div>
        <a href="http://www.free-css.com/" class="image"><img src="wbfashion-css/images/pic7.jpg" alt="" /></a>
        <div class="description">
          <h4><a href="http://www.free-css.com/">Lorem ipsum dolor sitamet</a></h4>
          <p>Donec luctus mauris a velit aliquam in volutpat diam viverra.Nulla ipsum magna, pellentesque et imperdiet eget, interdum sed neque.</p>
          <a href="http://www.free-css.com/">read full story</a> </div>
        <a href="http://www.free-css.com/" class="image"><img src="wbfashion-css/images/pic8.jpg" alt="" /></a>
        <div class="description">
          <h4><a href="http://www.free-css.com/">uisque elementumpurus vitae urn</a></h4>
          <p>Donec luctus mauris a velit aliquam in volutpat diam viverra.Nulla ipsum magna.</p>
          <a href="http://www.free-css.com/">read full story</a> </div>
        <div class="cl">&nbsp;</div>
      </div>
      <!-- End Box  -->
    </div>
    <!-- End Main -->
    <!-- Sidebar -->
    <div id="sidebar">
      <div class="top">
        <h2>categories</h2>
        <ul class="pink">
          <li><a href="http://www.free-css.com/">celebreties</a></li>
          <li><a href="http://www.free-css.com/">model agency</a></li>
          <li><a href="http://www.free-css.com/">photo gallery</a></li>
          <li><a href="http://www.free-css.com/">health and beauty</a></li>
          <li><a href="http://www.free-css.com/">boutique</a></li>
          <li><a href="http://www.free-css.com/">trends</a></li>
          <li><a href="http://www.free-css.com/">videos</a></li>
        </ul>
        <div class="ad"> <small>advertising</small> <a href="http://www.free-css.com/"><img src="wbfashion-css/images/ad.jpg" alt="" /></a> </div>
        <h2>most readed</h2>
        <ul class="blue">
          <li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetur <br />
            adipiscing elit. </a></li>
          <li><a href="http://www.free-css.com/">Summer uni 2009!</a></li>
          <li><a href="http://www.free-css.com/">The singular suit project</a></li>
          <li><a href="http://www.free-css.com/">Eva models</a></li>
          <li><a href="http://www.free-css.com/">Try me by faah damji</a></li>
          <li><a href="http://www.free-css.com/">Purus vitae urna molesti </a></li>
          <li><a href="http://www.free-css.com/">Quisque elementum purus vita</a></li>
          <li><a href="http://www.free-css.com/">Ipsum dolor sit consectetur</a></li>
          <li><a href="http://www.free-css.com/">Ac diam pulvinar porttitor</a></li>
        </ul>
        <h2>blog roll</h2>
        <ul class="blue">
          <li> <small>21.05.09 | posted by <a href="http://www.free-css.com/">admin</a></small> <a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetur <br />
            adipiscing elit. </a> </li>
          <li> <small>21.05.09 | posted by <a href="http://www.free-css.com/">admin</a></small> <a href="http://www.free-css.com/">Nulla ipsum magna pellentesque et imperdiet<br />
            eget, intercedm sed neque </a> </li>
          <li> <small>21.05.09 | posted by <a href="http://www.free-css.com/">admin</a></small> <a href="http://www.free-css.com/">Consecettur adipsicing elit pellentesque turpis<br />
            unra tempus.</a> </li>
          <li> <small>21.05.09 | posted by <a href="http://www.free-css.com/">admin</a></small> <a href="http://www.free-css.com/">Curabitu eleifend , diam ac pulvinar portititor, <br />
            massa elit lobortis ligula a blandit</a> </li>
          <li> <small>21.05.09 | posted by <a href="http://www.free-css.com/">admin</a></small> <a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetur <br />
            adipiscing elit. </a> </li>
          <li> <small>21.05.09 | posted by <a href="http://www.free-css.com/">admin</a></small> <a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetur <br />
            adipiscing elit. </a> </li>
        </ul>
      </div>
    </div>
    <!-- End Sidebar -->
  </div>
  <!-- End Content -->
  <div class="cl">&nbsp;</div>
  <!-- Footer -->
  <div id="footer"> <a href="http://www.free-css.com/" class="sm-logo">wbfashion</a>
    <div class="right-area">
      <p>&copy; Sitename.com. Design by <a href="http://chocotemplates.com">ChocoTemplates.com</a></p>
    </div>
    <div class="cl">&nbsp;</div>
  </div>
  <!-- End Footer -->
</div>
<!-- End Shell -->
</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.	beautiful
12.	Beauty&Style
13.	beauty-design
14.	beauty-secrets
15.	beautycompany
16.	beautysalon
17.	beautysecrets
18.	metamorph_beauty
19.	agedbeauty
20.	face
21.	facing
22.	metamorph_middleage
23.	clothes-collection
24.	clothesfashion
25.	metamorph_sweetlove
26.	e16-fashion-club
27.	freshair
28.	ruby
29.	shining-star
30.	shopping