<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Brand Name</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900italic,900,400italic,100,700italic,300,700,500italic,100italic,300italic,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="public/css/magnific-popup.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="public/css/style.css" type="text/css" media="screen"/>
</head>
<body>
<div class="width-100">
<div id="responsive-button-wrapper">
<div class="logo">
<a href="index.html"><img src="./public/img/logos/logo.png" title="Brand Name"></a>
</div>
<div id="responsive-button">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Header Begin-->
<header class="width-100">
<div class="page">
<div class="logo">
<a href="index.html"><img src="./public/img/logos/logo.png" title="Brand Name"></a>
</div>
<nav>
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<!-- Header End-->
<!-- Section Begin-->
<section class="width-100">
<div class="banner">
<div class="page">
<div class="wrapper-slider">
<div id="jms-slideshow" class="jms-slideshow">
<div class="step">
<h1>Vivamus Porttitor Consequat</h1>
<img src="./public/img/pictures/pics.png"/>
<div class="jms-content">
<p>Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. </p>
<a class="jms-link" href="#">Learn More</a>
</div>
</div>
<div class="step" data-y="500" data-scale="0.4" data-rotate-x="30">
<h1>Vivamus Porttitor Consequat</h1>
<img src="./public/img/pictures/pics.png"/>
<div class="jms-content">
<p>Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. </p>
<a class="jms-link" href="#">Learn More</a>
</div>
</div>
<div class="step" data-x="2000" data-z="3000" data-rotate="170">
<h1>Vivamus Porttitor Consequat</h1>
<img src="./public/img/pictures/pics.png"/>
<div class="jms-content">
<p>Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. </p>
<a class="jms-link" href="#">Learn More</a>
</div>
</div>
<div class="step" data-x="3000">
<h1>Vivamus Porttitor Consequat</h1>
<img src="./public/img/pictures/pics.png"/>
<div class="jms-content">
<p>Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. </p>
<a class="jms-link" href="#">Learn More</a>
</div>
</div>
<div class="step" data-x="4500" data-z="1000" data-rotate-y="45">
<h1>Vivamus Porttitor Consequat</h1>
<img src="./public/img/pictures/pics.png"/>
<div class="jms-content">
<p>Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. </p>
<a class="jms-link" href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page">
<div class="carousel">
<ul>
<li><a href="#"><img src="./public/img/brands/gray-epson.png" alt="EPSON" title=""></a></li>
<li><a href="#"><img src="./public/img/brands/gray-ubuntu.png" alt="ubuntu" title=""></a></li>
<li><a href="#"><img src="./public/img/brands/gray-digitalrev.png" alt="Digital Rev" title=""></a></li>
<li><a href="#"><img src="./public/img/brands/gray-amazon.png" alt="amazon.com" title=""></a></li>
<li><a href="#"><img src="./public/img/brands/gray-canon.png" alt="Canon" title=""></a></li>
</ul>
</div>
</div>
<div class="block-orange">
<div class="page">
<div class="three-column" id="intro">
<div class="first">
<div class="header-column">
<div class="icon-column"><img src="./public/img/icons/heart.png" alt="" title=""></div>
<div class="title-column">Pellentesque gravida euismod sollicitudin</div>
</div>
<div class="content-column">
<p>Cras at tellus augue. Donec sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris.</p>
</div>
</div>
<div class="second">
<div class="header-column">
<div class="icon-column"><img src="./public/img/icons/plane.png" alt="" title=""></div>
<div class="title-column">Suspendisse nec ipsum eleifend fermentum</div>
</div>
<div class="content-column">
<p>Cras at tellus augue. Donec sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. </p>
</div>
</div>
<div class="third">
<div class="header-column">
<div class="icon-column"><img src="./public/img/icons/star.png" alt="" title=""></div>
<div class="title-column">Vestibulum ante ipsum primis in faucibus orci</div>
</div>
<div class="content-column">
<p>Cras at tellus augue. Donec sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. </p>
</div>
</div>
</div>
</div>
</div>
<div class="page text-block">
<h2>Few Words About Us</h2>
<p>Duis molestie felis in aliquet consequat. Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. Nulla mattis rutrum condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam purus erat, vulputate ac ligula non, ultricies hendrerit leo. Maecenas lacus velit, dignissim a imperdiet eu, viverra at mi. Integer vulputate, nisi ac malesuada congue, metus massa hendrerit orci, sed rutrum nibh eros sit amet purus. Morbi a metus ac lorem maximus molestie. Nulla ut convallis diam. Aenean eu orci sit amet enim ornare luctus sodales a tortor.</p>
<p>Aliquam fermentum sapien quis orci vestibulum, id euismod odio viverra. Phasellus lobortis erat in lacus blandit tempus. Donec ut rhoncus sapien, nec iaculis massa. Quisque venenatis turpis vitae vestibulum porttitor. Vivamus ornare ante vel magna sodales accumsan. Sed in eros sed metus tempor porta at in mauris. Praesent egestas enim orci, varius tincidunt nisl pretium sed. Proin blandit metus nunc. Vivamus diam risus, efficitur sit amet porta at, imperdiet vel ante. Nulla quis vulputate sem, et eleifend dolor. Cras pharetra enim eu metus pretium, ultricies pharetra elit aliquam.</p>
</div>
<div class="block-green">
<div class="page">
<div class="two-column" id="second">
<div class="first">
<img src="./public/img/pictures/mans/1.jpg" alt="">
<p>“Aliquam fermentum sapien quis orci vestibulum, id euismod odio viverra. Phasellus lobortis erat in lacus blandit tempus. Vivamus sit amet libero tellus.”</p>
<h4>JOHN SMITH</h4>
</div>
<div class="second">
<img src="./public/img/pictures/mans/2.jpg" alt="">
<p>“Fusce sagittis eget nibh sit amet mollis. Nam sed imperdiet tortor. Pellentesque ante nunc, tristique in mauris quis, venenatis accumsan quam bibendum id elit eget.”</p>
<h4>MICHAEL STUART</h4>
</div>
</div>
</div>
</div>
<div class="masonry-block">
<div class="page">
<div class="text-block">
<h2>Our Portfolio</h2>
<p> Duis molestie felis in aliquet consequat. Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. Nulla mattis rutrum condimentum.</p>
</div>
<div class="masonry">
<div class="column">
<div class="item"><a href="./public/img/pictures/masonry/big/1.jpg"><img src="./public/img/pictures/masonry/1.jpg" alt=""></a></div>
<div class="item"><a href="./public/img/pictures/masonry/big/2.jpg"><img src="./public/img/pictures/masonry/2.jpg" alt=""></a></div>
</div>
<div class="column">
<div class="item"><a href="./public/img/pictures/masonry/big/3.jpg"><img src="./public/img/pictures/masonry/3.jpg" alt=""></a></div>
<div class="item"><a href="./public/img/pictures/masonry/big/4.jpg"><img src="./public/img/pictures/masonry/4.jpg" alt=""></a></div>
</div>
<div class="column">
<div class="item"><a href="./public/img/pictures/masonry/big/5.jpg"><img src="./public/img/pictures/masonry/5.jpg" alt=""></a></div>
<div class="item"><a href="./public/img/pictures/masonry/big/6.jpg"><img src="./public/img/pictures/masonry/6.jpg" alt=""></a></div>
<div class="item"><a href="./public/img/pictures/masonry/big/7.jpg"><img src="./public/img/pictures/masonry/7.jpg" alt=""></a></div>
</div>
</div>
</div>
</div>
<div class="page left-right-block-wrapper">
<div class="text-block">
<h2>Features</h2>
<p>Duis molestie felis in aliquet consequat. Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. Nulla mattis rutrum condimentum.</p>
</div>
<div class="left-right-block">
<div>
<img src="./public/img/icons/square-heart.png">
<div class="text-wrapper">
<h3>Vivamus Porttitor</h3>
<p>Duis molestie felis in aliquet consequat. Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. Nulla mattis rutrum condimentum.</p>
</div>
</div>
<div>
<img src="./public/img/icons/square-dialog.png">
<div class="text-wrapper">
<h3>Fusce Sagittis Eget</h3>
<p>Duis molestie felis in aliquet consequat. Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. Nulla mattis rutrum condimentum.</p>
</div>
</div>
<div>
<img src="./public/img/icons/square-planet.png">
<div class="text-wrapper">
<h3>Maecenas Lacus Velit</h3>
<p>Duis molestie felis in aliquet consequat. Cras at tellus augue. Donec volutpat sapien in libero semper, vitae egestas lectus finibus. Vivamus in purus tortor. Fusce et augue finibus, porttitor diam id, vehicula mauris. Nulla mattis rutrum condimentum.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section End-->
</div>
<!-- Footer Begin -->
<footer class="width-100">
<div class="page">
<div class="white-logo-wrapper">
<a href="index.html"><img src="./public/img/logos/logo-white.png"></a>
</div>
<div class="social">
<ul>
<li><a class="fb" href="#"> </a></li>
<li><a class="tw" href="#"> </a></li>
<li><a class="gp" href="#"> </a></li>
<li><a class="sk" href="#"> </a></li>
<li><a class="in" href="#"> </a></li>
</ul>
</div>
<div class="copyright">
<p><strong>© 2015 Brand Name.</strong> Vivamus porttitor consequat tellus ut rutrum. Sed non ex vitae metus vestibulum congue. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Footer End -->
<script type="text/javascript" src="public/js/jquery.js"></script>
<script type="text/javascript" src="public/js/jquery-migrate.min.js"></script>
<script type="text/javascript" src="public/js/lemmon-slider.js"></script>
<script type="text/javascript" src="public/js/modernizr.custom.48780.js"></script>
<script type="text/javascript" src="public/js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="public/js/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="public/js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="public/js/magnific-popup.js"></script>
<script type="text/javascript" src="public/js/main.js"></script>
</body>
</html>