File size: 12.13Kb
<!--
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>The Ama for Iphone, Android & Smartphone Mobile Website Template | Home :: w3layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Ama Iphone web template, Andriod web template, Smartphone web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(
hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="smartphone/css/theme-style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="smartphone/js/jquery.min.js"></script>
<script type="text/javascript" src="smartphone/js/move-top.js"></script>
<script type="text/javascript" src="smartphone/js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</script>
<!----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>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="header-top" id="home">
<div class="logo">
<a href="#">ama</a>
</div>
<div class="menu">
<a href="#" class="right_bt" id="activator"><img src="smartphone/images/nav_icon.png" alt=""></a>
<div class="box" id="box">
<div class="box_content">
<div class="box_content_center">
<div class="form_content">
<div class="menu_box_list">
<ul>
<li><a href="#hello" class="scroll"><span>Hello</span></a></li>
<li><a href="#overview" class="scroll"><span>Overview</span></a></li>
<li><a href="#share" class="scroll"><span>Share</span></a></li>
<li><a href="#fea" class="scroll"><span>Features</span></a></li>
<li><a href="#gall" class="scroll"><span>Gallery</span></a></li>
<li><a href="#down" class="scroll"><span>Download</span></a></li>
<li><a href="#comp" class="scroll"><span>Compatibility</span></a></li>
</ul>
</div>
<a class="boxclose" id="boxclose"><img src="smartphone/images/close.png" alt=""></a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
<script type="text/javascript">
var $ = jQuery.noConflict();
$(function() {
$('#activator').click(function(){
$('#box').animate({'top':'0px'},500);
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-700px'},500);
});
});
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$(".trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});
</script>
</div>
<div class="clear"></div>
</div>
<div class="banner" id="home">
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article style="position: absolute; width: 100%; opacity: 0;"> <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> </article>
<article style="position: absolute; width: 100%; opacity: 0;"> <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> </article>
<article style="position: absolute; width: 100%; opacity: 0;"> <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> </article>
</div>
<ul class="wmuSliderPagination">
<li><a href="#" class="">0</a></li>
<li><a href="#" class="">1</a></li>
<li><a href="#" class="">2</a></li>
</ul>
</div>
<script src="smartphone/js/jquery.wmuSlider.js"></script>
<script>
$('.example1').wmuSlider();
</script>
</div>
</div>
</div>
<!-----start-features----->
<div id="overview" 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>
</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>
<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>
<ul class="gallery_box">
<li><img src="smartphone/images/g1.jpg" alt=""/></li>
<li><img src="smartphone/images/g2.jpg" alt=""/></li>
<li><img src="smartphone/images/g3.jpg" alt=""/></li>
<li><img src="smartphone/images/g4.jpg" alt=""/></li>
<div class="clear"></div>
</ul>
</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, you don't wanna 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>
<script type="text/javascript">
$(document).ready(function() {
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"></span></a>
<script>
$(document).ready(function() {
$('#nav').onePageNav({
begin: function() {
console.log('start')
},
end: function() {
console.log('stop')
}
});
});
</script>
<!---- //End-smoth-scrolling---->
</div>
<!-----//End-footer----->
<!-----//End-conatiner---->
</body>
</html>