<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!---- start-smoth-scrolling---->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="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},1000);
});
});
</script>
<!---- start-smoth-scrolling---->
<!-- Custom Theme files -->
<link href="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--->
<!----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---->
</head>
<body>
<!----- start-header---->
<div id="home" class="header">
<div class="top-header bounceInDown" data-wow-delay="0.4s">
<div class="container">
<div class="logo">
<a href="#">LASO .</a>
</div>
<!----start-top-nav---->
<nav class="top-nav">
<ul class="top-nav">
<li class="active"><a href="#home" class="scroll">Home</a></li>
<li><a href="#about" class="scroll">About</a></li>
<li><a href="#portfolio" class="scroll">Portfolio</a></li>
<li><a href="#skills" class="scroll">skills</a></li>
<li><a href="#contact" class="scroll">Contact</a></li>
<li class="team-active"><a href="#team" class="scroll">TEAM</a></li>
</ul>
<a href="#" id="pull"><img src="images/nav-icon.png" title="menu" /></a>
</nav>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!----- //End-header---->
<!----start-slider-script---->
<script src="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---->
<!-- Slideshow 4 -->
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="images/slide1.jpg" alt="">
<div class="caption bounceInDown" data-wow-delay="0.4s">
<div class="slide-text-info">
<span>THE WAY OF <label>SUCCESS</label></span>
<h1>WHY YOU ARE WAITING</h1>
<div class="slide-btns">
<a class="startnow" href="#">GET STARTED NOW</a>
<a class="livedemo" href="#">LIVE DEMO</a>
</div>
</div>
</div>
</li>
<li>
<img src="images/slide2.jpg" alt="">
<div class="caption">
<div class="slide-text-info bounceInDown" data-wow-delay="0.4s">
<span>THE WAY OF <label>SUCCESS</label></span>
<h1>WHY YOU ARE WAITING</h1>
<div class="slide-btns">
<a class="startnow" href="#">GET STARTED NOW</a>
<a class="livedemo" href="#">LIVE DEMO</a>
</div>
</div>
</div>
</li>
<li>
<img src="images/slide1.jpg" alt="">
<div class="caption">
<div class="slide-text-info bounceInDown" data-wow-delay="0.4s">
<span>THE WAY OF <label>SUCCESS</label></span>
<h1>WHY YOU ARE WAITING</h1>
<div class="slide-btns">
<a class="startnow" href="#">GET STARTED NOW</a>
<a class="livedemo" href="#">LIVE DEMO</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="clearfix"> </div>
<!----- //End-slider---->
<!---- top-grids ---->
<div id="about" class="top-grids text-center">
<div class="container">
<div class="col-md-4">
<div class="top-grid">
<span><label class="icon1"> </label></span>
<h3><a href="#">responsive layout</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et d</p>
</div>
</div>
<div class="col-md-4">
<div class="top-grid">
<span><label class="icon2"> </label></span>
<h3><a href="#">responsive layout</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et d</p>
</div>
</div>
<div class="col-md-4">
<div class="top-grid">
<span><label class="icon3"> </label></span>
<h3><a href="#">responsive layout</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et d</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!---- top-grids ---->
<!---- works ---->
<div id="portfolio" class="works text-center">
<h3>Check out our latest work</h3>
<div class="container">
<!---- start-portfolio-script----->
<script type="text/javascript" src="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>
<!----//End-portfolio-script----->
<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">DESIGN</span> /</li>
<li><span class="filter" data-filter="card">PHOTOGRAPHY</span> /</li>
<li><span clas