marketing-company
?<!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" xml:lang="en">
<head>
<title>Marketing Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
margin:0;
padding:0;
}
ul{
list-style:none;
}
fieldset{
border:0;
}
a,a:link,a:visited,a:hover{
color: #1d3868;
text-decoration:none;
}
a:focus,a:hover{
text-decoration:underline;
}
a img{
border:0;
}
.clear{
clear:both;
}
html{
height: 100%;
}
body{
position:relative;
background:#fff;
color:#000;
height: 100%;
font:62.5% Arial,sans-serif;
}
body#home{
background:#fff url(marketing-company-images/home_bodybg.jpg) repeat-x;
}
body#inner{
background:#fff url(marketing-company-images/inner_bodybg.jpg) repeat-x;
}
#header{
width: 960px;
height: 82px;
}
#logo{
display: block;
width: 290px;
height: 30px;
float: left;
margin: 14px 0px 0px 0px;
background: url(marketing-company-images/logo.jpg) no-repeat;
text-indent: -99999px;
}
#navigation{
padding: 17px 0px 0px 0px;
float: right;
}
#navigation ul li{
padding: 0px 0px 0px 31px;
float: left;
font-size: 14px;
color: #fff;
}
#navigation ul li a{
color: #fff;
}
#connect{
width: 210px;
padding: 22px 0px 5px 0px;
float: right;
clear: right;
}
#connect p{
font-size: 14px;
color: #7898d0;
line-height: 150%;
text-align: right;
font-style: italic;
}
#connect ul li{
float: left;
margin: 0px 0px 0px 10px;
}
#twitter a{
display: block;
width: 22px;
height: 22px;
text-indent: -99999px;
background: url(marketing-company-images/social_icons.jpg) no-repeat;
}
#facebook a{
display: block;
width: 22px;
height: 22px;
text-indent: -99999px;
background: url(marketing-company-images/social_icons.jpg) -32px 0px no-repeat;
}
#in a{
display: block;
width: 22px;
height: 22px;
text-indent: -99999px;
background: url(marketing-company-images/social_icons.jpg) -64px 0px no-repeat;
}
#banner{
width: 811px;
height: 293px;
padding: 48px 70px 0px 79px;
background: url(marketing-company-images/bannerbg.jpg) no-repeat;
}
#banner img{
float: left;
margin: 0px 56px 0px 0px;
}
#banner h1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
line-height: 100%;
margin: 0px 0px 12px 0px;
font-weight: normal;
color: #850709;
}
#banner p{
color: #000;
line-height: 145%;
font-size: 14px;
}
#banner a.button{
display: block;
width: 165px;
height: 25px;
color: #fff;
float: left;
font-size: 14px;
text-shadow: 1px 2px #000;
text-align: center;
margin: 28px 30px 0px 0px;
padding: 10px 0px 0px 0px;
background: url(marketing-company-images/banner_btn.jpg) no-repeat;
}
#banner a:hover.button{
text-decoration: none;
}
#featured{
width: 960px;
height: 345px;
margin: 2px 0px 0px 0px;
background: url(marketing-company-images/featuredbg.gif) left repeat-y;
}
.featured_container{
width: 240px;
height: 295px;
padding: 50px 0px 0px 0px;
float: left;
background: url(marketing-company-images/featuredbg.gif) right repeat-y;
}
.featured_container.active{
background: #11264b;
}
.image_container{
height: 142px;
margin: 0 auto;
}
.image_container img{
display: block;
margin: 0 auto;
}
.featured_container h2{
font-family: Georgia;
color: #fb5eea;
font-size: 14px;
margin: 0px 0px 15px 0px;
text-align: center;
}
.featured_container p{
color: #fff;
font-size: 14px;
line-height: 140%;
padding: 0px 15px;
text-align: center;
}
#content{
padding: 30px 0px 0px 0px;
border-bottom: 1px solid #e6e3db;
}
#testimonials{
width: 254px;
float: left;
padding: 20px 0px 0px 0px;
}
#testimonials h2{
font-family: Georgia;
font-size: 18px;
color: #1d3868;
font-weight: normal;
}
#main_column{
width: 705px;
float: left;
}
.text{
border-top: 1px solid #e6e3db;
padding: 20px 0px 0px 0px;
margin: 0px 0px 7px 0px;
}
.text.noborder{
border-top: none;
}
.text p{
font-family: Georgia;
color: #000;
font-size: 14px;
line-height: 140%;
margin: 0px 0px 15px 0px;
font-style: italic;
}
.text p span{
font-family: Arial;
font-size: 14px;
font-style: normal;
color: #585757;
}
.text p a{
color: #1d3868;
text-decoration: underline;
}
#bottomarea{
width: 960px;
padding: 57px 0px 50px 0px;
}
#bottomarea h2{
font-family: Georgia;
font-size: 18px;
font-weight: normal;
color: #1d3868;
margin: 0px 0px 25px 0px;
}
#bottomarea p{
color: #000;
line-height: 130%;
font-size: 14px;
margin: 0px 0px 35px 0px;
}
#bottomarea p a{
color: #1d3868;
text-decoration: underline;
}
#contact_us_container{
width: 200px;
padding: 0px 50px 0px 0px;
float: left;
}
#ourclients_container{
width: 225px;
padding: 0px 45px 0px 0px;
float: left;
}
#stayuptodate_container{
width: 410px;
float: left;
}
#stayuptodate_container label{
display: block;
width: 55px;
color: #000;
float: left;
clear: both;
font-size: 14px;
line-height: 200%;
}
#stayuptodate_container input{
width: 194px;
height:20px;
float: left;
padding: 4px 2px;
margin: 0px 0px 20px 0px;
border: 1px solid #e6e3db;
}
a.bottom_btn{
display: block;
height: 35px;
float: left;
background: url(marketing-company-images/bottombtn_right.jpg) right no-repeat;
}
a.bottom_btn span{
display: block;
height: 25px;
color: #fff;
font-size: 14px;
text-shadow: 1px 2px #000;
padding: 10px 24px 0px 24px;
background: url(marketing-company-images/bottombtn_left.jpg) left no-repeat;
}
a:hover.bottom_btn,a:hover.bottom_btn span{
text-decoration: none;
}
/*--------------- INNER PAGE---------------*/
#inner_content{
padding: 40px 0px 40px 0px;
}
#inner_content p{
font-size: 14px;
color: #000;
line-height: 140%;
margin: 0px 0px 25px 0px;
}
#inner_content p a{
color: #1d3868;
text-decoration: underline;
}
#inner_main_column{
width: 620px;
padding: 0px 40px 0px 0px;
float: left;
}
#inner_main_column h1{
font-family: Georgia;
font-size: 18px;
color: #1d3868;
padding: 0px 0px 20px 0px;
font-weight: normal;
}
#inner_right_column{
width: 300px;
float: left;
}
#inner_right_column h2{
font-family: Georgia;
font-size: 18px;
color: #1d3868;
padding: 0px 0px 20px 0px;
font-weight: normal;
}
#inner_right_column h3{
font-family: Georgia;
font-size: 14px;
color: #1d3868;
padding: 0px 0px 5px 0px;
font-weight: normal;
}
.help_containers{
width: 300px;
padding: 10px 0px 0px 0px;
float: left;
}
#inner_right_column .help_containers p{
font-size: 12px;
}
.help_containers .left{
float: left;
width: 80px;
}
.help_containers .right{
float: left;
width: 220px;
}
.footerclear{
height: 70px;
}
#footer_container{
width: 100%;
height: 70px;
clear: both;
background: #1f3b6e;
}
#footer{
width: 960px;
height: 42px;
padding: 28px 0px 0px 0px;
margin: 0 auto;
}
#footer p{
color: #fff;
margin: 0px 39px 0px 0px;
font-size: 14px;
}
#footer a{
color: #fff;
}
#footer ul li{
float: left;
font-size: 14px;
line-height: 100%;
margin: 0px 5px 0px 0px;
padding: 0px 0px 0px 5px;
border-left: 1px solid #fff;
}
#footer ul li.noborder{
padding: 0px;
border-left: none;
}
.left{
float: left;
}
.right{
float: right;
}
.replace{
position:relative;
margin:0;
padding:0;
/* \*/
overflow:hidden;
/* */
}
.replace span{
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}
.skiplink{
display:none;
}
#wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
width: 960px;
margin:0 auto -70px auto;
}
#slider {
width: 811px;
margin: 0 auto;
position: relative;
}
.scroll {
height: 293px;
width: 811px;
overflow: auto;
overflow-x: hidden;
position: relative;
clear: left;
}
.scrollContainer div.panel {
height: 293px;
width: 811px;
}
#pager {
display: none;
}
</style>
<!--[if lt IE 7]><link href="script/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]><link href="script/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.scrollContainer').cycle({
fx: 'scrollHorz',
timeout: 0,
speed: 700,
pager: '#pager',
cleartypeNoBg: true
});
$('.featured_container').click(function () {
$('.featured_container.active').removeClass('active');
$(this).addClass('active');
$('#pager a').eq($('#featured .featured_container').index(this)).trigger('click');
return false;
});
});
</script>
</head>
<body id="home">
<div id="wrapper">
<div id="header"> <a href="#" id="logo" class="replace">Best Marketing Company</a>
<div id="navigation">
<ul class="right">
<li><a href="index.html">Home</a></li>
<li><a href="inner.html">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!--navigation ends-->
<div id="connect">
<p class="left">connect with us:</p>
<ul class="right">
<li id="twitter"><a href="#" class="replace">Twitter</a></li>
<li id="facebook"><a href="#" class="replace">Facebook</a></li>
<li id="in"><a href="#" class="replace">IN</a></li>
</ul>
</div>
<!--connect ends-->
</div>
<!--header ends-->
<div id="banner">
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<div class="panel"> <img src="marketing-company-images/cart.jpg" alt="" />
<h1>E-Commerce Optimization</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor, orci congue scelerisque consequat, eros justo iaculis elit, eget lacinia nibh velit ac sapien. Pellentesque lobortis, elit in molestie elementum, quam lacus vulputate ligula, non tincidunt ipsum leo id purus. Sed ut magna eu purus cursus accumsan cursus sed quam. Nunc volutpat mattis ante, id commodo nibh lobortis quis. Nulla facilisi. Nam non urna sit amet nisi tincidunt commodo. Nam sed molestie quam. Suspendisse ullamcorper, enim sed sagittis hendrerit, diam purus facilisis lectus, sit amet ultricies ante purus.</p>
<a href="#" class="button">More Information</a> <a href="#" class="button">Contact Us</a> </div>
<div class="panel"> <img src="marketing-company-images/cart.jpg" alt="" />
<h1>Search Engine Optimization</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor, orci congue scelerisque consequat, eros justo iaculis elit, eget lacinia nibh velit ac sapien. Pellentesque lobortis, elit in molestie elementum, quam lacus vulputate ligula, non tincidunt ipsum leo id purus. Sed ut magna eu purus cursus accumsan cursus sed quam. Suspendisse ullamcorper, enim sed sagittis hendrerit, diam purus facilisis lectus, sit amet ultricies ante purus.</p>
<a href="#" class="button">More Information</a> <a href="#" class="button">Contact Us</a> </div>
<div class="panel"> <img src="marketing-company-images/cart.jpg" alt="" />
<h1>Social Media Marketing</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor, orci congue scelerisque consequat, eros justo iaculis elit, eget lacinia nibh velit ac sapiendo. Nam sed molestie quam. Suspendisse ullamcorper, enim sed sagittis hendrerit, diam purus facilisis lectus, sit amet ultricies ante purus.</p>
<a href="#" class="button">More Information</a> <a href="#" class="button">Contact Us</a> </div>
<div class="panel"> <img src="marketing-company-images/cart.jpg" alt="" />
<h1>Twitter Marketing</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor, orci congue scelerisque consequat, eros justo iaculis elit, eget lacinia nibh velit ac sapien. Pe ullamcorper, enim sed sagittis hendrerit, diam purus facilisis lectus, sit amet ultricies ante purus.</p>
<a href="#" class="button">More Information</a> <a href="#" class="button">Contact Us</a> </div>
</div>
</div>
</div>
<!--/end slider -->
<div id="pager"></div>
</div>
<!--banner ends-->
<div id="featured">
<div class="featured_container active">
<div class="image_container"><img src="marketing-company-images/basket.png" alt="" /></div>
<h2>E-Commerce Optimization</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula purus auctor libero mattis in suscipit tortor laoreet.</p>
</div>
<!--featured container ends-->
<div class="featured_container">
<div class="image_container"><img src="marketing-company-images/optimization.png" alt="" /></div>
<h2>Search Engine Optimization</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula purus auctor libero mattis in suscipit tortor laoreet.</p>
</div>
<!--featured container ends-->
<div class="featured_container">
<div class="image_container"><img src="marketing-company-images/marketing.png" alt="" /></div>
<h2>Social Media Marketing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula purus auctor libero mattis in suscipit tortor laoreet.</p>
</div>
<!--featured container ends-->
<div class="featured_container">
<div class="image_container"><img src="marketing-company-images/twitter_marketing.png" alt="" /></div>
<h2>Twitter Marketing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula purus auctor libero mattis in suscipit tortor laoreet.</p>
</div>
<!--featured container ends-->
</div>
<!--featured-->
<div id="content">
<div id="testimonials">
<h2>Testimonials</h2>
</div>
<!--testiomonials ends-->
<div id="main_column">
<div class="text noborder">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula purus auctor libero mattis in suscipit tortor laoreet. Phasellus fermentum sem at quam posuere ac consectetur elit luctus. Donec at lobortis magna. Mauris malesuada libero et dolor imperdiet quis laoreet erat venenatis. Phasellus scelerisque rhoncus tortor, ac gravida tortor faucibus at. Aenean facilisis, augue vel euismod ornare, dolor mauris semper mi, nec mattis nulla massa sed erat. </p>
<p><span>John Doe<br />
CEO of <a href="#">ABC Company</a></span></p>
</div>
<!--text ends-->
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula purus auctor libero mattis in suscipit tortor laoreet. Phasellus fermentum sem at qbuam posuere ac consectetur elit luctus. Donec at lobortis magna. Mauris malesuada libero et dolor imperdiet quis laoreet erat venenatis. Phasellus scelerisque rhoncus tortor, ac gravida tortor faucibus at. Aenean facilisis, augue vel euismod ornare, dolor mauris semper mi, nec mattis nulla massa sed erat. Sed urna mauris, fringilla sit amet vehicula et, faucibus id felis. Duis lobortis, mauris sed sagittis laoreet, nunc metus elementum nibh, vel auctor libero ante in ipsum. Integer tempor ipsum nec velit malesuada congue.</p>
<p><span>John Doe<br />
CEO of <a href="#">Jane Doe Industries</a></span></p>
</div>
<!--text ends-->
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula purus auctor libero mattis in suscipit tortor laoreet. Phasellus fermentum sem at quam posuere ac consectetur elit luctus. Donec at lobortis magna. Mauris malesuada libero et dolor imperdiet quis laoreet erat venenatis. Phasellus scelerisque rhoncus tortor, ac gravida tortor faucibus at. Aenean facilisis, augue vel euismod ornare, dolor mauris semper mi, nec mattis nulla massa sed erat. </p>
<p><span>John Smith<br />
Marketing Manager of <a href="#">Acme Widgets</a></span></p>
</div>
<!--text ends-->
</div>
<!--main column ends-->
<div class="clear"></div>
</div>
<!--content ends-->
<div id="bottomarea">
<div id="contact_us_container">
<h2>Contact Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in risus orci, nec semper odio. Phasellus nec diam enim. Vivamus mattis risus quis eros consequat non posuere nunc fringilla.</p>
<a href="#" class="bottom_btn"><span>Contact us Today</span></a> </div>
<!--contact us container ends-->
<div id="ourclients_container">
<h2>Contact Us</h2>
<p>We?ve worked with a wide variety of successful companies:</p>
<p> <a href="#">ABC Company, Inc.</a><br />
<a href="#">XYZ Company, Inc.</a><br />
<a href="#">Acme Widgets</a><br />
<a href="#">John Doe Industries</a><br />
<a href="#">Jane Doe Industries</a> </p>
</div>
<!--our clients ends-->
<div id="stayuptodate_container">
<h2>Stay Up-to-Date</h2>
<p>Info about our newsletter. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in risus orci, nec semper odio.</p>
<label>Name:</label>
<input type="text" />
<label>Email:</label>
<input type="text" />
<label> </label>
<a href="#" class="bottom_btn"><span>Subscribe to Newsletter</span></a> </div>
<div class="clear"></div>
</div>
<!--bottom area ends-->
<div class="footerclear"></div>
</div>
<!--wrapper ends-->
<div id="footer_container">
<div id="footer">
<p class="left">Best Marketing Company</p>
<ul class="left">
<li class="noborder"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p class="right" style="margin:0; padding:0;">Design by <a href="http://designm.ag/">DESIGNM.AG</a></p>
</div>
<!--footer ends-->
</div>
<!--footer ends-->
</body>
</html>
Related examples in the same category