<div id="wrapper">
<!-- <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Cooper Design Builders</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen" />
<link rel="stylesheet" type="text/css" href="assets/css/grid.css" media="screen" />
<link rel="stylesheet" type="text/css" href="assets/css/global.css" media="screen" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="assets/css/handheld.css" media="screen and (max-width:959px)" />
<link rel="stylesheet" type="text/css" href="assets/css/mobile.css" media="screen and (max-width:767px)" />
<link rel="stylesheet" type="text/css" href="assets/css/tablet.css" media="screen and (min-width:768px) and (max-width:959px)" />
<link rel="stylesheet" type="text/css" href="assets/css/ipod.css" media="screen and (min-width:480px) and (max-width:767px)" />
<link rel="stylesheet" type="text/css" href="assets/css/flexslider.css" media="screen" />
[if lt IE]>
<link rel="stylesheet" type="text/css" href="assets/css/all-ie.css">
<![endif]
<script type="text/javascript" src="assets/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
Js for slider
<script type="text/javascript">
$(document).ready(function () {
$('.carousel li img').click(function(){
var path = $(this).attr('src');
$.backstretch(path, {speed: 1});
$('.backstretch').css('z-index', '8')
});
$.backstretch("assets/images/index-bg.jpg", {speed: 1});
});
</script>
<script type="text/javascript" src="assets/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="assets/js/custom.js"></script>
</head>
<body>
<div class="dbm">
<ul>
<li class="red"><span>red</span>
<div class="dbm-open">
<h4>DESIGN</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta libero sed nisi elementum id pharetra est placerat. </p>
<a href="#1">See More ></a> </div>
</li>
<li class="black"><span>black</span>
<div class="dbm-open">
<h4>BUILD</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta libero sed nisi elementum id pharetra est placerat. </p>
<a href="#2">See More ></a> </div>
</li>
<li class="green"><span>green</span>
<div class="dbm-open">
<h4>MAINTAIN</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta libero sed nisi elementum id pharetra est placerat. </p>
<a href="#3">See More ></a> </div>
</li>
</ul>
</div>
<div class="social">
<ul>
<li class="facebook"><a href="#">facebook</a></li>
<li class="linked-in"><a href="#">linkedin</a></li>
<li class="twitter"><a href="#">twitter</a></li>
<li class="pinterest"><a href="#">pinterest</a></li>
<li class="insight"><a href="#">insight</a></li>
</ul>
</div>
<!icon right end>
<! side icon end>
<! header section >
<div class="header">
<div class="container_12">
<div class="grid_5">
<ul class="navigation">
<li><a href="#"><big>O</big>ur <big>S</big>tory </a></li>
<li><a href="#"><big>P</big>hilosophy </a></li>
<li class="omega"><a href="#"><big>S</big>olutions</a></li>
</ul>
</div>
<div class="grid_2 logo" > <a><img src="assets/images/cooper-logo.png" alt="cooper design" title="cooper"/></a> </div>
<div class="grid_5 alpha omega space">
<ul class="navigation">
<li><a href="#"><big>P</big>ortfolio</a></li>
<li><a href="#"><big>T</big>estimonials</a></li>
<li class="omega"><a href="#"><big>C</big>ontact <big>U</big>s</a></li>
</ul>
</div>
<div class="grid_12">
<div class="i-menu"> <span class="up-arrow"></span><span class="i-click"> Home </span>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Philosophy</a></li>
<li><a href="#">Solutions</a>
<ul>
<li><a href="#0">Solutions1</a></li>
<li><a href="#1">Solutions2</a></li>
<li><a href="#2">Solutions3</a></li>
<li><a href="#3">Solutions4</a></li>
<li><a href="#4" class="last">Solutions5</a></li>
</ul>
</li>
<li><a href="#">Design</a></li>
<li><a href="#">Build</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#" class="last">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
<! header section end >
<! content section >
<div class="content">
<div class="container_12">
<div class="grid_12">
<h1>welcome home</h1>
</div>
</div>
</div>
<! content section end >
<! footer section >
<div class="footer">
<div class="footer-close">
<! footer section for ipod >
<ul class="i-footer">
<li><a href="#" class="share"></a></li>
<li><a href="#1" class="i-solution"></a></li>
<li class="last"><a class="i-grid"></a></li>
</ul>
<! footer section for ipod end >
<span class="close-btn"> </span>
<div class="link">
<div class="flexslider carousel first">
<ul class="slides">
<li><img src="assets/images/grid-small-image1.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image2.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image3.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image4.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image5.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image6.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image1.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image2.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image3.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image4.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image5.jpg" alt="" title="" width="58" height="38" /></li>
<li><img src="assets/images/grid-small-image6.jpg" alt="" title="" width="58" height="38" /></li>
</ul>
</div>
</div>
</div>
<div class="footer-open"> <span class="close-btn"> </span> <span class="grid"></span>
<div class="container_12">
<div class="link">
<ul>
<li><a href="#">DREAM HOMES</a></li>
<li><a href="#">INTEGRATED ADDITIONS</a></li>
<li><a href="#">WHOLE HOUSE REMODELS</a></li>
<li class="last"><a href="#">GAURMET KITCHENS</a></li>
</ul>
</div>
<div class="grid_12 fmenu">
<div class="flexslider carousel second">
<ul class="slides">
<li><img src="assets/images/grid-pic1.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic2.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic3.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic4.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic5.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic2.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic3.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic4.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic5.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic2.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic1.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic2.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic3.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic4.jpg" alt="" title="" width="146" height="102" /></li>
<li><img src="assets/images/grid-pic5.jpg" alt="" title="" width="146" height="102" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<! grid view section >
<div class="grid-view story-slide"> <a href="#" class="close-btn"></a>
<div class="container_12">
<div class="grid_12">
<div class="flexslider">
<ul class="slides">
<li>
<ul class="gallery">
<li><a href="#"><img src="assets/images/grid1.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid2.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid3.jpg" alt="image" title="homes" /></a></li>
<li class="omega"><a href=""><img src="assets/images/grid4.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid5.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid6.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid7.jpg" alt="image" title="homes" /></a></li>
<li class="omega"><a href=""><img src="assets/images/grid8.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid9.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid10.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid11.jpg" alt="image" title="homes" /></a></li>
<li class="omega"><a href=""><img src="assets/images/grid12.jpg" alt="image" title="homes" /></a></li>
</ul>
</li>
<li>
<ul class="gallery">
<li><a href="#"><img src="assets/images/grid1.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid2.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid3.jpg" alt="image" title="homes" /></a></li>
<li class="omega"><a href=""><img src="assets/images/grid4.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid5.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid6.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid7.jpg" alt="image" title="homes" /></a></li>
<li class="omega"><a href=""><img src="assets/images/grid8.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid9.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid10.jpg" alt="image" title="homes" /></a></li>
<li><a href=""><img src="assets/images/grid11.jpg" alt="image" title="homes" /></a></li>
<li class="omega"><a href=""><img src="assets/images/grid12.jpg" alt="image" title="homes" /></a></li>
</ul>
</li>
</ul>
</div>
<div class="link prefix_2">
<ul>
<li><a href="#">DREAM HOMES</a></li>
<li><a href="#">INTEGRATED ADDITIONS</a></li>
<li><a href="#">WHOLE HOUSE REMODELS</a></li>
<li class="last"><a href="#">GAURMET KITCHENS</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
--> </div>