<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>JOYA</title> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="./assets/css/general.css"> </head> <body> <div class="wrapper"> <header class="page-row"> <div class="top-header"> <div class="container"> <nav> <ul class="clearfix"> <li><a href="#">ABOUT</a></li> <li> <a href="#">SERVICES</a> <ul class="sub-menu"> <li><a href="#">Web Design</a></li> <li><a href="#">Web Development</a></li> <li><a href="#">Customer Support</a></li> </ul> </li> <li><a href="#">PORTFOLIO</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </div> </div> <div class="bottom-header"> <div class="container"> <h1 class="logo"><a href="index.html"><img src="./assets/images/logotype.png" alt="JOYA"></a></h1> <p>Phasellus in eleifend augue, sed congue augue.</p> </div> </div> </header> <!-- Content --> <div id="content" class="page-row page-row-expanded"> <div class="row-box-1"> <div class="container"> <div class="banner-area"> <div class="wrap-text-box"> <div class="text-box"> <div class="box"> <h3><span>QUISQUE SED</span> PORTTITOR</h3> <div class="wrap-btn"><a href="#" class="learn-more">LEARN MORE</a></div> </div> </div> </div> </div> <div class="blockquote-box"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet dapibus neque. Nulla pulvinar, ipsum ut vehicula ultrices, metus metus eleifend massa, sed sollicitudin ante tortor vitae dolor. Sed facilisis diam orci. Donec dictum, lorem et rutrum dignissim, nisi magna mattis urna, commodo viverra nulla neque ut elit. Nulla quis tempus magna, vel gravida arcu. Vivamus aliquam ipsum non lacus varius, eu venenatis velit porttitor. Praesent iaculis arcu tincidunt adipiscing dapibus. Morbi eros mauris, sagittis vitae tortor id, euismod scelerisque elit. Curabitur viverra, purus id tempus dapibus, est arcu.</p> <h5>Creative Director</h5> <h6>John Smith</h6> </div> </div> </div> <div class="row-box-2"> <div class="container clearfix"> <div class="left-box"> <h3>PHASELLUS. SAGITTIS. ALIQUE.</h3> </div> <div class="right-box"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet dapibus neque. Nulla pulvinar, ipsum ut vehicula ultrices, metus metus eleifend massa, sed sollicitudin ante tortor vitae dolor. Sed facilisis diam orci. Donec dictum, lorem et rutrum dignissim, nisi magna mattis urna, commodo viverra nulla neque ut elit. Nulla quis tempus magna, vel gravida arcu. Vivamus aliquam ipsum non lacus varius, eu venenatis velit porttitor. Praesent iaculis arcu tincidunt. </p> <p>Quisque posuere libero ac volutpat hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat vestibulum dolor, eu viverra nibh adipiscing non. Praesent sed tincidunt tellus. Mauris pulvinar egestas tristique. Morbi vitae eros nec velit rhoncus venenatis. Suspendisse pulvinar lacus sit amet fermentum hendrerit. mauris, sagittis vitae tortor id, euismod scelerisque elit. Curabitur viverra, purus id tempus dapibus, est arcu.</p> <ul class="icon-box"> <li><a href="#"><img src="./assets/images/icons/icon-1.png" alt="Icon"></a></li> <li><a href="#"><img src="./assets/images/icons/icon-2.png" alt="Icon"></a></li> <li><a href="#"><img src="./assets/images/icons/icon-3.png" alt="Icon"></a></li> </ul> </div> </div> </div> <div class="row-box-3"> <div class="container"> <h3>Mauris blandit dui vel aliquam lobortis. Nam vel velit vel neque iaculis tempus sit amet vitae justo hendrerit eget.</h3> <ul class="large-box"> <li class="box-1"> <a href="#"> <strong><img src="./assets/images/icons/icon-4.png" alt="Icon"></strong> <span>CONDIMENTUM TELLUS</span> </a> <p>Vivamus aliquam ipsum non lacus variusvenenatis velit porttitor. Praesent iaculis arcu tincidunt adipiscing dapibus. Morbi mauris, sagittis vitae tortor id, euismod scelerisque elit. Curabitur viverra, purus id tempus dapibus, est arcu.</p> </li> <li class="box-2"> <a href="#"> <strong><img src="./assets/images/icons/icon-5.png" alt="Icon"></strong> <span>VESTIBULUM ELEMENTUM</span> </a> <p>Vivamus aliquam ipsum non lacus variusvenenatis velit porttitor. Praesent iaculis arcu tincidunt adipiscing dapibus. Morbi mauris, sagittis vitae tortor id, euismod scelerisque elit. Curabitur viverra, purus id tempus dapibus, est arcu.</p> </li> <li class="box-3"> <a href="#"> <strong><img src="./assets/images/icons/icon-6.png" alt="Icon"></strong> <span>QUISQUE POSUERE</span> </a> <p>Vivamus aliquam ipsum non lacus variusvenenatis velit porttitor. Praesent iaculis arcu tincidunt adipiscing dapibus. Morbi mauris, sagittis vitae tortor id, euismod scelerisque elit. Curabitur viverra, purus id tempus dapibus, est arcu.</p> </li> </ul> </div> </div> <div class="row-box-4"> <div class="container"> <h3>Nam vel velit vel neque iaculis tempus sit amet vitae justo hendrerit eget.</h3> <div class="map"><img src="./assets/images/pictures/map.png" alt="Map"></div> </div> </div> <div class="row-box-5"> <div class="container"> <div class="top-box clearfix"> <div class="left-box"> <h3>CURABITUR. TRISTIQ. VITAE.</h3> </div> <div class="right-box"> <p>Phasellus faucibus justo quis ultricies convallis. Mauris blandit dui vel aliquam lobortis. Nam vel velit vel neque iaculis tempus sit amet vitae justo. Phasellus sagittis hendrerit lorem, ac condimentum tellus pretium a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce a velit interdum, auctor dui non, blandit massa. Mauris eleifend quam lacus, id dignissim nisl suscipit vulputate. Curabitur in mollis, ac porta nisl. Fusce aliquet, nibh non egestas aliquam, quam erat pulvinar lorem, ut consequat urna vel ipsum. Phasellus in venenatis justo, id euismod eros. In in elit a metus blandit elementum ipsum vel turpis consequat vestibulum. Vestibulum sit amet commodo eget sit amet massa. In velit urna, varius eu dignissim quis, venenatis ut justo.</p> </div> </div> <ul class="photo-box"> <li class="left-img"> <a href="#"> <b><span><img src="./assets/images/pictures/pic-1.jpg" alt="Picture"></span></b> </a> </li> <li class="center-img"> <a href="#"> <b><span><img src="./assets/images/pictures/pic-2.jpg" alt="Picture"></span></b> </a> </li> <li class="right-img"> <a href="#"> <b><span><img src="./assets/images/pictures/pic-3.jpg" alt="Picture"></span></b> </a> </li> </ul> </div> </div> </div> <!-- Footer --> <footer class="page-row"> <div class="container clearfix"> <div class="logo-box"> <h1><a href="index.html">JOYA</a></h1> <p>©2014. All rights reserved.</p> </div> <ul class="social-box"> <li class="tw"><a href="https://twitter.com/"> </a></li> <li class="fb"><a href="https://www.facebook.com/"> </a></li> <li class="vm"><a href="https://vimeo.com/"> </a></li> <li class="sk"><a href="http://www.skype.com/"> </a></li> <li class="fl"><a href="https://www.flickr.com/"> </a></li> </ul> </div> </footer> </div> <!--End Footer --> <script type="text/javascript" src="./assets/js/jquery.js"></script> <script type="text/javascript" src="./assets/js/general.js"></script> </body> </html>