bluesurge
<!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>BlueSurge</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* Global Elements */
body {
font: 70% Arial;
margin: 0px;
color: #333;
text-align: center;
background-image: url(bluesurge-images/pagebg.gif);
background-repeat: repeat-x;
}
a {
color: #666;
}
a:hover {
text-decoration: none;
}
/* Container */
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* Header */
#topheader {
background-image: url(bluesurge-images/topback.gif);
height: 58px;
}
#logo {
background-image: url(bluesurge-images/logo.gif);
background-repeat: no-repeat;
width: 300px;
font-size: 150%;
font-family: Trebuchet MS;
font-weight: bold;
color: #5A747D;
float: left;
padding-left: 67px;
padding-top: 12px;
padding-bottom: 12px;
}
#logo .dark {
color: #294048;
}
/* Navigation */
#nav {
float: right;
margin-top: 17px;
margin-right: 5px;
}
#nav a {
background-image: url(bluesurge-images/navbg.gif);
width: 102px;
font: 105% Verdana;
font-weight: bold;
color: #ffffff;
text-decoration: none;
padding-top: 14px;
padding-bottom: 12px;
display: block;
text-align: center;
float: left;
clear: none;
}
#nav a:hover {
color: #FAD000;
}
/* Sub header */
#subheader {
background-color: #294048;
}
#subcontainer {
background-color: #294048;
float: left;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #C2C8CA;
}
/* Headlines */
#headlines {
width: 211px;
float: left;
}
#headlines h1 {
color: #FAD000;
font-size: 140%;
font-weight: normal;
font-family: Trebuchet MS;
margin: 0px;
margin-bottom: 4px;
}
#headlines a {
display: block;
background-image: url(bluesurge-images/headlineslink.gif);
color: #718188;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 24px;
margin-bottom: 1px;
text-decoration: none;
}
#headlines a:hover {
color: #8C9BA2;
}
/* Latest topics */
#latesttopics {
width: 211px;
float: right;
}
#latesttopics h1 {
color: #FAD000;
font-size: 140%;
font-weight: normal;
font-family: Trebuchet MS;
margin: 0px;
text-align: right;
margin-bottom: 5px;
}
#latesttopics a {
display: block;
background-image: url(bluesurge-images/headlineslink.gif);
color: #718188;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 24px;
margin-bottom: 1px;
text-decoration: none;
}
#latesttopics a:hover {
color: #8C9BA2;
}
/* Banner ad */
#banner {
margin-left: auto;
margin-right: auto;
padding-left: 30px;
text-align: center;
margin-top: 35px;
float: left;
color: #FAD000;
text-align: center;
}
#banner img {
border: 2px solid #465D66;
}
/* Bottom */
#bottom {
width: 950px;
padding-left: 25px;
}
/* Login bar */
#register {
background-color: #E6E9EA;
float: left;
width: 100%;
margin-top: 3px;
}
#register p {
border: 1px solid #D2D6D7;
padding: 3px;
padding-left: 7px;
margin: 0px;
color: #54789B;
}
/* Left column */
#left {
float: left;
width: 220px;
margin-top: 5px;
margin-right: 10px;
}
#left h1 {
font-size: 140%;
}
#left .sub a {
background-image: url(bluesurge-images/pagelink.gif);
display: block;
padding-left: 30px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 1px;
color: #5B7246;
}
/* Middle column */
#middle {
float: left;
width: 470px;
margin-top: 5px;
font-size: 105%;
}
#middle h1 {
font-size: 140%;
}
#middle p {
padding-left: 5px;
margin: 0px;
color: #5B7246;
}
#middle .subscribe {
background-image: url(bluesurge-images/subscribe.gif);
width: 194px;
text-align: center;
padding-top: 3px;
padding-bottom: 4px;
font-size: 95%;
display: block;
text-decoration: none;
margin-top: 3px;
margin-left: auto;
margin-right: auto;
}
.small {
font-size: 95%;
}
.comment {
text-align: right;
font-size: 95%;
color: #2E464F;
margin-top: 2px;
}
/* Bottom boxes */
#leftbox {
width: 200px;
float: left;
font-size: 95%;
color: #5B7246;
}
#leftbox img {
float: left;
margin-right: 1px;
}
#leftbox h1 {
color: #333;
}
#leftbox .lol {
display: block;
margin-bottom: 1px;
background-color: #E6E9EA;
color: #5B7246;
float: left;
width: 105px;
}
#leftbox .p2 {
padding: 5px;
}
#rightbox {
float: right;
width: 200px;
font-size: 95%;
}
#rightbox a {
background-image: url(bluesurge-images/folder.gif);
background-repeat: no-repeat;
padding-left: 30px;
padding-top: 4px;
padding-bottom: 4px;
display: block;
margin-bottom: 2px;
text-decoration: none;
}
/* Right column */
#right {
float: right;
width: 220px;
margin-top: 5px;
}
#right h1 {
font-size: 140%;
text-align: right;
}
#right .sub a {
background-image: url(bluesurge-images/pagelink.gif);
display: block;
padding-left: 30px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 1px;
color: #5B7246;
}
#right .sub2 a {
background-image: url(bluesurge-images/userlink.gif);
display: block;
padding-left: 30px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 1px;
color: #5B7246;
}
/* footer */
#footer {
float: left;
width: 100%;
background-color: #294048;
text-align: left;
color: #fff;
padding-top: 4px;
padding-bottom: 4px;
margin-top: 6px;
}
#footer .left {
float: left;
padding-left: 30px;
}
#footer .right {
float: right;
padding-right: 30px;
}
#footer .middle {
float: right;
padding-right: 50px;
color: #56686F;
}
#footer a {
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="topheader">
<div id="logo">Template<span class="dark">Surge.com</span> </div>
<div id="nav"> <a href="http://www.free-css.com/">Home</a><a href="http://www.free-css.com/">Forums</a><a href="http://www.free-css.com/">Designers</a><a href="http://www.free-css.com/">Marketplace</a><a href="http://www.free-css.com/">Profile</a> </div>
</div>
<div id="subheader">
<div id="subcontainer">
<div id="headlines">
<h1>Headlines</h1>
<a href="http://www.free-css.com/">NP Links Directory updates PR4</a><a href="http://www.free-css.com/">New 2007 Tutorial Contest</a><a href="http://www.free-css.com/">NP Links Directory updates PR4</a><a href="http://www.free-css.com/">New 2007 Tutorial Contest</a><a href="http://www.free-css.com/">NP Links Directory updates PR4</a> </div>
<div id="banner"> Template Surge<br />
<a href="http://www.free-css.com/"> <img src="bluesurge-images/tsbanner.gif" alt="" /></a><br />
</div>
<div id="latesttopics">
<h1>Latest Topics</h1>
<a href="http://www.free-css.com/">New 2007 Tutorial Contest</a><a href="http://www.free-css.com/">New 2007 Tutorial Contest</a><a href="http://www.free-css.com/">New 2007 Tutorial Contest</a><a href="http://www.free-css.com/">New 2007 Tutorial Contest</a><a href="http://www.free-css.com/">New 2007 Tutorial Contest</a> </div>
</div>
</div>
<div id="register">
<p>It seems you aren't registered at Template Surge<a href="http://www.free-css.com/">Register now</a>.</p>
</div>
<div id="bottom">
<div id="left">
<h1>Recent Work</h1>
<div class="sub"><a href="http://www.free-css.com/">PR4 Links Directory</a><a href="http://www.free-css.com/">Free Web Proxy</a> <a href="http://www.free-css.com/">Free Site Templates</a><a href="http://www.free-css.com/">Arcade Topsites</a><a href="http://www.free-css.com/">Demolished Dreams</a> </div>
<h1>Recent Work</h1>
<div class="sub"><a href="http://www.free-css.com/">PR4 Links Directory</a><a href="http://www.free-css.com/">Free Web Proxy</a> <a href="http://www.free-css.com/">Free Site Templates</a><a href="http://www.free-css.com/">Arcade Topsites</a><a href="http://www.free-css.com/">Demolished Dreams</a> </div>
<h1>Recent Work</h1>
<div class="sub"><a href="http://www.free-css.com/">PR4 Links Directory</a><a href="http://www.free-css.com/">Free Web Proxy</a> <a href="http://www.free-css.com/">Free Site Templates</a><a href="http://www.free-css.com/">Arcade Topsites</a><a href="http://www.free-css.com/">Demolished Dreams</a> </div>
</div>
<div id="middle">
<h1>Newsletter</h1>
<p>Subscribe with the ShockFreelance Newsletter and get the latest news and specials here at shock freelance. For only $2 per month you will receive the specials we offer and also receive 1 free marketplace listing of your choice. To subscribe fill out the information below and get premium support. </p>
<a href="http://www.free-css.com/" class="subscribe">Subscribe Now</a>
<h1>Designer Article</h1>
<p class="small">Hello, I am in the process of starting a designing community. I have the domain, hosting, and am currently working on the design. What I am looking for is someone who would go in with me and code the design and become part owner. Like I said, I have everything I need to start it besides a coder. For more information add me to MSN or PM me.</p>
<div class="comment">Written By: Brenden Pagliai in Site Updates 7 comments</div>
<br />
<div id="leftbox">
<h1>Featured Designer</h1>
<img src="bluesurge-images/image.gif" alt="" />
<div class="lol">
<div class="p2">Name: Brenden</div>
</div>
<div class="lol">
<div class="p2">Age: 15 years</div>
</div>
<div class="lol">
<div class="p2">Location: Missouri</div>
</div>
<div class="lol">
<div class="p2">Skills: Designer</div>
</div>
Brenden is a skilled designer that has won Designer of the Week for week 7 in the ShockFreelance Design Community. Congradulations Brenden!<br />
<a href="http://www.free-css.com/" style="float: left;">View Design</a><a href="http://www.free-css.com/" style="float: right;">View Profile</a> </div>
<div id="rightbox">
<h1>Sell Your Services</h1>
<a href="http://www.free-css.com/">Hire a designer/coder</a><a href="http://www.free-css.com/">Sell your design</a><a href="http://www.free-css.com/">Buy a design</a><a href="http://www.free-css.com/">Other</a><a href="http://www.free-css.com/">Find Clients</a> </div>
</div>
<div id="right">
<h1>Our Friends</h1>
<div class="sub2"><a href="http://www.free-css.com/">PR4 Links Directory</a><a href="http://www.free-css.com/">Free Web Proxy</a> <a href="http://www.free-css.com/">Free Site Templates</a><a href="http://www.free-css.com/">Arcade Topsites</a><a href="http://www.free-css.com/">Demolished Dreams</a> </div>
<h1>Recent Work</h1>
<div class="sub2"><a href="http://www.free-css.com/">PR4 Links Directory</a><a href="http://www.free-css.com/">Free Web Proxy</a> <a href="http://www.free-css.com/">Free Site Templates</a><a href="http://www.free-css.com/">Arcade Topsites</a><a href="http://www.free-css.com/">Demolished Dreams</a> </div>
<h1>Recent Work</h1>
<div class="sub"><a href="http://www.free-css.com/">PR4 Links Directory</a><a href="http://www.free-css.com/">Free Web Proxy</a> <a href="http://www.free-css.com/">Free Site Templates</a><a href="http://www.free-css.com/">Arcade Topsites</a><a href="http://www.free-css.com/">Demolished Dreams</a> </div>
</div>
</div>
</div>
<div id="footer">
<div class="left"><a href="http://www.free-css.com/">Home</a> - <a href="http://www.free-css.com/">Forums</a> - <a href="http://www.free-css.com/">Designers</a> - <a href="http://www.free-css.com/">Marketplace</a> - <a href="http://www.free-css.com/">Profile</a></div>
<div class="right">Design by: <a href="http://www.templatesurge.com">www.TemplateSurge.com</a> <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict</a></div>
<div class="middle">Copyright 2006-2007 TemplateSurge.com</div>
</div>
</body>
</html>
Related examples in the same category