<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AllerMates</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link media="all" rel="stylesheet" href="css/all.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<ul class="menu">
<li><a href="#">My Account</a></li>
<li><a href="#">View Cart</a></li>
</ul>
<div class="holder">
<a href="#" class="btn-menu"><span>menu</span></a>
<div class="logo"><a href="#"><img src="images/logo.png" alt="AllerMates safeguarding kids :)" width="298" height="73" /></a></div>
<div class="drop">
<div class="frame">
<ul class="user-mode">
<li class="active"><a href="#">parents</a></li>
<li><a href="#">kids</a></li>
</ul>
<nav class="navigation">
<ul>
<li><a href="#">our story</a></li>
<li><a href="#">our store</a></li>
<li><a href="#">our box</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div id="main">
<div class="intro">
<img src="images/img01.jpg" alt="image description" width="1584" height="524">
<div class="text">
<span>Welcome to the</span>
<h1>AllerMates Online Store</h1>
<h2>We’re ready to accessorize <br>your kid in safety.</h2>
</div>
</div>
<div class="main-holder">
<div id="content">
<div class="wrapping">
<div class="container">
<h2>Featured products</h2>
<div class="featured-products">
<div class="frame">
<div class="product">
<a href="#">
<img src="images/img02.jpg" alt="image description" width="525" height="268">
<h3>Safe treats your food allergy kid will love</h3>
</a>
</div>
<div class="product">
<a href="#">
<img src="images/img03.jpg?" alt="image description" width="525" height="268">
<h3>Bracelets that keep others aware & them safe</h3>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Shop by Category</h2>
<div class="category-carousel">
<div class="big-mask">
<div class="mask">
<div class="slideset">
<div class="slide">
<a href="#">
<img src="images/img04.jpg" alt="image description" width="265" height="249">
<span>PEANUT ALLERGY</span>
</a>
</div>
<div class="slide">
<a href="#">
<img src="images/img05.jpg" alt="image description" width="265" height="249">
<span>MILK ALLERGY</span>
</a>
</div>
<div class="slide">
<a href="#">
<img src="images/img06.jpg" alt="image description" width="265" height="249">
<span>EGG ALLERGY</span>
</a>
</div>
<div class="slide">
<a href="#">
<img src="images/img07.jpg" alt="image description" width="265" height="249">
<span>POLLEN ALLERGY</span>
</a>
</div>
<div class="slide">
<a href="#">
<img src="images/img04.jpg" alt="image description" width="265" height="249">
<span>PEANUT ALLERGY</span>
</a>
</div>
<div class="slide">
<a href="#">
<img src="images/img05.jpg" alt="image description" width="265" height="249">
<span>MILK ALLERGY</span>
</a>
</div>
<div class="slide">
<a href="#">
<img src="images/img06.jpg" alt="image description" width="265" height="249">
<span>EGG ALLERGY</span>
</a>
</div>
<div class="slide">
<a href="#">
<img src="images/img07.jpg" alt="image description" width="265" height="249">
<span>POLLEN ALLERGY</span>
</a>
</div>
</div>
</div>
</div>
<div class="btn-wrap">
<a class="btn-prev" href="#">Previous</a>
<a class="btn-next" href="#">Next</a>
</div>
</div>
</div>
<div class="two-columns">
<div class="column">
<h2>BLOG</h2>
<div class="blog-post">
<h3><a href="#">Celebrating less label checking work with an AllerMates/Happy Family giveaway!</a></h3>
<img src="images/img08.jpg" alt="image description" width="582" height="332">
<p>We’ve talked a lot about labels recently, haven’t we? Well, guess what… I’m going to talk to you about them again today. : ) However, I’m not going to talk about them in terms of a problem, rather more of a solution. <br><a href="#">[read more]</a></p>
</div>
</div>
<div class="column">
<h2>RECENT POSTS</h2>
<div class="recent-posts">
<div class="post">
<a href="#" class="image"><img src="images/img09.jpg" alt="image description" width="50" height="50"></a>
<div class="text">
<h3><a href="#">Just HOW much is TOO much…</a></h3>
<p>I recently read an article and thought it would be a good follow up to our discussion on “may contain” labels, of which I discovered...</p>
</div>
</div>
<div class="post">
<a href="#" class="image"><img src="images/img09.jpg" alt="image description" width="50" height="50"></a>
<div class="text">
<h3><a href="#">Just HOW much is TOO much…</a></h3>
<p>I recently read an article and thought it would be a good follow up to our discussion on “may contain” labels, of which I discovered...</p>
</div>
</div>
<div class="post">
<a href="#" class="image"><img src="images/img09.jpg" alt="image description" width="50" height="50"></a>
<div class="text">
<h3><a href="#">Just HOW much is TOO much…</a></h3>
<p>I recently read an article and thought it would be a good follow up to our discussion on “may contain” labels, of which I discovered...</p>
</div>
</div>
<div class="post">
<a href="#" class="image"><img src="images/img09.jpg" alt="image description" width="50" height="50"></a>
<div class="text">
<h3><a href="#">Just HOW much is TOO much…</a></h3>
<p>I recently read an article and thought it would be a good follow up to our discussion on “may contain” labels, of which I discovered...</p>
</div>
</div>
</div>
</div>
</div>
<div class="logo-carousel">
<div class="big-mask">
<div class="mask">
<div class="slideset">
<div class="slide">
<a href="#"><img src="images/logo-financial-times.png" alt="financial times" width="323" height="34"></a>
</div>
<div class="slide">
<a href="#"><img src="images/logo-daily-candy.png" alt="daily candy" width="133" height="34"></a>
</div>
<div class="slide">
<a href="#"><img src="images/logo-cookbooks.png" alt="101 cookbooks" width="214" height="34"></a>
</div>
<div class="slide">
<a href="#"><img src="images/logo-cooking.png" alt="cooking channel" width="128" height="34"></a>
</div>
<div class="slide">
<a href="#"><img src="images/logo-wall-street.png" alt="the wall street journal" width="297" height="34"></a>
</div>
</div>
</div>
</div>
<div class="btn-wrap">
<a class="btn-prev" href="#">Previous</a>
<a class="btn-next" href="#">Next</a>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<h3>Products</h3>
<nav class="sub-menu">
<ul>
<li><a href="#">Activity Book</a></li>
<li><a href="#">Bracelets</a></li>
<li><a href="#">Charms & Multi-charm Bracelet</a></li>
<li><a href="#">Dog Tags</a></li>
<li><a href="#">Goodie Boxes</a></li>
<li><a href="#">Labels & Stickers</a></li>
<li><a href="#">Lunch & Snack Bags</a></li>
<li><a href="#">Medicine Cases & Bags</a></li>
<li><a href="#">Posters</a></li>
<li><a href="#">Survival Kits</a></li>
</ul>
</nav>
<div class="subscription-form">
<img src="images/img10.jpg" alt="image description" width="248" height="426">
</div>
</aside>
</div>
</div>
<footer id="footer">
<div class="columns">
<div class="holder">
<div class="column">
<h4>About Allermates</h4>
<p>We give parents simple, friendly and reliable resources to help their kids understand their allergies, asthma and other health concerns. Why? Because kids want to understand these issues when taught in a fun, engaging way. From our free educational materials to our popular alert bands and products, we’re here to help your family grow stronger and healthier together.</p>
</div>
<div class="column">
<h4>OUR PROMISE to You!</h4>
<p>We promise to create a fun, engaging world for kids with medical and health concerns to enhance their confidence, knowledge, and well-being. We also promise to provide the most creative tools and support that parents need to educate and protect their children.</p>
</div>
<div class="column">
<h4>QUICKLINKS</h4>
<ul>
<li><a href="#">Main Website</a></li>
<li><a href="#">Shipping Information</a></li>
<li><a href="#">Returns & Cancellations</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Statement</a></li>
</ul>
</div>
<div class="column">
<h4>CONNECT WITH US</h4>
<ul class="social-networks">
<li><a href="#" class="twitter">twitter</a></li>
<li><a href="#" class="facebook">facebook</a></li>
<li><a href="#" class="pinterest">pinterest</a></li>
</ul>
</div>
</div>
</div>
<p>©2015 Allermates. All Rights Reserved.</p>
</footer>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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/aller-mates-js/jquery.main.js"></script>
</body>
</html>