<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<title>Retina - Free CSS template by ChocoTemplates.com</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.custom.js"></script>
<![endif]-->
<script src="js/jquery.carouFredSel-5.5.0-packed.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- shell -->
<div class="shell">
<!-- container -->
<div class="container">
<!-- header -->
<header id="header">
<h1 id="logo"><a href="#">Retina</a></h1>
<!-- search -->
<div class="search">
<form action="" method="post">
<input type="text" class="field" value="keywords here ..." title="keywords here ..." />
<input type="submit" class="search-btn" value="" />
<div class="cl"> </div>
</form>
</div>
<!-- end of search -->
<div class="cl"> </div>
</header>
<!-- end of header -->
<!-- navigaation -->
<nav id="navigation">
<a href="#" class="nav-btn">HOME<span></span></a>
<ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">services</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">solutions</a></li>
<li><a href="#">jobs</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contacts</a></li>
</ul>
<div class="cl"> </div>
</nav>
<!-- end of navigation -->
<!-- slider-holder -->
<div class="slider-holder">
<!-- slider -->
<div class="slider">
<div class="socials">
<a href="#" class="facebook-ico">facebook-ico</a>
<a href="#" class="twitter-ico">twitter-ico</a>
<a href="#" class="skype-ico">skype-ico</a>
<a href="#" class="rss-ico">rss-ico</a>
<div class="cl"> </div>
</div>
<div class="arrs">
<a href="#" class="prev-arr"></a>
<a href="#" class="next-arr"></a>
</div>
<ul>
<li id="img1">
<div class="slide-cnt">
<h4>Heading Title Goes</h4>
<h2>Just Like That</h2>
<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
</div>
<img src="css/images/mac-img.png" alt="" />
</li>
<li id="img2">
<div class="slide-cnt">
<h4>Heading Title Goes</h4>
<h2>Just Like That</h2>
<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
</div>
<img src="css/images/mac-img.png" alt="" />
</li>
<li id="img3">
<div class="slide-cnt">
<h4>Heading Title Goes</h4>
<h2>Just Like That</h2>
<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
</div>
<img src="css/images/mac-img.png" alt="" />
</li>
<li id="img4">
<div class="slide-cnt">
<h4>Heading Title Goes</h4>
<h2>Just Like That</h2>
<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
</div>
<img src="css/images/mac-img.png" alt="" />
</li>
<li id="img5">
<div class="slide-cnt">
<h4>Heading Title Goes</h4>
<h2>Just Like That</h2>
<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
</div>
<img src="css/images/mac-img.png" alt="" />
</li>
<li id="img6">
<div class="slide-cnt">
<h4>Heading Title Goes</h4>
<h2>Just Like That</h2>
<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
</div>
<img src="css/images/mac-img.png" alt="" />
</li>
<li id="img7">
<div class="slide-cnt">
<h4>Heading Title Goes</h4>
<h2>Just Like That</h2>
<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
</div>
<img src="css/images/mac-img.png" alt="" />
</li>
<li id="img8">
<div class="slide-cnt">
<h4>Heading Title Goes</h4>
<h2>Just Like That</h2>
<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
</div>
<img src="css/images/mac-img.png" alt="" />
</li>
</ul>
</div>
<!-- end of slider -->
<!-- thumbs -->
<div id="thumbs-wrapper">
<div id="thumbs">
<a href="#img1" class="selected"><img src="css/images/thumb.png"/></a>
<a href="#img2"><img src="css/images/thumb2.png" /></a>
<a href="#img3"><img src="css/images/thumb3.png" /></a>
<a href="#img4"><img src="css/images/thumb4.png" /></a>
<a href="#img5"><img src="css/images/thumb.png" /></a>
<a href="#img6"><img src="css/images/thumb2.png" /></a>
<a href="#img7"><img src="css/images/thumb3.png" /></a>
<a href="#img8"><img src="css/images/thumb4.png" /></a>
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
<!-- end of thumbs -->
</div>
<!-- main -->
<div class="main">
<div class="featured">
<h4>Welcome to <strong>Company Name.</strong> Start Creating Your Website Today completely for <strong>FREE!</strong></h4>
<a href="#" class="blue-btn">GET IN TOUCH</a>
</div>
<section class="cols">
<div class="col">
<h3>About Us</h3>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dui ipsum, cursus ut adipiscing porta, vestibulum quis turpis. Ut ultricies rutrum lorem, in blandit tortor congue pulvinar lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><a href="#" class="more">view more</a></p>
</div>
<div class="col">
<h3>We’re Hiring</h3>
<img src="css/images/col-img.png" alt="" class="left"/>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h5>
<div class="cl"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dui ipsum, cursus ut adipiscing porta, vestibulum quis turpis adispicing amet sit. <br /><a href="#" class="more">view more</a></p>
</div>
<div class="col">
<h3>Our Services</h3>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</