simple-blue
<!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>Simple Blue</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
background: #ffffff;
}
a:link, a:visited { color: #0066CC; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #990000; 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; }
.margin_r_20 { margin-right: 20px; }
.margin_r_40 { margin-right: 40px; }
.button_01 a {
clear: both;
display: block;
width: 57px;
height: 23px;
padding: 2px 5px 0 22px;
color: #333333;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
background: url(simple-blue-images/button_01.jpg) no-repeat;
}
.button_01 a:hover {
color: #ffffff;
background: url(simple-blue-images/button_01_hover.jpg) no-repeat;
}
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: #ba0808;
}
h3 {
margin: 0 0 5px 0;
padding: 5px 0;
font-size: 18px;
font-weight: normal;
color: #000000;
}
.image_wrapper {
margin-top: 3px;
margin-bottom: 5px;
border: 5px solid #e8e8e8;
padding: 1px;
background: #fff;
}
.fl_image {
float: left;
margin-right: 30px
}
.fr_image {
float: right;
margin-left: 20px
}
/* site title */
#site_title_bar_wrapper {
width: 100%;
height: 100px;
margin: 0 auto;
background: url(simple-blue-images/site_title_bg_wrapper.jpg) repeat-x top;
}
#site_title_bar {
width: 940px;
height: 100px;
margin: 0 auto;
padding: 0 20px;
background: url(simple-blue-images/site_title_bg.jpg) no-repeat top;
}
#site_title {
float: left;
width: 280px;
margin: 0px;
text-align: center;
padding: 30px 0 0 0;
}
#site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 28px;
color: #ba0808;
font-weight: bold;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title h1 a span {
display: block;
font-size: 13px;
color: #204567;
font-weight: bold;
margin-top: 10px;
margin-left: 5px;
letter-spacing: 2px;
}
/* end of menu */
#site_title_bar #menu {
float: right;
width: 540px; /* no of menu item * 90 */
height: 40px;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}
#menu li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu li a {
position: relative;
float: left;
display: block;
width: 80px;
height: 24px;
padding: 6px 0 0 0;
margin: 0 0 0 10px;
font-size: 14px;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #666666;
outline: none;
background: url(simple-blue-images/menu_bg_right.jpg) center right no-repeat;
}
#menu li a span {
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 30px;
background: url(simple-blue-images/menu_bg_left.jpg) no-repeat;
}
#menu li a:hover, #menu li .current {
position: relative;
color: #ffffff;
background: url(simple-blue-images/menu_bg_right_hover.jpg) center right;
}
#menu li a:hover span, #menu li .current span {
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 30px;
background: url(simple-blue-images/menu_bg_left_hover.jpg) no-repeat;
}
/* end of menu */
#site_title_bar #search_box {
float: right;
width: 280px;
height: 30px;
margin: 0 10px 0 0;
padding: 10px 0 0 0;
}
#search_box form {
float: left;
width: 280px;
height: 30px;
margin: 0;
padding: 0;
}
#searchfield {
height: 20px;
width: 195px;
padding: 3px 5px 3px 5px;
margin: 0px;
color: #666666;
font-size: 12px;
font-variant: normal;
line-height: normal;
background: #ffffff;
border: 1px solid #666666;
}
#searchbutton {
height: 30px;
width: 70px;
margin: 0px;
padding: 3px 0 9px 0;
cursor: pointer;
font-size: 12px;
font-weight: bold;
text-align: center;
vertical-align: bottom;
white-space: pre;
color: #2b3844;
}
/* menu */
/* banner */
#banner_wrapper_outter {
clear: both;
width: 100%;
height: 360px;
margin: 0 auto;
background: url(simple-blue-images/banner_bg_wrapper_outter.jpg) top repeat-x;
}
#banner_wrapper {
width: 100%;
height: 360px;
margin: 0 auto;
background: url(simple-blue-images/banner_bg_wrapper.jpg) no-repeat center top;
}
#banner {
width: 960px;
height: 360px;
padding: 0 10px;
margin: 0 auto;
background: url(simple-blue-images/banner_bg.jpg) no-repeat center top;
}
#banner_slider {
clear: both;
width: 960px;
height: 290px;
overflow: hidden;
margin-bottom: 10px;
padding: 70px 0 0 0;
background: none;
}
/* end of banner */
/* content */
#content {
width: 940px;
margin: 0 auto;
padding: 30px 20px;
background: url(simple-blue-images/content_bg_middle.png) repeat-y center;
}
#content #twitter_section {
clear: both;
margin-bottom: 20px;
}
#content #twitter_section p {
float: left;
width: 800px;
font-size: 26px;
line-height: 34px;
color: #2a90c1;
}
#content #twitter_section .followme a {
display: block;
float: right;
width: 128px;
height: 128px;
background: url(simple-blue-images/twitter.png) no-repeat;
}
#content p {
margin-bottom: 10px;
}
.box {
float: left;
width: 270px;
padding: 0 29px 0 0;
}
.box_border {
border-right: 1px dotted #999;
}
.box h2 {
color: #9b1919;
font-size: 20px;
margin-bottom: 20px;
}
.box .box_image_wrapper {
float: left;
text-align: center;
margin-right: 20px;
}
.em_text {
font-size: 14px;
color: #000;
}
.section_w940 {
clear: both;
width: 940px;
}
.section_w450 {
float: left;
width: 450px;
}
.news_box{
margin-bottom: 10px;
border-bottom: 1px dashed #ccc;
color: #2f5e9e;
}
.news_box .post_info {
color: #666;
}
.news_box .post_info a {
color: #000000;
font-weight: bold;
}
.news_box .post_info strong {
color: #000000;
}
.news_box a {
color: #2f5e9e;
}
.testimonial {
font-style: italic;
}
/* footer */
#footer_wrapper {
width: 100%;
margin: 0 auto;
background: #677684 url(simple-blue-images/footer_bg.jpg) repeat-x top;
}
#footer {
width: 960px;
margin: 0 auto;
padding: 60px 10px 20px 10px;
color: #cccccc;
}
#footer a {
color: #ffffff;
}
#footer .section_w240 {
float: left;
width: 200px;
padding-right: 40px;
}
#footer .section_w240 h3 {
font-size:14px;
font-weight: bold;
color: #ffffff;
}
#footer .footer_list {
margin: 0px;
padding: 0px;
list-style: none;
}
#footer .footer_list li {
margin: 0px;
padding: 3px 0;
}
#footer .footer_list li a {
color: #cccccc;
}
#footer .footer_list li a:hover {
color: #ffffff;
text-decoration: none;
}
/* end of footer */
</style>
<link href="css/jquery.ennui.contentslider.css" rel="stylesheet" type="text/css" media="screen,projection" />
<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>
</head>
<body>
<div id="site_title_bar_wrapper">
<div id="site_title_bar">
<div id="site_title">
<h1><a href="#">Simple Blue<span>free css template</span></a></h1>
</div>
<ul id="menu">
<li><a href="#" class="current"><span></span>Home</a></li>
<li><a href="#"><span></span>CSS</a></li>
<li><a href="#"><span></span>Flash</a></li>
<li><a href="#"><span></span>Gallery</a></li>
<li><a href="#"><span></span>About</a></li>
<li><a href="#"><span></span>Contact</a></li>
</ul>
<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="Search" alt="Search" id="searchbutton" />
</form>
</div>
</div>
<!-- end of site_title_bar -->
</div>
<!-- end of site_title_bar_wrapper -->
<div id="banner_wrapper_outter">
<div id="banner_wrapper">
<div id="banner">
<div id="banner_slider">
<!-- start of the slider -->
<div id="one" class="contentslider">
<div class="cs_wrapper">
<div class="cs_slider">
<div class="cs_article">
<div class="cs_article_inner">
<div class="img_frame"><img src="simple-blue-images/image_04.jpg" alt="" /></div>
<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 href="#">More <span>»</span></a> </div>
</div>
<!-- End cs_article -->
<div class="cs_article">
<div class="cs_article_inner">
<div class="img_frame"><img src="simple-blue-images/image_03.jpg" alt="" /></div>
<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 href="#">More <span>»</span></a> </div>
</div>
<!-- End cs_article -->
<div class="cs_article">
<div class="cs_article_inner">
<div class="img_frame"><img src="simple-blue-images/image_05.jpg" alt="" /></div>
<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 href="#">More <span>»</span></a> </div>
</div>
<!-- End cs_article -->
<div class="cs_article">
<div class="cs_article_inner">
<div class="img_frame"><img src="simple-blue-images/image_06.jpg" alt="" /></div>
<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 href="#">More <span>»</span></a> </div>
</div>
<!-- End cs_article -->
</div>
<!-- End cs_slider -->
</div>
<!-- End cs_wrapper -->
</div>
<!-- End contentslider -->
<!-- Site JavaScript -->
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.ennui.contentslider.js"></script>
<script type="text/javascript">
$(function () {
$('#one').ContentSlider({
width: '960px',
height: '250px',
speed: 400,
easing: 'easeOutSine'
});
});
</script>
<script src="js/jquery.chili-2.2.js" type="text/javascript"></script>
<script src="js/chili/recipes.js" type="text/javascript"></script>
<div class="cleaner"></div>
<!-- end of the slider -->
</div>
<!-- end of popular_posts -->
</div>
<!-- end of banner -->
</div>
<!-- end of banner_wrapper -->
</div>
<!-- end of banner_wrapper_outter -->
<div id="content">
<div id="twitter_section">
<p>"Sed id tortor vitae nisi consectetur tempus. Pellentesque tellus est, adipiscing id porttitor vitae, vestibulum id neque."</p>
<div class="followme"><a href="#"></a></div>
<div class="cleaner"></div>
</div>
<div class="section_w940">
<div class="box margin_r_20 box_border">
<h2>Quality Product</h2>
<div class="box_image_wrapper"> <img src="simple-blue-images/folder.png" alt="" /> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dictum tortor. </p>
<div class="cleaner_h10"></div>
<div class="button_01"><a href="#">More</a></div>
</div>
<div class="box margin_r_20 box_border">
<h2>Special Service</h2>
<div class="box_image_wrapper"> <img src="simple-blue-images/paint.png" alt="" /> </div>
<p>Proin eleifend quam eu purus aliquet scelerisque. Sed non nibh a urna tristique vestibulum.</p>
<div class="cleaner_h10"></div>
<div class="button_01"><a href="#">More</a></div>
</div>
<div class="box">
<h2>Customer Support</h2>
<div class="box_image_wrapper"> <img src="simple-blue-images/safe.png" alt="" /> </div>
<p>Morbi suscipit, nisl eget porttitor hendrerit, arcu sapien cursus enim, id luctus felis metus ac urna.</p>
<div class="cleaner_h10"></div>
<div class="button_01"><a href="#">More</a></div>
</div>
<div class="cleaner"></div>
</div>
<div class="cleaner_h60"></div>
<div class="section_w940">
<div class="section_w450 margin_r_40">
<h2>About Us</h2>
<p>Simple Blue is a free web template brought to you by <a href="#">TemplateMo.com</a> website. You may use this template in your websites. Credit goes to <a href="#">Smashing Magazine</a> for icons used in this template. Morbi sed nulla ac est cursus suscipit eu ac lectus. Curabitur ullamcorper nibh nisi, sed eleifend dolor. Pellentesque adipiscing sollicitudin sapien nec aliquet.</p>
<div class="button_01"><a href="#">More</a></div>
<div class="cleaner_h40"></div>
<h2>Testimonial</h2>
<p class="testimonial">" Vestibulum iaculis ultricies tincidunt. Donec id metus ante. Etiam sodales aliquam orci nec ultricies. Cras tellus odio, facilisis non dapibus ac, convallis id diam. Aenean mattis imperdiet vulputate. Sed in odio a urna rutrum vestibulum. Nunc tincidunt tincidunt posuere. "</p>
<div class="cleaner"></div>
<a href="#">www.templatemo.com</a> </div>
<div class="section_w450">
<h2>Popular Posts</h2>
<div class="news_box"> <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse iaculis, mauris sit amet molestie congue.</a>
<p class="post_info">Posted in <a href="#">Templates</a> by <a href="#">Admin</a> on <strong>October 22, 2048</strong></p>
</div>
<div class="news_box"> <a href="#">Donec convallis dictum diam sit amet tristique. Pellentesque pharetra dignissim arcu eget tempor.</a>
<p class="post_info">Posted in <a href="#">General</a> by <a href="#">Admin</a> on <strong>October 21, 2048</strong></p>
</div>
<div class="news_box"> <a href="#">Nulla vitae erat id sapien aliquet accumsan. Nullam vel ante in lectus venenatis interdum ac pretium nisi.</a>
<p class="post_info">Posted in <a href="#">Gallery</a> by <a href="#">Admin</a> on <strong>October 20, 2048</strong></p>
</div>
<div class="news_box"> <a href="#">Mauris semper dui non risus suscipit bibendum. Nam purus diam, feugiat nec dictum in, tempus sit amet ante. </a>
<p class="post_info">Posted in <a href="#">Templates</a> by <a href="#">Admin</a> on <strong>October 19, 2048</strong></p>
</div>
</div>
<div class="cleaner"></div>
</div>
<div class="cleaner"></div>
</div>
<!-- end of content -->
<div id="footer_wrapper">
<div id="footer">
<div class="section_w240">
<h3>Privacy Policy</h3>
<div class="sub_content">
<p>Nullam ultrices tempor nisi, ac egestas diam aliquam a. Ut eleifend semper turpis, id feugiat arcu dignissim eu. Donec mattis adipiscing imperdiet.</p>
</div>
</div>
<div class="section_w240">
<h3>Partners</h3>
<div class="sub_content">
<ul class="footer_list">
<li><a href="#">Free CSS Templates</a></li>
<li><a href="#">Free Flash Templates</a></li>
<li><a href="#">Template Store</a></li>
<li><a href="#">Web Design Tips</a></li>
<li><a href="#">Best Flash Gallery</a></li>
</ul>
</div>
</div>
<div class="section_w240">
<h3>About</h3>
<div class="sub_content">
<ul class="footer_list">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Cum sociis</a></li>
<li><a href="#">Donec quam</a></li>
<li><a href="#">Nulla consequat</a></li>
<li><a href="#">In enim justo</a></li>
</ul>
</div>
</div>
<div class="section_w240">
<h3>XHTML/CSS validations</h3>
<div class="sub_content">
<p>Aliquam vehicula accumsan arcu, vestibulum cursus purus lobortis eu. Pellentesque vitae neque non lorem vehicula adipiscing. </p>
<div class="cleaner_h20"></div>
</div>
</div>
<div class="cleaner_h40"></div>
<center>
Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a>
</center>
</div>
<!-- end of footer -->
</div>
<!-- end of footer wrapper -->
</body>
</html>
Related examples in the same category