<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Ama Bootstarp Website Template | Home :: w3layouts</title>
<link href="web/css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="web/js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link href="web/css/theme-style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</script>
<!----font-Awesome----->
<link rel="stylesheet" href="fonts/web/css/font-awesome.min.css">
<!----font-Awesome----->
<!----webfonts---->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<!----//webfonts---->
<!----start-top-nav-script---->
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
<!----//End-top-nav-script---->
<!----start-slider-script---->
<script src="web/js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager: true,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!----//End-slider-script---->
<!---- Slider ------>
<link rel="stylesheet" href="web/css/slider.css" type="text/css" />
<script type="text/javascript" src="web/js/jquery.cslider.js"></script>
<script type="text/javascript" src="web/js/modernizr.custom.28468.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 450
});
});
</script>
<script type="text/javascript">
$(function() {
$('#da-slider1').cslider({
autoplay : true,
bgincrement : 450
});
});
</script>
</head>
<body>
<!-----start-top-header----->
<div id="hello" class="top-header">
<!-- Slideshow 4 -->
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="web/images/slide.jpg" alt="">
<div class="caption text-center">
<div class="slide-text-info">
<h1>Capture and Share</h1>
<div class="slide-text-info-btns">
<a class="apple" href="#"><span> </span></a>
<a class="play-btn" href="#"><span> </span></a>
</div>
</div>
</div>
</li>
<li>
<img src="web/images/slide.jpg" alt="">
<div class="caption text-center">
<div class="slide-text-info">
<h1>Capture and Share</h1>
<div class="slide-text-info-btns">
<a class="apple" href="#"><span> </span></a>
<a class="play-btn" href="#"><span> </span></a>
</div>
</div>
</div>
</li>
<li>
<img src="web/images/slide.jpg" alt="">
<div class="caption text-center">
<div class="slide-text-info">
<h1>Capture and Share</h1>
<div class="slide-text-info-btns">
<a class="apple" href="#"><span> </span></a>
<a class="play-btn" href="#"><span> </span></a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="clear"> </div>
<!---- //End-slider----->
<!-----start-conatiner---->
<div class="container">
<!-----start-header---->
<div class="header">
<div class="container">
<div class="logo">
<a href="#">ama</a>
</div>
<!----start-top-nav---->
<nav class="top-nav">
<ul class="top-nav">
<li class="active"><a href="#hello" class="scroll">Hello</a></li>
<li class="page-scroll"><a href="#over" class="scroll">Overview</a></li>
<li class="page-scroll"><a href="#share" class="scroll">Share</a></li>
<li class="page-scroll"><a href="#fea" class="scroll">Features</a></li>
<li class="page-scroll"><a href="#gall" class="scroll">Gallery</a></li>
<li class="contatct-active" class="page-scroll"><a href="#down" class="scroll">Download </a></li>
<li class="page-scroll"><a href="#comp" class="scroll">Compatibility</a></li>
</ul>
<a href="#" id="pull"><img src="web/images/nav-icon.png" title="menu" /></a>
</nav>
<div class="clear"> </div>
</div>
<!-----//End-header---->
</div>
<!-----start-top-header----->
</div>
</div>
<!-----start-features----->
<div id="over" class="features text-center">
<div class="container">
<h2>Why ama?</h2>
<!---- start-features-grids------>
<div class="features-grids text-center">
<div class="col-md-4 features-grid">
<span> </span>
<h3><a href="#">Auto focus </a></h3>
<p>ultrices nisl sit amet luctus. Donec volutpat arcu ullamcorper facilisis vulputate. Sed auctor. </p>
</div>
<div class="col-md-4 features-grid">
<span class="t-icon1"> </span>
<h3><a href="#">Secured with Touch ID</a></h3>
<p>ultrices nisl sit amet luctus. Donec volutpat arcu ullamcorper facilisis vulputate. Sed auctor. </p>
</div>
<div class="col-md-4 features-grid">
<span class="t-icon2"> </span>
<h3><a href="#">Your Filters</a></h3>
<p>ultrices nisl sit amet luctus. Donec volutpat arcu ullamcorper facilisis vulputate. Sed auctor. </p>
</div>
<div class="clearfix"> </div>
</div>
<!---- //End-features-grids------>
</div>
</div>
<!-----//End-features----->
<!-----start-Share instantly----->
<div id="share" class="Share-instantly">
<div class="container">
<div class="col-md-5 Share-instantly-left">
<span> </span>
</div>
<div class="col-md-7 Share-instantly-right">
<h3>Share instantly</h3>
<p class="head-para">Mauris euismod ultrices nisl sit amet luctus. Donec volutpat arcu ullamcorper facilisis vulputate. Sed auctor pulvinar ornare. Donec gravida.</p>
<!----- start-Share-instantly-slider---->
<!-- Prettify -->
<link href="web/css/owl.carousel.css" rel="stylesheet">
<script src="web/js/owl.carousel.js"></script>
<script>
$(document).ready(function() {
$("#owl-demo , #owl-demo1").owlCarousel({
items : 1,
lazyLoad : true,
autoPlay : true,
});
});
</script>
<script>
$(document).ready(function() {
$("#owl-demo3").owlCarousel({
items : 4,
lazyLoad : true,
autoPlay : true,
navigation: false,
pagination: false,
});
});
</script>
<!----- //End-Share-instantly-slider---->
<!-- start content_slider -->
<div class="slider">
<div id="da-slider" class="da-slider">
<div class="da-slide">
<div class="da-img"><img src="web/images/share-slide-pic.png" class="img-responsive" alt=" " /></div>
<div class="slide-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
</div>
<div class="clear"></div>
</div>
<div class="da-slide">
<div class="da-img"><img src="web/images/share-slide-pic.png" class="img-responsive" alt=" " /></div>
<div class="slide-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
</div>
<div class="clear"></div>
</div>
<div class="da-slide">
<div class="da-img"><img src="web/images/share-slide-pic.png" class="img-responsive" alt=" " /></div>
<div class="slide-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="clearfix"> </div>
<!-----//End-Share instantly----->
<!-----start-New Feature------>
<div id="fea" class="feature">
<div class="container">
<div class="col-md-7 feature-left">
<h3>New Features</h3>
<p class="head-para">Mauris euismod ultrices nisl sit amet luctus. Donec volutpat arcu ullamcorper facilisis vulputate. Sed auctor pulvinar ornare. Donec gravida. </p>
<div class="slider">
<div id="da-slider1" class="da-slider1">
<div class="da-slide">
<div class="da-img"><img src="web/images/brush.png" class="img-responsive" alt=" " /></div>
<div class="slide-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
<div class="clear"></div>
</div>
<div class="da-slide">
<div class="da-img"><img src="web/images/brush.png" class="img-responsive" alt=" " /></div>
<div class="slide-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
<div class="clear"></div>
</div>
<div class="da-slide">
<div class="da-img"><img src="web/images/brush.png" class="img-responsive" alt=" " /></div>
<div class="slide-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="col-md-5 feature-right">
<span> </span>
</div>
</div>
</div>
<!-----//End-New Feature------>
<!----- start-gallery----->
<div id="gall" class="gallery">
<div class="container">
<h3>Taken with ama</h3>
<p>Mauris euismod ultrices nisl sit amet luctus. Donec volutpat arcu ullamcorper facilisis vulputate. Sed auctor pulvinar ornare. Donec gravida. </p>
</div>
<div id="owl-demo3" class="owl-carousel owl-carousel2">
<div class="item">
<img class="lazyOwl" data-src="web/images/g1.jpg" alt="Lazy Owl Image">
<p class="img_slider"><span class="g-title">Mauris euismod ultrices </span> <a class="likes" href="#"><i class="fa fa-heart"> </i> 65 </a></p>
</div>
<div class="item">
<img class="lazyOwl" data-src="web/images/g2.jpg" alt="Lazy Owl Image">
<p class="img_slider"><span class="g-title">Mauris euismod ultrices </span> <a class="likes" href="#"><i class="fa fa-heart"> </i> 65 </a></p>
</div>
<div class="item">
<img class="lazyOwl" data-src="web/images/g3.jpg" alt="Lazy Owl Image">
<p class="img_slider"><span class="g-title">Mauris euismod ultrices </span> <a class="likes" href="#"><i class="fa fa-heart"> </i> 65 </a></p>
</div>
<div class="item">
<img class="lazyOwl" data-src="web/images/g4.jpg" alt="Lazy Owl Image">
<p class="img_slider"><span class="g-title">Mauris euismod ultrices </span> <a class="likes" href="#"><i class="fa fa-heart"> </i> 65 </a></p>
</div>
<div class="item">
<img class="lazyOwl" data-src="web/images/g1.jpg" alt="Lazy Owl Image">
<p class="img_slider"><span class="g-title">Mauris euismod ultrices </span> <a class="likes" href="#"><i class="fa fa-heart"> </i> 65 </a></p>
</div>
<div class="item">
<img class="lazyOwl" data-src="web/images/g2.jpg" alt="Lazy Owl Image">
<p class="img_slider"><span class="g-title">Mauris euismod ultrices </span> <a class="likes" href="#"><i class="fa fa-heart"> </i> 65 </a></p>
</div>
<div class="item">
<img class="lazyOwl" data-src="web/images/g3.jpg" alt="Lazy Owl Image">
<p class="img_slider"><span class="g-title">Mauris euismod ultrices </span> <a class="likes" href="#"><i class="fa fa-heart"> </i> 65 </a></p>
<div class="clearfix"> </div>
</div>
<div class="item">
<img class="lazyOwl" data-src="web/images/g4.jpg" alt="Lazy Owl Image">
<p class="img_slider"><span class="g-title">Mauris euismod ultrices </span> <a class="likes" href="#"><i class="fa fa-heart"> </i> 65 </a></p>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!----- //End-gallery----->
<!-----start-download---->
<div id="down" class="download">
<div class="container">
<div class="col-md-5 download-left">
<a href="#"><span> </span></a>
</div>
<div class="col-md-7 download-right">
<p>Believe me, <br />you don't wanna <br />miss this app.</p>
<a href="#">- Newyork Times</a>
<ul class="list-unstyled list-inline">
<li><a class="l-apple" href="#"><span> </span></a></li>
<li><a class="l-google" href="#"><span> </span></a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-----//End-download---->
<!----- start-Compatibility----->
<div id="comp" class="compatibility">
<div class="container">
<h3>Compatibility</h3>
<div class="compatibility-grids">
<div class="col-md-6 compatibility-left">
<h4>iOS</h4>
<p>Requires iOS 6.0 or later. Compatible with iPhone, iPad, and iPod touch. This app is optimized for iPhone 5.</p>
<ul class="list-unstyled list-inline">
<li><a class="cl-icon1" href="#"><span> </span></a></li>
<li><a class="cl-icon2" href="#"><span> </span></a></li>
<li><a class="cl-icon3" href="#"><span> </span></a></li>
<li><a class="cl-icon4" href="#"><span> </span></a></li>
</ul>
</div>
<div class="col-md-6 compatibility-right">
<h4>Android</h4>
<p>Compatible with Android KitKat 4.4 or later.Support for x86 devices (i.e. Samsung Galaxy Tab 3 10.1).</p>
<ul class="list-unstyled list-inline">
<li><a class="cl-icon1-l" href="#"><span> </span></a></li>
<li><a class="cl-icon2-l" href="#"><span> </span></a></li>
<li><a class="cl-icon3-l" href="#"><span> </span></a></li>
<li><a class="cl-icon4-l" href="#"><span> </span></a></li>
<li><a class="cl-icon5-l" href="#"><span> </span></a></li>
<li><a class="cl-icon6-l" href="#"><span> </span></a></li>
<li><a class="cl-icon7-l" href="#"><span> </span></a></li>
<li><a class="cl-icon8-l" href="#"><span> </span></a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!----- //End-Compatibility----->
<!-----start-footer----->
<div class="footer">
<div class="container">
<div class="col-md-7 footer-left">
<p>Template by <a href="http://w3layouts.com/">W3layouts</a></p>
</div>
<div class="col-md-5 footer-right text-left">
<p>Subscribe our email newsletter.</p>
<form>
<input type="text" value="Your email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your email';}">
<input type="submit" value="Submit" />
</form>
</div>
<div class="clearfix"> </div>
</div>
<a href="#top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!---- start-smoth-scrolling---->
<script type="text/javascript">
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<!---- //End-smoth-scrolling---->
</div>
<!-----//End-footer----->
<!-----//End-conatiner---->
</body>
</html>