RedSquareShadow : Red « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Red 




RedSquareShadow
  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RedSquareShadow</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
{
    padding: 0;
    margin: 0;


body {
background: #555;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
color: #333333;;
}

img border: none; }
color: #D60501;  }
a:hover text-decoration: none; color : #000}

#wrap {
margin: 40px auto auto;
width: 800px;
}

#header 
padding-bottom:10px;
}
#header h1 {
font-size: 26px;
font-weight: 100;
letter-spacing: -3px;
padding: 12px 0 5px 10px;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header h1 a:hover {
color: #fff;
text-decoration: none;
}
#header h2 {
color: #ccc;
font-size: 15px;
font-weight: 100;
padding: 0 0 0 11px;
letter-spacing: -1px;
line-height: 12px;
}

#menu {
height: 30px;
line-height: 30px;
background: #3E92EA url(RedSquareShadow-images/menu.jpgno-repeat;
}
#menu ul {
padding-left: 10px;
list-style-type: none;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
color: #eee;
padding: 0 10px;
text-decoration: none;
font-weight: 600;
}
#menu ul li a:hover {
color: #fff;
text-decoration: underline;
}

#content {
background: #555 url(RedSquareShadow-images/content.jpgrepeat-y;
padding: 10px 20px;
}

.left {
width: 568px;
float: left;
text-align: justify;
}
.left h2 {
color: #FF4800;
font-size: 24px;
letter-spacing: -3px;
font-weight: 100;
padding : 10px 0 15px 0;
}

.right {
width: 150px;
float: right;
padding: 10px;
border-left: 1px solid #bbb;
font-size: 12px;
}
.right ul {
list-style-type: none;
padding: 5px 10px 10px 10px;
}
.right h2 {
height: 30px;
font-size: 12px;
color: #666;
line-height: 30px;
}
.right a text-decoration: none }

#top {
background: #555 url(RedSquareShadow-images/top.jpgno-repeat;
padding: 5px 0;
}
#bottom {
background: #555 url(RedSquareShadow-images/bottom.jpgno-repeat;
padding: 10px 0;
}

#footer {
text-align: center;
color: #eee;
font-size: 11px;
padding: 0 0 10px 0;
}

</style>


</head>
<body>

<div id="wrap">

<div id="header">
<h1><a href="#">Website Title</a></h1>
<h2>Subheader, website description H2</h2>
</div>

<div id="top"> </div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Free Stuff</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">SiteMap</a></li>
</ul>
</div>

<div id="content">
<div class="left"

<h2><a href="#">License and terms of use</a></h2>
<div class="articles">
RedSquareShadow Rounded is a CSS template that is free and fully standards compliant. <a href="http://www.free-css-templates.com/">Free CSS Templates</a> designed this template.
This template is allowed for all uses, including commercial use, as it is released under the <strong>Creative Commons Attributions 2.5</strong> license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!   
<br /><br />
<img src="RedSquareShadow-images/pic.jpg" alt="Example pic" style="border: 3px solid #ccc;" />
<br /><br />
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed, 
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae 
congue nulla diam non urna.
</div>
<h2><a href="#">Title with a link - Example of heading 2</a></h2>
<div class="articles">
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed, 
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae 
congue nulla diam non urna.
</div>
</div>

<div class="right"

<h2>Categories :</h2>
<ul>
<li><a href="#">World Politics</a></li> 
<li><a href="#">Europe Sport</a></li> 
<li><a href="#">Networking</a></li> 
<li><a href="#">Nature - Africa</a></li>
<li><a href="#">SuperCool</a></li> 
<li><a href="#">Last Category</a></li>
</ul>

<h2>Archives</h2>
<ul>
<li><a href="#">January 2007</a></li> 
<li><a href="#">February 2007</a></li> 
<li><a href="#">March 2007</a></li> 
<li><a href="#">April 2007</a></li>
<li><a href="#">May 2007</a></li> 
<li><a href="#">June 2007</a></li> 
<li><a href="#">July 2007</a></li> 
<li><a href="#">August 2007</a></li> 
<li><a href="#">September 2007</a></li>
<li><a href="#">October 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">December 2007</a></li>
</ul>

</div>
<div style="clear: both;"> </div>
</div>

<div id="bottom"> </div>
<div id="footer">
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></div>
</div>

</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.red_city
39.Red_Hot
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.