Red_Hot : Red « Templates « HTML / CSS

HTML / CSS » Templates » Red 
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 {
}

{
  text-decoration: none;
  color: #da0c24;
}

a:hover {
}

#wrapper {
  margin: auto;
  padding: 0;
}

/* Header */

#header {
  width: 1000px;
  height: 100px;
  margin: auto;
}

/* Logo */

#logo {
  float: left;
  margin: 0;
  padding: 15px 0px 0px 60px;
  color: #FFFFFF;
  width: 350px;
  background: url(Red_Hot-images/logo.pngno-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: auto;
  padding: 0;
  background: url(Red_Hot-images/top.jpgno-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.jpgrepeat-x left top;
  text-decoration: none;
}

#menu a:hover {
  text-decoration: none;
}

/* Page */

#page {
  width: 1000px;
  margin: auto;
  padding: 0;
  background: url(Red_Hot-images/page.jpgrepeat-y left top;
}

#page-bgbtm {
  margin: 0px;
  padding: 30px;
  background: url(Red_Hot-images/bottom.jpgno-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.jpgno-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: 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;">&nbsp;</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 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">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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</div>
  </div>
  </div>
  <!-- end #page -->
</div>
  <div id="footer">
    <!-- Please leave the link to http://www.100webhosting.com intact -->
    <p>Copyright &copy; 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
1.metamorph_blackandred
2.metamorph_blackonred
3.metamorph_red
4.metamorph_redandblack_lt
5.metamorph_reddie
6.metamorph_redfirm
7.metamorph_redflowers_lt
8.metamorph_redinfinity
9.metamorph_redmadness
10.metamorph_redornament
11.metamorph_redstorm
12.All_The_Reds
13.freecss_lightred
14.simplyred
15.sleek-red
16.red haze
17.red-accent
18.red-round
19.redalert
20.redavenue
21.redBull
22.redbusiness
23.redcrazycss
24.reddy
25.Redfire2
26.redflex
27.redhaze
28.redhive
29.redish
30.RedLight
31.redline
32.RedOneTemplate
33.redpassion
34.redpepper
35.redplanet
36.redroses
37.redsnow
38.RedSquareShadow
39.red_city
40.Red_Hot_Brazil
41.red_music
42.Red_Splash
43.Red_Tube_Simple
44.Red 2
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.