<!DOCTYPE html>
<html>
<head>
<title>Studio X</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/homeycombs.css">
<link href="http://fonts.googleapis.com/css?family=Roboto:100italic,100,300italic,300,400italic,400,500italic,500,700italic,700,900italic,900" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="assets/css/jquery.fancybox.css">
<link rel="stylesheet" href="assets/css/general.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/cycle2.js"></script>
<script type="text/javascript" src="assets/js/jquery.homeycombs.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jquery.fancybox.js"></script>
<script type="text/javascript" src="assets/js/general.js"></script>
</head>
<body>
<div class="wrap-banner">
<div class="banner">
<!-- Header -->
<header>
<div class="container clearfix">
<!-- Logotype -->
<h1 class="logotype">
<a href="index.html"><img src="assets/images/logotype.png" alt="Studio X"></a>
</h1>
<!-- Menu -->
<div class="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">SEO Optimization </a></li>
</ul>
</li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
</header>
<!-- Slider -->
<div class="container slider">
<div id="slider" class="cycle-slideshow" data-cycle-slides=".slide" data-cycle-fx="scrollHorz" data-cycle-pager=".pager" data-cycle-next=".next" data-cycle-prev=".prev">
<div class="slide">
<div class="slide-content">
<h2>Curabitur Elementum</h2>
<p>Duis dapibus placerat pulvinar. Integer vitae suscipit massa, a blandit turpis. Donec consectetur consequat velit, in bibendum felis hendrerit adipiscing. Vivamus aliquet quis velit at imperdiet. Sed pharetra, quam id viverra varius, ante pretium velit, non varius magna risus sit amet magna. Morbi porta egestas ultrices.
</p>
<a href="#" class="more">Learn More About Us</a>
</div>
<div class="slide-image">
<img src="assets/images/pictures/slide-1.png">
</div>
</div>
<div class="slide">
<div class="slide-content">
<h2>Phasellus in Venenatis</h2>
<p>Quisque vitae dapibus odio. Phasellus in eleifend augue, sed congue augue. Etiam non felis elementum, ultrices neque ac, ullamcorper orci. Fusce aliquet dapibus odio nec sollicitudin. Phasellus malesuada ligula nec orci laoreet condimentum. Maecenas vel luctus tortor. Quisque aliquet dapibus orci, at rutrum libero imperdiet at.
</p>
<a href="#" class="more">Learn More About Us</a>
</div>
<div class="slide-image">
<img src="assets/images/pictures/slide-2.png">
</div>
</div>
<div class="pager"></div>
</div>
<div class="next"> </div>
<div class="prev"> </div>
</div>
</div>
</div>
<!-- Content -->
<div id="content">
<!-- About -->
<div id="about" class="container">
<h2>Who We Are</h2>
<p>Vestibulum sed ipsum diam. Sed volutpat quis sem a tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dictum dui eu magna molestie interdum. Duis dapibus placerat pulvinar. Integer vitae suscipit massa, a blandit turpis. Donec consectetur consequat velit, in bibendum felis hendrerit adipiscing. Vivamus aliquet quis velit at imperdiet. Sed pharetra, quam id viverra varius, eros ante pretium velit, non varius magna risus sit amet magna. Morbi porta egestas ultrices. Sed placerat ligula id dictum hendrerit. Pellentesque sed sem nec lectus condimentum aliquet volutpat id mi. Fusce varius justo sed nisl accumsan dapibus.
</p>
<ul class="team">
<li>
<a href="#">
<span class="img">
<img src="assets/images/pictures/team-1.jpg" alt="Picture">
</span>
<span class="icon"><img src="assets/images/icons/ic-1.png"></span>
<span class="name">Nancy Costello</span>
Donec consectetur consequat velit, in bibendum felis.
</a>
</li>
<li>
<a href="#">
<span class="img">
<img src="assets/images/pictures/team-2.jpg" alt="Picture">
</span>
<span class="icon"><img src="assets/images/icons/ic-1.png"></span>
<span class="name">Francis Graves</span>
Donec consectetur consequat velit, in bibendum felis.
</a>
</li>
<li>
<a href="#">
<span class="img">
<img src="assets/images/pictures/team-3.jpg" alt="Picture">
</span>
<span class="icon"><img src="assets/images/icons/ic-1.png"></span>
<span class="name">Amy Whitlow</span>
Donec consectetur consequat velit, in bibendum felis.
</a>
</li>
</ul>
</div>
<!-- Services -->
<div id="services">
<h2>What We Do</h2>
<div class="services-menu">
<ul>
<li>
<a href="#">
<span class="bg-icon">
<img src="assets/images/icons/ic-2.png" alt="Web Solutions">
</span>
<span class="name">Web Solutions</span>
<span class="arrow"> </span>
</a>
</li>
<li>
<a href="#">
<span class="bg-icon">
<img src="assets/images/icons/ic-3.png" alt="Web Solutions">
</span>
<span class="name">Web Design</span>
<span class="arrow"> </span>
</a>
</li>
<li>
<a href="#">
<span class="bg-icon">
<img src="assets/images/icons/ic-4.png" alt="Web Solutions">
</span>
<span class="name">Web Development</span>
<span class="arrow"> </span>
</a>
</li>
<li>
<a href="#">
<span class="bg-icon">
<img src="assets/images/icons/ic-5.png" alt="Web Solutions">
</span>
<span class="name">SEO Optimization</span>
<span class="arrow"> </span>
</a>
</li>
<li>
<a href="#">
<span class="bg-icon">
<img src="assets/images/icons/ic-6.png" alt="Web Solutions">
</span>
<span class="name">Customer Support</span>
<span class="arrow"> </span>
</a>
</li>
<li>
<a href="#">
<span class="bg-icon">
<img src="assets/images/icons/ic-7.png" alt="Web Solutions">
</span>
<span class="name">Consultation</span>
<span class="arrow"> </span>
</a>
</li>
</ul>
</div>
<div class="container">
<h3>Mauris fringilla est ipsum</h3>
<p>Vestibulum sed ipsum diam. Sed volutpat quis sem a tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dictum dui eu magna molestie interdum. Duis dapibus placerat pulvinar. Integer vitae suscipit massa, a blandit turpis. Donec consectetur consequat velit, in bibendum felis hendrerit adipiscing. Vivamus aliquet quis velit at imperdiet. Sed pharetra, quam id viverra varius, ante pretium velit, non varius magna risus sit amet magna. Morbi porta egestas ultrices. Sed placerat ligula id dictum hendrerit. Pellentesque sed sem nec lectus condimentum aliquet volutpat id mi. Fusce varius justo sed nisl accumsan dapibus.
</p>
<ul>
<li>Sed volutpat quis sem a tempus</li>
<li>Pellentesque habitant morbi tristique senectus netus</li>
<li>Proin dictum dui eu magna molestie interdum</li>
<li>Duis dapibus placerat pulvinar</li>
<li>Integer vitae suscipit massa, a blandit turpis</li>
<li>Donec consectetur consequat velit, in bibendum felis </li>
<li>Vivamus aliquet quis velit at imperdiet</li>
</ul>
<a href="#" class="more orange">Learn More About Us</a>
</div>
</div>
<div id="work">
<div class="container">
<h2>Our Works</h2>
<div class="slider-work"
data-cycle-slides=".slide-work"
data-cycle-fx="scrollHorz"
data-cycle-pager=".number"
data-cycle-timeout=0
data-cycle-pager-template="<a href=#> {{slideNum}} </a>">
<div class="slide-work">
<div class="honeycombs">
<div class="comb"> </div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-1.jpg" alt="Picture"/><span></span></div>
<div class="comb"> </div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-2.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-3.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-4.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-5.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-6.jpg" alt="Picture"/><span></span></div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-7.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-8.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-9.jpg" alt="Picture"/><span></span></div>
</div>
</div>
<div class="slide-work">
<div class="honeycombs">
<div class="comb"> </div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-5.jpg" alt="Picture"/><span></span></div>
<div class="comb"> </div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-8.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-2.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-3.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-7.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-9.jpg" alt="Picture"/><span></span></div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-6.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-1.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-2.jpg" alt="Picture"/><span></span></div>
</div>
</div>
<div class="slide-work">
<div class="honeycombs">
<div class="comb"> </div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-9.jpg" alt="Picture"/><span></span></div>
<div class="comb"> </div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-6.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-8.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-1.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-2.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-5.jpg" alt="Picture"/><span></span></div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-4.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-3.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-7.jpg" alt="Picture"/><span></span></div>
</div>
</div>
<div class="slide-work">
<div class="honeycombs">
<div class="comb"> </div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-9.jpg" alt="Picture"/><span></span></div>
<div class="comb"> </div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-4.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-8.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-2.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-6.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-7.jpg" alt="Picture"/><span></span></div>
<div class="comb"> </div>
<div class="comb"><img src="assets/images/pictures/image-5.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-3.jpg" alt="Picture"/><span></span></div>
<div class="comb"><img src="assets/images/pictures/image-1.jpg" alt="Picture"/><span></span></div>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
<div class="pager-work"> </div>
<div class="number"> </div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<!-- Contact us -->
<h2>Contact Us</h2>
<ul class="contact">
<li>3270 Amethyst Drive <br>Lansing, MI 48933 </li>
<li>517-252-3267<br>517-252-3268</li>
<li><a href="mailto:studiox@example.com">studiox@example.com</a><br><a href="mailto:info@example.com">info@example.com</a></li>
</ul>
<!-- Social -->
<ul class="social">
<li><a href="http://twitter.com"><img src="assets/images/icons/twitter.gif" alt="Twitter"></a></li>
<li><a href="#"><img src="assets/images/icons/rss.gif" alt="RSS"></a></li>
<li><a href="http://facebook.com"><img src="assets/images/icons/facebook.gif" alt="Facebook"></a></li>
<li><a href="http://youtube.com"><img src="assets/images/icons/youtube.gif" alt="Youtube"></a></li>
<li><a href="http://google.com"><img src="assets/images/icons/google.gif" alt="Google"></a></li>
</ul>
</div>
<!-- Copyright -->
<div class="copyright">© 2014 <a href="index.html">Studio X</a>. All rights reserved.</div>
</footer>
</body>