<!doctype html>
<html>
<head>
    <meta charset=utf-8>
    <title>Shop Name</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="./assets/css/selectbox.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="./assets/css/main.css" type="text/css" media="screen" />

    <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/carousel.js"></script>
    <script type="text/javascript" src="./assets/js/selectbox.min.js"></script>
    <script type="text/javascript" src="./assets/js/main.js"></script>
</head>
<body>
    <header>
        <div class="container clearfix">
            <a href="index.html" class="logotype">
                <img src="./assets/images/logotype.png" alt="Shop Name" />
            </a>
            <div class="top clearfix">
                    <div class="area">
                        <div class="area-select">
                            <form action="#">
                                <select name="lang">
                                    <option>en</option>
                                    <option>es</option>
                                </select>
                                <select name="">
                                    <option>$</option>
                                    <option>&pound;</option>
                                </select>
                            </form>
                        </div>
                        <ul class="top-menu">
                            <li><a href="#">My Account</a></li>
                            <li><a href="#">Checkout</a></li>
                            <li><a href="#">My Wishlist</a></li>
                        </ul>
                    </div>
                    <div class="sign">
                        <a href="#">Login</a>&nbsp|&nbsp;<a href="#">Register</a>
                    </div>
                </div>
            <div class="right">

                <div class="search">
                    <form action="#">
                        <div>
                            <input name="search" type="text" />
                            <button type="submit">Submit</button>
                        </div>
                    </form>
                </div>
                <div class="cart"><strong>My Cart:</strong><a href="#">0 items - $0.00</a></div>
            </div>
        </div>
    </header>
    <!-- Menu -->
    <div class="menu clearfix">
        <div class="container">
            <div class="icon-menu">&nbsp;</div>
            <div class="clear">&nbsp;</div>
            <ul>
                <li class="software active"><a href="#">PC Software</a></li>
                <li class="laptops"><a href="#">Laptops</a></li>
                <li class="books"><a href="#">Electronic Books</a></li>
                <li class="players"><a href="#">MP3 Players</a></li>
                <li class="phones"><a href="#">Mobile Phones</a></li>
                <li class="accessories"><a href="#">Accessories</a></li>
            </ul>
            <ul class="mobile">
                <li class="active"><a href="#">PC Software</a></li>
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Electronic Books</a></li>
                <li><a href="#">MP3 Players</a></li>
                <li><a href="#">Mobile Phones</a></li>
                <li><a href="#">Accessories</a></li>
                <li><a href="#">My Account</a></li>
                <li><a href="#">Checkout</a></li>
                <li><a href="#">My Wishlist</a></li>
            </ul>
        </div>
    </div>
    <!-- Main Slider -->
    <div id="slider">
        <div class="container">
            <div class="cycle-slideshow"
                 data-cycle-auto-height=container
                 data-cycle-slides="> div.item"
                 data-cycle-timeout=6000
                 data-cycle-next="#slider .next"
                 data-cycle-prev="#slider .prev"
                 data-cycle-pager=".pager"
                 >
                <div class="item">
                    <img src="./assets/images/pictures/slide-1.png" alt="" />
                    <div class="more"><a href="#">Learn More</a></div>
                </div>
               <div class="item">
                    <div class="images"><img src="./assets/images/pictures/slide-2.jpg" alt="" /></div>
                    <div class="block">
                        <h2>Aliquam mi enim semper</h2>
                        <p>Aliquam mi enim, consequat semper diam in, varius vestibulum erat. Sed pellentesque, orci non mattis suscipit, mi massa iaculis libero, vitae tincidunt dolor nisl at ante.</p>
                    </div>
                    <div class="more"><a href="#">Learn More</a></div>
                </div>
            </div>
            <div class="prev">Prev</div>
            <div class="next">Next</div>
            <div class="pager"></div>
        </div>
    </div>
    <!-- Content  -->
    <div id="content">
        <div class="container clearfix">
            <div class="links clearfix">
                <a href="#" class="shipping">
                    <img src="./assets/images/icons/shipping.png" alt="" />
                    <span>
                        <strong>Free Shipping</strong>
                        On Orders Over $100
                    </span>
                </a>
                <a href="#" class="gifts">
                    <img src="./assets/images/icons/gifts.png" alt="" />
                    <span>
                        <strong>Family Gifts</strong>
                        Get Gift Vouchers
                    </span>
                </a>
            </div>
            <div id="slider-feature" class="slider">
                <div class="title">Featured Products</div>
                <div class="cycle-slideshow slidershow"
                    data-cycle-fx="carousel"
                    data-cycle-timeout="0"
                    data-cycle-prev="#slider-feature .prev"
                    data-cycle-next="#slider-feature .next"
                    data-cycle-carousel-fluid="true"
                    data-cycle-slides="> div.itm">
                    <div class="itm">
                        <a href="#">
                            <img src="./assets/images/pictures/image-1.jpg" alt="" />
                            <h3>Maecenas aliquet</h3>
                            <span>Vivamus vehicula enim nunc, eu pharetra dolor molestie at. Phasellus luctus tincidunt velit, a placerat sapien dapibus nec.</span>
                            <span class="price">$420.00</span>
                        </a>
                         <form action="#">
                            <input type="hidden" name="product-id" value="1">
                            <button type="submit">Add to Cart</button>
                        </form>
                    </div>
                    <div class="itm">
                        <a href="#">
                            <img src="./assets/images/pictures/image-2.jpg" alt="" />
                            <h3>Aliquam erat</h3>
                            <span>Vivamus vehicula enim nunc, eu pharetra dolor molestie at. Phasellus luctus tincidunt velit, a placerat sapien dapibus nec.</span>
                            <span class="price">$180.00</span>
                        </a>
                         <form action="#">
                            <input type="hidden" name="product-id" value="2">
                            <button type="submit">Add to Cart</button>
                        </form>
                    </div>
                    <div class="itm">
                         <a href="#">
                            <img src="./assets/images/pictures/image-3.jpg" alt="" />
                            <h3>Vestibulum mattis</h3>
                            <span>Vivamus vehicula enim nunc, eu pharetra dolor molestie at. Phasellus luctus tincidunt velit, a placerat sapien dapibus nec.</span>
                            <span class="price">$215.00</span>
                        </a>
                         <form action="#">
                            <input type="hidden" name="product-id" value="3">
                            <button type="submit">Add to Cart</button>
                        </form>
                    </div>
                    <div class="itm">
                        <a href="#">
                            <img src="./assets/images/pictures/image-1.jpg" alt="" />
                            <h3>Maecenas aliquet</h3>
                            <span>Vivamus vehicula enim nunc, eu pharetra dolor molestie at. Phasellus luctus tincidunt velit, a placerat sapien dapibus nec.</span>
                            <span class="price">$420.00</span>
                        </a>
                         <form action="#">
                            <input type="hidden" name="product-id" value="1">
                            <button type="submit">Add to Cart</button>
                        </form>
                    </div>
                </div>
                <div class="btn">
                    <div class="prev">prev</div>
                    <div class="next">next</div>
                </div>
            </div>
            <div id="slider-sale" class="slider">
                <div class="title">Sales</div>
                <div class="cycle-slideshow slidershow"
                    data-cycle-fx="carousel"
                    data-cycle-timeout="0"
                    data-cycle-prev="#slider-sale .prev"
                    data-cycle-next="#slider-sale .next"
                    data-cycle-carousel-fluid="true"
                    data-cycle-slides="> div.itm">
                    <div class="itm">
                        <a href="#">
                            <img src="./assets/images/pictures/image-4.jpg" alt="" />
                            <h3>Maecenas aliquet</h3>
                            <span>Vivamus vehicula enim nunc, eu pharetra dolor molestie at. Phasellus luctus tincidunt velit, a placerat sapien dapibus nec.</span>
                            <span class="price"><span class="old-price">$470.00</span> $420.00</span>
                        </a>
                         <form action="#">
                            <input type="hidden" name="product-id" value="4">
                            <button type="submit">Add to Cart</button>
                        </form>
                    </div>
                    <div class="itm">
                        <a href="#">
                            <img src="./assets/images/pictures/image-5.jpg" alt="" />
                            <h3>Aliquam erat</h3>
                            <span>Vivamus vehicula enim nunc, eu pharetra dolor molestie at. Phasellus luctus tincidunt velit, a placerat sapien dapibus nec.</span>
                            <span class="price"><span class="old-price">$230.00</span> $170.00</span>
                        </a>
                         <form action="#">
                            <input type="hidden" name="product-id" value="5">
                            <button type="submit">Add to Cart</button>
                        </form>
                    </div>
                    <div class="itm">
                         <a href="#">
                            <img src="./assets/images/pictures/image-6.jpg" alt="" />
                            <h3>Vestibulum mattis</h3>
                            <span>Vivamus vehicula enim nunc, eu pharetra dolor molestie at. Phasellus luctus tincidunt velit, a placerat sapien dapibus nec.</span>
                            <span class="price"><span class="old-price">$215.00</span> $195.00</span>
                        </a>
                         <form action="#">
                            <input type="hidden" name="product-id" value="6">
                            <button type="submit">Add to Cart</button>
                        </form>
                    </div>
                </div>
                <div class="btn">
                    <div class="prev">prev</div>
                    <div class="next">next</div>
                </div>
            </div>
            <div class="text">
                <h3>Welcome to Our Shop</h3>
                <p>Curabitur nibh sem, aliquet nec metus egestas, imperdiet pretium velit. Nulla et justo quam. Mauris suscipit id arcu quis facilisis. In sit amet volutpat. Sed volutpat mauris ac ante blandit, at cursus erat sodales. Nulla ultrices, tellus ut malesuada molestie, lacus vehicula magna, facilisis hendrerit urna sapien non augue.  Sed a ultricies quam. Cras convallis turpis ultricies, condimentum diam non, efficitur urna. Ut vel metus sed purus aliquam maximus. Nulla et quam varius nibh tristique mattis. Integer imperdiet lobortis pharetra. Morbi fermentum, nulla vitae consectetur aliquet, lectus arcu congue velit, nec rutrum sem dui eget nisi. Fusce commodo magna sed justo tincidunt efficitur. Quisque consequat maximus semper. Vivamus suscipit risus at bibendum rhoncus.</p>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <footer>
        <div class="boxes">
            <div class="container clearfix">
                <div class="box">
                    <h3>Information</h3>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li class="active"><a href="#">Customer Service</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Site Map</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
                <div class="box">
                    <h3>Why Choose Us</h3>
                    <ul>
                        <li><a href="#">Shipping &amp; Returns</a></li>
                        <li><a href="#">Secure Shopping</a></li>
                        <li><a href="#">International Shipping</a></li>
                        <li><a href="#">Affiliates</a></li>
                        <li><a href="#">Group Sales</a></li>
                    </ul>
                </div>
                <div class="box">
                    <h3>My Account</h3>
                    <ul>
                        <li><a href="#">Sign In</a></li>
                        <li><a href="#">View Cart</a></li>
                        <li><a href="#">My Wishlist</a></li>
                        <li><a href="#">Track My Order</a></li>
                        <li><a href="#">Help</a></li>
                    </ul>
                </div>
                <div class="social-icons">
                    <h3>Follow Us</h3>
                    <a href="#" class="twitter">Twitter</a>
                    <a href="#" class="facebook">Facebook</a>
                    <a href="#" class="vimeo">Vimeo</a>
                    <a href="#" class="google">Google+</a>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="container">
                <img src="./assets/images/pictures/card.png" alt="" />
                <p>&copy; 2015 Shop Name. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>