<!--A Design by W3layouts
Author: W3layout
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>Free Blueasy Bootstrap Website Template | Home :: w3layouts</title>
<link href="web/css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="web/css/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,800' rel='stylesheet' type='text/css'>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="web/js/jquery-1.9.1.min.js"></script>
<!--hover-effect-->
<script src="web/js/hover_pack.js"></script>
<script type="text/javascript" src="web/js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function () {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function () {
$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
},
function () {
$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
</head>
<body>
<!--start header-->
<div class="header">
<div class="header-top">
<div class="container">
<div class="logo">
<a href="index.html"><img src="web/images/logo.png" alt=""/></a>
</div>
<div class="menu">
<a class="toggleMenu" href="#"><img src="web/images/nav_icon.png" alt="" /></a>
<ul class="nav" id="nav">
<li><a href="#home" class="scroll">Home</a></li>
<li><a href="#services" class="scroll">Services</a></li>
<li><a href="#features" class="scroll">Features</a></li>
<li><a href="#portfolio" class="scroll">Portfolio</a></li>
<li><a href="#contact" class="scroll">Contact</a></li>
<div class="clear"></div>
</ul>
</div>
<div class="clear"></div>
<script type="text/javascript" src="web/js/responsive-nav.js"></script>
<script type="text/javascript" src="web/js/move-top.js"></script>
<script type="text/javascript" src="web/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>
</div>
</div>
<div class="header-bottom" id="home">
<h1>"I'm Looking for the unexpected.</h1>
<h2>I'm Looking for things I've never seen before."</h2>
</div>
</div>
<!--end header-->
<!--start services-->
<div class="services" id="services">
<div class="container">
<div class="row">
<h3 class="m_3">Services</h3>
<div class="m_4"><span class="bottom_line"> </span></div>
<div class="col-md-3 top_grid">
<i class="coffee"> </i>
<h3 class="m_1">Coffee</h3>
<p class="m_2">Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..</p>
</div>
<div class="col-md-3 top_grid">
<i class="instant"> </i>
<h3 class="m_1">Instant</h3>
<p class="m_2">Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..</p>
</div>
<div class="col-md-3 top_grid">
<i class="advisor"> </i>
<h3 class="m_1">Serious</h3>
<p class="m_2">Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..</p>
</div>
<div class="col-md-3 top_grid1">
<i class="frame"> </i>
<h3 class="m_1">Frame</h3>
<p class="m_2">Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat..</p>
</div>
</div>
</div>
</div>
<!--end services-->
<!--start portfolio-->
<div class="Portfolio1" id="portfolio">
<div class="container">
<div class="portfolio_top">
<div class="portfolio_left">
<h3 class="m_5">Portfolio</h3>
<div class="m_6"><span class="portfolio_line"> </span></div>
</div>
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
<li><span class="filter" data-filter="app">Panoramas</span></li>
<li><span class="filter" data-filter="card">Portraits</span></li>
<li><span class="filter" data-filter="icon">Macro</span></li>
<li><span class="filter" data-filter="logo">Journal</span></li>
</ul>
<div class="clear"></div>
</div>
<div id="portfoliolist">
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="web/images/p1.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="web/images/p2.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="web/images/p3.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="web/images/p4.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="web/images/p5.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="web/images/p6.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio logo mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="web/images/p7.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
<div class="portfolio logo mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html" class="b-link-stripe b-animate-go thickbox">
<img src="web/images/p8.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "><img src="web/images/plus.png" alt=""/></h2>
</div></a>
</div>
</div>
</div>
</div><!-- container -->
</div>
<!--end portfolio-->
<!--start default-->
<div class="default" id="features">
<div class="container">
<div class="row">
<div class="col-md-6 default_top">
<h3 class="m_21">Just Default Section</h3>
<div class="m_22"><span class="default_line"> </span></div>
<p class="m_7">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 </p>
<p class="m_7">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 </p>
<div class="button"><a href="#">Visit Me</a></div>
</div>
<div class="col-md-6 video_player">
<iframe src="//player.vimeo.com/video/1785993?color=ffffff" width="100%" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/1785993"></a> <a href="http://vimeo.com/keithloutit"></a> <a href="https://vimeo.com"></a>.</p>
</div>
</div>
</div>
</div>
<!--end default-->
<!--start twitter-->
<div class="twitter">
<div class="container">
<div class="twitter_left">
<h3 class="m_21">Just Default Section</h3>
<div class="m_22"><span class="default_line"> </span></div>
</div>
<i class="icon_twitter"> </i>
<div class="clear"></div>
<p class="m_9">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<!--end twitter-->
<!--start join-->
<div class="join">
<div class="container">
<div class="row">
<h3 class="m_3">Who is Jphn Doe?</h3>
<div class="m_4"><span class="bottom_line"> </span></div>
<div class="col-md-6 join_left">
<p class="m_10">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 </p>
<p class="m_11">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 </p>
</div>
<div class="col-md-6">
<p class="m_10">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 </p>
<ul class="social">
<li class="twt"><a href="#"><span> </span></a></li>
<li class="google"><a href="#"><span> </span></a></li>
<li class="dribble"><a href="#"><span> </span></a></li>
<li class="coffee"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
</div>
</div>
<!--end join-->
<!--start testimonials-->
<div class="testimonials">
<div class="container">
<div class="portfolio_left">
<h3 class="m_5">Testimonials</h3>
<div class="m_6"><span class="portfolio_line"> </span></div>
</div>
<i class="quotation"> </i>
<div class="clear"> </div>
<p class="m_12">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</p>
<span class="m_13">-quis nostrud volutpat</span>
</div>
</div>
<!--end testimonials-->
<!--start contact-->
<div class="contact" id="contact">
<div class="container">
<div class="row">
<h3 class="m_3">Contact</h3>
<div class="m_4"><span class="bottom_line"> </span></div>
<form method="post" action="contact-post.html">
<div class="col-md-6 commentform">
<p class="comment-form-author"><label for="author">Name</label>
<input id="author" name="author" type="text" value="" size="30" aria-required="true">
</p>
<p><label for="author">Email</label>
<input id="author" name="author" type="text" value="" size="30" aria-required="true">
</p>
</div>
<div class="col-md-6 commentform_desc">
<p class="m_13">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.</p>
<div class="address">
<p>500 Lorem Ipsum Dolor Sit,</p>
<p>Phone:(00) 222 666 444</p>
<p>Fax: (000) 000 00 00 0</p>
<p>Email: <span>support[at]snow.com</span></p>
<p>Follow on: <span>Facebook</span>, <span>Twitter</span></p>
</div>
</div>
<div class="clear"></div>
<div class="contactform_bottom">
<span><label>Subject</label></span>
<span><textarea name="userMsg"> </textarea></span>
<input name="submit" type="submit" id="submit" value="Message">
</div>
<div class="col-md-6 commentform_desc1">
<p class="m_13">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.</p>
<div class="address">
<p>500 Lorem Ipsum Dolor Sit,</p>
<p>Phone:(00) 222 666 444</p>
<p>Fax: (000) 000 00 00 0</p>
<p>Email: <span>support[at]snow.com</span></p>
<p>Follow on: <span>Facebook</span>, <span>Twitter</span></p>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<ul class="footer-nav">
<li><a href="#">Home</a></li> |
<li><a href="#">Services</a></li> |
<li><a href="#">Portfolio</a></li> |
<li><a href="#">Contact</a></li>
</ul>
<div class="copy">
<p>© 2014 Template by <a href="http://w3layouts.com" target="_blank">w3layouts</a></p>
</div>
<div class="clear"></div>
</div>
</div>
<!--end contact-->
<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>
</body>
</html>