<!--
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>Aluspisan a Bootstarp Website Template | Home :: w3layouts</title>
<link href="web/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="web/css/style.css" rel="stylesheet" type="text/css" media="all" />
<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:400,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="web/css/flexslider.css" type="text/css" media="screen" />
<script src="web/js/jquery.min.js"></script>
</head>
<body>
<!-- header -->
<div class="banner">
<div class="container">
<div class="logo">
<a href="index.html"><img src="web/images/logo.png" alt="" /></a>
</div>
<div class="head-nav">
<span class="menu"> </span>
<ul>
<li class="active"><a href="index.html">home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.html">contact</a></li>
<div class="clearfix"> </div>
</ul>
</div>
<!-- script-for-nav -->
<script>
$( "span.menu" ).click(function() {
$( ".head-nav ul" ).slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- script-for-nav -->
<div class="clearfix"> </div>
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="banner-info">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur adipisicing elit.</p>
</div>
</li>
<li>
<div class="banner-info">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur adipisicing elit.</p>
</div>
</li>
<li>
<div class="banner-info">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur adipisicing elit.</p>
</div>
</li>
<li>
<div class="banner-info">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur adipisicing elit.</p>
</div>
</li>
</ul>
</div>
</section>
<!-- FlexSlider -->
<script defer src="web/js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<!-- FlexSlider -->
</div>
</div>
<!-- header -->
<!-- services -->
<div class="ourservices">
<div class="container">
<h2>our services</h2>
<div class="col-md-4">
<i class="fully"> </i>
<h4>Fully responsive</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-4">
<i class="clean"> </i>
<h4>clean & professional design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-4">
<i class="htm"> </i>
<h4>html5 & css</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- services -->
<div class="case-studies">
<div class="container">
<h2>case studies</h2>
<p class="stud">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
<div class="studies">
<div class="wmuSlider example1 section" id="section-1">
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="data">
<h4>Lorem ipsum llc</h4>
<p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<a class="read-more" href="#">read more</a>
</div>
<div class="man">
<img src="web/images/device.png" class="img-responsive" alt="" />
</div>
<div class="clearfix"></div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="data">
<h4>Lorem ipsum llc</h4>
<p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<a class="read-more" href="#">read more</a>
</div>
<div class="man">
<img src="web/images/device1.jpg" class="img-responsive" alt="" />
</div>
<div class="clearfix"></div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="data">
<h4>Lorem ipsum llc</h4>
<p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<a class="read-more" href="#">read more</a>
</div>
<div class="man">
<img src="web/images/device.png" class="img-responsive" alt="" />
</div>
<div class="clearfix"></div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="data">
<h4>Lorem ipsum llc</h4>
<p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<a class="read-more" href="#">read more</a>
</div>
<div class="man">
<img src="web/images/device1.jpg" class="img-responsive" alt="" />
</div>
<div class="clearfix"></div>
</article>
<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>
</div>
<!-- script -->
<script src="web/js/jquery.wmuSlider.js"></script>
<script>
$('.example1').wmuSlider();
</script>
<!-- script -->
</div>
</div>
<!-- ourteam -->
<div class="ourteam">
<div class="container">
<h3>our team</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
<div class="team">
<ul id="flexiselDemo3">
<li>
<div class="team1">
<a href="#small-dialog6" class="b-link-stripe b-animate-go thickbox play-icon popup-with-zoom-anim">
<img src="web/images/man.jpg" class="img-responsive" alt="" />
<div class="b-wrapper"><h5 class="b-animate b-from-left b-delay03 "><i class="fff"> </i></h5>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
<h4>Bruce wayne</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li>
<div class="team1">
<a href="#small-dialog6" class="b-link-stripe b-animate-go thickbox play-icon popup-with-zoom-anim">
<img src="web/images/man1.jpg" class="img-responsive" alt="" />
<div class="b-wrapper"><h5 class="b-animate b-from-left b-delay03 "><i class="fff"> </i></h5>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
<h4>Tony Stark</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li>
<div class="team1">
<a href="#small-dialog6" class="b-link-stripe b-animate-go thickbox play-icon popup-with-zoom-anim">
<img src="web/images/man2.jpg" class="img-responsive" alt="" />
<div class="b-wrapper"><h5 class="b-animate b-from-left b-delay03 "><i class="fff"> </i></h5>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
<h4>Selina Kyle</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li>
<div class="team1">
<a href="#small-dialog6" class="b-link-stripe b-animate-go thickbox play-icon popup-with-zoom-anim">
<img src="web/images/man.jpg" class="img-responsive" alt="" />
<div class="b-wrapper"><h5 class="b-animate b-from-left b-delay03 "><i class="fff"> </i></h5>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
<h4>Bruce wayne</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li>
<div class="team1">
<a href="#small-dialog6" class="b-link-stripe b-animate-go thickbox play-icon popup-with-zoom-anim">
<img src="web/images/man1.jpg" class="img-responsive" alt="" />
<div class="b-wrapper"><h5 class="b-animate b-from-left b-delay03 "><i class="fff"> </i></h5>
<p class="b-animate b-from-right b-delay03 "></p></div></a>
<h4>Tony Stark</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(window).load(function() {
$("#flexiselDemo3").flexisel({
visibleItems: 3,
animationSpeed: 1000,
autoPlay: true,
autoPlaySpeed: 3000,
pauseOnHover: true,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
});
</script>
<script type="text/javascript" src="web/js/jquery.flexisel.js"></script>
</div>
</div>
<!-- ourteam -->
<!-- contactus -->
<div class="contactus">
<div class="container">
<h3>contact us</h3>
<div class="col-md-5">
<h4>contact form</h4>
<form>
<input type="text" class="text" value="NAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'NAME';}">
<input type="text" class="text" value="EMAIL" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'EMAIL';}">
<textarea value="MESSAGE:" onfocus="if(this.value == 'MESSAGE') this.value='';" onblur="if(this.value == '') this.value='MESSAGE';">MESSAGE</textarea>
</form>
</div>
<div class="col-md-4 info">
<h4>more info</h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106034.86973547915!2d151.21288358178987!3d-33.84869089455211!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b129838f39a743f%3A0x3017d681632a850!2sSydney+NSW%2C+Australia!5e0!3m2!1sen!2sin!4v1413550737925" width="" height="" frameborder="0" style="border:0"></iframe>
</div>
<div class="col-md-3 pisan">
<div class="icon1">
<i class="ph"> </i>
</div>
<div class="data1">
<h5>+(123)456-789-1234</h5>
<p>+(123)456-789-1234</p>
</div>
<div class="clearfix"></div>
<div class="icon1">
<i class="alu"> </i>
</div>
<div class="data1">
<h5>Alus Pisan</h5>
<p>23 Street BoulevardCity, WA 12345, USA</p>
</div>
<div class="clearfix"></div>
<div class="icon1">
<i class="msg"> </i>
</div>
<div class="data1">
<h5><a href="contact@gmail.com">contact@gmail.com</a></h5>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- contactus -->
<!-- keep in touch -->
<div class="keep">
<div class="container">
<h3>keep in touch.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<div class="col-md-7 text-field-email">
<form>
<input type="text" class="text" value="E-mail address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'E-mail address ';}">
</form>
</div>
<div class="col-md-5 button1">
<form>
<input type="submit" value="subscribe">
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- keep in touch -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="col-md-4">
<p>Template by <a href="http://w3layouts.com" target="_blank"> w3layouts</a></p>
</div>
<div class="col-md-4 policy">
<ul>
<li><a href="#">Privacy Policy</li></a>
<li><a href="#">Terms of Use</li></a>
<li><a href="#">FAQs</li></a>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-4 social">
<ul>
<li><a href="#"><i class="fb"> </i></li></a>
<li><a href="#"><i class="twt"> </i></li></a>
<li><a href="#"><i class="goog"> </i></li></a>
<li><a href="#"><i class="in"> </i></li></a>
<li><a href="#"><i class="pp"> </i></li></a>
<div class="clearfix"></div>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- footer -->
</body>
</html>