<!--
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>Shutter Bootstarp Website Template | Home :: w3layouts</title>
<link href="web/css/bootstrap.css" rel='stylesheet' type='text/css' />
<!--<link href="web/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<script src="web/js/bootstrap.min.js"></script>-->
<link href="web/css/bootstrap.min.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/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>
<!----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 src="web/js/easing.js"></script>
<script type="text/javascript" src="web/js/jquery.smint.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
</head>
<body>
<div class="header">
<div class="logo">
<a href="index.html"><img src="web/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="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>
</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="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>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="slider-left">
<h1>seacula quarta decima</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>
</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="web/js/jquery.wmuSlider.js"></script>
<script>
$('.example1').wmuSlider();
</script>
</div>
</div>
<nav class="subMenu navbar-custom navbar-scroll-top smint" role="navigation" style="position: absolute; top: 737px;">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-main-collapse">
<img src="web/images/nav-icon.png" title="drop-down-menu">
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse navbar-left navbar-main-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="active">
<a id="sTop" class="subNavBtn active" href="#">Home</a>
</li>
<li class="page-scroll">
<a id="s1" class="subNavBtn" href="#">Portfolio</a>
</li>
<li class="page-scroll">
<a id="s2" class="subNavBtn" href="#">Services</a>
</li>
<li class="page-scroll">
<a id="s3" class="subNavBtn" href="#">Sign Up</a>
</li>
<li class="page-scroll">
<a id="s4" class="subNavBtn" href="#">About</a>
</li>
<li class="page-scroll">
<a id="s5" class="subNavBtn" href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<a id="s4" class="right-msg subNavBtn msg-icon" href="#"><span> </span></a>
<div class="clearfix"> </div>
</div>
<!-- /.container -->
</nav>
<div class="portfolio s1" 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="web/images/p1.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="web/images/p2.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="web/images/p3.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="web/images/p4.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="clearfix"> </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="web/images/p5.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="web/images/p6.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="web/images/p7.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="web/images/p8.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="clearfix"> </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="web/images/p9.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="web/images/p10.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="web/images/p11.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="web/images/p12.jpg" class="img-responsive" alt=""/>
<div class="b-wrapper">
<h2 class="b-animate b-from-left b-delay03 ">
<img src="web/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="clearfix"> </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">
</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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan</p>
<div class="row text-center">
<div class="col-md-3 about-grid text-center">
<img src="web/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="web/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="web/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="web/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 ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla</p>
<p class="m_7">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla</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>
<script src="web/js/bootstrap.min.js"></script>
</body>
</html>