carpet-cleaning
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carpet Cleaning | About</title>
<meta charset="utf-8">
<style type='text/css'>
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
.left {
float:left;
}
.right {
float:right;
}
.wrapper {
width:100%;
overflow:hidden;
}
body {
background:url(carpet-cleaning-images/bg_top_repeat2.jpg) top repeat-x #f3f3f3;
border:0;
font:13px Arial, Helvetica, sans-serif;
color:#000;
line-height:20px;
}
.css3 {
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow:0 0 4px rgba(0, 0, 0, .4);
-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);
-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);
behavior:url(js/PIE.htc);
position:relative;
}
.main {
margin:0 auto;
width:860px;
position:relative;
}
.body1 {
background:url(carpet-cleaning-images/bg_top2.jpg) top center no-repeat;
}
.body2 {
background:url(carpet-cleaning-images/bg_bot.jpg) bottom repeat-x;
height:99px;
}
.block {
height:99px;
}
.extra {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -99px;
}
body, html {
height:100%;
}
a {
color:#628ba4;
text-decoration:underline;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
font-size:40px;
text-transform:uppercase;
line-height:50px;
padding:13px 0 0 0;
float:left;
font-weight:400;
}
h2 {
font-size:30px;
color:#3b5b70;
line-height:36px;
font-weight:300;
padding:0 0 19px 0;
letter-spacing:-1px;
}
p {
padding-bottom:20px;
}
header {
height:306px;
overflow:hidden;
}
#logo {
color:#3a5b70;
text-decoration:none;
}
#logo span {
color:#628ba4;
}
#icons {
float:right;
padding:28px 5px 0 0;
}
#icons li {
float:left;
padding-left:10px;
}
#menu {
position:absolute;
top:102px;
left:-20px;
}
#menu li {
float:left;
padding-right:5px;
}
#menu li a {
display:block;
font-size:18px;
text-transform:uppercase;
text-decoration:none;
color:#fff;
behavior:url(js/PIE.htc);
position:relative;
line-height:37px;
padding:0 20px;
margin:0 1px 1px 0;
}
#menu li a:hover, #menu #menu_active a {
color:#3a5b70;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
background:url(carpet-cleaning-images/menu_bg.gif) top repeat-x;
border-bottom:1px solid #3f5f74;
border-right:1px solid #3f5f74;
margin:0;
}
.text1 {
font-size:30px;
line-height:36px;
color:#3c596b;
padding:119px 0 0 0;
font-weight:400;
letter-spacing:-1px;
}
.text1 span {
display:block;
font-size:40px;
color:#fff;
line-height:50px;
margin-top:-12px;
}
header p {
font-size:14px;
line-height:20px;
color:#000;
padding:14px 0 0 0;
width:510px;
}
#content {
width:100%;
overflow:hidden;
padding-top:86px;
padding-bottom:36px;
}
.inner_copy, .inner_copy a {
border:0;
float:right;
background:#fff;
color:#f00;
width:50%;
line-height:10px;
font-size:10px;
margin:-220% 0 0 0;
overflow:hidden;
padding:0;
}
.pad_left1 {
padding-left:64px;
}
.marg_left1 {
margin-left:25px;
}
.marg_right1 {
margin-right:25px;
}
.marg_right2 {
margin-right:10px;
}
.pad_bot1 {
padding-bottom:10px;
}
.pad_bot2 {
padding-bottom:20px;
}
.pad_bot3 {
padding-bottom:30px;
}
.marg_top1 {
margin-top:8px;
}
.line1 {
background:url(carpet-cleaning-images/line_ver1.gif) 543px 0 repeat-y;
width:100%;
float:left;
}
.line2 {
background:url(carpet-cleaning-images/line_ver2.gif) 255px 0 repeat-y;
}
.list1 li a {
padding-left:9px;
background:url(carpet-cleaning-images/marker_1.gif) 0 6px no-repeat;
}
.font1 {
font-weight:bold;
padding-bottom:4px;
}
.under {
background:url(carpet-cleaning-images/line_hor1.gif) bottom repeat-x;
padding-bottom:14px;
margin-bottom:13px;
}
.color1 {
color:#628ba4;
}
#ContactForm {
margin-top:-5px;
}
#ContactForm p {
line-height:21px;
padding-bottom:9px;
}
#ContactForm a {
margin-left:40px;
float:right;
}
#ContactForm .input {
width:209px;
height:15px;
border:1px solid #dadada;
background:#fff;
padding:2px 5px;
margin-bottom:9px;
color:#000;
font:13px Arial, Helvetica, sans-serif;
}
#ContactForm textarea {
overflow:auto;
width:393px;
height:304px;
border:1px solid #dadada;
background:#fff;
padding:2px 5px;
margin-bottom:5px;
color:#000;
font:13px Arial, Helvetica, sans-serif;
}
footer {
padding:30px 0 33px 0;
color:#4b5154;
font-size:12px;
line-height:18px;
width:100%;
overflow:hidden;
}
.footerlink {
margin:0 auto;
width:860px;
position:relative;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#4b5154;
}
.footerlink a {
color:#4b5154;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#4b5154;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}
</style>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/ie6_script_other.js"></script>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page2">
<!-- START PAGE SOURCE -->
<div class="extra">
<div class="body1">
<div class="main">
<header>
<div class="wrapper">
<h1><a href="#" id="logo">Carpet <span>Cleaning</span></a></h1>
<ul id="icons">
<li><a href="#"><img src="carpet-cleaning-images/icon1.gif" alt=""></a></li>
<li><a href="#"><img src="carpet-cleaning-images/icon2.gif" alt=""></a></li>
<li><a href="#"><img src="carpet-cleaning-images/icon3.gif" alt=""></a></li>
</ul>
</div>
<nav>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li id="menu_active"><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</nav>
<div class="text1"> We Will Make <span>Your Carpets Clean and Fresh</span> </div>
</header>
<section id="content">
<div class="line1">
<article class="col1">
<h2>Our Profile</h2>
<p> <strong>Neque porro quisquam est, qui dolorem ipsum </strong><br>
Quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eiusodi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptat enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. </p>
<div class="wrapper pad_bot3">
<figure class="left marg_right1"><img src="carpet-cleaning-images/page2_img1.jpg" alt=""></figure>
Nisi ut aliquid ex ea commodi consequatur uis autem vel eum iure reprehenderit qui in ea voluptate:
<ul class="list1 left">
<li><a href="#">At vero eos et accusamus et exercitationem</a></li>
<li><a href="#">Lusto odio dignissimos ducmus commodi</a></li>
</ul>
</div>
<h2>What We Deliver</h2>
<p> <strong>Sed ut perspiciatis unde omnste</strong> natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
<div class="wrapper">
<figure class="right marg_left1"><img src="carpet-cleaning-images/page2_img2.jpg" alt=""></figure>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia <a href="#">consequuntur magni dolores</a> eosui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velited quia non numquam eius modi</p>
</div>
<p><strong>Tempora incidunt ut labore</strong>et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure <a href="#">reprehenderit qui</a> in ea voluptate velit esse quam nihil molestiae consequatur.</p>
</article>
<article class="col2 pad_left1">
<h2>Our Work</h2>
<div class="wrapper pad_bot1">
<figure class="left marg_right2"><img src="carpet-cleaning-images/page1_img2.jpg" alt=""></figure>
<figure class="left marg_right2"><img src="carpet-cleaning-images/page1_img3.jpg" alt=""></figure>
<figure class="left"><img src="carpet-cleaning-images/page1_img4.jpg" alt=""></figure>
</div>
<div class="wrapper pad_bot3">
<figure class="left marg_right2"><img src="carpet-cleaning-images/page1_img5.jpg" alt=""></figure>
<figure class="left marg_right2"><img src="carpet-cleaning-images/page1_img6.jpg" alt=""></figure>
<figure class="left"><img src="carpet-cleaning-images/page1_img7.jpg" alt=""></figure>
</div>
<h2>What We Offer</h2>
<strong>At vero eos accusamus</strong><br>
Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque:
<ul class="list1 pad_bot2">
<li><a href="#">Nostrum exercitationem ullam</a></li>
<li><a href="#">Corporis suscipit laboriosam nisi ut</a></li>
</ul>
<strong>Excepturi sint occaecati cupiditate</strong><br>
Non provident, similique sunt in culpa qui officia deserunt mollitia animi:
<ul class="list1">
<li><a href="#">Qui blanditiis praesentium voluptatum Deleniti </a></li>
<li><a href="#">atque corrupti quos dolores</a></li>
</ul>
</article>
</div>
</section>
</div>
</div>
<div class="block"></div>
</div>
<div class="body2">
<div class="main">
<footer>
<div class="footerlink">
<p class="lf">Copyright © 2010 <a href="#">SiteName</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.templatemonster.com/">TemplateMonster</a></p>
<div style="clear:both;"></div>
</div>
</footer>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category