<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sky Blue - free website template</title>
<meta name="keywords" content="sky blue, free website template, CSS, HTML, 3-column" />
<meta name="description" content="Sky Blue is a free website template provided by templatemo.com" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<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="templatemo_top_bar">
<div class="rss_contact_section">
<div class="rss_contact rss_button">
<a href="#">Subscribe</a>
</div>
<div class="rss_contact contact_button">
<a href="#">Contact</a>
</div>
</div>
</div> <!-- end of top bar -->
<div id="templatemo_banner_bar_wrapper">
<div id="templatemo_banner_bar">
<h1>
<a href="#">Sky Blue
<span>free css template</span></a>
</h1>
</div> <!-- end of banner -->
</div> <!-- end of banner wrapper -->
<div id="templatemo_menu_wrapper">
<div id="templatemo_menu">
<ul>
<li><a href="#" class="current fast">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div> <!-- end of menu -->
</div> <!-- end of menu wrapper -->
<div id="templatemo_content">
<div id="main_column">
<div class="section_w500">
<h2>Welcome to Sky Blue</h2>
<a href="http://www.templatemo.com/page/1"><img class="image_wrapper fl_image" src="images/templatemo_image_01.jpg" alt="html css templates" /></a>
<p><span class="em_text">Sky Blue is a <a href="http://www.templatemo.com" target="_parent">Free CSS Template</a> is provided by <a href="http://www.templatemo.com" target="_parent">templatemo.com</a> for anyone. Feel free to download and use this template for your websites. Credit goes to <a href="http://www.photovaco.com" target="_blank">Free Photos</a> for photos.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae turpis quis dui pellentesque semper. Suspendisse potenti. Fusce ullamcorper pellentesque lacinia.</p>
</div>
<div class="margin_bottom_20"></div>
<div class="section_w500">
<h2><span></span>Best Website Templates</h2>
<a href="http://www.templatemo.com/page/2"><img class="image_wrapper fr_image" src="images/templatemo_image_02.jpg" alt="web templates" /></a>
<p>Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow">CSS</a>. Nulla tellus nisl, malesuada eu dictum blandit, feugiat ac sem. Morbi justo lorem, dapibus sed aliquet id, aliquam eu justo. Etiam urna nisi, hendrerit eu pellentesque quis, aliquet nec velit. Etiam at justo et risus feugiat ullamcorper ac non ligula. Morbi dapibus, ipsum eu laoreet fermentum, mauris mauris sollicitudin ante, ac ultricies velit lectus at justo. Etiam mi lacus, faucibus eu egestas eget, lacinia in libero. Aenean libero mauris, convallis tristique molestie at, vehicula feugiat neque. Morbi fermentum, eros eget pulvinar sollicitudin, risus purus iaculis turpis, varius consectetur eros leo eget ipsum.</p>
<div class="margin_bottom_20"></div>
<ul class="list_01">
<li>Maecenas malesuada congue nisi in interdum.</li>
<li>Donec mattis urna id lorem blandit vitae pulvinar risus aliquam.</li>
<li>Vestibulum suscipit erat vitae libero varius aliquam. Phasellus at tortor dui, ac elementum mauris.</li>
</ul>
<div class="button_01"><a href="#">Read more</a></div>
</div>
<div class="cleaner"></div>
</div> <!-- end of main column -->
<div class="side_column_w200">
<div class="box">
<h3>Categories</h3>
<ul class="side_menu">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Donec mattis egestas</a></li>
<li><a href="#">Phasellus id purus</a></li>
<li><a href="#">Nulla consequat</a></li>
<li><a href="#">Mauris varius risus</a></li>
<li><a href="#">Aenean vulputate</a></li>
<li><a href="#">Etiam ultricies</a></li>
<li><a href="#">Fusce quis diam sit</a></li>
<li><a href="#">Sed pellentesque</a></li>
<li><a href="#">Donec euismod enim</a></li>
</ul>
</div>
<div class="box">
<h3>Partners</h3>
<ul class="side_menu">
<li><a href="http://www.templatemo.com" target="_parent">CSS Templates</a></li>
<li><a href="http://www.flashmo.com" target="_parent">Flash Templates</a></li>
<li><a href="http://www.koflash.com" target="_parent">Websites Gallery</a></li>
<li><a href="http://www.webdesignmo.com/blog" target="_parent">Web Design Blog</a></li>
</ul>
</div>
</div>
<!-- end of side column 1 -->
<div class="side_column_w200">
<div class="box">
<h3>Search</h3>
<form action="#" method="get">
<input type="text" value="Enter keyword here..." name="q" size="10" class="inputfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="submit" name="Search" value="Search" alt="Search" class="submitbutton" title="Search" />
</form>
<div class="cleaner"></div>
</div>
<div class="box">
<h3>Popular Topics</h3>
<div class="news_section">
<div class="news_title"><a href="#">Lorem ipsum dolor sit amet consectetur </a></div>
<p>Maecenas tellus erat, dictum vel semper a, dapibus ac elit. Nunc rutrum pretium porta.</p>
</div>
<div class="news_section">
<div class="news_title"><a href="#">Aenean feugiat mattis est nec egestas</a></div>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
<div class="box">
<h3>Quick Contact</h3>
<form action="#" method="get">
<input type="text" value="Enter your name" name="name" size="10" class="inputfield" title="name" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="text" value="Enter your email address" name="email" size="10" class="inputfield" title="email" onfocus="clearText(this)" onblur="clearText(this)" />
<textarea id="message_input" rows="5" cols=""></textarea>
<input type="submit" name="Submit" value="Submit" alt="Submit" class="submitbutton" title="Submit" />
</form>
</div>
</div> <!-- end of right side column -->
<div class="cleaner"></div>
</div> <!-- end of content -->
<div id="templatemo_footer_wrapper">
<div id="templatemo_footer">
<div class="section_w184">
<h4>Services</h4>
<ul class="footer_menu_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 class="section_w184">
<h4>Support</h4>
<ul class="footer_menu_list">
<li><a href="#">Nullam quis</a></li>
<li><a href="#">Sed consequat</a></li>
<li><a href="#">Cras dapibus</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Cum sociis</a></li>
</ul>
</div>
<div class="section_w184">
<h4>About</h4>
<ul class="footer_menu_list">
<li><a href="#">Aenean vulputate</a></li>
<li><a href="#">Etiam ultricies</a></li>
<li><a href="#">Nullam quis</a></li>
<li><a href="#">Sed consequat</a></li>
<li><a href="#">Cras dapibus</a></li>
</ul>
</div>
<div class="section_w368">
<h4>Privacy Policy</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non rutrum arcu. Vestibulum ornare dolor eget leo placerat sed tincidunt dolor interdum</p>
<div class="margin_bottom_10"></div>
<a 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="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a>
</div>
<div class="margin_bottom_20"></div>
<div class="section_w940">
Copyright © 2048 <a href="#">Your Company Name</a> | <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
</div>
<div class="cleaner"></div>
</div> <!-- end of footer -->
</div> <!-- end of footer wrapper -->
</body>
</html>
/*
Credit: http://www.templatemo.com
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #e4edf5;
background: #50a1e5;
}
a:link, a:visited { color: #ffffff; text-decoration: underline; font-weight: normal;}
a:active, a:hover { color: #ffffff; text-decoration: none;}
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }
.margin_right_20 { margin-right: 20px; }
.margin_right_40 { margin-right: 40px; }
.button_01 a {
clear: both;
display: block;
width: 100px;
height: 23px;
padding-top: 3px;
background: url(http://i54.tinypic.com/10db67n.jpg) no-repeat;
color: #ffffff;
font-size: 12px;
font-weight: normal;
text-align: center;
text-decoration: none;
}
.fl { float: left; }
.fr { float: right; }
h1 {
margin: 0px;
padding: 10px 0;
font-size: 34px;
color: #ffffff;
font-weight: normal;
}
h2 {
margin: 0 0 20px 0;
padding: 5px 0 10px 0;
font-size: 24px;
color: #ffffff;
font-weight: normal;
border-bottom: 1px dotted #ffffff;
}
h3 {
margin: 0 0 10px 0;
padding: 0 0 5px 0;
font-size: 20px;
color: #ffffff;
font-weight: normal;
border-bottom: 1px dotted #ffffff;
}
h4 {
margin: 0 0 10px 0;
padding: 0 0 5px 0;
font-size: 20px;
color: #ffffff;
font-weight: normal;
}
.em_text {
color: #ffffff;
}
/* top bar */
#templatemo_top_bar {
clear: both;
width: 940px;
height: 45px;
padding: 5px 20px 0 20px;;
margin: 0 auto;
background: #50a1e5 url(http://i53.tinypic.com/2jd1a53.jpg) no-repeat;
}
.rss_contact_section {
float:right;
width: 400px;
}
.rss_contact a {
float: left;
display: block;
width: 130px;
height: 25px;
color: #ffffff;
text-align: right;
margin: 0 10px;
padding-right: 50px;
padding-top: 20px;
font-size: 12px;
text-decoration: none;
}
.rss_button a {
background: url(http://i51.tinypic.com/11t4l13.png) no-repeat bottom right;
}
.contact_button a {
background: url(http://i55.tinypic.com/n3p7xy.png) no-repeat bottom right;
}
/* end of top bar */
/* banner */
#templatemo_banner_bar_wrapper {
clear: both;
width: 100%;
height: 100px;
margin: 0 auto;
background: url(http://i52.tinypic.com/16acxo2.jpg) repeat-x;
}
#templatemo_banner_bar {
width: 940px;
height: 80px;
margin: 0 auto;
padding: 20px 20px 0 20px;
}
#templatemo_banner_bar h1 a {
margin: 0px;
padding: 0px;
font-size: 30px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#templatemo_banner_bar h1 a:hover {
font-weight: normal;
text-decoration: none;
}
#templatemo_banner_bar h1 a span {
display: block;
margin-top: 10px;
font-size: 14px;
color: #90c4f0;
}
/* end of banner */
/* menu */
#templatemo_menu_wrapper {
clear: both;
width: 100%;
height: 40px;
margin: 0 auto;
background: url(http://i56.tinypic.com/2eulrp2.jpg) repeat-x;
}
#templatemo_menu {
width: 940px;
height: 40px;
margin: 0 auto;
padding: 0 20px;
background: url(http://i51.tinypic.com/1zwgkdj.jpg) no-repeat;
}
#templatemo_menu ul {
padding: 6px 0 0 0;
margin: 0px;
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
padding: 3px 0;
margin: 0 30px;
margin-right: 10px;
font-size: 14px;
font-weight: normal;
text-decoration: none;
color: #c5dbed;
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #ffffff;
border-bottom: 1px dotted #ffffff;
}
#templatemo_menu li .fast {
margin-left: 0px;
}
/* end of menu */
/* content */
#templatemo_content {
clear: both;
width: 940px;
padding: 40px 20px 0 20px;
margin: 0 auto;
background: url(http://i54.tinypic.com/2uf906u.jpg) repeat-y;
}
#main_column {
float: left;
width: 500px;
margin-right: 40px;
}
.section_w500 {
clear: both;
margin-bottom: 30px;
}
.section_w500 p {
text-align: justify;
margin-bottom: 10px;
}
#main_column .image_wrapper {
border: 1px solid #ffffff;
margin-top: 3px;
margin-bottom: 3px;
}
#main_column .fl_image {
float: left;
margin-right: 20px
}
#main_column .fr_image {
float: right;
margin-left: 20px
}
.list_01 {
clear: both;
margin: 0 0 30px 50px;
padding: 0px;
}
.list_01 li {
padding: 0px;
margin: 0 0 10px 0;
list-style: decimal;
}
.list_01 li a:hover {
color: #ffffff;
text-decoration: none;
}
.side_column_w200 {
float: left;
color: #e4e4e4;
width: 160px;
padding: 0px 20px;
}
.side_column_w200 .box {
margin-bottom: 30px;
}
.side_column_w200 form {
margin: 0px;
padding: 0px;
}
.inputfield {
height: 16px;
width: 145px;
padding: 2px 5px;
margin: 0 0 10px 0;
font-size: 12px;
font-variant: normal;
line-height: normal;
}
.submitbutton {
float: right;
margin: 0px;
padding: 0 0 3px 6px;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
}
#message_input {
background:#FFFFFF none repeat fixed 0 0;
border:1px solid #BBBBBB;
display:block;
height: 80px;
margin-top:5px;
padding:5px;
width: 146px;
margin-bottom: 5px;
}
.side_menu {
list-style: none;
padding: 0px;
margin: 0 0 0 0;
}
.side_menu li {
padding: 0;
margin: 5px 0;
}
.side_menu li a {
display: block;
padding: 3px 0;
color: #e4e4e4;
font-weight: normal;
text-decoration: none;
}
.side_menu li a:hover {
color: #ffffff;
text-decoration: none;
}
.news_section {
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px dotted #22260a;
}
.news_section .news_title a {
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}
/* end of content */
/* footer */
#templatemo_footer_wrapper {
clear: both;
width: 100%;
margin: 0 auto;
background: #082844 url(http://i55.tinypic.com/2qk0bjd.jpg) top repeat-x;
}
#templatemo_footer {
width: 940px;
padding: 40px 20px;
margin: 0 auto;
}
.section_w940 {
text-align: center;
width: 940px;
}
.section_w940 a {
color: #ffffff;
}
.section_w184 {
float: left;
width: 144px;
padding: 0 40px 0 0;
}
.section_w368 {
float: left;
width: 328px;
padding: 0 40px 0 0;
}
.footer_menu_list {
margin: 0px;
padding: 0px;
list-style: none;
}
.footer_menu_list li {
margin: 0px;
padding: 0px;
}
.footer_menu_list li a {
color: #e4e4e4;
font-weight: normal;
text-decoration: none;
}
.footer_menu_list li a:hover {
color: #ffffff;
text-decoration: none;
}
/* end of footer */
