<!DOCTYPE html>
<html lang="en" id="top" class="no-js">
<head>
<meta charset="utf-8">
<title>BeatBeauty</title>
<meta name="description" content="Default Description">
<meta name="keywords" content="Magento, Varien, E-commerce">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defer></script>
<script type="text/javascript">window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery.main.js" defer></script>
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all">
<link rel="stylesheet" type="text/css" href="css/madisonisland.css" media="all">
</head>
<body>
<div class="wrapper">
<div class="page">
<header id="nav-main" role="navigation" class="nav-main">
<div class="container">
<a href="#" class="nav-opener"><span></span></a>
<div class="nav-logo">
<a href="#">
<img src="images/logo.svg" width="134" height="40" alt="image description">
</a>
</div>
<div class="nav-more">
<div class="nav-menu">
<ul>
<li>
<a href="#">SHOP COLLECTIONS</a>
<ul class="level1">
<li>
<div class="list-holder">
<div class="list-box">
<a href="#" class="back-link"><span class="arrow-back">←</span>SHOP COLLECTIONS</a>
<div class="heading">
<a href="#">TASTEMAKERS</a>
</div>
<ul>
<li><a href="#">Rihanna</a></li>
<li><a href="#">Taylor Swift</a></li>
<li><a href="#">Cookie Lyon</a></li>
<li><a href="#">Ariana Grande</a></li>
<li><a href="#">Rita Ora</a></li>
<li><a href="#">Beyonce</a></li>
<li><a href="#">Shakira</a></li>
<li><a href="#">Rihanna</a></li>
<li><a href="#">Taylor Swift</a></li>
<li><a href="#">Cookie Lyon</a></li>
<li><a href="#">Ariana Grande</a></li>
<li><a href="#">Rita Ora</a></li>
<li><a href="#">Beyonce</a></li>
</ul>
<div class="link-more-holder">
<a href="#">See All Tastemakers</a>
</div>
</div>
<div class="list-box">
<div class="heading">
<a href="#">EDITORIAL</a>
</div>
<ul>
<li><a href="#">Reds that Slay</a></li>
<li><a href="#">Nudes - The Sheer Art</a></li>
<li><a href="#">Neons that Scream</a></li>
<li><a href="#">Berry Amazing</a></li>
<li><a href="#">Burgundy Realness</a></li>
<li><a href="#">Crushin’ it with Coral</a></li>
<li><a href="#">Goldie Lips</a></li>
<li><a href="#">50 Shades of Black</a></li>
<li><a href="#">Puple Pouts</a></li>
</ul>
<div class="link-more-holder">
<a href="#">See All Editorial</a>
</div>
</div>
<div class="list-box">
<div class="heading">
<a href="#">ARTIST SPOTLIGHT</a>
</div>
<ul>
<li><a href="#">Newest Shades</a></li>
<li><a href="#">Best Sellers</a></li>
<li><a href="#">Cookie Lyon</a></li>
<li><a href="#">Ariana Grande</a></li>
<li><a href="#">Rita Ora</a></li>
</ul>
</div>
</div>
</li>
<li>
<div class="preview-block">
<div class="img-holder">
<a href="#">
<picture>
<source srcset="images/img-04.jpg, images/img-04-desktop-2x.jpg 2x">
<img src="images/img-04.jpg" alt="image description">
</picture>
</a>
</div>
<div class="text-holder">
<div class="preheading">
<p>Trend Focus</p>
</div>
<h2><a href="#">REDS THAT SLAY</a></h2>
</div>
</div>
</li>
</ul>
</li>
<li>
<a href="#">SHOP BY COLOR</a>
</li>
<li><a href="#">FREE HOME TRY-ON</a></li>
<li class="separated"><a href="#">CREATE A SHADE</a></li>
<li class="last md-hidden"><a href="#">OUR LIPSTICK LOVE AFFAIR</a></li>
</ul>
</div>
<div class="login-menu">
<a href="#" class="link-login">Log-In</a>
<div class="header-minicart">
<a href="#header-cart" class="skip-link skip-cart no-count skip-active">
<span class="icon"></span>
<span class="label">Cart</span>
<span class="count">0</span>
</a>
<div id="header-cart" class="block block-cart skip-content skip-active">
<div id="minicart-error-message" class="minicart-message"></div>
<div id="minicart-success-message" class="minicart-message"></div>
<div class="minicart-wrapper">
<p class="block-subtitle">Recently added item(s) <a class="close skip-link-close" href="#" title="Close">×</a></p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>
</div>
<!-- <div class="header-minicart">
<a href="#header-cart" class="skip-link skip-cart skip-active">
<span class="icon"></span>
<span class="label">Cart</span>
<span class="count">3</span>
</a>
<div id="header-cart" class="block block-cart skip-content skip-active">
<div id="minicart-error-message" class="minicart-message"></div>
<div id="minicart-success-message" class="minicart-message"></div>
<div class="minicart-wrapper">
<p class="block-subtitle">Recently added item(s) <a class="close skip-link-close" href="#" title="Close">×</a></p>
<div>
<ul id="cart-sidebar" class="mini-products-list">
<li class="item odd" xmlns="http://www.w3.org/1999/html">
<a href="#" title="Product name" class="product-image"><img src="thumbnail.jpg" width="50" height="50" alt="Product name"></a>
<div class="product-details">
<p class="product-name"><a href="#">Product name</a></p>
<table class="info-wrapper">
<tbody>
<tr>
<th>Price</th>
<td>
<span class="price">$750.00</span>
</td>
</tr>
<tr class="qty-wrapper">
<th>Qty</th>
<td>
<input id="qinput-4" data-link="#" data-item-id="4" class="qty cart-item-quantity" name="" value="1">
<button id="qbutton-4" data-item-id="4" disabled="disabled" data-update="" class="button quantity-button">ok</button>
</td>
</tr>
</tbody>
</table>
<a href="#" title="Edit item" class="btn-edit">Edit item</a>
|
<a href="#" title="Remove This Item" data-confirm="Are you sure you would like to remove this item from the shopping cart?" class="remove">Remove Item</a>
</div>
</li>
<li class="item even" xmlns="http://www.w3.org/1999/html">
<a href="#" title="Product name" class="product-image"><img src="thumbnail.jpg" width="50" height="50" alt="Product name"></a>
<div class="product-details">
<p class="product-name"><a href="#">Product name</a></p>
<table class="info-wrapper">
<tbody>
<tr>
<th>Price</th>
<td>
<span class="price">$199.99</span>
</td>
</tr>
<tr class="qty-wrapper">
<th>Qty</th>
<td>
<input id="qinput-3" data-link="#" data-item-id="3" class="qty cart-item-quantity" name="" value="1">
<button id="qbutton-3" data-item-id="3" disabled="disabled" data-update="" class="button quantity-button">ok</button>
</td>
</tr>
</tbody>
</table>
<a href="#" title="Edit item" class="btn-edit">Edit item</a>
|
<a href="#" title="Remove This Item" data-confirm="Are you sure you would like to remove this item from the shopping cart?" class="remove">Remove Item</a>
</div>
</li>
<li class="item last odd" xmlns="http://www.w3.org/1999/html">
<a href="#" title="Product name" class="product-image"><img src="thumbnail.jpg" width="50" height="50" alt="Product name"></a>
<div class="product-details">
<p class="product-name"><a href="#">Product name</a></p>
<table class="info-wrapper">
<tbody>
<tr>
<th>Price</th>
<td>
<span class="price">$399.99</span>
</td>
</tr>
<tr class="qty-wrapper">
<th>Qty</th>
<td>
<input id="qinput-2" data-link="#" data-item-id="2" class="qty cart-item-quantity" name="" value="1">
<button id="qbutton-2" data-item-id="2" disabled="disabled" data-update="" class="button quantity-button">ok</button>
</td>
</tr>
</tbody>
</table>
<a href="#" title="Edit item" class="btn-edit">Edit item</a>
|
<a href="#" title="Remove This Item" data-confirm="Are you sure you would like to remove this item from the shopping cart?" class="remove">Remove Item</a>
</div>
</li>
</ul>
</div>
<div id="minicart-widgets"></div>
<div class="block-content">
<p class="subtotal">
<span class="label">Cart Subtotal:</span> <span class="price">$1,349.98</span>
</p>
</div>
<div class="minicart-actions">
<a class="cart-link" href="#">View Shopping Cart</a>
<ul class="checkout-types minicart">
<li>
<a title="Checkout" class="button checkout-button" href="#">Checkout</a>
</li>
</ul>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
</header>
<div class="main-container col1-layout">
<div class="info-strip">
<p>
<b>FREE SHIPPING</b><span class="separated">on all orders over $30</span>
</p>
</div>
<section class="grid-section col-holder">
<a href="#" class="col blur">
<div class="image-container">
<picture>
<source srcset="images/grid-img-01.jpg, images/grid-img-01-desktop-2x.jpg 2x">
<img src="images/grid-img-01.jpg" alt="image-description">
</picture>
</div>
<div class="text-rollover-holder">
<div class="text-block">
<div class="post-info">
<p>Created 05-22-16 ⁄ ⁄ Updated 06-14-16</p>
</div>
<h2><span>BITCH BETTA HAVE MY LIPPIE</span></h2>
<p>26 shades inspired by our girl Rihanna’s trailblazing style.</p>
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col">
<div class="image-container">
<picture>
<source srcset="images/grid-img-02.jpg, images/grid-img-02-desktop-2x.jpg 2x">
<img src="images/grid-img-02.jpg" alt="image-description">
</picture>
</div>
<div class="text-holder">
<div class="text-block">
<h3>26 PINK LIPSTICKS</h3>
<p>From Subtle To Electric - We’re Totally Freaking Out Over These</p>
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col text">
<div class="image-container">
<picture>
<source srcset="images/grid-img-03.jpg, images/grid-img-03-desktop-2x.jpg 2x">
<img src="images/grid-img-03.jpg" alt="image-description">
</picture>
</div>
<div class="overlay">
<picture>
<source srcset="images/bg-overlay.png, images/bg-overlay-desktop-2x.png 2x">
<img src="images/bg-overlay.png" alt="image-description">
</picture>
</div>
<div class="text-rollover-holder">
<div class="text-block">
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col col-2 md-hidden">
<div class="image-container">
<picture>
<source srcset="images/grid-img-04.jpg, images/grid-img-04-desktop-2x.jpg 2x">
<img src="images/grid-img-04.jpg" alt="image-description">
</picture>
</div>
</a>
<a href="#" class="col">
<div class="image-container">
<picture>
<source srcset="images/grid-img-05.jpg, images/grid-img-05-desktop-2x.jpg 2x">
<img src="images/grid-img-05.jpg" alt="image-description">
</picture>
</div>
<div class="text-holder">
<div class="text-block">
<h3>19 BERRY LIPSTICKS</h3>
<p>From Subtle To Electric - We’re Totally Freaking Out Over These</p>
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col text">
<div class="image-container">
<picture>
<source srcset="images/grid-img-06.jpg, images/grid-img-06-desktop-2x.jpg 2x">
<img src="images/grid-img-06.jpg" alt="image-description">
</picture>
</div>
<div class="overlay">
<picture>
<source srcset="images/bg-overlay-01.png, images/bg-overlay-01-desktop-2x.png 2x">
<img src="images/bg-overlay-01.png" alt="image-description">
</picture>
</div>
<div class="text-rollover-holder">
<div class="text-block">
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col">
<div class="image-container">
<picture>
<source srcset="images/grid-img-07.jpg, images/grid-img-07-desktop-2x.jpg 2x">
<img src="images/grid-img-07.jpg" alt="image-description">
</picture>
</div>
<div class="text-holder">
<div class="text-block">
<h3>SEXY STILETTOS</h3>
<p>15 Lipsticks Coordinated To The Hottest New Heels Of The Season</p>
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col blur">
<div class="image-container">
<picture>
<source srcset="images/grid-img-08.jpg, images/grid-img-08-desktop-2x.jpg 2x">
<img src="images/grid-img-08.jpg" alt="image-description">
</picture>
</div>
<div class="text-rollover-holder">
<div class="text-block">
<div class="post-info">
<p>Created 05-22-16 ⁄ ⁄ Updated 06-14-16</p>
</div>
<h2><span>REDS <br>THAT <br>SLAY</span></h2>
<p>26 shades inspired by our girl Rihanna’s trailblazing style.</p>
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col">
<div class="image-container">
<picture>
<source srcset="images/grid-img-09.jpg, images/grid-img-09-desktop-2x.jpg 2x">
<img src="images/grid-img-09.jpg" alt="image-description">
</picture>
</div>
<div class="text-holder">
<div class="text-block">
<h3>PAINTBOX</h3>
<p>17 Lipsticks Inspired By Our Favorite Nail Spa In NYC</p>
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col md-hidden">
<div class="image-container">
<picture>
<source srcset="images/grid-img-10.jpg, images/grid-img-10-desktop-2x.jpg 2x">
<img src="images/grid-img-10.jpg" alt="image-description">
</picture>
</div>
<div class="text-holder">
<div class="text-block">
<h3>32 NUDE LIPSTICKS</h3>
<p>From Subtle To Electric - We’re Totally Freaking Out Over These</p>
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col sm-hidden">
<div class="image-container">
<picture>
<source srcset="images/grid-img-11.jpg, images/grid-img-11-desktop-2x.jpg 2x">
<img src="images/grid-img-11.jpg" alt="image-description">
</picture>
</div>
<div class="text-holder">
<div class="text-block">
<h3>SPRING FLORALS</h3>
<p>49 Lipsticks Inspired By This Spring’s Best Bouqets At The Floewr Market</p>
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col sm-hidden">
<div class="image-container">
<picture>
<source srcset="images/grid-img-12.jpg, images/grid-img-12-desktop-2x.jpg 2x">
<img src="images/grid-img-12.jpg" alt="image-description">
</picture>
</div>
<div class="text-holder">
<div class="text-block">
<h3>ESSIE</h3>
<p>75 Lipsticks Matched To Colors From The Queen Of Polish</p>
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col col-2 sm-hidden">
<div class="image-container">
<picture>
<source srcset="images/grid-img-13.jpg, images/grid-img-13-desktop-2x.jpg 2x">
<img src="images/grid-img-13.jpg" alt="image-description">
</picture>
</div>
</a>
<a href="#" class="col md-hidden">
<div class="image-container">
<picture>
<source srcset="images/grid-img-14.jpg, images/grid-img-14-desktop-2x.jpg 2x">
<img src="images/grid-img-14.jpg" alt="image-description">
</picture>
</div>
<div class="text-holder">
<div class="text-block">
<div class="text-block">
<h3>16 PASTEL LIPSTICKS</h3>
<p>From Subtle To Electric - We’re Totally Freaking Out Over These</p>
<span class="arrow-link"> →</span>
</div>
</div>
</div>
</a>
<a href="#" class="col md-hidden text">
<div class="image-container">
<picture>
<source srcset="images/grid-img-15.jpg, images/grid-img-15-desktop-2x.jpg 2x">
<img src="images/grid-img-15.jpg" alt="image-description">
</picture>
</div>
<div class="overlay">
<picture>
<source srcset="images/bg-overlay-02.png, images/bg-overlay-02-desktop-2x.png 2x">
<img src="images/bg-overlay-02.png" alt="image-description">
</picture>
</div>
<div class="text-rollover-holder">
<div class="text-block">
<span class="arrow-link"> →</span>
</div>
</div>
</a>
<a href="#" class="col md-hidden blur">
<div class="image-container">
<picture>
<source srcset="images/grid-img-16.jpg, images/grid-img-16-desktop-2x.jpg 2x">
<img src="images/grid-img-16.jpg" alt="image-description">
</picture>
</div>
<div class="text-rollover-holder">
<div class="text-block">
<div class="post-info">
<p>Created 05-22-16 ⁄ ⁄ Updated 06-14-16</p>
</div>
<h2><span>OH MY <br> RITA <br> ORA</span></h2>
<p>26 shades inspired by our girl Rihanna’s trailblazing style.</p>
<span class="arrow-link"> →</span>
</div>
</div>
</a>
</section>
<section class="advantage-holder">
<div class="bg-stretch full-size">
<span data-srcset="images/bg-img-01.jpg, images/bg-img-01-desktop-2x.jpg 2x"></span>
</div>
<a href="#" class="col md-hidden">
<div class="text-holder">
<div class="heading">
<img src="images/free_try-on-text.png" alt="Free try-on">
</div>
<p>PICK ANY 5 SHADES YOU SEE OR CREATE FROM A PHOTO & WE’LL SEND THEM TO YOU TO TRY - FOR FREE.</p>
<div class="link-holder"><span class="arrow-link">→</span></div>
</div>
</a>
<a href="#" class="col sm-hidden">
<div class="text-holder">
<div class="heading">
<img src="images/infinite-text.png" alt="infinite">
</div>
<p>WE MAKE EVERY SHADE YOU CAN <br> DREAM UP BY MATCHING THEM TO ANY PHOTO YOU FIND.</p>
<div class="link-holder"><span class="arrow-link">→</span></div>
</div>
</a>
<a href="#" class="col">
<div class="text-holder">
<div class="heading">
<img src="images/handmade-text.png" alt="handmade">
</div>
<p>EACH LIPPIE IS DIGITALLY-MATCHED & HANDPOURED TO YOUR ORDER SO YOU KNOW IT’S FRESH.</p>
<div class="link-holder"><span class="arrow-link">→</span></div>
</div>
</a>
</section>
<section class="grid-section">
<div class="heading">
<h1>AND YOU CAN ALWAYS <br> SHOP BY COLOR</h1>
</div>
<div class="col-holder">
<a href="#" class="col">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>RED</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>pink</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col md-hidden">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>coral</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col md-hidden">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>burgundi</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>nude</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>Blue</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>purple</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>green</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col md-hidden">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>pastel</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col md-hidden">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>neon</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col">
<picture>
<source srcset="images/color-preview.jpg, images/color-preview-desktop-2x.jpg 2x">
<img src="images/color-preview.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p>gold</p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
<a href="#" class="col col-more">
<picture>
<source srcset="images/color-preview-02.jpg, images/color-preview-02-desktop-2x.jpg 2x">
<img src="images/color-preview-02.jpg" alt="image description">
</picture>
<div class="text-holder">
<div class="text-block">
<div class="color-heading">
<p><span>SHOP <br> ALL <br> COLORS</span></p>
</div>
<div class="link-holder"><span class="icon-arrow">→</span></div>
</div>
</div>
</a>
</div>
</section>
<section class="colored-section subscribe-section">
<div class="text-holder">
<h1>NO MO`FOMO</h1>
<p>SOMETIMES WE SEND OUT UPDATES ON THE NEWEST COLORS THAT’VE POPPED UP ON THE SITE - THINK OFF ALL THOSE HOT SHADES WORN AT THE OSCARS READY TO BUY THE VERY NEXT DAY. AND MAYBE YOU WANNA KNOW THE MOMENT THEY’RE READY?</p>
</div>
<div class="block block-subscribe">
<div class="block-title">
<strong><span>Newsletter</span></strong>
</div>
<form action="#" method="post" id="newsletter-validate-detail">
<div class="block-content">
<div class="form-subscribe-header">
<label for="newsletter">Sign Up for Our Newsletter:</label>
</div>
<div class="input-box">
<input type="email" autocapitalize="off" placeholder="Enter Your Email" autocorrect="off" spellcheck="false" name="email" id="newsletter" title="Sign up for our newsletter" class="input-textrequired-entryvalidate-email">
</div>
<div class="actions">
<button type="submit" title="Subscribe" class="button"><span><span>→</span></span></button>
</div>
</div>
</form>
</div>
</section>
<section class="promo-img-section">
<div class="slideshow">
<div class="slideset">
<div class="slide">
<a href="#">
<div class="img-holder">
<picture>
<source srcset="images/img-01-mobile.jpg, images/img-01-mobile-2x.jpg 2x" media="(max-width: 767px)">
<source srcset="images/img-01-tablet.jpg, images/img-01-tablet.jpg 2x" media="(max-width: 1024px)">
<source srcset="images/img-01.jpg, images/img-01-desktop-2x.jpg 2x">
<img src="images/img-01.jpg" alt="image description">
</picture>
</div>
<div class="sign-img-holder">
<picture>
<source srcset="images/banner-img-mobile.jpg, images/banner-img-mobile-2x.jpg 2x" media="(max-width: 767px)">
<source srcset="images/banner-img.jpg, images/banner-img-desktop-2x.jpg 2x">
<img src="images/banner-img.jpg" alt="image description">
</picture>
</div>
</a>
</div>
</div>
</div>
</section>
<section class="colored-section bottom-social-section">
<div class="social-holder">
<h1>CYBER STALK US</h1>
<ul>
<li><a href="#" class="icon-instagram"></a></li>
<li><a href="#" class="icon-facebook"></a></li>
<li><a href="#" class="icon-snapchat-ghost"></a></li>
<li><a href="#" class="icon-pinterest"></a></li>
</ul>
</div>
</section>
</div>
<div class="footer-container">
<footer class="footer">
<ul class="links">
<li><a href="#">SHOP COLLECTIONS</a></li>
<li><a href="#">SHOP BY COLOR</a></li>
<li><a href="#">FREE HOME TRY-ON</a></li>
<li><a href="#">CREATE A SHADE</a></li>
<li><a href="#">CUSTOMER SERVICE</a></li>
<li><a href="#">SHIPPING & RETURNS</a></li>
<li><a href="#">TERMS & CONDITIONS</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<div class="block block-subscribe">
<div class="block-title">
<strong><span>join our Newsletter</span></strong>
</div>
<form action="#" method="post" id="newsletter-validate-detail">
<div class="block-content">
<div class="form-subscribe-header">
<label for="newsletter">Sign Up for Our Newsletter:</label>
</div>
<div class="input-box">
<input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="newsletter" placeholder="Enter Email" title="Sign up for our newsletter" class="input-textrequired-entry alidate-email">
</div>
<div class="actions">
<button type="submit" title="Subscribe" class="button"><span><span>Subscribe</span></span></button>
</div>
</div>
</form>
</div>
<address>COPYRIGHT © 2016 Beat Beauty LLC. ALL RIGHTS RESERVED</address>
</footer>
</div>
</div>
</div>
</body>
</html>