fashion-blog
<!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 Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.7em;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background: url(fashion-blog-images/main_bg.jpg) repeat;
}
a:link, a:visited { color: #5d3206; font-size:12px; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #FFFF66; font-size:12px; text-decoration: underline; }
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }
.fl { float: left; }
.fr { float: right; }
.margin_r_10 { margin-right: 10px; }
.margin_r_20 { margin-right: 20px; }
.button_02 a {
display: inline-block;
padding: 2px 5px;
color: #ffffff;
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
background: #201f1a;
}
.button_02 a:hover {
background: #94591a;
color: #ffffff;
}
h1 {
margin: 0px;
padding: 2px 0;
font-size: 30px;
font-weight: bold;
}
h2 {
margin: 0 0 10px 0;
padding: 2px 0;
font-size: 24px;
line-height: 24px;
font-weight: bold;
color: #fad40d;
}
h3 {
margin: 0 0 10px 0;
padding: 2px 0;
font-size: 18px;
font-weight: normal;
color: #000000;
border-bottom: 1px solid #333;
}
h4 {
margin: 0 0 0 0;
padding: 2px 0;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.image_wrapper {
margin-top: 3px;
margin-bottom: 5px;
}
.fl_image {
float: left;
margin-right: 30px
}
.fr_image {
float: right;
margin-left: 20px
}
/* site title */
#site_title_bar_wrapper_outter {
width: 100%;
height: 175px;
margin: 0 auto;
background: url(fashion-blog-images/site_title_repeat_bg.jpg) repeat-x;
}
#site_title_bar_wrapper_inner {
width: 100%;
height: 175px;
margin: 0 auto;
background: url(fashion-blog-images/site_title_wrapper_bg.jpg) center top no-repeat;
}
#site_title_bar {
width: 980px;
height: 175px;
margin: 0 auto;
background: url(fashion-blog-images/site_title_bg.jpg) center top no-repeat;
}
#site_title_bar_top {
width: 980px;
height: 120px;
}
#site_title_bar_top #site_title {
float: left;
width: 325px;
height: 80px;
padding: 30px 0 0 0;
}
#site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 24px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title h1 a span {
display: block;
margin-top: 2px;
font-size: 12px;
color: #ffffff;
font-weight: normal;
}
#site_title h1 a:hover span {
font-weight: normal;
}
#site_title_bar_top #search_box {
float: right;
width: 280px;
height: 27px;
margin: 60px 0 0 0;
padding: 0;
background: url(fashion-blog-images/search_box.png) no-repeat;
}
#search_box form {
float: left;
width: 280px;
height: 27px;
margin: 0;
padding: 0;
}
#searchfield {
height: 18px;
width: 180px;
padding: 2px 5px;
margin: 0px;
color: #fad40d;
font-size: 12px;
font-variant: normal;
line-height: normal;
background: none;
border: 1px dashed #aeada4;
}
#searchbutton {
height: 19px;
width: 70px;
margin: 0px;
padding: 2px 0 22px 0;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
color: #b17433;
background: url(fashion-blog-images/search_button.jpg);
border: none;
}
/* menu */
#menu {
clear: both;
width: 980px;
height: 50px;
padding: 0;
margin: 0 auto;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu ul li a {
float: left;
display: block;
height: 35px;
margin-right: 3px;
padding: 0 20px;
padding-top: 15px;
text-align: center;
font-size: 14px;
text-decoration: none;
color: #26210a;
font-weight: bold;
outline: none;
}
#menu li a:hover, #menu li .current {
color: #d9c665;
}
/* end of menu*/
/* end of site title */
/* content */
#content_wrapper {
clear: both;
width: 100%;
margin: 0 auto;
background: url(fashion-blog-images/content_wrapper_bg.jpg) top center no-repeat;
}
#content {
width: 980px;
margin: 0 auto;
padding: 40px 0;
background: url(fashion-blog-images/content_bg.jpg) top center no-repeat;
}
#popular_posts {
clear: both;
width: 900px;
height: 200px;
overflow: hidden;
padding: 50px 40px 70px 40px;
margin-bottom: 40px;
background: url(fashion-blog-images/popular_post_bg.png) top center no-repeat;
}
#main_content_outter {
float: left;
border: 1px solid #868478;
background: #9e9c93;
padding: 9px;
width: 680px;
}
#main_content_inner {
background: #8e8c83 url(fashion-blog-images/side_column_bg.jpg) right repeat-y;
}
#main_column {
float: left;
width: 400px;
padding: 20px;
}
#side_column_01 {
float: right;
width: 200px;
padding: 20px;
}
#side_column_02 {
float: right;
width: 280px;
}
.post_section {
clear: both;
padding-bottom: 20px;
border-bottom: 1px dashed #333;
margin-bottom: 20px;
}
.post_section p {
margin-bottom: 20px;
}
.post_info {
font-size: 14px;
margin-bottom: 20px;
}
.post_info a {
color: #CCC;
padding: 0 2px;
background: #5b5952;
}
.post_info a:hover {
text-decoration: none;
}
.post_content img {
margin-bottom: 10px;
}
.post_content .link_button a {
margin-top: 10px;
color: #5d3206;
text-decoration: none;
}
.post_content .link_button a:hover {
color: #FFFF66;
text-decoration: underline;
}
.side_column_01_section {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed #333;
}
.side_menu {
padding: 0px;
margin: 0px;
list-style: none;
}
.side_menu li {
margin: 0px;
padding: 2px 0;
border-bottom: 1px dashed #666;
}
.side_menu li a {
color: #000000;
}
.recent_post {
color: #383737;
margin-bottom: 5px;
border-bottom: 1px dashed #666;
}
.recent_post h4 a {
margin: 0 0 0 0;
padding: 2px 0;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.side_column_02_section {
clear: both;
}
.side_column_02_section h3 {
width: 260px;
height: 42px;
padding: 28px 0 0 20px;;
margin: 0px;
border: none;
color: #c5c0ac;
background: url(fashion-blog-images/side_column_header_bg.png) no-repeat;
}
.side_column_02_section .side_column_02_section_content {
padding: 0 20px 20px 20px;
}
.section_rss_twitter a {
display: block;
width: 200px;
padding: 20px 0 0 40px;
font-size: 16px;
font-weight: bold;
color: #37362f;
margin-bottom: 20px;
}
.section_rss_twitter a:hover {
text-decoration: none;
}
.section_rss_twitter a span {
font-size: 12px;
margin-top: 5px;
display: block;
letter-spacing: 5px;
}
.rss a {
background: url(fashion-blog-images/rss_icon.png) right bottom no-repeat;
}
.twitter a {
background: url(fashion-blog-images/twitter_icon.png) right bottom no-repeat;
}
/* end of content */
/* footer */
#footer_wrapper_outter {
clear: both;
width: 100%;
margin: 0 auto;
background: url(fashion-blog-images/footer_repeat_bg.jpg) repeat;
}
#footer_wrapper_inner {
width: 100%;
margin: 0 auto;
background: url(fashion-blog-images/footer_bg.jpg);
background-position: top;
background-repeat: repeat-x;
}
#footer {
width: 980px;
margin: 0 auto;
padding: 40px 0;
color: #9e9c93;
}
#footer .section_w200 {
float: left;
width: 200px;
padding-right: 45px;
}
#footer .section_w200 h4 {
color: #bab8b1;
margin: 0 0 10px 0;
padding: 3px 0;
}
#footer p {
margin-bottom: 10px;
}
.footer_list_menu {
margin: 0px;
padding: 0px;
list-style: none;
}
.footer_list_menu li {
margin: 0px;
padding: 3px 0;
}
.footer_list_menu li a {
color: #9e9c93;
}
/* end of footer -->
<!--
/**
* Slideshow style rules.
*/
#slideshow {
margin:0 auto;
width: 900px;
height:200px;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width: 750px;
height: 200px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
width: 680px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height: 200px;
margin:0 auto;
}
.slide img {
float:left;
margin-right: 40px;
border:1px solid #4f4b42;
}
#slideshow #slidesContainer .slide a:hover{
text-decoration: none;
}
#slideshow #slidesContainer .slide a p {
color: #000;
}
/**
* Slideshow controls style rules.
*/
.control {
display:block;
width: 30px;
height: 200px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top: 85px;
left:0;
background:transparent url(fashion-blog-images/slider_left_control.png) no-repeat 0 0;
}
#rightControl {
top: 85px;
right:0;
background: transparent url(fashion-blog-images/slider_right_control.png) no-repeat 0 0;
}
</style>
<script language="javascript" type="text/javascript">
function clearText(field) {
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 750;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float': 'left',
'width': slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control').bind('click', function () {
// Determine new position
currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft': slideWidth * (-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position) {
// Hide left arrow if position is first slide
if (position == 0) {
$('#leftControl').hide()
} else {
$('#leftControl').show()
}
// Hide right arrow if position is last slide
if (position == numberOfSlides - 1) {
$('#rightControl').hide()
} else {
$('#rightControl').show()
}
}
});
</script>
</head>
<body>
<div id="site_title_bar_wrapper_outter">
<div id="site_title_bar_wrapper_inner">
<div id="site_title_bar">
<div id="site_title_bar_top">
<div id="site_title">
<h1><a href="#"><img src="fashion-blog-images/logo.png" alt="" /> </a></h1>
</div>
<div id="search_box">
<form action="#" method="get">
<input type="text" value="Enter keyword here..." name="q" size="10" id="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="submit" name="Search" value="" alt="Search" id="searchbutton" />
</form>
</div>
</div>
<!-- end of site_title_bar_top -->
<div id="menu">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
</div>
<!-- end of menu -->
</div>
<!-- end of site_title_bar -->
</div>
<!-- end of site_title_bar_wrapper_inner -->
</div>
<!-- end of site_title_bar_wrapper_outter -->
<div id="content_wrapper">
<div id="content">
<div id="popular_posts">
<div id="slideshow">
<div id="slidesContainer">
<div class="slide"> <a href="#"> <img src="fashion-blog-images/image_06.jpg" alt="" width="380" height="190" />
<h2>Lorem ipsum dolor sit</h2>
<p>Vivamus vitae nibh eu sem malesuada rutrum et sit amet magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent aliquam velit a magna sodales quis elementum ipsum auctor. Ut at metus leo, et dictum sem.</p>
</a> </div>
<div class="slide"> <a href="#"> <img src="fashion-blog-images/image_04.jpg" alt="" width="380" height="190" />
<h2>Mauris aliquam ultrices lacus</h2>
<p>Aenean fringilla vehicula felis, eu blandit tortor aliquam et. Nunc sed diam sed dui iaculis pharetra eu sed elit. Nunc arcu sapien, pellentesque at posuere nec, tincidunt dignissim enim. Ut sem mauris, aliquet ut sagittis vitae, condimentum eget augue. Donec sapien neque, egestas vitae auctor quis, pellentesque at augue.</p>
</a> </div>
<div class="slide"> <a href="#"> <img src="fashion-blog-images/image_05.jpg" alt="" width="380" height="190" />
<h2>Nullam pharetra adipiscing diam</h2>
<p>Praesent at dui augue. Proin consectetur elementum sem, in blandit urna porta sed. Sed tortor ipsum, scelerisque vel lobortis aliquam, bibendum sit amet neque. In id erat in quam bibendum lacinia. Curabitur imperdiet viverra scelerisque. Phasellus quis egestas risus.</p>
</a> </div>
<div class="slide"> <a href="#"> <img src="fashion-blog-images/image_03.jpg" alt="" width="380" height="190" />
<h2>Pellentesque ut iaculis enim</h2>
<p>Sed id tortor vitae nisi consectetur tempus. Pellentesque tellus est, adipiscing id porttitor vitae, vestibulum id neque. Aliquam tellus dui, vehicula sed placerat sed, scelerisque ultricies tortor. Donec ornare blandit erat pellentesque molestie. Suspendisse potenti. </p>
</a> </div>
</div>
</div>
<!-- end of slide show -->
</div>
<!-- end of popular_posts -->
<div id="main_content_outter">
<div id="main_content_inner">
<div id="main_column">
<div class="post_section">
<h2>Aliquam lorem ante dapibus</h2>
<div class="post_info"> May 26th in <a href="#">Web Templates</a> by <a href="#">TemplateMo.com</a> </div>
<div class="post_content"> <img src="fashion-blog-images/image_01.jpg" alt="" />
<p>This web template is provided by TemplateMo.com for free of charge. You may download, edit and apply this template for your websites. Credit goes to <a href="#">Smashing Magazine</a> for icons used in this template. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend ornare ipsum, eu tincidunt nunc pulvinar tincidunt. Integer vel erat purus, quis pulvinar metus.</p>
<div class="link_button"><a href="#">Continue reading...</a> | <a href="#">Comments (120)</a></div>
</div>
</div>
<!-- end of a post -->
<div class="post_section">
<h2>Donec dapibus tincidunt nulla</h2>
<div class="post_info"> May 24th in <a href="#">Web Templates</a> by <a href="#">TemplateMo.com</a> </div>
<div class="post_content"> <img src="fashion-blog-images/image_02.jpg" alt="" />
<p>Maecenas nec est risus, commodo blandit sapien. Pellentesque laoreet tempus justo et euismod. Donec in tortor vitae elit mattis tincidunt. Donec non ipsum nibh, ultrices molestie dui. Suspendisse magna ligula, laoreet vulputate accumsan tincidunt, sodales molestie est. Cras nec dui quis ipsum blandit aliquet. Fusce nec ultricies sem. Fusce in elit id nisl tempus luctus ac nec augue.</p>
<div class="link_button"><a href="#">Continue reading...</a> | <a href="#">Comments (110)</a></div>
</div>
</div>
<!-- end of a post -->
<div class="cleaner"></div>
</div>
<div id="side_column_01">
<div class="side_column_01_section"> <a href="#"><img src="fashion-blog-images/200_200_ads.jpg" alt="" /></a> </div>
<div class="side_column_01_section">
<h3>Another Menu</h3>
<ul class="side_menu">
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Nunc quis sem nec tellus</a></li>
<li><a href="#">Pellentesque vitae magna</a></li>
<li><a href="#">Aenean vulputate</a></li>
<li><a href="#">Duis pulvinar scelerisque</a></li>
<li><a href="#">Quisque gravida faucibus</a></li>
<li><a href="#">Donec iaculis felis id neque</a></li>
<li><a href="#">Vivamus sagittis varius lorem</a></li>
</ul>
</div>
<div class="side_column_01_section">
<h3>Recent Posts</h3>
<div class="recent_post">
<h4><a href="#">Sed metus nisl, placerat vitae iaculis in</a></h4>
Aliquam nec est quis felis venenatis imperdiet. Duis placerat luctus sem. </div>
<div class="recent_post">
<h4><a href="#">Donec molestie aliquet nisi eu facilisis</a></h4>
In vitae placerat enim. Aenean elementum lectus eleifend a pellentesque lacus.</div>
<div class="recent_post">
<h4><a href="#">Proin magna amet fermentum dignissim</a></h4>
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra.</div>
</div>
<div class="cleaner"></div>
</div>
<div class="cleaner"></div>
</div>
<!-- end of main_content_inner -->
<div class="cleaner"></div>
</div>
<!-- end of main_content_outter -->
<div id="side_column_02">
<div class="side_column_02_section">
<div class="side_column_02_section_content">
<div class="section_rss_twitter twitter"> <a href="#">FOLLOW ME <span>on twitter</span></a> </div>
<div class="margin_bottom_20"></div>
<div class="section_rss_twitter rss"> <a href="#">SUBSCRIBE <span>rss feed</span></a> </div>
</div>
</div>
<div class="side_column_02_section">
<h3>Partners</h3>
<div class="side_column_02_section_content">
<ul class="side_menu">
<li><a href="#">Free CSS Templates</a></li>
<li><a href="#">Free Flash Templates</a></li>
<li><a href="#">Flash Photo Gallery</a></li>
<li><a href="#">Web Design Blog</a></li>
<li><a href="#">Best Flash Gallery</a></li>
</ul>
</div>
</div>
<div class="side_column_02_section">
<h3>Community Links</h3>
<div class="side_column_02_section_content">
<div class="recent_post">
<h4><a href="#">Sed metus nisl, placerat vitae iaculis in</a></h4>
Aliquam nec est quis felis venenatis imperdiet. Duis placerat luctus sem. </div>
<div class="recent_post">
<h4><a href="#">Donec molestie aliquet nisi eu facilisis</a></h4>
In vitae placerat enim. Aenean elementum lectus eleifend a pellentesque lacus aliquet. </div>
<div class="recent_post">
<h4><a href="#">Proin magna amet fermentum dignissim</a></h4>
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra erat leo in elit. </div>
<div class="recent_post">
<h4><a href="#">Sed metus nisl, placerat vitae iaculis in</a></h4>
Aliquam nec est quis felis venenatis imperdiet. Duis placerat luctus sem. </div>
<div class="recent_post">
<h4><a href="#">Donec molestie aliquet nisi eu facilisis</a></h4>
In vitae placerat enim. Aenean elementum lectus eleifend a pellentesque lacus aliquet. </div>
<div class="cleaner_h10"></div>
<div class="button_02 fl margin_r_10"><a href="#">Submit</a></div>
<div class="button_02 fl"><a href="#">More</a></div>
</div>
</div>
</div>
<!-- end of side_column_02 -->
<div class="cleaner"></div>
</div>
<!-- end of content -->
<div class="cleaner"></div>
</div>
<div id="footer_wrapper_outter">
<div id="footer_wrapper_inner">
<div id="footer">
<div class="section_w200">
<h4>Copyright Information</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu orci vel nisi sollicitudin convallis sed in velit. Vivamus gravida sagittis turpis, eget sagittis odio ullamcorper fringilla.</p>
<p>Nunc sed diam sed dui iaculis pharetra eu sed elit. Nunc arcu sapien, pellentesque at posuere nec, tincidunt dignissim enim.</p>
</div>
<div class="section_w200">
<h4>Your Feedback</h4>
<p>Mauris aliquam ultrices lacus eget rhoncus. Pellentesque gravida porta nulla at mollis. Nam neque tellus, hendrerit et sollicitudin id, pulvinar cursus quam. Suspendisse potenti.</p>
<p>Sed imperdiet, odio vel ullamcorper tempor, tortor velit vestibulum risus, a fermentum justo sapien non risus.</p>
<div class="button_02"><a href="#">Make a suggestion</a></div>
</div>
<div class="section_w200">
<h4>Friends</h4>
<ul class="footer_list_menu">
<li><a href="#">Free CSS Templates</a></li>
<li><a href="#">Flash Templates</a></li>
<li><a href="#">Premium Templates</a></li>
<li><a href="#">Web Design Blog</a></li>
<li><a href="#">Flash Web Gallery</a></li>
</ul>
</div>
<div class="section_w200">
<h4>XHTML/CSS validations</h4>
<a href="#"><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 href="#"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/fashion-blog-images/vcss-blue" alt="" vspace="8" border="0" /></a> </div>
<div class="cleaner"></div>
</div>
<!-- end of footer -->
<div class="cleaner"></div>
</div>
<!-- end of footer_wrapper_inner -->
<div class="cleaner"></div>
</div>
<!-- end of footer_wrapper_outter -->
</body>
</html>
Related examples in the same category