starburst
<!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>
<title>STARBURST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
font: 73% "Trebuchet MS", verdana, arial, tahoma, sans-serif;
line-height: 1.7em;
color: #666;
background: #fff url(starburst-img/bg.gif) center repeat-y;
}
#container {
width: 750px;
margin: 0 auto;
padding: 0;
border: 5px solid #fff;
}
/*TOP BANNER*/
#banner {
height:150px;
padding: 0;
margin: 0;
color: #000;
background: #fff url(starburst-img/head.jpg) no-repeat;
}
#banner h1 {
margin: 0 0 10px 10px;
padding-top: 20px;
letter-spacing: 3px;
font: 200% verdana, arial, tahoma, sans-serif;
color: #333;
background: transparent;
}
/*TOP NAVIGATION*/
#globalnav {
position:relative;
float:left;
width:735px;
padding: 0 0 1.75em 1em;
margin:0;
list-style:none;
line-height:1em;
}
#globalnav li {
float:left;
margin:0;
padding:0;
}
#globalnav a {
display:block;
margin:0;
padding:0.25em 1em;
text-decoration:none;
font-weight:bold;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #aaa;
color:#444;
background:#ddd;
}
#globalnav a:hover, #globalnav a:active, #globalnav a.here:link, #globalnav .here:visited {
background:#6AA3C1;
color: #fff;
}
#globalnav a.here:link, #globalnav a.here:visited {
position:relative;
z-index:102;
}
/*subnav*/
#globalnav ul {
position:absolute;
left:0;
top:1.5em;
float:left;
width:735px;
margin:0;
padding:0.25em 0.25em 0.25em 1em;
list-style:none;
border-top:1px solid #fff;
background:#6AA3C1;
color: #000;
}
#globalnav ul li {
float:left;
display:block;
margin-top:1px;
}
#globalnav ul a {
display:inline;
margin:0;
padding:0 1em;
border:0;
background:#6AA3C1;
color:#fff;
}
#globalnav ul a:hover, #globalnav ul a:active, #globalnav ul a.here:link, #globalnav ul .here:visited {
color:#444;
background:transparent;
}
/*TOP 3 COLUMNS*/
.separator {
float: left;
background: url(starburst-img/sep.png) no-repeat;
height: 200px;
width: 1px;
}
.intro {
float:left;
width:240px;
margin: 0 0 5px 0;
padding: 5px;
border-bottom: 10px solid #6AA3C1;
text-align:left;
color: #202f46;
background: transparent url(starburst-img/bg3.gif) no-repeat;
}
.intro2 {
float: left;
width: 238px;
margin: 0 0 5px 0;
padding: 5px;
border-bottom: 10px solid #6AA3C1;
color: #555;
background: transparent url(starburst-img/bg3.gif) no-repeat;
}
.intro3 {
float: right;
width:240px;
margin: 0 0 5px 0;
padding: 5px;
border-bottom: 10px solid #6AA3C1;
color: #555;
background: transparent url(starburst-img/bg3.gif) no-repeat;
}
/*MAIN CONTENT*/
#content {
margin: 0 0 0 240px;
padding: 0;
}
/*LEFT SIDEBAR*/
#sidebar {
float: left;
width: 220px;
margin: 0 10px 0 0;
padding: 0;
}
/*FOOTER*/
#footer {
clear:both;
padding: 3px;
margin: 0;
font-size: 0.9em;
border-top: 1px solid #919FBD;
color: #333;
background: #fff;
}
#footer a:link, #footer a:visited {
background: inherit;
color: #516997;
}
#footer a:hover {
background: inherit;
color: #333;
}
/*TYPOGRAPHY*/
p {
padding: 3px;
}
#content h1, #sidebar h1 {
margin: 0;
padding-left: 10px;
font-size: 130%;
letter-spacing: 3px;
text-transform: uppercase;
border-bottom: 1px solid #eee;
color: #F07100;
background: inherit;
}
h2 {
font-size: 130%;
padding: 0px;
margin: 0;
text-align: center;
letter-spacing: 3px;
text-transform: uppercase;
color: #556C9A;
background:transparent;
}
/*LINK PROPERTIES*/
a {
text-decoration: none;
color: #516997;
background: inherit;
}
a:hover {
text-decoration: underline;
color: #333;
background: inherit;
}
a img {
border: 0;
}
/*IMAGES*/
.img {
float: left;
padding: 4px;
margin: 4px;
border: 1px solid #556b2F;
}
div.scroll {
overflow: auto;
width: 228px;
height: 10em;
margin: 5px 0 10px 0;
padding: 0.3em;
color: #556C9A;
background: transparent url(starburst-img/9.png) repeat;
}
/*CLASSES*/
.update {
font-size: 1em;
background: inherit;
color: #666;
}
blockquote {
font-weight: bold;
font-style: italic;
color: #333;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<h1>Your Company Name ...</h1>
</div>
<div id="navcontainer">
<ul id="globalnav">
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/"class="here">Link</a>
<ul>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/" class="here">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
</ul>
</li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
</ul>
</div>
<div class="intro">
<h2> Heading</h2>
<div class="scroll">
<p><img src="starburst-img/star.gif" alt="star" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra. </p>
</div>
</div>
<div class="separator"></div>
<div class="intro2">
<h2> Heading</h2>
<div class="scroll">
<p><img src="starburst-img/star.gif" alt="star" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra. </p>
</div>
</div>
<div class="separator"></div>
<div class="intro3">
<h2> Heading</h2>
<div class="scroll">
<p><img src="starburst-img/star.gif" alt="star" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra. </p>
</div>
</div>
<div style="clear:both;"></div>
<div id="sidebar">
<h1> Links </h1>
<ul>
<li><a href="http://www.free-css.com/">A list of links</a></li>
<li><a href="http://www.free-css.com/">A list of links</a></li>
<li><a href="http://www.free-css.com/">A list of links</a></li>
<li><a href="http://www.free-css.com/">A list of links</a></li>
<li><a href="http://www.free-css.com/">A list of links</a></li>
<li><a href="http://www.free-css.com/">A list of links</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus.</p>
</div>
<div id="content">
<h1>Welcome to <span style="color: #333; font-size:0.9em;">STARBURST</span> template</h1>
<blockquote>This template has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. <br />
For more FREE templates visit my website.</blockquote>
<p> This is a <a href="http://www.free-css.com/">link</a> to nowhere. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus. Phasellus sem lacus, tristique et, convallis non, mollis id, lacus. Mauris id neque. Integer id enim. Praesent quis nibh. Sed varius lorem sit amet mi. Maecenas.</p>
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus. Phasellus sem lacus, tristique et, convallis non, mollis id, lacus. Mauris id neque. Integer id enim. Praesent quis nibh. Sed varius lorem sit amet mi. Maecenas.</p>
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus. Phasellus sem lacus, tristique et, convallis non, mollis id, lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus. Phasellus sem lacus, tristique et, convallis non, mollis id, lacus. Mauris id neque. Integer id enim. Praesent quis nibh. Sed varius lorem sit amet mi. Maecenas.</p>
</div>
<div id="footer"> <a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>
This work is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>
Related examples in the same category