Red_Hot
<!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 : Red Hot
Description: A two-column, fixed-width design with red hot color scheme. Lightweight and fast loading. Easy to customize to your website needs.
Version : 1.0
Released : 28-08-2010
-->
<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>Red Hot by 100 Web Hosting</title>
<style type='text/css'>
/*
Design by 100 Web Hosting
http://www.100webhosting.com
Released for free under a Creative Commons Attribution 3.0 License
*/
body {
margin: 0;
padding: 0;
background: #800000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #787878;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #1b1b1b;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 2.0em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #da0c24;
}
a:hover {
}
#wrapper {
margin: 0 auto;
padding: 0;
}
/* Header */
#header {
width: 1000px;
height: 100px;
margin: 0 auto;
}
/* Logo */
#logo {
float: left;
margin: 0;
padding: 15px 0px 0px 60px;
color: #FFFFFF;
width: 350px;
background: url(Red_Hot-images/logo.png) no-repeat left 19px;
}
#logo h1, #logo p {
margin: 0;
padding: 0;
}
#logo h1 {
float: left;
padding-left: 25px;
letter-spacing: -1px;
font-size: 3.6em;
}
#logo p {
float: left;
margin: 0;
padding: 5px 0 0 25px;
font: normal 14px Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 1000px;
height: 58px;
margin: 0 auto;
padding: 0;
background: url(Red_Hot-images/top.jpg) no-repeat left top;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 48px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
height: 32px;
margin-right: 1px;
padding: 26px 15px 0px 15px;
text-decoration: none;
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: url(Red_Hot-images/menu-hover.jpg) repeat-x left top;
text-decoration: none;
}
#menu a:hover {
text-decoration: none;
}
/* Page */
#page {
width: 1000px;
margin: 0 auto;
padding: 0;
background: url(Red_Hot-images/page.jpg) repeat-y left top;
}
#page-bgbtm {
margin: 0px;
padding: 30px;
background: url(Red_Hot-images/bottom.jpg) no-repeat left bottom;
}
/* Content */
#content {
float: left;
width: 600px;
padding: 0px 20px;
}
.post {
margin-bottom: 20px;
border-bottom: 1px dotted #ececec;
}
.post .title {
height: 32px;
letter-spacing: -.5px;
color: #810027;
border-bottom: 6px solid #ffd4d4;
}
.post .title a {
color: #810027;
border: none;
}
.post .title a:hover {
color: #d60444;
}
.post .entry {
text-align: justify;
margin-bottom: 25px;
padding: 10px 20px 0px 0px;
}
/* Sidebar */
#sidebar {
float: right;
width: 270px;
padding: 10px 0px 0px 0px;
color: #f8ef9f;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 15px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dotted #5a0711;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 15px;
background: url(Red_Hot-images/icon.jpg) no-repeat left 5px;
}
#sidebar h2 {
height: 28px;
padding: 12px 0 0 15px;
letter-spacing: -.5px;
color: #ae0c0c;
background: #fff0aa;
}
#sidebar p {
margin: 1px 0px 16px 0px;
padding: 10px 20px 20px 14px;
text-align: justify;
background: #4a0303;
}
#sidebar a {
border: none;
color: #ffdbdf;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Footer */
#footer-wrapper {
width: 100%;
background: #231202;
}
#footer {
width: 1000px;
height: 100px;
margin: 0 auto;
padding: 0px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
}
#footer p {
margin: 0;
padding-top: 40px;
line-height: normal;
font-size: 12px;
text-align: center;
color: #c73d3d;
}
#footer a {
color: #f05353;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">Red Hot</a></h1>
<p>designed by 100 Web Hosting</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="page-bgbtm">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to Red Hot</a></h2>
<div style="clear: both;"> </div>
<div class="entry">
<p>This is <strong>Red Hot</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 <a href="http://www.100webhosting.com">100 Web Hosting</a> - 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>
<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 style="clear: both;"> </div>
</div>
<!-- end #content -->
<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 style="clear: both;"> </div>
</div>
</div>
<!-- end #page -->
</div>
<div id="footer">
<!-- Please leave the link to http://www.100webhosting.com intact -->
<p>Copyright © 2010 <a href="#"><strong>YourSite.com</strong></a> | Design by <a href="http://www.100webhosting.com/"><strong>100 Web Hosting</strong></a>.</p>
</div>
<!-- end #footer -->
</body>
</html>
Related examples in the same category