Sexy_Blue : Blue « Templates « HTML / CSS

HTML / CSS » Templates » Blue 
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.jpgrepeat-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;
}

{
  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.jpgrepeat-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.jpgrepeat-x left top;
  color: #FFFFFF;
}

#menu .current_page_item {
}

#menu .current_page_item a {
  background: url(Sexy_Blue-images/menu-on.jpgrepeat-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.pngno-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.pngno-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 commerciallyprovided 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">
    &copy; 2010 YourSite. All Rights Reserved.
    &nbsp;&nbsp;&bull;&nbsp;&nbsp;
    <!-- 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
1.metamorph_blue
2.metamorph_bluefeather
3.metamorph_blueflower
4.metamorph_blueglowing
5.metamorph_bluemadness
6.metamorph_bluemess_lt2
7.metamorph_bluerock
8.metamorph_bluething
9.metamorph_bluewave
10.metamorph_bubbleblue_lt
11.metamorph_bubblesonblue
12.metamorph_lightblue
13.metamorph_shiningblue
14.metamorph_simpleblue
15.metamorph_uberblue
16.metamorph_wavesinblue
17.blue-hosting
18.blue-neutral
19.blue-pigment1
20.blue-sky
21.blue-white
22.blue-wood
23.Blue 1
24.blue99
25.blueblogtemplate
26.bluebottle
27.BlueBridge
28.bluebrush
29.bluebusiness
30.bluecarbon
31.bluecorporation
32.bluediamond
33.blueflex
34.BlueFlower
35.BlueFresh
36.bluegray
37.blueled
38.blueminimal
39.blueminimalsidebar
40.blueprism
41.Blueshine
42.blueshuffle
43.BlueSpace
44.BlueSquareShadow
45.bluesurge
46.bluethickline
47.bluetoolkit
48.bluewave
49.blueweb
50.blueworld
51.bluey
52.blue_circles
53.blue_sky
54.blue_space
55.blue_trees
56.bublue-studio
57.bussinesblue
58.fain-blue
59.fairyblue
60.basicblue
61.CleanandBlue
62.cleanblue
63.freecss_blue
64.flyingblue
65.easy-blue
66.FunkyCoolBlue
67.genericblue
68.gallery-blue
69.MonsterBlue
70.Simple_Blue
71.wide-blue
72.a_bit_modern_bigBlue
73.mistyblue
74.portal_blue
75.SimplyBlue
76.sleekcssblue
77.WonderfulBlue
78.sweetbuzzblue
79.light-blue
80.groovyblue
81.iblue2b
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.