yourhost
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Your Host</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* YourHost by Ken Dahlin - http://www.kendahlin.com/ an open source template based on andreas08 - original css by the extremely talented Andreas Viklund - http://andreasviklund.com. */
/**************** Body and tag styles ****************/
*{margin:0; padding:0;}
body{
font:76% Verdana,Tahoma,Arial,sans-serif;
line-height:1.4em;
text-align:center;
color:#ffffff;
background:#000000;
}
a{
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
background-color:inherit;
}
a:hover{color:80a630; text-decoration:none; background-color:inherit;}
a img{border:none;}
p{padding:0 0 1.6em 0;}
p form{margin-top:0; margin-bottom:20px;}
img.left,img.center,img.right{padding:4px; border:1px solid #a0a0a0;}
img.left{float:left; margin:0 12px 5px 0;}
img.center{display:block; margin:0 auto 5px auto;}
img.right{float:right; margin:0 0 5px 12px;}
/**************** Header and navigation styles ****************/
#container{
width:760px;
margin:20px auto;
padding:1px 0;
text-align:left;
background:#000000;
color:#999999;
border:2px solid #333333;
}
#header{
height:100px;
width:758px;
margin:0 1px 1px 1px;
background:#000000;
color:#ffffff;
}
#header h1{
padding:35px 0 0 20px;
font-size:2.4em;
background-color:inherit;
color:#ffffff;
letter-spacing:-2px;
font-weight:normal;
}
#header h2{
margin:10px 0 0 20px;
font-size:1.4em;
background-color:inherit;
color:#80a630;
letter-spacing:-1px;
font-weight:normal;
}
#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#222222;
color:#999999;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #999999;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #999999;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#000000;
color:#80a630;
text-decoration:none;
}
/**************** Content styles ****************/
#content{
float:left;
width:530px;
font-size:0.9em;
padding:20px 0 0 20px;
}
#content h2{
display:block;
margin:0 0 16px 0;
font-size:1.7em;
font-weight:normal;
letter-spacing:-1px;
color:#80a630;
background-color:inherit;
}
#content h2 a{font-weight:normal;}
#content h3{margin:0 0 5px 0; font-size:1.4em; letter-spacing:-1px;}
#content a:hover,#subcontent a:hover{text-decoration:underline;}
#content ul,#content ol{margin:0 5px 16px 35px;}
#content dl{margin:0 5px 10px 25px;}
#content dt{font-weight:bold; margin-bottom:5px;}
#content dd{margin:0 0 10px 15px;}
/**************** Sidebar styles ****************/
#subcontent{
float:right;
width:170px;
padding:20px 20px 10px 0;
line-height:1.4em;
}
#subcontent h2{
display:block;
margin:0 0 15px 0;
font-size:1.6em;
font-weight:normal;
text-align:left;
letter-spacing:-1px;
color:#80a630;
background-color:inherit;
}
#subcontent p{margin:0 0 16px 0; font-size:0.9em;}
/**************** Menublock styles ****************/
.menublock{margin:0 0 20px 8px; font-size:0.9em;}
.menublock li{list-style:none; display:block; padding:2px; margin-bottom:2px;}
.menublock li a{font-weight:bold; text-decoration:none;}
.menublock li a:hover{text-decoration:none;}
.menublock li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;}
.menublock li ul li{margin-bottom:0;}
.menublock li ul a{font-weight:normal;}
/**************** Searchbar styles ****************/
#searchbar{margin:0 0 20px 0;}
#searchbar form fieldset{margin-left:10px; border:0 solid;}
#searchbar #s{
height:1.2em;
width:110px;
margin:0 5px 0 0;
border:1px solid #a0a0a0;
}
#searchbar #searchbutton{
width:auto;
padding:0 1px;
border:1px solid #808080;
font-size:0.9em;
text-align:center;
}
/**************** Footer styles ****************/
#footer{
clear:both;
width:758px;
padding:5px 0;
margin:0 1px;
font-size:0.9em;
color:#f0f0f0;
background:#222222;
}
#footer p{padding:0; margin:0; text-align:center;}
#footer a{color:#f0f0f0; background-color:inherit; font-weight:bold;}
#footer a:hover{color:#ffffff; background-color:inherit; text-decoration: underline;}
/**************** Misc classes and styles ****************/
.splitcontentleft{float:left; width:48%;}
.splitcontentright{float:right; width:48%;}
.clear{clear:both;}
.small{font-size:0.8em;}
.hide{display:none;}
.textcenter{text-align:center;}
.textright{text-align:right;}
.important{color:#f02025; background-color:inherit; font-weight:bold;}
.box{
margin:0 0 20px 0;
padding:10px;
border:1px solid #333333;
background-color:#000000;
color:#999999;
line-height:1.5em;
}
</style>
</head>
<body>
<div id="container" >
<div id="header">
<h1>Your Host</h1>
<h2>Online solutions for your business</h2>
</div>
<div id="navigation">
<ul>
<li><a class="selected" href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Shared Hosting</a></li>
<li><a href="http://www.free-css.com/">Dedicated Hosting</a></li>
<li><a href="http://www.free-css.com/">Reseller Hosting</a></li>
<li><a href="http://www.free-css.com/">Design Services</a></li>
<li><a href="http://www.free-css.com/">Domains</a></li>
</ul>
</div>
<div id="content">
<h2>Welcome to Your Host</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec aliquam laoreet turpis. Duis ut quam. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis ultrices risus. Integer ligula. Maecenas enim elit, commodo eu, blandit vitae, lobortis id, mi. Proin eget dolor eget mauris consectetuer feugiat. Ut volutpat feugiat nibh. Nullam turpis. Donec pellentesque est id urna. Cras nec neque. Suspendisse condimentum.</p>
<div class="splitcontentleft">
<h2>Featured Services:</h2>
<div class="box">
<h3>December Special</h3>
<ul>
<li>Shared Hosting Package</li>
<li>400MB Disk Storage</li>
<li>45GB Monthly Bandwidth</li>
<li>Multiple Domain Hosting (15)</li>
<li>New Orders Only</li>
</ul>
<strong>from $9.95 / month.</strong> <br />
<a href="http://www.free-css.com/">Learn More</a> </div>
<div class="box">
<h3>Managed Server</h3>
<ul>
<li>Intel Pentium 4 2.8Ghz CPU</li>
<li>1GB DDR System Ram</li>
<li>80GB 7200RPM Hard Drive</li>
<li>1500GB Monthly Bandwidth</li>
<li>FREE Cpanel/WHM Included</li>
<li>5 IP Addresses</li>
</ul>
<strong>$229.95 / month.</strong> <br />
<a href="http://www.free-css.com/">Learn More</a> </div>
<div class="box">
<h3>Custom Design</h3>
<ul>
<li>YourName.com</li>
<li>e-Commerce Enabed</li>
<li>Search Engine Submission</li>
<li>Multiple Pages</li>
<li>Training</li>
</ul>
<strong>from $99.</strong> <br />
<a href="http://www.free-css.com/">Learn More</a> </div>
</div>
<div class="splitcontentright">
<h2>Hosting</h2>
<p>Hosting Customers enjoy advanced features and services such as:</p>
<ul>
<li>24/7 Technical Support</li>
<li>99.9% Uptime guarantee</li>
<li>Cpanel 10.+ Control Panel</li>
<li>Perl/CGI/Python Support</li>
<li>PHP 5.x Scripting Support</li>
<li>Unlimited Auto Responders</li>
<li>Unlimited Email Forwarders</li>
<li>Unlimited FTP Accounts</li>
<li>Unlimited Mailing Lists</li>
<li>Unlimited POP3 Accounts</li>
<li>Unlimited Sub-Domains</li>
</ul>
<a href="http://www.free-css.com/">Learn More</a> <br />
<br />
<h2>Design Services</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec aliquam laoreet turpis. Duis ut quam. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis ultrices risus. Integer ligula. Maecenas enim elit, commodo eu, blandit vitae, lobortis id, mi. Proin eget dolor eget mauris consectetuer feugiat. Ut volutpat feugiat nibh. Nullam turpis. Donec pellentesque est id urna. Cras nec neque. Suspendisse condimentum.</p>
<a href="http://www.free-css.com/">Learn More</a> </div>
</div>
<div id="subcontent">
<div class="small box"> <img src="./yourhost-images/map.jpg" alt="map" />
<h2>Your Host</h2>
More than just your average hosting service; We bring all elements of online business under one roof. </div>
<div class="small box">
<h2>Knowledgebase Articles</h2>
<ul>
<li><a href="http://www.free-css.com/">How do I upgrade my PHP installation?</a></li>
<li><a href="http://www.free-css.com/">How do I automate a backup of my databases?</a></li>
<li><a href="http://www.free-css.com/">Can I host more than one domain?</a></li>
</ul>
</div>
<div class="small box">
<h2>Testimonials</h2>
<ul>
<li><a href="http://www.free-css.com/">"This is the best host!"</a></li>
<li><a href="http://www.free-css.com/">"Great uptime... Saved my business!"</a></li>
<li><a href="http://www.free-css.com/">"Super fast servers!"</a></li>
</ul>
</div>
<h2>Solutions</h2>
<ul class="menublock">
<li><a href="http://www.free-css.com/">Shared Hosting</a></li>
<li><a href="http://www.free-css.com/">Dedicated Hosting</a></li>
<li><a href="http://www.free-css.com/">Reseller Hosting</a></li>
<li><a href="http://www.free-css.com/">Design Services</a></li>
<li><a href="http://www.free-css.com/">Domains</a></li>
</ul>
<br />
<div id="searchbar">
<h2>Search This Site</h2>
<form method="post" action="#">
<p>
<input class="searchfield" name="search_query" type="text" id="keywords" value="Search Keywords" />
<input class="searchbutton" name="submit" type="submit" value="Search" />
</p>
</form>
</div>
</div>
<div id="footer">
<p>© 2007 <a href="http://www.free-css.com/">Your Host</a> · <a href="http://www.kendahlin.com/" title="Ken Dahlin">Design by Ken Dahlin</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category