product-landing-page
<!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>Product Landing Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
background:url(product-landing-page-images/bg.jpg) repeat-x top #fff;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#5F5241;
}
h1 {
font-size:30px;
font-weight:normal;
color:#5F5241;
padding:20px 0;
margin:0;
}
h2 {
font-size:30px;
font-weight:normal;
color:#F77727;
padding:10px 0;
margin:0;
}
h3 {
font-size:24px;
font-weight:normal;
color:#9F7359;
padding:0 0 10px 0;
margin:0;
}
a {
border-bottom:1px dotted #F77727;
text-decoration:none;
padding:2px;
color:#F77727;
}
a:visited {
color:#F77727;
}
p {
padding:5px 0;
margin:0;
line-height:20px;
text-align:justify;
}
.clear {
clear:both;
}
#main_container {
width:960px;
height:auto;
margin:auto;
}
.header {
width:960px;
height:100px;
}
.logo {
float:left;
padding:30px 0 0 0;
}
.logo a {
font-size:40px;
text-indent:-1px;
color:#5F5241;
text-decoration:none;
border:none;
background:url(product-landing-page-images/logo.png) no-repeat left;
height:49px;
display:block;
padding:0 0 0 70px;
}
.home_center {
width:960px;
height:490px;
margin:auto;
}
.pack_pic {
float:right;
}
.pack_descr {
float:left;
width:500px;
padding:30px 0 0 0;
}
p.home_intro {
height:220px;
}
.buttons a {
border:none;
margin:0 30px 0 0;
}
.center_content {
padding:0 0 40px 0;
}
.left_content {
width:640px;
float:left;
padding:0;
}
.right_content {
width:310px;
float:right;
padding:0;
}
.feat_box {
width:300px;
float:left;
padding:20px 20px 10px 0;
}
img.feat_thumb {
width:65px;
height:65px;
float:left;
}
.feat_details {
width:215px;
float:left;
padding:0 0 0 14px;
}
p.feat_text {
font-size:11px;
padding:3px 30px 3px 0;
line-height:18px;
}
.latest_news {
float:left;
clear:both;
padding:40px 0 0 0;
}
.news_box {
width:640px;
float:left;
padding:20px 0 0 0;
}
.news_details {
width:510px;
float:left;
padding:0 0 0 14px;
}
.news_box h2 {
padding-top:0;
}
.testimonial_box {
width:285px;
margin:25px 0 0 0;
padding:0 0 15px 25px;
background:url(product-landing-page-images/quotes_top.gif) no-repeat top left;
}
.testimonial_box p {
padding:0 5px 12px 0;
background:url(product-landing-page-images/quotes_bottom.gif) no-repeat bottom right;
font-style:italic;
}
.testimonial_details {
width:285px;
padding:5px 0 0 0;
}
.testimonial_details p {
color:#ff6c00;
font-size:11px;
font-style:normal;
padding:0;
background:none;
}
.form_content {
width:310px;
float:left;
padding:10px 0;
}
.form_row {
width:310px;
clear:both;
float:left;
padding:5px 0;
}
.form_row label {
width:80px;
float:left;
font-size:12px;
text-align:right;
padding:0 20px 0 0;
font-weight:bold;
height:30px;
line-height:30px;
}
input.form_input {
width:205px;
height:30px;
background-color:#f0eee5;
color:#4f4f4d;
border:none;
float:left;
padding:0 0 0 5px;
}
textarea.form_textarea {
width:205px;
height:90px;
font-family:Arial, Helvetica, sans-serif;
background-color:#f0eee5;
color:#4f4f4d;
border:none;
float:left;
padding:10px 0 0 5px;
font-size:12px;
}
input.form_submit {
width:auto;
height:auto;
color:#fff;
font-size:18px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
float:right;
margin:0;
padding:3px 10px;
background-color:#F77727;
border:none;
}
#footer {
width:960px;
height:75px;
clear:both;
text-align:center;
line-height:25px;
background:url(product-landing-page-images/footer_bg.gif) no-repeat center top;
padding:20px 0 0 0;
margin:auto;
}
#footer, #footer a {
color:#939393;
font-weight:normal;
text-decoration:none;
border:none;
text-transform:uppercase;
}
#footer a:hover {
text-decoration:none;
}
#footer p {
margin:0;
padding:0;
line-height:normal;
}
#footer .lf {
float:left;
margin-left:15px;
}
#footer .rf {
float:right;
margin-right:15px;
}
</style>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script src="js/GeosansLight_500.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('.logo', { fontFamily: 'GeosansLight' });
Cufon.replace('h1', { fontFamily: 'GeosansLight' });
Cufon.replace('h2', { fontFamily: 'GeosansLight' });
Cufon.replace('h3', { fontFamily: 'GeosansLight' });
</script>
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="main_container">
<div class="header">
<div class="logo"><a href="#">Product Landing Page</a></div>
</div>
<div class="home_center">
<div class="pack_descr">
<h1>Ut enim ad minim veniam, quis nostrud exercitation ullamco</h1>
<p class="home_intro"> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing elit</a>, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <a href="#">elit</a>, sed do eiusmod tempor incididunt ut</p>
<div class="buttons"> <a href="#"><img src="product-landing-page-images/order_now.gif" alt="" border="0" /></a> <a href="#"><img src="product-landing-page-images/try_demo.gif" alt="" border="0" /></a> </div>
</div>
<div class="pack_pic"> <img src="product-landing-page-images/pack.png" alt="" border="0" /> </div>
</div>
<div class="center_content">
<div class="left_content">
<h2>Top Features</h2>
<div class="feat_box"> <img src="product-landing-page-images/f1.png" alt="" border="0" class="feat_thumb" />
<div class="feat_details">
<h3>voluptate velit cillum</h3>
<p class="feat_text"> Duis aute irure dolor in reprehenderit in voluptate <a href="#">velit</a> esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="feat_box"> <img src="product-landing-page-images/f2.png" alt="" border="0" class="feat_thumb" />
<div class="feat_details">
<h3>sunt in culpa qui officia</h3>
<p class="feat_text"> Excepteur sint occaecat <a href="#">cupidatat</a> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="feat_box"> <img src="product-landing-page-images/f3.png" alt="" border="0" class="feat_thumb" />
<div class="feat_details">
<h3>eu fugiat nulla pariatur</h3>
<p class="feat_text"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="feat_box"> <img src="product-landing-page-images/f4.png" alt="" border="0" class="feat_thumb" />
<div class="feat_details">
<h3>voluptate velit cillum</h3>
<p class="feat_text"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="feat_box"> <img src="product-landing-page-images/f5.png" alt="" border="0" class="feat_thumb" />
<div class="feat_details">
<h3>sunt in culpa qui officia</h3>
<p class="feat_text"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="feat_box"> <img src="product-landing-page-images/f6.png" alt="" border="0" class="feat_thumb" />
<div class="feat_details">
<h3>eu fugiat nulla pariatur</h3>
<p class="feat_text"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="latest_news">
<h1>Product Updates</h1>
<div class="news_box"> <img src="product-landing-page-images/calendar.png" alt="" border="0" class="feat_thumb" />
<div class="news_details">
<h2><a href="#">Duis aute irure dolor in reprehenderit in voluptate velit esse</a></h2>
<p class="feat_text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="news_box"> <img src="product-landing-page-images/calendar.png" alt="" border="0" class="feat_thumb" />
<div class="news_details">
<h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing</a></h2>
<p class="feat_text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
</div>
</div>
<div class="right_content">
<h2>What clients say?</h2>
<div class="testimonial_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <a href="#">eiusmod tempor</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
<div class="testimonial_details">
<p>John Doe, Company name</p>
</div>
</div>
<div class="testimonial_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <a href="#">eiusmod tempor</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
<div class="testimonial_details">
<p>John Doe, Company name</p>
</div>
</div>
<div class="testimonial_box">
<p>Sed do <a href="#">eiusmod tempor</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
<div class="testimonial_details">
<p>John Doe, Company name</p>
</div>
</div>
<h2>Get in touch</h2>
<div class="form_content">
<form id="form1" method="post" action="#">
<div class="form_row">
<label>name:</label>
<input type="text" class="form_input" name="name" />
</div>
<div class="form_row">
<label>email:</label>
<input type="text" class="form_input" name="email" />
</div>
<div class="form_row">
<label>website:</label>
<input type="text" class="form_input" name="url" />
</div>
<div class="form_row">
<label>message:</label>
<textarea class="form_textarea" name="comment"></textarea>
</div>
<div class="form_row">
<input type="submit" class="form_submit" value="Send" />
</div>
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<p class="lf">Copyright © 2011 <a href="#">Product Landing Page</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://indeziner.com/">INDEZINER</a></p>
<div class="clear"></div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category