Sky_Blue
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Alicia A Jasmine
http://www.100webhosting.com
Released for free under a Creative Commons Attribution 3.0 License
Name : Sky Blue
Description: A two-column, fixed-width design with blue color scheme. Great for corporate and personal websites.
Version : 1.0
Released : 23-05-2011
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sky Blue by 100 Web Hosting</title>
<style type='text/css'>
/*
Design by Alicia A Jasmine
http://www.100webhosting.com
Released for free under a Creative Commons Attribution 3.0 License
*/
body {
margin: 0;
padding: 0;
background: #e5f4f8;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #464032;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #A42903;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.4em;
}
p, ul, ol {
margin-top: 0;
line-height: 170%;
}
ul, ol {
}
a {
text-decoration: none;
color: #0e90bc;
}
a:hover {
text-decoration: underline;
}
#wrapper {
width: 960px;
margin: 0 auto;
padding: 0;
}
/* Header */
#header {
width: 940px;
height: 148px;
margin: 0 auto;
}
/* Logo */
#logo {
float: left;
height: 62px;
margin: 0;
padding-top: 28px;
color: #05799f;
}
#logo h1, #logo p {
margin: 0;
padding: 0;
}
#logo h1 {
float: left;
letter-spacing: -1px;
font-size: 3.8em;
}
#logo p {
margin: 0;
padding: 52px 0 0 0px;
font: normal 14px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #05799f;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #05799f;
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px;
background: #77c2db;
border-bottom: 4px solid #FFFFFF;
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: none;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #464032;
}
#search-submit {
width: 50px;
height: 23px;
border: 1px solid #05799f;
background: #05799f;
font-weight: bold;
font-size: 10px;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 940px;
height: 36px;
margin: 0 auto;
padding: 0;
background: url(Sky_Blue-images/bar.jpg) no-repeat left top;
}
#menu ul {
margin: 0px 0px 0px 10px;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
height: 26px;
margin-bottom: 10px;
padding: 10px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: #67c2e1;
text-decoration: none;
}
#menu .current_page_item a {
background: #59acc8;
color: #2A1F0B;
}
/* Page */
#page {
width: 940px;
margin: 0 auto;
padding: 0;
}
/* Content */
#content {
float: right;
width: 620px;
padding: 30px 0px 0px 0px;
}
.post .title {
margin-bottom: 10px;
padding: 12px 0 0 0px;
letter-spacing: -.5px;
color: #000000;
}
.post .title a {
color: #0e90bc;
border: none;
}
.post .meta {
height: 30px;
border-bottom: 1px solid #0e90bc;
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}
.post .meta .date {
float: left;
height: 24px;
padding: 3px 0px;
color: #464032;
}
.post .meta a {
color: #464032;
}
.post .entry {
padding: 0px 0px 20px 0px;
padding-bottom: 20px;
text-align: justify;
}
/* Sidebar */
#sidebar {
float: left;
width: 280px;
padding: 0px;
color: #787878;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
border-right: 1px solid #9ecde0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dotted #9ecde0;
margin: 0px 30px;
border-right: none;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar h2 {
padding-left: 30px;
padding-top: 6px;
padding-bottom: 6px;
background: #bae8f5;
letter-spacing: -.5px;
font-size: 1.8em;
color: #464032;
}
#sidebar p {
margin: 0 0px;
padding: 10px 30px 20px 30px;
text-align: justify;
}
#sidebar a {
border: none;
color: #464032;
}
#sidebar a:hover {
text-decoration: underline;
color: #8A8A8A;
}
/* Footer */
#footer {
width: 940px;
height: 50px;
margin: 0 auto;
padding: 0px 0 15px 0;
border-top: 4px solid #9ecde0;
font-family: Arial, Helvetica, sans-serif;
}
#footer p {
margin: 0;
padding-top: 20px;
line-height: normal;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #444444;
}
#footer a {
color: #464032;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">Sky Blue</a></h1>
<p>design by <a href="http://www.100webhosting.com/">100 Web Hosting</a></p>
</div>
</div>
<!-- end #header -->
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="page">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to Sky Blue</a></h2>
<p class="meta"><span class="date">March 15, 2011</span></p>
<div style="clear: both;"> </div>
<div class="entry">
<p>This is <strong>Sky Blue</strong>, a standards-compliant CSS template designed by <a href="http://www.100webhosting.com/">100 Web Hosting</a>. This web template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, so you are free to use it for your website (even use it commercially) provided you keep the links in the footer intact. Other than that, you can customize it freely.</p>
<p>If you plan to get a web hosting plan, make sure you check out <strong>100 Web Hosting</strong> - an independent web hosting reviews, ratings and comparison resource.</p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
<p class="meta"><span class="date">March 20, 2011</span></p>
<div style="clear: both;"> </div>
<div class="entry">
<p>Etiam vehicula, augue eu ultricies dictum, orci nisi suscipit sem, nec sollicitudin neque est ac massa. Phasellus elementum nibh vel odio. Proin orci nulla, viverra tempus, pharetra ut, varius nec, justo. Donec euismod molestie erat. Nulla lobortis bibendum magna. Nulla adipiscing justo eu erat.</p>
<p>Phasellus elementum nibh vel odio. Proin orci nulla, viverra tempus, pharetra ut, varius nec, justo. Donec euismod molestie erat.</p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Secteteur hendrerit</a></h2>
<p class="meta"><span class="date">May 12, 2011</span></p>
<div style="clear: both;"> </div>
<div class="entry">
<p>Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie in, rhoncus ut, lobortis a, est.</p>
</div>
</div>
<div style="clear: both;"> </div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<div id="search" >
<form method="get" action="#">
<div>
<input type="text" name="s" id="search-text" value="" />
<input type="submit" id="search-submit" value="GO" />
</div>
</form>
</div>
<div style="clear: both;"> </div>
</li>
<li>
<h2>About Us</h2>
<p>We provide corporate and government agencies with top customer support, dedicated and customised solutions coupled with up-to-date technologies.</p>
</li>
<li>
<h2>Our Services</h2>
<ul>
<li><a href="#">Starter Web Hosting</a></li>
<li><a href="#">Business Web Hosting</a></li>
<li><a href="#">VPS Servers</a></li>
<li><a href="#">Dedicated Servers</a></li>
<li><a href="#">Templated Web Design</a></li>
<li><a href="#">Custom Web Design</a></li>
</ul>
</li>
<li>
<h2>Latest Clients</h2>
<ul>
<li><a href="#">Top 100 Web Hosting</a></li>
<li><a href="#">Free Web Templates</a></li>
<li><a href="#">WordPress Themes</a></li>
<li><a href="#">Company Name</a></li>
<li><a href="#">Another Company Name</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
</div>
<div id="footer">
<!-- Please leave the link to http://www.100webhosting.com intact -->
<p>Copyright (c) 2011 Sitename.com. Design by <a href="http://www.100webhosting.com/">100 Web Hosting</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>
Related examples in the same category