<!--
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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>The Kebrum smartphone Template :: w3layouts</title>
<meta name="keywords" content="smartphone iphone web template, Andriod web template, Smartphone web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!----webfonts---->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!----//webfonts---->
<link href="smartphone/css/theme.css" rel='stylesheet' type='text/css' />
<script type="text/javascript" src="smartphone/js/jquery.min.js"></script>
<!-- jquery plguin -->
<script src="smartphone/js/login.js"></script>
<script src="smartphone/js/modernizr.custom.js"></script>
<!--start slider -->
<link rel="stylesheet" href="smartphone/css/fwslider.css" media="all">
<script src="smartphone/js/jquery-ui.min.js"></script>
<script src="smartphone/js/css3-mediaqueries.js"></script>
<script src="smartphone/js/fwslider.js"></script>
<!--end slider -->
<!--scroll-->
<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>
<!--//scroll-->
</head>
<body>
<!----start-container----->
<div class="header-bg" id="home">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="logo"><h1><a href="index.html">KEBRUM</a></h1></div>
</div>
<div class="col-md-8">
<div class="h_right">
<div class="left">
<ul class="menu list-unstyled">
<li class="active"><a href="#home" class="scroll">Home</a></li>
<li><a href="#features" class="scroll">Features</a></li>
<li><a href="#prices" class="scroll">Prices</a></li>
<li><a href="#faq" class="scroll">Faq</a></li>
<li><a href="#support" class="scroll">Support</a></li>
</ul>
</div>
<div class="right">
<ul class="menu list-unstyled">
<li class="login"><div class="login_box">
<div id="loginContainer">
<a href="#" id="loginButton" class=""><span>LOGIN</span></a>
<div id="loginBox" style="display: none;">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<input type="text" name="email" id="email" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}">
<input type="password" class="textbox" value="password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'password';}">
</fieldset>
<input type="submit" id="login" value="Sign in">
<label for="checkbox"><i><a href="">Lost Password ?</a></i></label>
</fieldset>
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<!-- end_login_box --></li>
</ul>
</div>
<!-- start login_box -->
<!-- start smart_nav * -->
<nav class="nav">
<ul class="nav-list">
<li class="nav-item"><a href="#home">Home</a></li>
<li class="nav-item"><a href="#features" class="scroll">Features</a></li>
<li class="nav-item"><a href="#prices" class="scroll">Prices</a></li>
<li class="nav-item"><a href="#faq" class="scroll">Faq</a></li>
<li class="nav-item"><a href="#support" class="scroll">Support</a></li>
<div class="clear"></div>
</ul>
<div class="nav-mobile"></div></nav>
<script type="text/javascript" src="smartphone/js/responsive.menu.js"></script>
<!-- end smart_nav * -->
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!----start-images-slider---->
<div class="smartphone/images-slider">
<!-- start slider -->
<div id="fwslider">
<div class="slider_container">
<div class="slide">
<!-- Slide image -->
<img src="smartphone/images/banner.jpg" alt=""/>
<!-- /Slide image -->
<!-- Texts container -->
<div class="slide_content">
<div class="slide_content_wrap">
<!-- Text title -->
<h4 class="title">To Protect your freedom</h4>
<h4 class="title">and privecy on the internet</h4>
<!-- /Text description -->
<div class="slide-btns description">
</div>
</div>
</div>
<!-- /Texts container -->
</div>
<!-- /Duplicate to create more slides -->
<div class="slide">
<img src="smartphone/images/banner.jpg" alt=""/>
<div class="slide_content">
<div class="slide_content_wrap">
<!-- Text title -->
<h4 class="title">To Protect your freedom</h4>
<h4 class="title">and privecy on the internet</h4>
<!-- /Text description -->
<div class="slide-btns description">
</div>
</div>
</div>
</div>
<!--/slide -->
</div>
<div class="timers"> </div>
<div class="slidePrev"><span> </span></div>
<div class="slideNext"><span> </span></div>
</div>
<!--/slider -->
</div>
<!--- features--->
<div class="container">
<div class="row">
<div class="content-feature-grids" id="features">
<h3> Features</h3>
<p>Lorem Ipsum is simply dummy text</p>
<div class="col-md-6">
<div class="feature-grid">
<div class="feature-grid-left icon1">
<span> </span>
</div>
<div class="feature-grid-right">
<h2>All-new design</h2>
<p>iOS 7 started with a desire to take an experience people</p>
</div>
<div class="clear"></div>
</div>
<div class="feature-grid">
<div class="feature-grid-left icon2">
<span> </span>
</div>
<div class="feature-grid-right">
<h2>All-new features</h2>
<p>Control Center, AirDrop for iOS, and smarter multitasking </p>
</div>
<div class="clear"></div>
</div>
<div class="feature-grid">
<div class="feature-grid-left icon3">
<span> </span>
</div>
<div class="feature-grid-right">
<h2>Date to date Update</h2>
<p>iOS 7 started with a desire to take an experience people </p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-----------start-pricing----------->
<div class="pricing-plans" id="prices">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Our Price</h3>
<p>Lorem Ipsum is simply dummy text of the printing</p>
<div class="pricing-grids">
<div class="pricing-grid">
<div class="price-value">
<a href="#">Wesite hosting</a>
</div>
<h4><a href="#">$5.01/month</a></h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sitamet, Consect</a></li>
<li><a href="#">Adipiscing elit</a></li>
<li><a href="#">Proin commodo turips</a></li>
<li><a href="#">Laws pulvinarvel</a></li>
<li><a href="#">Prnare nisi pretium</a></li>
</ul>
<div class="cart">
<div class="span3"><a class="popup-with-zoom-anim" href="#small-dialog"><i>Purchase</i></a>
</div>
</div>
</div>
<div class="pricing-grid">
<div class="price-value">
<a href="#">Reseller cloud</a>
</div>
<h4><a href="#">$10.01/month</a></h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sitamet, Consect</a></li>
<li><a href="#">Adipiscing elit</a></li>
<li><a href="#">Proin commodo turips</a></li>
<li><a href="#">Laws pulvinarvel</a></li>
<li><a href="#">Prnare nisi pretium</a></li>
</ul>
<div class="cart">
<div class="span3"><a class="popup-with-zoom-anim" href="#small-dialog"><i>Purchase</i></a>
</div>
</div>
</div>
<div class="clear"></div>
<div class="pricing-grids">
<div class="pricing-grid1">
<div class="price-value">
<a href="#">Wesite hosting</a>
</div>
<h4><a href="#">$5.01/month</a></h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sitamet, Consect</a></li>
<li><a href="#">Adipiscing elit</a></li>
<li><a href="#">Proin commodo turips</a></li>
<li><a href="#">Laws pulvinarvel</a></li>
<li><a href="#">Prnare nisi pretium</a></li>
</ul>
<div class="cart1">
<div class="span3"><a class="popup-with-zoom-anim" href="#small-dialog"><i>Purchase</i></a>
</div>
</div>
</div>
<div class="pricing-grid1">
<div class="price-value">
<a href="#">Wesite hosting</a>
</div>
<h4><a href="#">$5.01/month</a></h4>
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sitamet, Consect</a></li>
<li><a href="#">Adipiscing elit</a></li>
<li><a href="#">Proin commodo turips</a></li>
<li><a href="#">Laws pulvinarvel</a></li>
<li><a href="#">Prnare nisi pretium</a></li>
</ul>
<div class="cart1">
<div class="span3"><a class="popup-with-zoom-anim" href="#small-dialog"><i>Purchase</i></a>
</div>
</div>
</div>
<!-----pop-up-grid---->
<div id="small-dialog" class="mfp-hide">
<div class="pop_up">
<div class="payment-online-form-left">
<form>
<h4><span class="shipping"> </span>Shipping</h4>
<ul class="list-unstyled">
<li><input class="text-box-dark" type="text" value="Frist Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Frist Name';}"></li>
<li><input class="text-box-dark" type="text" value="Last Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Last Name';}"></li>
</ul>
<ul class="list-unstyled">
<li><input class="text-box-dark" type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"></li>
<li><input class="text-box-dark" type="text" value="Company Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Company Name';}"></li>
</ul>
<ul class="list-unstyled">
<li><input class="text-box-dark" type="text" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}"></li>
<li><input class="text-box-dark" type="text" value="Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Address';}"></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
<ul class="payment-type list-unstyled">
<h4><span class="payment"> </span> Payments</h4>
<li><span class="col_checkbox">
<input id="3" class="smartphone/css-checkbox1" type="checkbox">
<label for="3" name="demo_lbl_1" class="smartphone/css-label1"> </label>
<a class="visa" href="#"> </a>
</span>
</li>
<li>
<span class="col_checkbox">
<input id="4" class="smartphone/css-checkbox2" type="checkbox">
<label for="4" name="demo_lbl_2" class="smartphone/css-label2"> </label>
<a class="paypal" href="#"> </a>
</span>
</li>
<div class="clear"></div>
</ul>
<ul class="list-unstyled">
<li><input class="text-box-dark" type="text" value="Card Number" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Card Number';}"></li>
<li><input class="text-box-dark" type="text" value="Name on card" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name on card';}"></li>
<div class="clear"></div>
</ul>
<ul class="list-unstyled">
<li><input class="text-box-light hasDatepicker" type="text" id="datepicker" value="Expiration Date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Expiration Date';}"><em class="pay-date"> </em></li>
<li><input class="text-box-dark" type="text" value="Security Code" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Security Code';}"></li>
<div class="clear"></div>
</ul class="list-unstyled">
<ul class="payment-sendbtns">
<li><input type="reset" value="Cancel"></li>
<li><input type="submit" value="Process order"></li>
</ul>
<div class="clear"></div>
</form>
</div>
</div>
</div>
<!-----pop-up-grid---->
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Add fancyBox light-box -->
<link rel="stylesheet" type="text/css" href="smartphone/css/magnific-popup1.css">
<script src="smartphone/js/jquery.magnific-popup.js" type="text/javascript"></script>
<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>
<!-- //End fancyBox light-box -->
<!--- faq--->
<div class="container">
<div class="row">
<div class="content-feature-grids" id="faq">
<h3> Faq</h3>
<p>Lorem Ipsum is simply dummy text </p>
<div class="col-md-6">
<div class="faq-grid">
<h5>1. Lorem Ipsum is simply dummy text ?</h5>
<p>A. started with a desire to take an experience people </p>
</div>
<div class="faq-grid">
<h5>2. To make it even simpler, more useful ?</h5>
<p>A. It is a long established fact that a reader will be distracted.</p>
</div>
<div class="faq-grid">
<h5>3. Lorem Ipsum is simply dummy text ?</h5>
<p>A. started with a desire to take an experience people love </p>
</div>
<div class="faq-grid">
<h5>4. To make it even simpler, more useful ?</h5>
<p>A. started with a desire to take an experience people</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="contact s6" id="support">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="contact-left">
<h3>CONTACT ME</h3>
<p class="style">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="get-intouch-left-address">
<p>2345 Setwant natrer, 1234</p>
<p>Consectetur adipisicing.</p>
<p>2345 Setwant natrer, 1234</p>
<p class="style1">Email: <a href="mailto:info@mycompany.com"> info@gmail.com</a></p>
<p class="style2">Phone: 1.306.24565489</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="contact-right">
<div class="form">
<form method="post" action="#">
<input type="text" class="textbox" value=" Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" class="textbox" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
<div class="clear"></div>
<div>
<textarea value="Message:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = ' Message';}">Message</textarea>
</div>
<div class="span4">
<a href="#">
<i><input type="submit" value="CONTACT ME"></i>
<div class="clear"></div>
</a>
</div>
</form>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="copy-right">
<p>©Copyright 2014 All Rights Reserved Template <a href="http://w3layouts.com/"> w3layouts.com</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- scroll_top_btn -->
<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},1200);
});
});
</script>
<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
</body>
</html>