Red 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type='text/css'>
body {
background-image: url(Red-images/bg.gif);
background-repeat: repeat-x;
margin: 0px;
font-family: "Arial Narrow", Arial;
font-size: 11px;
color:#666666;
line-height: 18px;
}
#topbg {
background-image: url(Red-images/redtemplate.gif);
background-repeat: repeat-x;
height: 194px;
}
#headingone {
width: 800px;
height: 100px;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
}
#title {
float: left;
width: 400px;
height: 100px;
padding-top: 20px;
}
#phone {
width: 200px;
padding-top: 20px;
height: 100px;
float: right;
text-align: right;
}
#navigation {
width: 800px;
margin-left: auto;
margin-right: auto;
padding-top: 6px;
clear:both;
}
a:link {
color: #B30000;
text-decoration: underline;
}
a:visited {
color: #B30000;
text-decoration: underline;
}
a:hover {
color: #000000;
text-decoration: none;
}
a.nav:link {
background-color: #F2F2F2;
padding-left: 25px;
padding-right: 25px;
padding-top: 8px;
padding-bottom: 8px;
text-decoration: none;
font-size: 11px;
font-family: Tahoma, Arial;
color: #666666;
border-left: solid #999999 1px;
margin: 0px;
}
a.nav:visited {
background-color: #F2F2F2;
padding-left: 25px;
padding-right: 25px;
padding-top: 8px;
padding-bottom: 8px;
text-decoration: none;
font-size: 11px;
font-family: Tahoma, Arial;
color: #666666;
border-left: solid #999999 1px;
margin: 0px;
}
a.nav:hover {
background-color: #F2F2F2;
padding-left: 25px;
padding-right: 25px;
padding-top: 8px;
padding-bottom: 8px;
text-decoration: none;
font-size: 11px;
font-family: Tahoma, Arial;
color: #FFFFFF;
border-left: solid #999999 1px;
margin: 0px;
}h1 {
color: #FF0000;
font-size: 36px;
margin: 0px;
font-family: "Trebuchet MS", Arial, Helvetica;
line-height: 18px;
}
h3 {
font-size: 16px;
color: #B20000;
}
.redh1 {
color: #FF0000;
font-size: 36px;
margin: 0px;
font-family: "Trebuchet MS", Arial, Helvetica;
line-height: 18px;
}
h2 {
color: #B20000;
font-size: 26px;
margin: 0px;
font-family: "Trebuchet MS", Arial, Helvetica;
line-height: 18px;
}
.lightred {
color: #FF0000;
line-height: 18px;
font-size: 36px;
margin: 0px;
font-family:"Arial Narrow", Arial;
font-weight: lighter;
letter-spacing: -1px;
}
.lightwhite {
color: #FFFFFF;
line-height: 18px;
font-size: 26px;
margin: 0px;
font-family:"Arial Narrow", Arial;
font-weight: lighter;
letter-spacing: -1px;
}
.whitesmall {
color:#FFFFFF;
font-size: 14px;
letter-spacing: 1px;
margin: 0px;
font-family: "Trebuchet MS", Arial, Helvetica;
line-height: 18px;
}
#secondaryheading {
width: 800px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
#title2 {
float: left;
width: 400px;
padding-top: 20px;
padding-left: 20px;
height: 30px;
}
#sidebar {
width: 300px;
padding-top: 20px;
float: right;
}
#main {
width: 800px;
margin-left: auto;
margin-right: auto;
}
#col {
width: 450px;
float:left;
background-color:#FFFFFF;
padding-top:20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom:20px;
}
#col2 {
width: 268px;
float:right;
background-color:#FFFFFF;
padding-top:20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom:20px;
}
.grey {
color: #999999;
}
#sitemap {
width: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
clear:both;
padding-top: 40px;
}
#link
{ width: 800px;
text-align: right;
margin-left: auto;
margin-right: auto;
clear:both;
padding-top: 40px;
}
</style>
</head>
<body>
<div id="topbg">
<div id="headingone">
<div id="title">
<h1>RED <span class="lightred">TEMPLATE</span> <br />
<span class="whitesmall">Freewebsitetemplatedownload.co.uk</span></h1>
</div>
<div id="phone"><span class="redh1">0800</span> <span class="lightred">123456<br />
</span><span class="whitesmall">Freephone Number </span></div>
</div>
<div id="navigation"> <a href="/" class="nav">HOME</a> <a href="/" class="nav">EXAMPLE
ONE</a> <a href="/" class="nav">EXAMPLE TWO</a><a href="/" class="nav">CONTACT
US</a> </div>
</div>
<div id="secondaryheading"><div id="title2">
<h2>HEADING <span class="lightwhite">TWO</span></h2>
</div>
<div id="sidebar">
<h2>SIDE <span class="lightwhite">BAR </span></h2>
</div>
</div>
<div id="main">
<div id="col">
<p>orem ipsum dolor sit amet, consectetuer adipiscing elit. Sed gravida tempor
erat. Curabitur pellentesque leo suscipit felis venenatis consectetuer. Nulla
ornare lectus non elit. Nulla facilisi. Nunc blandit dui a tellus. Sed non
dolor et neque consectetuer egestas. Nulla viverra arcu non lacus. Proin
laoreet sapien sollicitudin sapien. Nullam suscipit, nisi ut pellentesque
eleifend, urna mauris commodo urna, sed auctor pede mauris eget augue. Vivamus
vitae augue a justo ornare condimentum. Quisque pretium vehicula metus.</p>
<p> Aliquam elementum enim ac sem. Sed facilisis congue lectus. Ut sed lacus
eget metus egestas venenatis. Proin dapibus consectetuer nunc. Cras aliquam
laoreet ante. Nam eget nunc. Praesent in est. Pellentesque fermentum ante
ut elit. Nunc convallis, ante vel egestas blandit, sem odio blandit lectus,
eget gravida ante arcu ut augue.</p>
<p>Integer sed nisi et augue vestibulum convallis. Phasellus laoreet, ipsum
ullamcorper lobortis euismod, est magna gravida sapien, nec consectetuer
odio ligula sit amet arcu. Integer pharetra dui nec arcu. Mauris tellus erat,
porta sit amet, adipiscing in, pharetra ac, erat. Pellentesque placerat.
Etiam luctus lacus vitae mauris. </p>
<p>Proin id mi. Aliquam in orci sed lectus sagittis posuere. Nullam sagittis
pellentesque lectus. Suspendisse suscipit. Curabitur in pede et neque consectetuer
dignissim. Sed at risus blandit quam consequat auctor. Maecenas non ligula
et ligula viverra tempus. Vestibulum rhoncus ante et leo. Integer lorem odio,
pharetra sit amet, dictum eget, semper a, ligula.</p>
</div><div id="col2">
<p>Proin id mi. Aliquam in orci sed lectus sagittis posuere.
Nullam sagittis pellentesque lectus. Suspendisse suscipit. Curabitur in pede
et neque consectetuer dignissim. Sed at risus blandit quam consequat auctor.
Maecenas non ligula et ligula viverra tempus. Vestibulum rhoncus ante et leo.
Integer lorem odio, pharetra sit amet, dictum eget, semper a, ligula.</p>
<p>Proin id mi. Aliquam in orci sed lectus sagittis posuere. Nullam sagittis
pellentesque lectus. Suspendisse suscipit. Curabitur in pede et neque consectetuer
dignissim. Sed at risus blandit quam consequat auctor. Maecenas non ligula
et ligula viverra tempus. Vestibulum rhoncus ante et leo. Integer lorem odio,
pharetra sit amet, dictum eget, semper a, ligula.</p>
<h3>HEADING <span class="grey">THREE </span></h3>
<p>Proin id mi. Aliquam in orci sed lectus sagittis posuere. Nullam sagittis
pellentesque lectus. Suspendisse suscipit. Curabitur in pede et neque consectetuer
dignissim. Sed at risus blandit quam consequat auctor. Maecenas non ligula
et ligula viverra tempus. Vestibulum rhoncus ante et leo. Integer lorem odio,
pharetra sit amet, dictum eget, semper a, ligula.</p>
</div>
</div>
<div id="sitemap">HOME | EXAMPLE ONE | EXAMPLE TWO | CONTACT US </div>
<div id="link"><span class="smallertext">© Copyright 2008 - Your Web-site
- All Rights Reserved -
<!--Please Do Not Remove This Section of The Template It must remain unchanged if you wish to use our free template -->
<a href="http://www.crearedesign.co.uk/" target="_blank">Web Design</a> & <a href="http://www.freewebsitetemplatedownloads.co.uk/" target="_blank">Free
Web Templates</a></span>
<!-- End Of Links -->
<br />
<a href="http://validator.w3.org/check?uri=referer" target="_blank">W3C Compliant
XHTML</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">W3C
Compliant CSS</a></div>
</body>
</html>
Related examples in the same category