web-hosting
<!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>Web Hosting</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin:0;
padding:0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
background: #272727;
}
p {
margin: 10px 0px;
font-size: 11px;
text-align: justify;
}
h1 {
margin: 0px;
padding: 5px 0px 0px 0px;
font-size: 24px;
font-weight: bold;
color:#000000;
}
h2 {
margin: 0px;
padding: 5px 0px;
font-size: 20px;
font-weight: bold;
color:#ffffff;
}
h3 {
margin: 0px;
padding: 10px 0;
font-size: 25px;
font-weight: bold;
color:#ffb21e;
}
h4 {
clear: both;
margin: 0px;
padding: 15px 0px 5px 10px;
font-size: 14px;
font-weight: bold;
color: #ff0000;
}
.readmore_black a{
clear: both;
display: block;
width: 100px;
height: 22px;
padding-top: 3px;
text-align: center;
background: url(web-hosting-images/more_black.gif) no-repeat;
color: #ffb21e;
text-decoration: none;
}
.readmore_white a{
clear: both;
display: block;
width: 100px;
height: 22px;
padding-top: 3px;
background: url(web-hosting-images/more_white.gif) no-repeat;
color: #000000;
text-decoration: none;
text-align: center;
}
#container {
margin: 0px auto;
width: 920px;
margin-top: 10px;
}
/* top */
#top {
clear: both;
width: 900px;
height: 100px;
padding: 0px 10px;
color: #FFFFFF;
}
.sitename_panel {
float: left;
width: 350px;
height: 100px;
margin: 0px;
padding: 0px;
}
.sitename{
padding: 65px 0px 10px 10px;
font-size: 40px;
color: #fb6e26;
font-weight: bold;
}
.sitename span{
font-size: 40px;
color: #ffb21e;
font-weight: normal;
}
.freecall_panel {
float: right;
width: 390px;
height: 100px;
text-align: right;
padding-right: 10px;
}
.bigfont {
padding: 40px 0px 10px 0px;
font-size: 25px;
color: #FF0000;
}
.freecall_panel span{
padding-left: 10px;
font-size: 25px;
color: #FFFFFF;
}
.livechat_panel {
float: right;
width: 110px;
}
.livechat_panel img{
border: none;
}
/* end of top */
/* content */
#content {
float:left;
width: 880px;
padding: 0px 20px;
background:url(web-hosting-images/frame.gif) repeat-y;
}
.content_top{
clear: both;
width: 920px;
height: 15px;
background: url(web-hosting-images/top.gif) no-repeat;
}
/* for IE 6 */
* html .content_top{
clear: both;
width: 920px;
height: 15px;
margin-bottom: -5px;
background: url(web-hosting-images/top.gif) no-repeat;
}
.content_bottom{
clear: both;
width: 920px;
height: 16px;
background: url(web-hosting-images/bottom.gif) no-repeat;
}
/* banner */
.banner {
width: 830px;
height: 204px;
padding: 50px 0px 0px 50px;
margin-bottom: 10px;
background: url(web-hosting-images/banner.jpg) no-repeat;
}
.banner ul {
margin: 20px 0px 20px 50px;
padding: 0px;
list-style: disc;
}
.banner ul li{
font-size: 18px;
color: #FFFFFF;
padding: 0px 0px 5px 0px;
}
/* end of banner */
/* menu */
#menu{
clear: both;
width: 880px;
height: 35px;
margin: 0px 0px 10px 0px;;
padding: 0px;
background: #272727;
}
.menuleft {
float: left;
height: 35px;
width: 10px;
background: #272727 url(web-hosting-images/menu_left.gif) no-repeat;
}
.menuright {
float: right;
height: 35px;
width: 10px;
background: #272727 url(web-hosting-images/menu_right.gif) no-repeat;
}
#menu ul {
margin: 0px;
padding: 0px 0px 0px 50px;
list-style: none;
text-align: center;
color: #ffffff;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
padding: 7px 20px 2px 20px;
margin-right: 1px;
height: 25px;
font: 14px arial;
text-align: center;
color: #ffffff;
text-decoration: none;
}
#menu ul li a:visited{
color: #ffffff;
}
#menu ul li a:hover, #menu ul li .current{
color: #ffffff;
text-decoration: none;
background: #285fc2;
}
/* end of menu */
/* 3 boxes */
#boxarea{
clear: both;
margin: 0px 0px 0px 0px;
padding: 10px 0px;
width: 880px;
}
.box1{
float: left;
width: 280px;
margin-right: 19px;
background: #272727;
}
.box1top {
height: 30px;
padding-top: 10px;
text-align: center;
background:url(web-hosting-images/box1_top.gif) no-repeat;
}
.body {
width: 250px;
padding: 20px 10px 0px 20px;
color: #FFFFFF;
}
.box2{
float: left;
width: 280px;
margin-right: 19px;
background: #272727;
}
.box2top {
height: 30px;
padding-top: 10px;
text-align: center;
background:url(web-hosting-images/box2_top.gif) no-repeat;
}
.box3{
float: left;
width: 280px;
margin: 0px;
background: #272727;
}
.box3top {
height: 30px;
padding-top: 10px;
text-align: center;
background:url(web-hosting-images/box3_top.gif) no-repeat;
}
.boxbottom{
width:280px;
height: 10px;
background: url(web-hosting-images/box_bottom.gif) no-repeat;
}
* html .boxbottom{
width:280px;
height: 10px;
margin-bottom: -10px;
background: url(web-hosting-images/box_bottom.gif) no-repeat;
}
.price {
color:#FF0000;
font-size: 18px;
}
/* end of 3 boxes */
/* 2 columns */
#2columns{
clear: both;
margin: 0px 0px 0px 0px;
padding: 40px 0px 10px 0px;
width: 880px;
}
.column1{
float: left;
width: 480px;
padding: 10px;
padding-left: 20px;
background: #ffffff;
}
.column2{
float: right;
width: 320px;
padding: 10px;
padding-left: 30px;
border-left: 1px dotted #CCCCCC;
background: #ffffff;
}
/* end of 2 columns */
/* Detail page */
#features{
clear: both;
float: left;
margin: 0px 0px 0px 0px;
padding: 30px 20px 10px 20px;
width: 730px;
}
.titlerow {
clear: both;
float: left;
padding: 5px 0px;
width: 730px;
margin: 15px 0px 5px 0px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background: #333333;
border-bottom: 1px solid #CCCCCC;
}
.subrow {
clear: both;
padding: 5px 0px;
font-size: 12px;
background: #ffffff;
}
.name_column {
float: left;
padding-left: 10px;
width: 250px;
font-weight: bold;
}
.plan_column {
float: left;
width: 150px;
}
.plan_column img{
display: block;
width: 18px;
height: 18px;
margin: 0px;
padding: 0px;
border: none;
}
/* end of detail page */
/* -------- Footer --------- */
#footer {
clear: left;
padding: 15px 0px 0px 0px;
width: 920px;
height: 62px;
color: #ffb21e;
line-height: 24px;
text-align: center;
}
#footer a {
color: #ffb21e;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
/* --------- end of footer --------------*/
</style>
<style type="text/css">
<!--
.style1 {
font-size: 22px;
color: #fb6e26;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top">
<div class="sitename_panel">
<div class="sitename"><span>Web</span> Hosting</div>
</div>
<div class="livechat_panel"> <a href="http://www.free-css.com/"><img src="web-hosting-images/livechat.gif" alt="" /></a> </div>
<div class="freecall_panel">
<div class="bigfont">Sales & Support</div>
<div class="phoneno">Toll Free <span>(100) 200-3000</span></div>
</div>
</div>
<div class="content_top"></div>
<div id="content">
<div class="banner">
<h3>Special Reseller Package</h3>
<ul>
<li>1,000 GB disk space</li>
<li>10,000 GB premium bandwidth</li>
<li>Unlimited hosting accounts</li>
</ul>
<div class="readmore_black"><a href="http://www.free-css.com/">Learn more</a></div>
</div>
<div id="menu">
<div class="menuleft"></div>
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="subpage.html">Subpage</a></li>
<li><a href="http://www.free-css.com/">Help Center</a></li>
<li><a href="http://www.free-css.com/">Resellers</a></li>
<li><a href="http://www.free-css.com/">Our Company</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
<div class="menuright"></div>
</div>
<div id="boxarea">
<div class="box1">
<div class="box1top">
<h2>Personal Hosting</h2>
</div>
<div class="body"> Start from<br />
<span class="price">$4.75</span> per month
<ul>
<li>100 GB disk space</li>
<li>1,000 GB bandwidth</li>
<li>Host unlimited domains</li>
</ul>
<div class="readmore_black"><a href="http://www.free-css.com/">Learn more</a></div>
</div>
<div class="boxbottom"> </div>
</div>
<div class="box2">
<div class="box2top">
<h2>Professional Hosting</h2>
</div>
<div class="body"> Start from<br />
<span class="price">$9.75</span> per month
<ul>
<li>200 GB disk space</li>
<li>2,000 GB bandwidth</li>
<li>Host unlimited domains</li>
</ul>
<div class="readmore_black"><a href="http://www.free-css.com/">Learn more</a></div>
</div>
<div class="boxbottom"></div>
</div>
<div class="box3">
<div class="box3top">
<h2>Dedicated Server</h2>
</div>
<div class="body"> Start from<br />
<span class="price">$199.75</span> per month
<ul>
<li>2x 500 GB hard disk</li>
<li>30,000 GB bandwidth</li>
<li>Quad Core CPU with 8 GB RAM</li>
</ul>
<div class="readmore_black"><a href="http://www.free-css.com/">Learn more</a></div>
</div>
<div class="boxbottom"></div>
</div>
</div>
<div id="2columns">
<div class="column1">
<h1>Welcome to<span class="style1"> web hosting</span></h1>
<p>This website layout is designed for web hosting companies provided by TemplateMo.com website. Feel free to edit and apply this template layout for your personal or commercial websites. You may put a credit link back to templatemo.com at the footer. Thank you. </p>
<p> Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. </p>
<div class="readmore_white"><a href="http://www.free-css.com/">Read more</a></div>
<br />
<a target="_blank" href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/web-hosting-images/vcss-blue" alt="" vspace="8" border="0" /></a><br />
</div>
<div class="column2">
<h1>Customer Services</h1>
<ul>
<li>Mauris blandit vehicula neque</li>
<li>Proin consectetuer, Donec venenatis</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Aliquam sagittis molestie sapien</li>
<li>Suspendisse a nibh Nunc quis sem</li>
</ul>
<div class="readmore_white"><a href="http://www.free-css.com/">Learn more</a></div>
</div>
</div>
</div>
<div class="content_bottom"></div>
<div id="footer"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Hosting Features</a> | <a href="http://www.free-css.com/">Help Center</a> | <a href="http://www.free-css.com/">Resellers</a> | <a href="http://www.free-css.com/"> Our Company</a> | <a href="http://www.free-css.com/">Contact Us</a><br />
Copyright <a href="http://www.free-css.com/"><b>Your Company Name</b></a> | Designed by <a href="http://www.templatemo.com"><b>templatemo.com</b></a></div>
</div>
</body>
</html>
Related examples in the same category