<!--
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 Shutter 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="Shutter 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/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="smartphone/js/jquery.min.js"></script>
<!----webfonts---->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,500,700,900' rel='stylesheet' type='text/css'>
<!----//webfonts---->
<!----//requred-js-files---->
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</script>
</head>
<body>
<div class="header">
<div class="logo">
<a href="index.html"><img src="smartphone/images/logo.png" alt=""/></a>
</div>
<div class="slider_container sTop">
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="slider-left">
<h1>Never Stop Photographing</h1>
<p class="bottom_desc">- imperdiet doming</p>
</div>
</div>
</article>
<article style="position: relative; width: 100%; opacity: 1;">
<div class="banner-wrap">
<div class="slider-left">
<h1>dolore eu feugiat nulla</h1>
<p class="bottom_desc">- imperdiet doming</p>
</div>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="slider-left">
<h1>seacula quarta decima</h1>
<p class="bottom_desc">- imperdiet doming</p>
</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 class="header_btn"><a class="btn2" href="#"><span>Come Closer</span></a></div>
</div>
<script src="smartphone/js/jquery.wmuSlider.js"></script>
<script>
$('.example1').wmuSlider();
</script>
</div>
</div>
<div class="header-bottom">
<nav class="nav">
<a href="#" id="w3-menu-trigger"> </a>
<ul class="nav-list" style="">
<li class="nav-item"><a class="scroll" href="#home">Home</a></li>
<li class="nav-item"><a href="#portfolio" class="scroll">Portfolio</a></li>
<li class="nav-item"><a href="#services" class="scroll">Services</a></li>
<li class="nav-item"><a href="#sign" class="scroll">Sign Up</a></li>
<li class="nav-item"><a href="#about" class="scroll">About</a></li>
<li class="nav-item"><a href="#contact" class="scroll">Contact</a></li>
</ul>
</nav>
<div class="logo_small">
<a href="index.html"><img src="smartphone/images/logo_small.png" alt=""/></a>
</div>
<script src="smartphone/js/responsive.menu.js"></script>
<div class="clear"></div>
</div>
<div class="portfolio" id="portfolio">
<div class="portfolio_box">
<div class="col_1_of_4 span_1_of_4">
<a href="#" class="b-link-stripe b-animate-go thickbox">
<img src="smartphone/images/p1.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="smartphone/images/p_logo.png" class="img-responsive" alt=""/>
<span>Shutter Project title</span>
<button>View photo</button>
<label> <i class="heart"> </i>21</label>
</h2>
</div>
</a>
</div>
<div class="col_1_of_4 span_1_of_4">
<a href="#" class="b-link-stripe b-animate-go thickbox">
<img src="smartphone/images/p2.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="smartphone/images/p_logo.png" class="img-responsive" alt=""/>
<span>Shutter Project title</span>
<button>View photo</button>
<label> <i class="heart"> </i>21</label>
</h2>
</div>
</a>
</div>
<div class="col_1_of_4 span_1_of_4">
<a href="#" class="b-link-stripe b-animate-go thickbox">
<img src="smartphone/images/p3.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="smartphone/images/p_logo.png" class="img-responsive" alt=""/>
<span>Shutter Project title</span>
<button>View photo</button>
<label> <i class="heart"> </i>21</label>
</h2>
</div>
</a>
</div>
<div class="col_1_of_4 span_1_of_4">
<a href="#" class="b-link-stripe b-animate-go thickbox">
<img src="smartphone/images/p4.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="smartphone/images/p_logo.png" class="img-responsive" alt=""/>
<span>Shutter Project title</span>
<button>View photo</button>
<label> <i class="heart"> </i>21</label>
</h2>
</div>
</a>
</div>
<div class="clear"> </div>
</div>
<div class="portfolio_box">
<div class="col_1_of_4 span_1_of_4">
<a href="#" class="b-link-stripe b-animate-go thickbox">
<img src="smartphone/images/p5.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="smartphone/images/p_logo.png" class="img-responsive" alt=""/>
<span>Shutter Project title</span>
<button>View photo</button>
<label> <i class="heart"> </i>21</label>
</h2>
</div>
</a>
</div>
<div class="col_1_of_4 span_1_of_4">
<a href="#" class="b-link-stripe b-animate-go thickbox">
<img src="smartphone/images/p6.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="smartphone/images/p_logo.png" class="img-responsive" alt=""/>
<span>Shutter Project title</span>
<button>View photo</button>
<label> <i class="heart"> </i>21</label>
</h2>
</div>
</a>
</div>
<div class="col_1_of_4 span_1_of_4">
<a href="#" class="b-link-stripe b-animate-go thickbox">
<img src="smartphone/images/p7.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="smartphone/images/p_logo.png" class="img-responsive" alt=""/>
<span>Shutter Project title</span>
<button>View photo</button>
<label> <i class="heart"> </i>21</label>
</h2>
</div>
</a>
</div>
<div class="col_1_of_4 span_1_of_4">
<a href="#" class="b-link-stripe b-animate-go thickbox">
<img src="smartphone/images/p8.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="smartphone/images/p_logo.png" class="img-responsive" alt=""/>
<span>Shutter Project title</span>
<button>View photo</button>
<label> <i class="heart"> </i>21</label>
</h2>
</div>
</a>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="portfolio_bottom">
<a class="btn3" href="#"><span>Loadmore</span></a>
</div>
<div class="services s2" id="services">
<div class="container">
<h2 class="service_head">Our Services</h2>
<div class="row text-center">
<div class="col-md-3 service_grid">
<i class="icon1"> </i>
<h3 class="m_1"><a href="#">One Page Layout</a></h3>
<p class="m_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt..</p>
</div>
<div class="col-md-3 service_grid">
<i class="icon2"> </i>
<h3 class="m_1"><a href="#">Flat Design</a></h3>
<p class="m_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt..</p>
</div>
<div class="col-md-3 service_grid">
<i class="icon3"> </i>
<h3 class="m_1"><a href="#">Photo portfolio</a></h3>
<p class="m_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt..</p>
</div>
<div class="col-md-3">
<i class="icon4"> </i>
<h3 class="m_1"><a href="#">Easy to edit</a></h3>
<p class="m_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt..</p>
</div>
</div>
</div>
</div>
<div class="photograph">
<div class="container">
<div class="slider-left">
<h1>Never Stop Photographing</h1>
<p class="top_desc">It Is very likely that your best photograph has not yet been captured</p>
<p class="bottom_desc">- imperdiet doming</p>
</div>
</div>
</div>
<div class="signup s3" id="signup">
<div class="container">
<h3 class="m_3">Are you Interested ? <br> Sign up now</h3>
<div class="contact-form">
<form method="post" action="contact-post.html">
<input type="text" class="textbox" value="First Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'First Name';}">
<input type="text" class="textbox" value="Last Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Last Name';}">
<input type="text" class="textbox" value="Email address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email address';}">
<input type="submit" value="Sign Up">
<div class="clearfix"> </div>
</form>
</div>
</div>
</div>
<div class="about s4" id="about">
<div class="container">
<h3 class="m_4">About Us</h3>
<p class="m_5">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<div class="row text-center">
<div class="col-md-3 about-grid text-center">
<img src="smartphone/images/pic1.png" class="img-responsive" alt=""/>
<h3><a href="#">John Doe<br>General Manager</a></h3>
<p>diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation </p>
</div>
<div class="col-md-3 about-grid text-center">
<img src="smartphone/images/pic3.png" class="img-responsive" alt=""/>
<h3><a href="#">John Doe<br>General Manager</a></h3>
<p>diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation </p>
</div>
<div class="col-md-3 about-grid text-center">
<img src="smartphone/images/pic2.png" class="img-responsive" alt=""/>
<h3><a href="#">John Doe<br>General Manager</a></h3>
<p>diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation </p>
</div>
<div class="col-md-3 about-grid text-center">
<img src="smartphone/images/pic4.png" class="img-responsive" alt=""/>
<h3><a href="#">John Doe<br>General Manager</a></h3>
<p>diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation </p>
</div>
</div>
</div>
</div>
<div class="contact s5" id="contact">
<div class="container">
<div class="row">
<div class="col-md-8 contact_left">
<h3>We Want to hear from you</h3>
<p class="m_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</p>
<ul class="contact_info">
<li><i class="pin"> </i><span>Lorem ipsum dolor sit amet, consectetuer <br>adipiscing elit, sed diam nonummy nibh euismod</span></li>
<li><i class="mobile"> </i><span>Tell: +1-900-235-2456<br>Fax: +1-900-235-2456</span></li>
<li><i class="message"> </i><span class="msg">info(at)shutter.com</span></li>
</ul>
</div>
<div class="col-md-4">
<div class="contact_right">
<div class="contact-form_grid">
<form method="post" action="contact-post.html">
<input type="text" class="textbox" value="Your name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your name';}">
<input type="text" class="textbox" value="Your email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your email';}">
<input type="text" class="textbox" value="Subject" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Subject';}">
<textarea value="Message:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="copy">
<p>© 2014 Template by <a href="http://w3layouts.com" target="_blank"> w3layouts</a></p>
</div>
<div class="social">
<ul>
<li class="facebook"><a href="#"><span> </span></a></li>
<li class="twitter"><a href="#"><span> </span></a></li>
<li class="rss"><a href="#"><span> </span></a></li>
<li class="google"><a href="#"><span> </span></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>