<!--
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>Orion for Iphone, Android & Smartphone Mobile Website Template | Home :: w3layouts</title>
<link href="smartphone/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- web-font -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- //web-font -->
<!-- js -->
<script src="smartphone/js/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="The free Orion 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>
<!-- //js -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="smartphone/js/move-top.js"></script>
<script type="text/javascript" src="smartphone/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>
<!-- grid-slider -->
<script type="text/javascript" src="smartphone/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="smartphone/js/jquery.contentcarousel.js"></script>
<script type="text/javascript" src="smartphone/js/jquery.easing.1.3.js"></script>
<!-- //grid-slider -->
<!-- //end-smoth-scrolling -->
</head>
<body>
<!-- header -->
<div class="header">
<!-- container -->
<div class="container">
<div class="head-logo">
<a href="#"><img src="smartphone/images/logo.png" alt="" /></a>
</div>
<div class="top-nav">
<span class="menu">MENU</span>
<ul class="nav1">
<li><a href="#services" class="scroll">SERVICES</a></li>
<li><a href="#how" class="scroll">HOW</a></li>
<li><a href="#work" class="scroll">OUR WORK</a></li>
<li><a href="#test" class="scroll">TESTIMONINALS</a></li>
<li><a href="#team" class="scroll">TEAM</a></li>
<li><a href="#contact" class="scroll">CONTACT US</a></li>
<li><a class="signup play-icon popup-with-zoom-anim" href="#small-dialog2">SIGN IN</a></li>
</ul>
<!-- script-for-menu -->
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- /script-for-menu -->
</div>
<div class="clearfix"> </div>
<!-- requried-jsfiles-for owl -->
<link href="smartphone/css/owl.carousel.css" rel="stylesheet">
<script src="smartphone/js/owl.carousel.js"></script>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 1,
lazyLoad : true,
autoPlay : true,
navigation : false,
navigationText : false,
pagination : true,
});
});
</script>
<!-- //requried-jsfiles-for owl -->
<div id="owl-demo" class="owl-carousel owl-carousel1">
<div class="item">
<div class="banner-info">
<img src="smartphone/images/rok.png" alt="" />
<h1>LET'S EXPLORE THE SKY!</h1>
<p>This is Photoshop's version of Lorem.</p>
<div class="button">
<ul>
<li><a href="#">LEARN MOERE</a></li>
<li><a href="#" class="blue">CONTACT US</a></li>
<div class="clear"> </div>
</ul>
<span>OR</span>
</div>
</div>
</div>
<div class="item">
<div class="banner-info">
<img src="smartphone/images/rok.png" alt="" />
<h1>LET'S EXPLORE THE SKY!</h1>
<p>This is Photoshop's version of Lorem.</p>
<div class="button">
<ul>
<li><a href="#">LEARN MOERE</a></li>
<li><a href="#" class="blue">CONTACT US</a></li>
<div class="clear"> </div>
</ul>
<span>OR</span>
</div>
</div>
</div>
<div class="item">
<div class="banner-info">
<img src="smartphone/images/rok.png" alt="" />
<h1>LET'S EXPLORE THE SKY!</h1>
<p>This is Photoshop's version of Lorem.</p>
<div class="button">
<ul>
<li><a href="#">LEARN MOERE</a></li>
<li><a href="#" class="blue">CONTACT US</a></li>
<div class="clear"> </div>
</ul>
<span>OR</span>
</div>
</div>
</div>
</div>
</div>
<!-- //container -->
<!-- pop-up-box -->
<script type="text/javascript" src="smartphone/js/modernizr.custom.min.js"></script>
<link href="smartphone/css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<script src="smartphone/js/jquery.magnific-popup.js" type="text/javascript"></script>
<!--//pop-up-box -->
<div id="small-dialog2" class="mfp-hide">
<div class="signup">
<h3>Sign In</h3>
<h4><a href="#">Create Account</a></h4>
<input type="text" class="email" placeholder="Email" required=""/>
<input type="password" placeholder="Password" required=""/>
<input type="submit" value="Sign In"/>
</div>
</div>
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
</div>
<!-- //header -->
<!-- content-grids -->
<div id="services" class="content-grids">
<!-- container -->
<div class="container">
<div class="col-md-4 content-grid">
<img src="smartphone/images/2.png" alt="" />
<h3>Web Design</h3>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh. </p>
</div>
<div class="col-md-4 content-grid">
<img src="smartphone/images/1.png" alt="" />
<h3>Logo Design</h3>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh. </p>
</div>
<div class="col-md-4 content-grid">
<img src="smartphone/images/3.png" alt="" />
<h3>Print Design</h3>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh. </p>
</div>
<div class="clear"> </div>
</div>
<!-- //container -->
</div>
<!-- //content-grids -->
<!-- timeline-grids -->
<div id="how" class="timeline-grids">
<!-- container -->
<div class="container">
<h3>How we work</h3>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida. </p>
<div class="timeline-grid">
<div class="timeline-bar">
<span class="s-point"> </span>
<label class="line"> </label>
<span class="e-point"> </span>
</div>
<div class="line-grid-info right-blue">
<h4>Client contact us</h4>
<p>This is Photoshop's .</p>
<span class="b-dot"> </span>
<span class="l-arrow"> </span>
</div>
<div class="line-grid-info left-red">
<h4>We will discuss what do you want</h4>
<p>This is Photoshop's.</p>
<span class="r-dot"> </span>
<span class="r-arrow"> </span>
</div>
</div>
</div>
<!-- //container -->
</div>
<!-- //timeline-grids -->
<!-- work -->
<div id="work" class="work">
<!-- container -->
<div class="container wrap">
<h3>Our work</h3>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh. </p>
<!-- requried-jsfiles-for owl -->
<script>
$(document).ready(function() {
$("#owl-demo1").owlCarousel({
items : 2,
lazyLoad : true,
autoPlay : true,
navigation : true,
navigationText : true,
pagination : false,
});
});
</script>
<!-- //requried-jsfiles-for owl -->
<!-- start content_slider -->
<div id="owl-demo1" class="owl-carousel">
<div class="item">
<div class="work-grids">
<div class="work-grid">
<img src="smartphone/images/1.jpg" alt="" />
<div class="caption">
<span>Sylabus</span>
</div>
</div>
<div class="work-grid">
<img src="smartphone/images/3.jpg" alt="" />
<div class="caption">
<span>Travel</span>
</div>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="item">
<div class="work-grids">
<div class="work-grid">
<img src="smartphone/images/2.jpg" alt="" />
<div class="caption">
<span>Contest</span>
</div>
</div>
<div class="work-grid">
<img src="smartphone/images/4.jpg" alt="" />
<div class="caption">
<span>Shop</span>
</div>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="item">
<div class="work-grids">
<div class="work-grid">
<img src="smartphone/images/1.jpg" alt="" />
<div class="caption">
<span>Sylabus</span>
</div>
</div>
<div class="work-grid">
<img src="smartphone/images/3.jpg" alt="" />
<div class="caption">
<span>Travel</span>
</div>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="item">
<div class="work-grids">
<div class="work-grid">
<img src="smartphone/images/2.jpg" alt="" />
<div class="caption">
<span>Contest</span>
</div>
</div>
<div class="work-grid">
<img src="smartphone/images/4.jpg" alt="" />
<div class="caption">
<span>Shop</span>
</div>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
</div>
<div class="button-red"><a href="#">See all how we work</a></div>
<!-- //container -->
</div>
<!-- //work -->
<!-- test -->
<div id="test" class="test">
<!-- container -->
<div class="container">
<h3>Testimonials</h3>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh. </p>
<div class="test-grids">
<div class="test-grid-left">
<img src="smartphone/images/m1.jpg" alt="" />
</div>
<div class="test-grid-right">
<h4>Neil Armstrong</h4>
<p>" Orion is great, you should try it."</p>
<label class="left-arrow"> </label>
</div>
<div class="clear"> </div>
</div>
</div>
<!-- //container -->
</div>
<!-- //test -->
<!-- team -->
<div id="team" class="team">
<!-- container -->
<div class="container">
<h3>Meet the team</h3>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh. </p>
<div class="team-grids">
<div class="col-md-3 team-grid">
<img src="smartphone/images/t1.jpg" alt="" />
<h4>Afnizar Nur Ghifari</h4>
<p>Chief Executive Officer</p>
<ul>
<li class="facebook"></li>
<li class="twitter"></li>
<li class="dribble"></li>
</ul>
</div>
<div class="col-md-3 team-grid">
<img src="smartphone/images/t2.jpg" alt="" />
<h4>Afnizar Nur Ghifari</h4>
<p>Chief Executive Officer</p>
<ul>
<li class="facebook"></li>
<li class="twitter"></li>
<li class="dribble"></li>
</ul>
</div>
<div class="col-md-3 team-grid">
<img src="smartphone/images/t3.jpg" alt="" />
<h4>Afnizar Nur Ghifari</h4>
<p>Chief Executive Officer</p>
<ul>
<li class="facebook"></li>
<li class="twitter"></li>
<li class="dribble"></li>
</ul>
</div>
<div class="col-md-3 team-grid">
<img src="smartphone/images/t4.jpg" alt="" />
<h4>Afnizar Nur Ghifari</h4>
<p>Chief Executive Officer</p>
<ul>
<li class="facebook"></li>
<li class="twitter"></li>
<li class="dribble"></li>
</ul>
</div>
<div class="clear"> </div>
</div>
</div>
<!-- //container -->
</div>
<!-- //team -->
<!-- map -->
<div class="map">
<iframe src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Purwokerto,+Central+Java,+Indonesia&aq=0&oq=purwo&sll=37.0625,-95.677068&sspn=50.291089,104.238281&ie=UTF8&hq=&hnear=Purwokerto,+Banyumas,+Central+Java,+Indonesia&ll=-7.431391,109.24783&spn=0.031022,0.050898&t=m&z=14&output=embed"></iframe>
<div class="black">
<div class="map-grids">
<div class="map-grid-left">
<h4>Blue Avenue 33821</h4>
<p>+82394 5940</p>
<p class="text">SEND US AN EMAIL </p>
<label class="right-arrow"> </label>
</div>
<div class="map-grid-right">
<img src="smartphone/images/find.png" alt="" />
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<!-- //map -->
<!-- map-bottom -->
<div class="map-bottom">
<!-- container -->
<div class="container">
<!-- requried-jsfiles-for owl -->
<script>
$(document).ready(function() {
$("#owl-demo2").owlCarousel({
items : 4,
lazyLoad : true,
autoPlay : true,
navigation : false,
navigationText : true,
pagination : false,
});
});
</script>
<!-- //requried-jsfiles-for owl -->
<!-- start content_slider -->
<div id="owl-demo2" class="owl-carousel">
<div class="item">
<div class="nasa">
<img src="smartphone/images/nasa.png" alt="" />
</div>
</div>
<div class="item">
<div class="jaxa">
<img src="smartphone/images/jaxa.png" alt="" />
</div>
</div>
<div class="item">
<div class="boeing">
<img src="smartphone/images/boe.png" alt="" />
</div>
</div>
<div class="item">
<div class="cnn">
<img src="smartphone/images/cnn.png" alt="" />
</div>
</div>
<div class="item">
<div class="nasa">
<img src="smartphone/images/nasa.png" alt="" />
</div>
</div>
<div class="item">
<div class="jaxa">
<img src="smartphone/images/jaxa.png" alt="" />
</div>
</div>
<div class="item">
<div class="boeing">
<img src="smartphone/images/boe.png" alt="" />
</div>
</div>
<div class="item">
<div class="cnn">
<img src="smartphone/images/cnn.png" alt="" />
</div>
</div>
</div>
</div>
<!-- //container -->
</div>
<!-- //map-bottom -->
<!-- footer -->
<div id="contact" class="footer">
<!-- container -->
<div class="container">
<div class="f-left">
<div class="f-left-left">
<ul>
<li class="value">VALUE</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Customer</a></li>
</ul>
</div>
<div class="f-left-left">
<ul>
<li class="value">AFFILIATE</a></li>
<li><a href="#">NASA</a></li>
<li><a href="#">JAXA Japan</a></li>
<li><a href="#">Boeing</a></li>
<li><a href="#">ABC Networks</a></li>
</ul>
</div>
<div class="f-left-left">
<ul>
<li class="value">SOCIAL</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Dribble</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
</div>
<div class="f-right">
<h4>GET SERVED</h4>
<form>
<input type="text" placeholder="example@email.com" required="">
<input type="submit" value="GO">
</form>
<p>Template by <a href="http://w3layouts.com/">W3layouts</a></p>
</div>
<div class="clear"> </div>
</div>
<!-- //container -->
</div>
<!-- //footer -->
<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>
<!-- content-Get-in-touch -->
</body>
</html>