your-business
<!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>Your Business</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*************** Start Top Fixed Sections code *************************************/
* {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, fieldset, table, ul {
margin: 1em 0;
}
img {
border: 0;
}
a:link {
color: #006eab;
text-decoration: none;
border-bottom: 1px dotted #006eab;
}
a:visited {
color: #04527d;
text-decoration: none;
border-bottom: 1px dotted #04527d;
}
a:hover {
color: #0285cd;
text-decoration: none;
border-bottom: none;
}
span {
color: #002337;
}
.clear {
clear:both;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
.clearfix {display:block;}
/* End hide from IE-mac */
body {
font: 62.5%/1.6 Arial, Helvetica, sans-serif;
background: url(your-business-images/bg.png) repeat-x top left #1f2331;
text-align: center;
color: #33394d;
}
#header {
height: 84px;
width: 994px;
margin: 0px auto;
position: relative;
}
#logo {
position: absolute;
top: 18px;
left: 12px;
}
ul#navBar {
height: 84px;
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
bottom: 0px;
right: 0px;
}
ul#navBar li {
float: left;
display: block;
width: auto;
height: 84px;
padding: 0px 0px 0px 1px;
}
ul#navBar li a:link, ul#navBar li a:visited {
float: left;
display: block;
width: auto;
margin: 0px;
height: 34px;
padding: 25px 10px;
text-decoration: none;
font-weight: normal;
background: url(your-business-images/nav_bg.png) repeat-x top left;
font-family: Cambria, "Times New Roman", Georgia, Times, serif;
font-size: 1.8em;
color: #ededed;
border: none;
}
ul#navBar li.current a:link, ul#navBar li.current a:visited {
background: url(your-business-images/nav_hover.png) repeat-x top left;
}
ul#navBar li a:hover {
color: #fff;
text-decoration: none;
background: url(your-business-images/nav_hover.png) repeat-x top left;
border: none;
}
#welcomeMessage{
height: 185px;
width: 944px;
margin: 0px auto;
padding: 25px;
position: relative;
background: url(your-business-images/globe.jpg) no-repeat 85% 60%;
text-align: left;
}
h1 {
margin: 0.7em;
font-size: 2.2em;
font-weight: normal;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
color: #33394c;
}
#welcomeMessage p {
margin: 0.5em 0.5em 0.5em 3em ;
width: 520px;
padding: 0em;
font-size: 1.6em;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif ;
color: #494949;
line-height: 1.4em;
}
/*************** End Top Fixed Sections *************************************/
/*************** Start Content Section *************************************/
#wrapper {
width: 994px;
margin: 0px auto;
padding: 0px;
background: url(your-business-images/content_bg.png) repeat-y top left;
}
#secWrapper{
width: 994px;
margin: 0px auto;
padding: 20px 0px 0px 0px;
background: url(your-business-images/content_top.png) no-repeat top left;
}
#container {
width: 964px;
margin: 0px auto;
padding: 0px 15px 30px 15px;
background: url(your-business-images/content_bottom.png) no-repeat bottom left;
}
#mainCol {
width: 644px;
float: left;
margin: 0px;
padding: 0px;
text-align: left;
}
#mainCol #services {
position: relative;
background: url(your-business-images/service_bg.jpg) no-repeat top left;
width: 643px;
padding: 0px;
padding-top: 46px;
height: 143px;
margin-bottom: 10px;
}
#services h3 {
font-size: 18px;
color: #112638;
font-weight: normal;
margin: 0px;
padding: 0px;
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
position: absolute;
top: 10px;
left: 20px;
}
#mainCol #services ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#mainCol #services ul li {
float: left;
display: block;
width: 180px;
height: 120px;
padding: 5px;
margin: 0px 8px 0px 15px;
text-align: left;
}
#mainCol #services ul li h4 {
font-size: 14px;
color: #112638;
font-weight: bold;
margin: 0px;
padding: 0px;
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
}
#mainCol #services ul li p {
color: #414141;
font-size: 12px;
margin: 2px;
padding: 0px;
text-align: left;
}
#mainCol ul#maincon {
border: 1px solid #cde1f5;
margin: 0px;
padding: 6px;
width: 625px;
list-style-type: none;
background: url(your-business-images/main_col_bg.png) no-repeat top left #f8fcff;
}
#mainCol ul#maincon li {
width: 625px;
padding: 5px 0px 10px 0px;
margin: 0px 0px 5px 0px;
border-bottom: 1px dotted #aeaeae;
}
#mainCol ul#maincon li.last {
border: none;
}
#mainCol ul#maincon li img {
width: 153px;
height: 117px;
padding: 1px;
margin: 6px 0px 0px 0px;
float: left;
border: 2px solid #cde1f5;
}
#mainCol ul#maincon li h2 {
font-size: 18px;
color: #34394e;
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
padding: 0px;
margin: 0px 0px 0px 170px;
}
#mainCol ul#maincon li p {
font-size: 13px;
color: #4d4d4d;
margin: 0px;
padding: 0px;
margin-left: 170px;
}
#secCol {
width: 320px;
float: right;
margin: 0px;
padding: 0px;
text-align: center;
}
fieldset#login {
background: url(your-business-images/login_bg.png) no-repeat top left;
margin: 0px auto;
padding: 5px 5px 5px 5px;
width: 276px;
height: 179px;
font-size: 1.4em;
border: none;
position: relative;
left: 15px;
}
#login h4 {
font-size: 18px;
font-weight: normal;
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
width: 246px;
height: 31px;
padding: 4px 0px 0px 30px;
margin: 0px;
text-align: left;
}
#login form {
height: 95px;
width: 276px;
padding: 10px 0px 0px 0px;
margin: 0px;
}
#login p {
width: 276px;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
#login form p label {
text-align: left;
margin-left: 0.5em;
float: left;
font-size: 14px;
}
#login form p.check {
padding-left: 77px;
width: 199px;
height: 23px;
}
#login #remlabel {
float: left;
font-size: 12px;
position: relative;
left: -3px;
}
#login #remember {
float: left;
width: 14px;
height: 14px;
margin: 0px;
padding: 0px;
position: relative;
top: 3px;
}
#login #submit {
background: url(your-business-images/login.png) no-repeat top left;
width: 77px;
height: 27px;
cursor: pointer;
border: none;
float: right;
}
#login #username, #login #password {
background: url(your-business-images/input_bg.png) no-repeat top left;
border: 1px solid #d0d0d0;
width: 192px;
height: 19px;
padding: 2px;
color: #222222;
font-size: 14px;
float: right;
margin-bottom: 10px;
}
#login p.member {
text-align: left;
width: 270px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
margin: 2px 2px 0px 2px;
padding: 2px;
line-height: 18px;
}
h3#news, h3#test, h3#why {
position: relative;
left: 21px;
background: url(your-business-images/latest_bg.png) no-repeat top left;
width: 289px;
text-align: left;
height: 33px;
padding: 3px 5px 3px 25px;
margin: 0px;
margin-top: 10px;
color: #fff;
font-size: 18px;
font-weight: normal;
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
}
h3#test {
background: url(your-business-images/test_bg.png) no-repeat top left;
}
h3#why {
background: url(your-business-images/why_bg.png) no-repeat top left;
width: 284px;
position: relative;
left: -20px;
padding: 3px 5px 3px 30px;
}
#secCol ul {
position: relative;
left: 15px;
border: 1px solid #d0d0d0;
border-bottom: none;
list-style-type: none;
width: 285px;
margin: 0px auto;
margin-bottom: 10px;
padding: 0px;
text-align: left;
}
#secCol ul li {
display: block;
margin: 0px;
padding: 5px;
width: 275px;
background: url(your-business-images/side_col_bg.png) no-repeat top left #fff;
border-bottom: 1px solid #d0d0d0;
}
#secCol ul li h4 {
font-size: 14px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
#secCol ul li span {
color: #6b6b6b;
font-weight: bold;
}
#secCol ul li p {
color: #4d4d4d;
font-size: 12px;
margin: 2px;
padding: 2px;
}
#secCol ul li a.more:link, #secCol ul li a.more:visited, #secCol ul li a.more:hover {
background: url(your-business-images/arrow.png) no-repeat center left;
margin: 0px 0px 0px 200px;
padding: 0px;
display: inline;
padding-left: 12px;
border: none;
text-decoration: underline;
font-size: 12px;
text-align: right;
}
#secCol ul li a.more:hover {
text-decoration: none;
}
#secCol ul li p.test {
text-align: right;
}
#footer {
width: 994px;
margin: 5px auto;
font-size: 12px;
color: #d9d7d7;
padding: 0px;
}
#footer p {
margin: 2px;
padding: 2px;
font-size: 12px;
font-family: arial;
}
#footer ul {
list-style-type: none;
display: inline;
}
#footer ul li {
display: inline;
}
#footer ul li a:link, #footer ul li a:visited {
border: none;
color: #d9d7d7;
text-decoration: underline;
}
#footer ul li a:hover {
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="header"> <a href="http://www.free-css.com/"><img src="your-business-images/logo.png" id="logo" alt="" /></a>
<ul id="navBar">
<li class="current"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Our Services</a></li>
<li><a href="http://www.free-css.com/">Pricing Plans</a></li>
<li><a href="http://www.free-css.com/">About us</a></li>
<li><a href="http://www.free-css.com/">Contact us</a></li>
</ul>
</div>
<div id="welcomeMessage">
<h1>Welcome to Your Business</h1>
<p><span>Yourbusiness.com</span> is a leading virtual corporate business that will help you monetize your work to the most level you could reach.</p>
<p>Lorem ipsum dolor sit amet, consectetur adip, <span>Yourbusiness.com</span> will give you a new way to look at your business and lead it to all new horizons.</p>
</div>
<div id="wrapper">
<div id="secWrapper">
<div id="container" class="clearfix">
<div id="mainCol" class="clearfix">
<div id="services">
<h3>Our Services</h3>
<ul>
<li>
<h4>Service title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<h4>Service title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<h4>Service title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
</ul>
</div>
<h3 id="why">Why Choose Your Business ?</h3>
<ul id="maincon">
<li class="clearfix"> <img src="your-business-images/image1.jpg" alt="" />
<h2>Services you could depend on</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</li>
<li class="clearfix"> <img src="your-business-images/image2.jpg" alt="" />
<h2>Guranteed added value</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</li>
<li class="clearfix"> <img src="your-business-images/image3.jpg" alt="" />
<h2>Support you can trust</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</li>
<li class="clearfix last"> <img src="your-business-images/image4.jpg" alt="" />
<h2>Professional team at you help</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</li>
</ul>
</div>
<div id="secCol">
<fieldset id="login">
<h4>Members login</h4>
<form action="http://www.free-css.com/">
<p class="clearfix">
<label for="username">Username</label>
<input name="username" id="username" type="text" value="" />
</p>
<p class="clearfix">
<label for="password">Password</label>
<input name="password" id="password" type="text" value="" />
</p>
<p class="clearfix check">
<input type="checkbox" id="remember" name="remember" />
<label for="remember" id="remlabel">Remember me</label>
<input name="submit" id="submit" type="submit" value="" />
</p>
</form>
<p class="member"><a href="http://www.free-css.com/">Lost your Password?</a><br />
Not a member yet? <a href="http://www.free-css.com/">Register now!</a></p>
</fieldset>
<h3 id="news">Latest News</h3>
<ul>
<li class="clearfix">
<h4><a href="http://www.free-css.com/">News title goes here</a></h4>
<span>19 November, 2008</span>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="http://www.free-css.com/" class="more">Read more</a> </li>
<li class="clearfix">
<h4><a href="http://www.free-css.com/">News title goes here</a></h4>
<span>19 November, 2008</span>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="http://www.free-css.com/" class="more">Read more</a> </li>
</ul>
<h3 id="test">Testimonials</h3>
<ul>
<li class="clearfix">
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="test"><span>Lorem ipsum</span>, <a href="http://www.free-css.com/">dolorsit.com</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="http://www.free-css.com/">Home</a> - </li>
<li><a href="http://www.free-css.com/">Terms and Conditions</a> - </li>
<li><a href="http://www.free-css.com/">Privacy Policy</a> - </li>
<li><a href="http://www.free-css.com/">Sitemap</a> - </li>
<li><a href="http://www.free-css.com/">Support</a> - </li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
<p>Copyrights © 2008 yourbusiness.com, All Rights Reserved | Design by <a href="http://www.webpagedesign.com.au/">Art for the web</a></p>
</div>
</body>
</html>
Related examples in the same category