<!--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>Robotx for Iphone, Android & Smartphone Mobile Website Template | Home :: w3layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Robotx 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>
<!--theme-style-->
<link href="smartphone/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script src="smartphone/js/jquery.min.js"></script>
<script type="text/javascript" src="smartphone/js/move-top.js"></script>
<script type="text/javascript" src="smartphone/js/easing.js"></script>
</head>
<body>
<!--header-->
<div class="header">
<div class="container">
<div class="logo">
<a href="#"><img src="smartphone/images/logo.png" alt=" " /></a>
</div>
<div class="top-nav">
<span class="menu"> </span>
<ul>
<li class="active"><a href="#" class="scroll">Home</a></li>
<li><a href="#services" class="scroll">Services</a></li>
<li><a href="#team" class="scroll">Team</a></li>
<li><a href="#gallery" class="scroll">Gallery</a></li>
<li><a href="#price" class="scroll">Price</a></li>
<li><a href="#news" class="scroll">News</a></li>
<li><a href="#contact" class="scroll">Contact </a></li>
</ul>
<!-- script-nav -->
<script>
$("span.menu").click(function(){
$(".top-nav ul").slideToggle(500, function(){
});
});
</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>
<!-- //script-nav -->
</div>
<div class="clear"> </div>
</div>
</div>
<!--//header-->
<!--banner-->
<div class="banner">
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-matter">
<h2>ROBOT<span>X</span></h2>
<p>WEB DEVELOPMENT SOLUTIONS</p>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-matter">
<h2>DESIGN<span>X</span></h2>
<p>WEB DEVELOPMENT SOLUTIONS</p>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-matter">
<h2>DEVELOP<span>X</span></h2>
<p>WEB DEVELOPMENT SOLUTIONS</p>
</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>
<script src="smartphone/js/jquery.wmuSlider.js"></script>
<script>
$('.example1').wmuSlider();
</script>
</div>
<!--//banner-->
<!--content-->
<div class="content">
<div class="container">
<div class="services" id="services">
<h3>our <span>services</span></h3>
<div class="services-grid">
<div class="service-grid-left">
<img src="smartphone/images/tv.png" alt="" />
<h4>Responsive Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="more" href="#">more</a>
</div>
<div class="service-grid-left">
<img src="smartphone/images/wo.png" alt="" />
<h4>Responsive Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="more" href="#">more</a>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<!--team-->
<div class="team" id="team">
<div class="container">
<h3>our <span>team</span></h3>
<div class="team-grid">
<div class="col-md-3 team-grid-left">
<img class="img-responsive men" src="smartphone/images/1.jpg" alt="" />
<h4>Designer</h4>
<p>Lorem ipsum dolor sit amet</p>
<div class="arrow-para">
<div class="in-arrow">
<label class="line-in"> </label>
<span class="arrow"> </span>
</div>
<ul class="social">
<li class="facebook"><a href="#"><span> </span></a></li>
<li class="twitter"><a href="#"><span> </span></a></li>
<li class="inline"><a href="#"><span> </span></a></li>
<li class="gmail"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="col-md-3 team-grid-left">
<img class="img-responsive men" src="smartphone/images/2.jpg" alt="" />
<h4>Designer</h4>
<p>Lorem ipsum dolor sit amet</p>
<div class="arrow-para">
<div class="in-arrow">
<label class="line-in"> </label>
<span class="arrow"> </span>
</div>
<ul class="social">
<li class="facebook"><a href="#"><span> </span></a></li>
<li class="twitter"><a href="#"><span> </span></a></li>
<li class="inline"><a href="#"><span> </span></a></li>
<li class="gmail"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<!--gallery-->
<div class="gallery" id="gallery">
<div class="container">
<div class="gallery-grid">
<h3>our <span>gallery</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<ul id="filters">
<li class="active"><span class="filter" data-filter="app card icon logo set web">ALL</span></li>
<li><span class="filter" data-filter="app">CORPORATE WEB SITE</span></li>
<li><span class="filter" data-filter="card">RESPONSIVE DESIGN </span></li>
<li><span class="filter" data-filter="icon">MOBILE aPPS</span></li>
<li><span class="filter" data-filter="logo">wORDPRESS THEME </span></li>
<li><span class="filter" data-filter="set">WEB HOSTING</span></li>
</ul>
<div id="portfoliolist">
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper ">
<a href="#" class="b-link-stripe b-animate-go thickbox play-icon">
<img class="img-responsive sea" src="smartphone/images/pic1.jpg" alt="" />
</a>
<ul class="social-ic">
<li class="down"><a href="#"><span> </span></a></li>
<li class="search"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="#" class="b-link-stripe b-animate-go thickbox play-icon ">
<img class="img-responsive sea" src="smartphone/images/pic8.jpg" alt="" /></a>
<ul class="social-ic">
<li class="down"><a href="#"><span> </span></a></li>
<li class="search"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="#" class="b-link-stripe b-animate-go thickbox play-icon ">
<img class="img-responsive sea" src="smartphone/images/pic7.jpg" alt="" /></a>
<ul class="social-ic">
<li class="down"><a href="#"><span> </span></a></li>
<li class="search"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper ">
<a href="#" class="b-link-stripe b-animate-go thickbox play-icon ">
<img class="img-responsive sea" src="smartphone/images/pic6.jpg" alt="" /></a>
<ul class="social-ic">
<li class="down"><a href="#"><span> </span></a></li>
<li class="search"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper ">
<a href="#" class="b-link-stripe b-animate-go thickbox play-icon ">
<img class="img-responsive sea" src="smartphone/images/pic5.jpg" alt="" /></a>
<ul class="social-ic">
<li class="down"><a href="#"><span> </span></a></li>
<li class="search"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="#small-dialog5" class="b-link-stripe b-animate-go thickbox play-icon ">
<img class="img-responsive sea" src="smartphone/images/pic4.jpg" alt="" />
</a>
<ul class="social-ic">
<li class="down"><a href="#"><span> </span></a></li>
<li class="search"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="portfolio set mix_all" data-cat="set" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="#small-dialog5" class="b-link-stripe b-animate-go thickbox play-icon ">
<img class="img-responsive sea" src="smartphone/images/pic3.jpg" alt="" />
</a>
<ul class="social-ic">
<li class="down"><a href="#"><span> </span></a></li>
<li class="search"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="portfolio logo mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="#small-dialog5" class="b-link-stripe b-animate-go thickbox play-icon ">
<img class="img-responsive sea" src="smartphone/images/pic2.jpg" alt="" />
</a>
<ul class="social-ic">
<li class="down"><a href="#"><span> </span></a></li>
<li class="search"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="portfolio set mix_all" data-cat="set" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="#small-dialog5" class="b-link-stripe b-animate-go thickbox play-icon ">
<img class="img-responsive sea" src="smartphone/images/pic1.jpg" alt="" />
</a>
<ul class="social-ic">
<li class="down"><a href="#"><span> </span></a></li>
<li class="search"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="portfolio logo mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="#small-dialog5" class="b-link-stripe b-animate-go thickbox play-icon ">
<img class="img-responsive sea" src="smartphone/images/pic.jpg" alt="" />
</a>
<ul class="social-ic">
<li class="down"><a href="#"><span> </span></a></li>
<li class="search"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- Script for gallery Here -->
<script type="text/javascript" src="smartphone/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>
<!-- Gallery Script Ends -->
</div>
<!---->
<div class="price" id="price">
<div class="container">
<h3>our <span>price</span></h3>
<div class="price-grid">
<div class="col-md-4 pack">
<div class="price-top">
<h5>Pro Package</h5>
<span class="blub"> </span>
<p>$<label>99</label>/month</p>
</div>
<div class="price-bottom">
<p>Lorem ipsum dolor sit</p>
<p>Amet,consectetur</p>
<p>Dipiscing elit sed </p>
<p>Musmode tempor</p>
<p class="para">Vcididunt ut labore</p>
<a class="now" href="#">SUBSCRIBE NOW</a>
</div>
</div>
</div>
</div>
</div>
<!--news-->
<div class="news" id="news">
<div class="container">
<h3>our <span>news</span></h3>
<div class="our-new">
<div class="news-left">
<h4>Latest News</h4>
<div class="news-grid">
<div class="col-md-2 news-grid-left">
<label>21</label>
<small>DEC</small>
</div>
<div class="col-md-10 news-grid-right ">
<a href="#"><h6>Enim ad minim </h6></a>
<p>Lorem ipsum dolor sit</p>
<ul class="eye">
<li><a href="#"><span> </span></a></li>
<li><a href="#"><b>129</b></a></li>
</ul>
<ul class="eye">
<li class="round"><a href="#"><span> </span></a></li>
<li><a href="#"><b>81</b></a></li>
</ul>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="news-right">
<div class="news-grid">
<div class="col-md-2 news-grid-left news-right-grid">
<label>10</label>
<small>DEC</small>
</div>
<div class="col-md-10 news-grid-right news-grid-grid">
<a href="#"><h6>Uenim ad minim </h6></a>
<p>Lorem ipsum dolor sit</p>
<ul class="eye ">
<li class="black"><a href="#"><span > </span></a></li>
<li><a href="#"><b>129</b></a></li>
</ul>
<ul class="eye black">
<li class="black-round"><a href="#"><span> </span></a></li>
<li><a href="#"><b>81</b></a></li>
</ul>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
</div>
<!--contact-->
<div class="contact" id="contact">
<div class="container">
<h3>our <span>contact</span></h3>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d117451.83412789257!2d72.4782171300925!3d23.083554293042766!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1408175172215"> </iframe>
<label> </label>
</div>
<div class="clear"> </div>
<div class="container">
<div class="contact-our">
<p class="contact-para"><a href="#">+29 20 466 4241 <b>info@robotx.com</b></a></p>
<div class="contact-right">
<p>365 Main Street Your City, State Country.</p>
<span class="city"> </span>
<img class="drop-p" src="smartphone/images/dr.png" alt="" />
</div>
<div class="clear"> </div>
</div>
</div>
<div class="container">
<div class="contact-gr-grid">
<form>
<div class="grid-contact">
<div class="col-md-4 contact-grid">
<p class="your-para">Your name:</p>
<input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
</div>
<div class="col-md-4 contact-grid">
<p class="your-para">Your mail:</p>
<input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
</div>
<div class="col-md-4 contact-grid">
<p class="your-para">Your phone number:</p>
<input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
</div>
</div>
<p class="message-para">Your message:</p>
<textarea cols="77" rows="6" value=" " onfocus="this.value='';" onblur="if (this.value == '') {this.value = '';}"></textarea>
<div class="send">
<input type="submit" value="Send your message" >
</div>
</form>
</div>
</div>
</div>
</div>
<!--//content-->
<!--footer-->
<div class="footer">
<div class="container">
<img class="footer-left" src="smartphone/images/f-l.png" alt=" " />
<div class="footer-class">
<p class="footer-grid">© 2014 Template by <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
<ul class="social-ic-icons">
<li class="facebook"><a href="#"><span> </span></a></li>
<li class="twitter"><a href="#"><span> </span></a></li>
<li class="inline"><a href="#"><span> </span></a></li>
<li class="gmail"><a href="#"><span> </span></a></li>
<li class="browser"><a href="#"><span> </span></a></li>
</ul>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
<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>
</div>
</body>
</html>