<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
<title>Compass Starter by Ariona, Rian</title>
<!-- Loading third party fonts -->
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|" rel="stylesheet" type="text/css">
<link href="fonts/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Loading main css file -->
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="js/ie-support/html5.js"></script>
<script src="js/ie-support/respond.js"></script>
<![endif]-->
</head>
<body>
<div class="site-content">
<div class="hero" data-bg-image="images/header-bg.jpg">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1 class="hero-title">World premiere of <strong>Beauty & Health</strong></h1>
<small class="hero-subtitle">Omnis iste natus error voluptatem accusantium doloremque laudantium aperiamvoluptatem.</small>
<img src="images/bottle.png" alt="" class="bottle">
<div class="product-features">
<h2>What the product promises:</h2>
<ul class="check-list">
<li>Vivamus dolor odio quis metus </li>
<li>Nemo enim ipsam voluptatem</li>
<li>Ratione voluptatem sequi nesciunt</li>
<li>Neque porro quisquam dolorem</li>
<li>Sunt in culpa qui officia deserunt </li>
<li>Mollitia animi id est laborum dolorum </li>
</ul>
</div>
<div class="ribbon">Request a <strong>Free Sample</strong> of our product</div>
</div>
<div class="col-md-4">
<div class="request-form">
<form action="#">
<h2 class="form-title">Request your free sample</h2>
<p>Omnis iste natus voluptatem accusantium doloremque laudantium totam rem aperiam.</p>
<div class="control">
<input type="text" placeholder="Your name...">
<i class="fa fa-user"></i>
</div>
<div class="control">
<input type="text" placeholder="Email address...">
<i class="fa fa-envelope"></i>
</div>
<div class="control">
<input type="text" placeholder="Phone number...">
<i class="fa fa-phone"></i>
</div>
<div class="control">
<input type="text" placeholder="Street...">
<i class="fa fa-map-marker"></i>
</div>
<div class="columned">
<div class="control">
<input type="text" placeholder="City...">
<i class="fa fa-map-marker"></i>
</div>
<div class="control">
<input type="text" placeholder="Zip code">
</div>
</div>
<div class="select control">
<select name="" id="">
<option value="#">Select Country</option>
</select>
<i class="fa fa-globe"></i>
</div>
<input type="submit" value="Request Free Sample">
</form>
</div>
<img src="images/security-logos.png" alt="" class="security-logos">
</div>
</div>
</div>
</div> <!-- .hero -->
<main class="main-content">
<div class="fullwidth-block">
<div class="container">
<div class="row ingredient">
<div class="col-md-4"><img src="images/flower-1.png" alt=""></div>
<div class="col-md-8">
<h2>Made of natural flower</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.</p>
</div>
</div>
<div class="row ingredient">
<div class="col-md-4"><img src="images/flower-2.png" alt=""></div>
<div class="col-md-8">
<h2>High quality ingredients</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.</p>
</div>
</div>
<div class="row ingredient">
<div class="col-md-4"><img src="images/flower-3.png" alt=""></div>
<div class="col-md-8">
<h2>Used in Spa & Welness</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.</p>
</div>
</div>
</div>
</div>
<div class="fullwidth-block" data-bg-color="#EEE">
<div class="container">
<h2 class="section-title">What people say</h2>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="testimonial">
<img src="images/person-1.jpg" alt="" class="user-avatar">
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<cite>John Parias</cite>,<span class="title">Writer</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="testimonial">
<img src="images/person-2.jpg" alt="" class="user-avatar">
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<cite>Sarah Dowson</cite>,<span class="title">Teacher</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="testimonial">
<img src="images/person-3.jpg" alt="" class="user-avatar">
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<cite>Richard Marks</cite>,<span class="title">Athlete</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="testimonial">
<img src="images/person-4.jpg" alt="" class="user-avatar">
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<cite>Susie Branson</cite>,<span class="title">Designer</span>
</div>
</div>
</div> <!-- .row -->
</div> <!-- .container -->
</div>
<div class="fullwidth-block cta" data-bg-image="images/footer-bg.jpg">
<div class="container">
<h2 class="cta-text">Get your own <strong>free sample</strong> today <br>and join the group of the beauty people</h2>
<a href="#" class="button brown">Request a free sample</a>
</div>
</div>
</main> <!-- .main-content -->
<footer class="site-footer">
<div class="container">
<p>copyright 2014 Company name. Designed by Themezy. All rights reserved.</p>
<div class="social-links">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>
<a href="#" class="pinterest"><i class="fa fa-pinterest"></i></a>
</div>
</div>
</footer> <!-- .site-footer -->
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/app.js"></script>
</body>
</html>