Sexy_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 : Sexy Blue
Description: A two-column, fluid-width design with blue color scheme. Lightweight and fast loading. Easy to customize to your website needs.
Version : 1.0
Released : 13-10-2010
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sexy Blue by Best Web Host</title>
<style type='text/css'>
/*
Design by Best Web Host
http://www.100webhosting.com
Released for free under a Creative Commons Attribution 3.0 License
*/
body {
margin: 110px 0 0 0;
padding: 0;
background: #f0f0f0 url(Sexy_Blue-images/top.jpg) repeat-x left top;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
color: #626262;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #444444;
}
h1 {
letter-spacing: -1px;
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #1e82e0;
}
a:hover {
text-decoration: none;
}
/* Header */
#header {
height: 42px;
}
#logo h1, #logo p {
float: left;
}
#logo h1 {
font-size: 2.6em;
padding: 0px 0 0 40px;
}
#logo p {
margin: 0;
padding: 18px 0 0 10px;
line-height: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
#logo a {
text-decoration: none;
color: #ffffff;
}
#logo p a {
color: #ffffff;
}
#menu {
float: right;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: block;
float: left;
height: 42px;
}
#menu a {
display: block;
padding: 2px 20px 0px 20px;
background: url(Sexy_Blue-images/menu-off.jpg) repeat-x left top;
border-top: 4px solid #FFFFFF;
border-left: 4px solid #FFFFFF;
border-right: 4px solid #FFFFFF;
margin-top: 10px;
margin-right: 2px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #004f7e;
}
#menu .last {
margin-right: 20px;
}
#menu a:hover {
background: url(Sexy_Blue-images/menu-on.jpg) repeat-x left top;
color: #FFFFFF;
}
#menu .current_page_item {
}
#menu .current_page_item a {
background: url(Sexy_Blue-images/menu-on.jpg) repeat-x left top;
color: #FFFFFF;
}
/* Page */
#page {
padding: 40px 40px 0 40px;
}
/* Content */
#content {
background: #FFFFFF;
margin-right: 340px;
padding: 0 30px;
border-top: 6px #328fc3 solid;
}
.post {
padding-top: 10px;
margin-bottom: 10px;
}
.post .title {
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}
.post .title h2 {
padding: 0px 30px 5px 0px;
font-weight: normal;
font-size: 2.2em;
color: #1c79b4;
}
.title h2 a {
color: #1c79b4;
}
.title h2 a:hover {
color: #499cd1;
}
.post .title p {
margin: 0;
padding: 10px 0 10px 20px;
background: url(Sexy_Blue-images/folder.png) no-repeat left center;
border-top: 1px #D8DFE6 dotted;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #EEA90B;
}
.post .entry {
padding: 0;
border-top: 1px #D8DFE6 dotted;
}
.post .links {
padding: 5px 0;
border-top: 1px #D8DFE6 dotted;
border-bottom: 1px #D8DFE6 dotted;
margin-top: 10px;
text-align: right;
}
.post .links a {
font-weight: bold;
}
.post .links a:hover {
}
.post .links .more {
}
.post .links .comments {
padding-left: 20px;
}
/* Sidebar */
#sidebar {
float: right;
width: 300px;
background: #FFFFFF;
border-top: 6px #328fc3 solid;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 10px;
}
#sidebar li ul {
padding: 0 30px 40px 30px;
}
#sidebar li li {
margin: 0;
padding-left: 30px;
background: url(Sexy_Blue-images/arrow.png) no-repeat 5px 50%;
}
#sidebar h2 {
padding: 0px 30px 10px 30px;
font-weight: normal;
font-size: 1.6em;
color: #E47F07;
}
#sidebar li p {
padding: 0px 30px 0px 30px;
}
/* Categories */
#sidebar #categories li {
}
/* Footer */
#footer {
padding: 20px 0 10px 0;
border-top: 6px #2f92c9 solid;
background: #48b2ee;
}
#footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #FFFFFF;
}
#footer a {
padding: 0 20px;
text-decoration: none;
color: #ffffff;
text-decoration: underline;
}
#footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
#footer .legal a {
padding: 0;
}
</style>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#">Sexy Blue</a></h1>
<p><a href="http://www.100webhosting.com/">designed by Best Web Host</a></p>
</div>
<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 class="last"><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start sidebar -->
<div id="sidebar">
<ul>
<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 id="content">
<div class="post">
<div class="title">
<h2><a href="#">About Sexy Blue Template</a></h2>
<p><small>Posted by <a href="#">Alicia</a> (14 October 2010)</small></p>
</div>
<div class="entry">
<p>This is <strong>Sexy Blue</strong>, a standards-compliant CSS template designed by <a href="http://www.100webhosting.com/">Best Web Host</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 <a href="http://www.100webhosting.com">Best Web Host</a> - an independent web hosting reviews, ratings and comparison resource.</p>
</div>
</div>
<div class="post">
<div class="title">
<h2><a href="#">Lorem ipsum sed aliquam</a></h2>
<p><small>Posted by <a href="#">Alicia</a> (14 October 2010)</small></p>
</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>
<p class="links"> <a href="#" class="more">Read Details</a></p>
</div>
<br style="clear: both;" />
</div>
<br style="clear: both;" />
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
<p class="legal">
© 2010 YourSite. All Rights Reserved.
•
<!-- Please leave the link to http://www.100webhosting.com intact -->
Template Design by <a href="http://www.100webhosting.com/">Best Web Host</a>
</p>
</div>
<!-- end footer -->
</body>
</html>
Related examples in the same category