fashion 2
<!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>Fashion</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #333333;
}
a:link, a:visited { color: #333333; text-decoration: none;}
a:active, a:hover { color: #333333; text-decoration: underline;}
h1 {
margin: 0 0 5px 0;
padding: 10px 0 10px 10px;
font-size: 24px;
font-weight: normal;
color: #ffffff;
background: #26405b;
}
h2 {
margin: 0 0 10px 0;
padding: 5px 0 5px 10px;
font-size: 16px;
color: #ffffff;
background: #26405b;
}
h3 {
letter-spacing: 5px;
margin: 0;
padding: 3px 0 3px 10px;
font-size: 16px;
font-weight: bold;
color: #ffffff;
background: #26405b;
}
h4 {
margin: 0 0 10px 0;
padding: 0;
font-size: 16px;
font-weight: bold;
color: #333;
}
h5 {
margin: 0 0 5px 0;
padding: 0;
font-size: 12px;
font-weight: bold;
color: #195fff;
}
p{
margin: 0 0 15px 0;
}
img {
border: none;
margin: 0;
}
.cleaner {
clear: both;
width: 100%;
height: 1px;
}
.cleaner_with_height {
clear: both;
width: 100%;
height: 30px;
}
#container {
margin: auto;
width: 960px;
}
/* top panel */
#top_panel {
width: 960px;
height: 120px;
margin: 0;
padding: 0;
background: #003 url(fashion-images/top_panel_background.jpg) no-repeat;
}
#header {
float: left;
display: inline;
margin: 40px 0 0 30px;
}
#header #site_title{
padding: 10px 0 8px 0;
margin: 0;
color: #FFF;
font-size: 50px;
font-weight: bold;
background: none;
}
#header #slogan{
padding-left: 3px;
margin: 0;
color: #CCC;
font-size: 12px;
font-weight: bold;
}
.ad_468x60 {
float: right;
color: #FFFFFF;
margin: 40px 15px 0 0;
width: 468px;
height: 60px;
}
.ad_468x60 img{
border: none;
}
/* end of top panel */
/*------------- Menu ------------------*/
#menu {
width: 960px;
height: 35px;
background: #000;
border-bottom: 1px solid #333;
}
#menu ul {
float: left;
width: 750px;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
padding: 0 25px;
font-size: 13px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#menu ul li .lastmenu{
border-right: none;
}
#menu li a:hover, #menu li .current{
color: #b3d7fc;
}
#menu form{
float: right;
width: 170px;
margin: 0;
padding: 5px 0 0 0;
text-align: left;
}
#menu form input{
width: 120px;
color: #FFFFFF;
background: #000;
height: 20px;
border: 1px solid #666;
}
#menu form .button{
border: none;
background: none;
color: #FFF;
font-weight: bold;
cursor: pointer;
width: 40px;
}
/* ----------------- end of menu----------------*/
#content {
width: 960px;
margin-bottom: 25px;
}
#content #content_left {
float:left;
width: 640px;
padding: 0 10px 0 0;
border-right: 1px solid #CCCCCC;
}
#content #content_right {
float: right;
width: 300px;
}
#content_left .tempaltemo_content_left_section_01 {
clear: both;
width: 640px;
}
.tempaltemo_content_left_section_01 .section_01_two_col {
float: left;
width: 300px;
margin: 0 20px 0 0;
}
.section_01_two_col .section_01_box {
clear: both;
width: 100%;
height: 149px;
padding: 15px 0 0 0;
border-bottom: 1px solid #CCCCCC;
}
.section_01_box .section_01_box_title{
font-weight: bold;
font-size: 14px;
}
.section_01_box img{
float: left;
margin: 3px 15px 0 0;
}
#content_left .tempaltemo_content_left_section_02{
clear: both;
width: 640px;
}
.tempaltemo_content_left_section_02 .section_02_box {
float: left;
width: 298px;
border: 1px solid #CCCCCC;
margin: 0 20px 0 0px;
}
.section_02_box .section_02_box_content{
float: left;
padding: 15px;
}
.section_02_box_content .section_02_box_content_title {
font-weight: bold;
}
.section_02_box_content ul{
clear: both;
list-style: none;
margin: 0;
padding: 0;
}
.section_02_box_content ul li{
padding: 0 0 5px 15px;
margin: 0;
background: url(fashion-images/listicon.gif) top left no-repeat;
}
.section_02_box img {
float: left;
margin: 3px 15px 0 0;
}
#content_left .tempaltemo_content_left_section_03 {
clear: both;
width: 640px;
background: #d2d6db;
}
.tempaltemo_content_left_section_03 .section_03_box {
float: left;
width: 140px;
margin: 0 10px;
}
#content_right .content_right_section_01 {
width: 300px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #CCCCCC;
}
.content_right_section_01 .blog_box {
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #dddddd;
}
.content_right_section_01 .blog_box h5 a{
color: #195fff;
}
.content_right_section_01 .blog_box span{
color: #ff366f;
}
.content_right_section_01 .sister_links_box {
float: left;
width: 140px;
padding-right: 10px;
}
/* ----- Footer ----- */
#footer {
clear: both;
padding: 10px 25px;
width: 910px;
text-align: center;
background: #DDD;
text-align: center;
font-size: 11px;
color: #666;
}
#footer p{
margin-bottom: 10px;
padding: 0;
text-align: justify;
}
#footer a{
font-weight: normal;
}
/* ----- End of Footer ----- */
</style>
</head>
<body>
<div id="container">
<div id="top_panel">
<div id="header">
<div id="site_title">Fashion</div>
<div id="slogan">Free CSS Website Template</div>
</div>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="http://www.free-css.com/">Events</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Models</a></li>
<li><a href="http://www.free-css.com/">Bars</a></li>
<li><a href="http://www.free-css.com/">Company</a></li>
<li><a href="http://www.free-css.com/" class="lastmenu">Contact</a></li>
</ul>
<form method="get" action="http://www.free-css.com/">
<input name="search" value="Search..." type="text" />
<input class="button" type="submit" name="Search" value="GO" />
</form>
</div>
<div id="content">
<div id="content_left">
<div class="tempaltemo_content_left_section_01">
<div class="section_01_two_col"> <a href="http://www.free-css.com/"><img src="fashion-images/image_01.jpg" alt="" /></a> </div>
<div class="section_01_two_col">
<div class="section_01_box">
<h4>Latest Fashion Style</h4>
<img src="fashion-images/image_02.jpg" alt="" /> <a class="section_01_box_title" href="http://www.free-css.com/">Free Website Template</a><br />
This is a FREE CSS template provided by TemplateMo website. You may apply this layout for any of your websites. </div>
<div class="section_01_box">
<h4>Fashion Holidays</h4>
<img src="fashion-images/image_03.jpg" alt="" /> <a class="section_01_box_title" href="http://www.free-css.com/">Donec mollis aliquet</a><br />
Hello friend, Credit goes to <strong>PublicDomainPictures</strong> for some photos used in this layout. Special Thanks to <strong>s.OliverImages</strong> for fashion photos.</div>
</div>
<div class="cleaner"> </div>
</div>
<div class="cleaner_with_height"> </div>
<div class="tempaltemo_content_left_section_02">
<div class="section_02_box">
<h3>Fashion Lovers</h3>
<div class="section_02_box_content"> <a href="http://www.free-css.com/"><img src="fashion-images/image_04.jpg" alt="" /></a> <a class="section_02_box_content_title" href="http://www.free-css.com/">Lorem ipsum nunc</a><br />
<a href="http://www.free-css.com/">Maecenas adipiscing vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. </a>
<ul>
<li>Lorem ipsum nunc quis sem dolor sit amet.</li>
<li>Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum.</li>
</ul>
</div>
</div>
<div class="section_02_box">
<h3>Beauty</h3>
<div class="section_02_box_content"> <a href="http://www.free-css.com/"><img src="fashion-images/image_06.jpg" alt="" /></a> <a class="section_02_box_content_title" href="http://www.free-css.com/">Nulla sed leo sed</a><br />
<a href="http://www.free-css.com/">Nulla sed leo sed sapien sagittis aliquet. Vivamus vestibulum condimentum massa.</a>
<ul>
<li>Donec a purus vel purus sollicitudin placerat.</li>
<li>Sed pretium, neque hendrerit rhoncus accumsan.</li>
</ul>
</div>
</div>
</div>
<div class="cleaner_with_height"> </div>
<div class="tempaltemo_content_left_section_02">
<div class="section_02_box">
<h3>Fashion Events</h3>
<div class="section_02_box_content"> <a href="http://www.free-css.com/"><img src="fashion-images/image_07.jpg" alt="" /></a> <a class="section_02_box_content_title" href="http://www.free-css.com/">Sed pretium neque</a><br />
<a href="http://www.free-css.com/">Sed pretium, neque hendrerit rhoncus accumsan, nibh tellus pharetra neque, quis rutrum elit justo vitae.</a>
<ul>
<li>Lorem ipsum nunc quis sem dolor sit amet.</li>
<li>Curabitur eleifend congue leo.</li>
</ul>
</div>
</div>
<div class="section_02_box">
<h3>Life Style</h3>
<div class="section_02_box_content"> <a href="http://www.free-css.com/"><img src="fashion-images/image_08.jpg" alt="" /></a> <a class="section_02_box_content_title" href="http://www.free-css.com/">Donec a purus vel</a><br />
<a href="http://www.free-css.com/">Donec a purus vel purus sollicitudin placerat. Nunc at sem. Sed pellentesque placerat augue.</a>
<ul>
<li>Nunc at sem. Sed pellentesque placerat.</li>
<li>Mauris pede nisl, placerat nec, lobortis vitae.</li>
</ul>
</div>
</div>
</div>
<div class="cleaner_with_height"> </div>
<div class="tempaltemo_content_left_section_03">
<h1>Fashion Events</h1>
<div class="section_03_box">
<h4>Swim Wears</h4>
<a href="http://www.free-css.com/"><img src="fashion-images/image_10.jpg" alt="" /></a>
<p> <a href="http://www.free-css.com/">Lorem ipsum nunc quis sem dolor sit amet.</a> </p>
</div>
<div class="section_03_box">
<h4>Fashion Week</h4>
<a href="http://www.free-css.com/"><img src="fashion-images/image_09.jpg" alt="" /></a>
<p> <a href="http://www.free-css.com/">Curabitur eleifend congue leo.</a> </p>
</div>
<div class="section_03_box">
<h4>Musical Event</h4>
<a href="http://www.free-css.com/"><img src="fashion-images/image_11.jpg" alt="" /></a>
<p> <a href="http://www.free-css.com/">Sed pellentesque placerat augue. </a> </p>
</div>
<div class="section_03_box">
<h4>Summer Style</h4>
<a href="http://www.free-css.com/"><img src="fashion-images/image_12.jpg" alt="" /></a>
<p> <a href="http://www.free-css.com/">Donec a purus vel purus sollicitudin placerat. </a> </p>
</div>
<div class="cleaner"> </div>
</div>
</div>
<div id="content_right">
<div class="content_right_section_01">
<center>
advertisement
</center>
<a href="http://www.free-css.com/"><img src="fashion-images/image_13.jpg" alt="" /></a> </div>
<div class="content_right_section_01">
<h2>Subscribe Newsletter</h2>
<form method="get" action="http://www.free-css.com/">
<input type="checkbox" name="maillist" />
Daily fashion news
<p>Lorem ipsum nunc quis sem dolor sit amet, consectetuer adipiscing elit</p>
<input type="checkbox" name="maillist" />
Weekly fashion news
<p>Nunc at sem. Sed pellentesque placerat augue.</p>
<input name="email_address" type="text" id="email_addremss" value="email address..." />
<input type="submit" name="Submit" value="Subscribe" />
</form>
</div>
<div class="content_right_section_01">
<h2>Fashion Blog</h2>
<div class="blog_box">
<h5><a href="http://www.free-css.com/">Lorem ipsum nunc quis sem</a></h5>
Posted by <a href="http://www.free-css.com/"><span>Maecenas Magazine</span></a> in <a href="http://www.free-css.com/"><span>Donec mollis</span></a><br />
Dec 28, 2024 2:24 pm </div>
<div class="blog_box">
<h5><a href="http://www.free-css.com/">Donec mollis aliquet ligula</a></h5>
Posted by <a href="http://www.free-css.com/"><span>Lorem ipsm Magazine</span></a> in <a href="http://www.free-css.com/"><span>Maecenas adicing</span></a><br />
Dec 24, 2024 11:50 pm </div>
<div class="blog_box">
<h5><a href="http://www.free-css.com/">Sed pellentesque placerat augue</a></h5>
Posted by <a href="http://www.free-css.com/"><span>Curabitur eleifend Magazine</span></a> in <a href="http://www.free-css.com/"><span>Duis dolor</span></a><br />
Dec 21, 2024 8:16 pm </div>
</div>
<div class="content_right_section_01">
<h2>Quick Links</h2>
<div class="sister_links_box">
<h5>Designers</h5>
<a href="http://www.free-css.com/">Lorem ipsum nunc</a><br />
<a href="http://www.free-css.com/">Donec mollis aliquet</a><br />
<a href="http://www.free-css.com/">Maecenas adipiscing </a><br />
<a href="http://www.free-css.com/">Nunc quis sem nec</a><br />
<a href="http://www.free-css.com/">Duis mollis aliquet</a><br />
</div>
<div class="sister_links_box">
<h5>Models</h5>
<a href="http://www.free-css.com/">Cras nisl eros</a><br />
<a href="http://www.free-css.com/">Sed pellentesque</a><br />
<a href="http://www.free-css.com/">Donec a purus vel</a><br />
<a href="http://www.free-css.com/">Sed pretium</a><br />
<a href="http://www.free-css.com/">Nulla sed leo sed</a><br />
</div>
<div class="cleaner"> </div>
</div>
<div class="content_right_section_01"> <a target="_blank" href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/fashion-images/vcss-blue" alt="" vspace="8" border="0" /></a> </div>
</div>
<div class="cleaner"> </div>
</div>
<div id="footer"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Events</a> | <a href="http://www.free-css.com/">Gallery</a> | <a href="http://www.free-css.com/">Bars</a> | <a href="http://www.free-css.com/">Company</a> | <a href="http://www.free-css.com/">Contact</a><br />
Copyright 2024 <a href="http://www.free-css.com/"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com">Free Web Template</a><br />
<br />
<p>Lorem ipsum nunc quis sem dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis mollis aliquet ligula. Maecenas adipiscing elementum vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. </p>
</div>
</div>
</body>
</html>
Related examples in the same category