<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Delicious Landing</title>
<!-- CSS -->
<link href="css/layouts.css" rel="stylesheet" type="text/css" />
<link href="css/orange.css" rel="stylesheet" type="text/css" />
<link href="css/lightBackground.css" rel="stylesheet" type="text/css" />
<!-- / CSS -->
<!-- JQuery -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- / JQuery -->
<!-- Cufon -->
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Museo_Sans.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1, h2, h3');
Cufon.replace('.noBackground h3, .readMore', { textShadow: '#fff .6px .6px' });
Cufon.replace('.buyNow', { textShadow: '#732205 1px 0' });
</script>
<!-- / Cufon -->
</head>
<body>
<!-- start of logo -->
<div id="logo">
<img alt="logo" height="30" src="images/logo.png" width="210" />
</div>
<!-- end of logo -->
<!-- start of banner [row #1] -->
<div class="bannerContainer">
<div class="bannerImage" style="background-image:url('images/bannerImage1.jpg');">
<img class="arrow" alt="" src="images/leftArrow.png"/>
</div>
<div class="bannerText">
<h1 class="mediumHeader">Variety of <span class="highlighted">delicious</span> colors for marketing campaigns, just pick one!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed mauris sem, ut interdum mi. Proin molestie interdum nisi sit amet, consectetur adipiscing elit. Praesent sed mauris sem, ut interdum mi.</p>
<a class="button medium readMore" href="#">Read More</a><a class="button medium buyNow right" href="#">Buy Now</a>
</div>
</div>
<div class="shadow"></div>
<!-- end of banner [row #1] -->
<!-- start of three columns in row [row #2] -->
<div class="rowContainer noBackground">
<div class="oneFromThree">
<img class="columnIcon" alt="icon" src="images/Calendar.png" height="64" width="64"/>
<h3>Quisque eget lectus luctus est elementum aliquam</h3>
<p class="columnText">Aliquam erat volutpat. Etiam euismod felis ut neque consequat tristique sit amet at massa. Suspendisse porta, turpis vel pellentesque sagittis.</p>
</div>
<div class="oneFromThree">
<img class="columnIcon" alt="icon" src="images/Folder.png" height="64" width="64"/>
<h3>Curabitur quis nibh sit amet nibh blandit</h3>
<p class="columnText">Nam tristique mauris eget sapien sodales vulputate urna semper. Mauris lacinia faucibus dignissim. Vivamus mauris tortor.</p>
</div>
<div class="oneFromThree">
<img class="columnIcon" alt="icon" src="images/compass.png" height="64" width="64"/>
<h3>Quisque ultrices feugiat odio quis ornare sem varius</h3>
<p class="columnText">Suspendisse sit amet eleifend enim. Praesent et lorem dolor. Pellentesque habitant morbi tristique senectus malesuada turpis egestas.</p>
</div>
</div>
<!-- end of three columns in row [row #2] -->
<!-- start of three columns in row [row #3] -->
<div class="rowContainer noBackground">
<div class="oneFromThree">
<img class="columnIcon" alt="icon" src="images/Globe.png" height="64" width="64"/>
<h3>Nam malesuada mattis nibh pharetra consequat</h3>
<p class="columnText">Maecenas feugiat magna vel dolor dignissim non vehicula augue porttitor. Aenean pharetra aliquet nisl, sed congue sem interdum integer.</p>
</div>
<div class="oneFromThree">
<img class="columnIcon" alt="icon" src="images/Mail.png" height="64" width="64"/>
<h3>Cras fermentum ligula vel massa tristique ultrices</h3>
<p class="columnText">Pellentesque quis sem massa. Vivamus at nunc ligula. Nunc dui nisi, eleifend nec hendrerit sit amet, venenatis at dui. Sed vitae urna ante.</p>
</div>
<div class="oneFromThree">
<img class="columnIcon" alt="icon" src="images/Image_capture.png" height="64" width="64"/>
<h3>Maecenas rhoncus consectetur nisi porta felis</h3>
<p class="columnText">Etiam pellentesque aliquet commodo. Integer mattis, dui quis ultricies ultrices, orci sem adipiscing ante, feugiat faucibus arcu libero convallis tortor.</p>
</div>
</div>
<!-- start of three columns in row [row #3] -->
<!-- start of quote [row #4] -->
<div class="quoteContainer">
<div class="circleIcon2">“</div>
<blockquote><p>Lorem Ipsum is simply dummy text of the printing industry. It has been the industry's standard dummy text ever since the 1500s.</p></blockquote>
<div class="quoteAuthor">John Doe - Company Name</div>
</div>
<!-- end of quote [row #4] -->
<!-- start of footer [row #5] -->
<div id="footerContainer">
<div id="footer">
Copyright © 2011 Gifky.com all rights reserved.
</div>
</div>
<!-- end of footer [row #5]-->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
Part of layout.css file:
/* Content *********************************/
/* */
/* 1- General Reset */
/* 2- Body & headers */
/* 3- Logo */
/* 4- Banners */
/* 5- Rows and columns containers */
/* 6- Buttons */
/* 7- Pricing tables */
/* 8- Sale row */
/* 9- Product image with label */
/* 10- Quote */
/* 11- Others */
/* 12- Footer */
/* */
/* / Content ********************************/
/* General reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl,
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
}
:focus {
outline: 0;
}
/* / General reset */
/* Body & headers */
html, body {
font-family: Arial, Helvetica, sans-serif;
line-height: 170%;
font-weight: normal;
font-size: 12px;
min-width: 980px;
}
h1 {
font-size: 30px;
font-weight:bold;
line-height: 140%;
margin:0 0 15px 0;
}
h1.mediumHeader {
font-size: 20px;
line-height: 150%;
}
h2 {
font-size: 20px;
font-weight:bold;
line-height: 150%;
margin:0 0 15px 0;
}
h3 {
font-size: 15px;
font-weight:bold;
line-height: 140%;
margin:0 0 10px 0;
}
h3.features {
margin:0 0 10px 0 !important;
}
h4 {
font-size:13px;
font-weight:bold;
line-height: 140%;
}
/* / Body & headers */
...
Delicious Landing © 2011 gifky.com all rights reserved.