<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Onda - Hosting / Business HTML Website Template</title>
<meta name="keywords" content="" />
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile view -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="js/bootstrap/bootstrap.min.css">
<!-- Template's stylesheets -->
<link rel="stylesheet" href="js/megamenu/stylesheets/screen.css">
<link rel="stylesheet" href="css/theme-default.css" type="text/css">
<link rel="stylesheet" href="css/theme-classic.css" type="text/css">
<link rel="stylesheet" href="js/loaders/stylesheets/screen.css">
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="fonts/Simple-Line-Icons-Webfont/simple-line-icons.css" media="screen" />
<link rel="stylesheet" href="fonts/et-line-font/et-line-font.css">
<link rel="stylesheet" type="text/css" href="js/revolution-slider/css/settings.css">
<link rel="stylesheet" type="text/css" href="js/revolution-slider/css/layers.css">
<link rel="stylesheet" type="text/css" href="js/revolution-slider/css/navigation.css">
<link href="js/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="js/owl-carousel/owl.theme.css" rel="stylesheet">
<link href="js/progress-circle/style.css" rel="stylesheet">
<link href="js/tabs/css/responsive-tabs.css" rel="stylesheet" type="text/css" media="all" />
<!-- Template's stylesheets END -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet/less" type="text/css" href="less/skin.less">
<!-- Style Customizer's stylesheets END -->
<!-- Skin stylesheet -->
</head>
<body>
<div class="over-loader loader-live">
<div class="loader">
<div class="loader-item style4">
<div class="cube1"></div>
<div class="cube2"></div>
</div>
</div>
</div>
<!--end loading-->
<div class="wrapper-boxed">
<div class="site-wrapper">
<div class="topbar primary topbar-padding">
<div class="container">
<div class="topbar-left-items">
<ul class="toplist toppadding pull-left paddtop1">
<li class="rightl">Customer Care</li>
<li>(888) 123-4567</li>
</ul>
</div>
<!--end left-->
<div class="topbar-right-items pull-right">
<ul class="toplist toppadding">
<li class="lineright"><a href="#">Login</a></li>
<li class="lineright"><a href="#">Register</a></li>
<li>
<select id="source">
<option selected="selected" value="US"> United States</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="IN">India</option>
<option value="JP">Japan</option>
<option value="RS">Serbia</option>
<option value="UK">United Kingdom</option>
<option value="BR">Brasil</option>
</select>
</li>
<li><a target="_blank" href="https://www.facebook.com/codelayers"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="https://twitter.com/codelayers"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li class="last"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
<!--end topbar-->
<div class="col-md-12 nopadding">
<div class="header-section white style1 pin-style">
<div class="container">
<div class="mod-menu">
<div class="row">
<div class="col-sm-2"> <a href="index.html" title="" class="logo style-2 mar-4"> <img src="images/logo/cl-logo.png" alt=""> </a> </div>
<div class="col-sm-10">
<div class="main-nav">
<ul class="nav navbar-nav top-nav">
<li class="search-parent"> <a href="javascript:void(0)" title=""><i aria-hidden="true" class="fa fa-search"></i></a>
<div class="search-box ">
<div class="content">
<div class="form-control">
<input type="text" placeholder="Type to search" />
<a href="#" class="search-btn mar-1"><i aria-hidden="true" class="fa fa-search"></i></a> </div>
<a href="#" class="close-btn mar-1">x</a> </div>
</div>
</li>
<li class="cart-parent"> <a href="javascript:void(0)" title=""> <i aria-hidden="true" class="fa fa-shopping-cart"></i> <span class="number mar2"> 4 </span> </a>
<div class="cart-box">
<div class="content">
<div class="row">
<div class="col-xs-8"> 2 item(s) </div>
<div class="col-xs-4 text-right"> <span>$99</span> </div>
</div>
<ul>
<li> <img src="http://placehold.it/80x80" alt=""> Jean & Teashirt <span>$30</span> <a href="#" title="" class="close-btn">x</a> </li>
<li> <img src="http://placehold.it/80x80" alt=""> Jean & Teashirt <span>$30</span> <a href="#" title="" class="close-btn">x</a> </li>
</ul>
<div class="row">
<div class="col-xs-6"> <a href="#" title="View Cart" class="btn btn-block btn-warning">View Cart</a> </div>
<div class="col-xs-6"> <a href="#" title="Check out" class="btn btn-block btn-primary">Check out</a> </div>
</div>
</div>
</div>
</li>
<li class="visible-xs menu-icon"> <a href="javascript:void(0)" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false"> <i aria-hidden="true" class="fa fa-bars"></i> </a> </li>
</ul>
<div id="menu" class="collapse">
<ul class="nav navbar-nav">
<li class="right active"> <a href="index.html">Home</a> <span class="arrow"></span>
<ul class="dm-align-2">
<li> <a href="index-1.html">Home Style 1</a> </li>
<li> <a href="index-2.html">Home Style 2</a> </li>
<li> <a href="index-3.html">Home Style 3</a> </li>
<li class="active"> <a href="index-4.html">Home Style 4</a> </li>
<li> <a href="index-5.html">Home Style 5</a> </li>
<li> <a href="index.html">Home Default</a> </li>
</ul>
</li>
<li> <a href="#">Layouts</a> <span class="arrow"></span>
<ul class="dm-align-2">
<li class="active"> <a href="https://codelayers.net/templates/onda/classic/index.html">Layout Classic</a> </li>
<li> <a href="https://codelayers.net/templates/onda/creative/index.html">Layout Creative</a> </li>
<li> <a href="https://codelayers.net/templates/onda/onepage/index.html">Layout Onepage</a> </li>
</ul>
</li>
<li> <a href="slider-kenburns.html">Pages</a> <span class="arrow"></span>
<ul class="dm-align-2">
<li> <a href="#">About <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
<ul>
<li> <a href="page-about1.html">About Style 1</a> </li>
<li> <a href="page-about2.html">About Style 2</a> </li>
<li> <a href="page-about3.html">About Style 3</a> </li>
<li> <a href="page-about4.html">About Style 4</a> </li>
<li> <a href="page-about5.html">About Me</a> </li>
</ul>
</li>
<li> <a href="#">Services <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
<ul>
<li> <a href="page-services1.html">Services Style 1</a> </li>
<li> <a href="page-services2.html">Services Style 2</a> </li>
<li> <a href="page-services3.html">Services Style 3</a> </li>
<li> <a href="page-services4.html">Services Style 4</a> </li>
</ul>
</li>
<li> <a href="#">Team <span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
<ul>
<li> <a href="page-team-classic.html">Team Classic</a> </li>
<li> <a href="page-team-parallax.html">Team Parallax</a> </li>
</ul>
</li>
<li> <a href="#">Contact<span class="sub-arrow dark pull-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> <span class="arrow"></span>
<ul>
<li> <a href="page-contact.html">Contact Classic</a> </li>
<li> <a href="page-contact-map.html">Full Width Map</a> </li>
<li> <a href="page-contact-parallax.html">Contact Parallax</a> </li>
</ul>
</li>
<li> <a href="page-website-builder.html">Website Builder </a> </li>
<li> <a href="page-affiliates.html">Affiliates</a> </li>
<li> <a href="page-who-is.html">Search Who is</a> </li>
<li> <a href="page-full-width.html">Full Width Page</a> </li>
<li> <a href="page-left-sidebar.html">Left Sidebar</a> </li>
<li> <a href="page-right-sidebar.html">Right Sidebar</a> </li>
</ul>
</li>
<li> <a href="page-domain-search.html">Domains</a> <span class="arrow"></span>
<ul class="dm-align-2">
<li> <a href="page-domain-search.html">Domain Search</a> </li>
<li> <a href="page-domain-transfer.html">Domain Transfer</a> </li>
</ul>
</li>
<li> <a href="slider-kenburns.html">Hosting</a> <span class="arrow"></span>
<ul class="dm-align-2">
<li> <a href="page-web-hosting.html">Web Hosting</a> </li>
<li> <a href="page-dedicated-hosting.html">Dedicated Hosting</a> </li>
<li> <a href="page-shared-hosting.html">Shared Hosting</a> </li>
<li> <a href="page-vps-hosting.html">VPS Hosting</a> </li>
<li> <a href="page-reseller-hosting.html">Reseller Hosting</a> </li>
</ul>
</li>
<li class="clients"></li>
<li class="right"> <a href="#">Blog</a> <span class="arrow"></span>
<ul class="dm-align-2">
<li> <a href="blog-full-width.html">Full Width</a> </li>
<li> <a href="blog-3-columns.html">3 Columns</a> </li>
<li> <a href="blog-singlepost.html">Single Post</a> </li>
</ul>
</li>
<li class="right"> <a href="index-shop.html">Shop</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end menu-->
</div>
<!--end menu-->
<div class="clearfix"></div>
<!-- START REVOLUTION SLIDER 5.0 -->
<div class="rev_slider_wrapper">
<!-- START REVOLUTION SLIDER 5.0 auto mode -->
<div id="rev_slider" class="rev_slider" data-version="5.0">
<ul>
<!-- SLIDE -->
<li data-index="rs-1" data-transition="fade" data-slotamount="7" data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="Love it?" data-description="">
<!-- MAIN IMAGE -->
<img src="http://placehold.it/2000x1300" alt="" data-bgposition="center center" data-kenburns="off" data-duration="10000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 -500" data-offsetend="0 500" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<!-- LAYER NR. 1 -->
<div class="tp-caption roboto white tp-resizeme rs-parallaxlevel-0"
id="slide-1-layer-1"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-80','-80','-80','-80']"
data-fontsize="['70','70','70','50']"
data-lineheight="['100','100','100','100']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-transform_idle="o:1;"
data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;"
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
data-mask_in="x:0px;y:0px;"
data-mask_out="x:inherit;y:inherit;"
data-start="1000"
data-splitin="none"
data-splitout="none"
data-responsive_offset="on"
style="z-index: 7; white-space: nowrap;">Unlimited</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption roboto bold white uppercase tp-resizeme rs-parallaxlevel-0"
id="slide-1-layer-2"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-10','-10','-10','-20']"
data-fontsize="['90','90','90','50']"
data-lineheight="['70','70','70','50']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-transform_idle="o:1;"
data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;"
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
data-mask_in="x:0px;y:0px;"
data-mask_out="x:inherit;y:inherit;"
data-start="1500"
data-splitin="none"
data-splitout="none"
data-responsive_offset="on"
style="z-index: 7; white-space: nowrap;">Web Hosting</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption rev-btn uppercase"
id="slide-1-layer-3"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['top','top','top','top']" data-voffset="['410','410','330','260']"
data-speed="800"
data-start="2000"
data-transform_in="y:bottom;s:1500;e:Power3.easeOut;"
data-transform_out="opacity:0;s:3000;e:Power4.easeIn;s:3000;e:Power4.easeIn;"
data-endspeed="300"
data-captionhidden="off"
style="z-index: 6"><a href="#" class="btn btn-prim btn-xround uppercase">Order now</a> </div>
</li>
<!-- SLIDE -->
<li data-index="rs-2" data-transition="slideup" data-slotamount="7" data-easein="Power4.easeInOut" data-easeout="Power4.easeInOut" data-masterspeed="2000" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="Love it?" data-description="">
<!-- MAIN IMAGE -->
<img src="http://placehold.it/2000x1300" alt="" data-bgposition="center center" data-kenburns="off" data-duration="10000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 -500" data-offsetend="0 500" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<!-- LAYER NR. 1 -->
<div class="tp-caption roboto white tp-resizeme rs-parallaxlevel-0"
id="slide-2-layer-1"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-80','-80','-80','-80']"
data-fontsize="['70','70','70','50']"
data-lineheight="['100','100','100','100']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-transform_idle="o:1;"
data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;"
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
data-mask_in="x:0px;y:0px;"
data-mask_out="x:inherit;y:inherit;"
data-start="1000"
data-splitin="none"
data-splitout="none"
data-responsive_offset="on"
style="z-index: 7; white-space: nowrap;">Unlimited</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption roboto bold white uppercase tp-resizeme rs-parallaxlevel-0"
id="slide-2-layer-2"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-10','-10','-10','-20']"
data-fontsize="['90','90','90','50']"
data-lineheight="['70','70','70','50']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-transform_idle="o:1;"
data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;"
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
data-mask_in="x:0px;y:0px;"
data-mask_out="x:inherit;y:inherit;"
data-start="1500"
data-splitin="none"
data-splitout="none"
data-responsive_offset="on"
style="z-index: 7; white-space: nowrap;">Web Hosting</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption rev-btn uppercase"
id="slide-2-layer-3"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['top','top','top','top']" data-voffset="['410','410','330','260']"
data-speed="800"
data-start="2000"
data-transform_in="y:bottom;s:1500;e:Power3.easeOut;"
data-transform_out="opacity:0;s:3000;e:Power4.easeIn;s:3000;e:Power4.easeIn;"
data-endspeed="300"
data-captionhidden="off"
style="z-index: 6"><a href="#" class="btn btn-prim btn-xround uppercase">Order now</a> </div>
</li>
</ul>
</div>
<!-- END REVOLUTION SLIDER -->
</div>
<div class="clearfix"></div>
<!-- END OF SLIDER WRAPPER -->
<section class="section-primary sec-padding">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="item-holder marginbottom">
<div class="icon-plain-small left white"><span class="icon-layers"></span></div>
<div class="text-box-right less-padding-1">
<h4 class="text-white">Graphic Design</h4>
<p class="text-sm-transparent-6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue. </p>
</div>
</div>
</div>
<!--end item-->
<div class="col-md-4 col-sm-6">
<div class="item-holder marginbottom">
<div class="icon-plain-small left white"><span class="icon-pricetags"></span></div>
<div class="text-box-right less-padding-1">
<h4 class="text-white">Logo Design</h4>
<p class="text-sm-transparent-6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue. </p>
</div>
</div>
</div>
<!--end item-->
<div class="col-md-4 col-sm-6">
<div class="item-holder marginbottom">
<div class="icon-plain-small left white"><span class="icon-alarmclock"></span></div>
<div class="text-box-right less-padding-1">
<h4 class="text-white">Web Development</h4>
<p class="text-sm-transparent-6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue. </p>
</div>
</div>
</div>
<!--end item-->
<div class="col-md-4 col-sm-6">
<div class="item-holder marginbottom">
<div class="icon-plain-small left white"><span class="icon-layers"></span></div>
<div class="text-box-right less-padding-1">
<h4 class="text-white">Graphic Design</h4>
<p class="text-sm-transparent-6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue. </p>
</div>
</div>
</div>
<!--end item-->
<div class="col-md-4 col-sm-6">
<div class="item-holder marginbottom">
<div class="icon-plain-small left white"><span class="icon-pricetags"></span></div>
<div class="text-box-right less-padding-1">
<h4 class="text-white">Logo Design</h4>
<p class="text-sm-transparent-6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue. </p>
</div>
</div>
</div>
<!--end item-->
<div class="col-md-4 col-sm-6">
<div class="item-holder marginbottom">
<div class="icon-plain-small left white"><span class="icon-alarmclock"></span></div>
<div class="text-box-right less-padding-1">
<h4 class="text-white">Web Development</h4>
<p class="text-sm-transparent-6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis commodo augue. </p>
</div>
</div>
</div>
<!--end item-->
</div>
</div>
</section>
<!--end section-->
<div class="clearfix"></div>
<section class="sec-padding section-light">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="ce-feature-box-23 margin-bottom">
<div class="inner-box"> <img src="http://placehold.it/800x500" alt="" class="img-responsive"/>
<div class="text-box padding-4">
<h4 class="less-mar-1 title">Web Hosting</h4>
<div class="title-line"></div>
<div class="clearfix"></div>
<br/>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit sit amet justo Suspendisse et justo.</p>
</div>
</div>
</div>
</div>
<!--end item-->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="ce-feature-box-23 margin-bottom active">
<div class="inner-box"> <img src="http://placehold.it/800x500" alt="" class="img-responsive"/>
<div class="text-box padding-4">
<h4 class="less-mar-1 title">Affiliate Programe</h4>
<div class="title-line"></div>
<div class="clearfix"></div>
<br/>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit sit amet justo Suspendisse et justo.</p>
</div>
</div>
</div>
</div>
<!--end item-->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="ce-feature-box-23 margin-bottom">
<div class="inner-box"> <img src="http://placehold.it/800x500" alt="" class="img-responsive"/>
<div class="text-box padding-4">
<h4 class="less-mar-1 title">Free Rapid Setup</h4>
<div class="title-line"></div>
<div class="clearfix"></div>
<br/>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit sit amet justo Suspendisse et justo.</p>
</div>
</div>
</div>
</div>
<!--end item-->
</div>
</div>
</section>
<div class="clearfix"></div>
<!-- end section -->
<section class="section-side-image clearfix">
<div class="img-holder col-md-6 col-sm-3 pull-left">
<div class="background-imgholder" style="background:url(http://placehold.it/1500x960);"><img class="nodisplay-image" src="http://placehold.it/1500x960" alt=""/> </div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-6 col-sm-9 col-sm-offset-3 text-inner-2 clearfix align-left">
<div class="text-box">
<div class="ce4-feature-box-20">
<div class="col-xs-12 nopadding">
<div class="sec-title-container text-left">
<h3 class="uppercase font-weight-7 nopadding ce-title"><span>Plans included</span></h3>
<h5 class="uppercase font-weight-4 less-mar-1 ce-sub-title">get unlimited features</h5>
<div class="ce4-title-line-1 less-mar"></div>
</div>
</div>
<div class="clearfix"></div>
<!--end title-->
<div class="ce-feature-box-18">
<div class="iconbox-medium white round left icon"><span class="icon-tools-2"></span></div>
<div class="text-box-right less-padding-1">
<h4 class="title">Unlimited Sub Domains</h4>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse et justo Praesent mattis commodo augue Aliquam ornare hendrerit augue..</p>
</div>
</div>
<!--end feature box-->
<div class="col-divider-margin-5"></div>
<div class="ce-feature-box-18 active">
<div class="iconbox-medium white round left icon"><span class="icon-lock"></span></div>
<div class="text-box-right less-padding-1">
<h4 class="title">Directory Protection</h4>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse et justo Praesent mattis commodo augue Aliquam ornare hendrerit augue..</p>
</div>
</div>
<!--end feature box-->
<div class="col-divider-margin-5"></div>
<div class="ce-feature-box-18">
<div class="iconbox-medium white round left icon"><span class="icon-tools"></span></div>
<div class="text-box-right less-padding-1">
<h4 class="title">Manage multiple Web sites</h4>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse et justo Praesent mattis commodo augue Aliquam ornare hendrerit augue..</p>
</div>
</div>
<!--end feature box-->
</div>
</div>
</div>
</div>
</div>
</section>
<div class=" clearfix"></div>
<!--end section-->
<section class="parallax-4">
<div class="container-fluid nopadding">
<div class="parallax-overlay primary">
<div class="container sec-tpadding-2 sec-bpadding-2">
<div class="row">
<div class="col-xs-12 nopadding">
<div class="sec-title-container text-center">
<h3 class="uppercase font-weight-7 nopadding ce-title white"><span class="text-white">Our Skills</span></h3>
<h5 class="uppercase font-weight-4 less-mar-1 ce-sub-title white">get unlimited features</h5>
<div class="ce4-title-line-1 less-mar"></div>
</div>
</div>
<div class="clearfix"></div>
<!--end title-->
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="percent">
<p style="display:none; font-size:24px;">80%</p>
</div>
<br/>
<h6 class="text-white uppercase">Graphic Design</h6>
</div>
<!--end column-->
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="percent">
<p style="display:none; font-size:24px;">60%</p>
</div>
<br/>
<h6 class="text-white uppercase">Logo Design</h6>
</div>
<!--end column-->
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="percent-2">
<p style="display:none; font-size:24px;">90%</p>
</div>
<br/>
<h6 class="text-white uppercase">Photography</h6>
</div>
<!--end column-->
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="percent-2">
<p style="display:none; font-size:24px;">75%</p>
</div>
<br/>
<h6 class="text-white uppercase">Mockups</h6>
</div>
<!--end column-->
</div>
</div>
</div>
</div>
</section>
<div class="clearfix"></div>
<!--end section-->
<section>
<div class="divider-line solid light"></div>
<div class="container">
<div class="row sec-padding">
<ul class="clients-list grid-cols-6 hover-6">
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
<li><a href="#"><img src="http://placehold.it/400x300" alt=""></a></li>
</ul>
</div>
</div>
</section>
<div class="clearfix"></div>
<!-- end section -->
<div class="divider-line solid light"></div>
<section class="sec-padding">
<div class="container">
<div class="row">
<div class="col-xs-12 nopadding">
<div class="sec-title-container text-center">
<h3 class="uppercase font-weight-7 nopadding ce-title"><span>Our Plans & Price</span></h3>
<h5 class="uppercase font-weight-4 less-mar-1 ce-sub-title">get unlimited features</h5>
<div class="ce4-title-line-1 less-mar"></div>
</div>
</div>
<div class="clearfix"></div>
<!--end title-->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="ce-price-table-4 margin-bottom">
<div class="inner-box text-center">
<h4 class="uppercase less-mar-1 font-weight-6 title">Basic</h4>
<br/>
<div class="price-circle">
<div class="price"><sup>$</sup>9.99</div>
<i>/mo</i></div>
<br/>
<ul class="plan_features">
<li>1 GB Bandwidth</li>
<li class="highlight">256 MB Memory</li>
<li>Free Domain Name</li>
</ul>
<div class="clearfix"></div>
<a class="btn btn-prim btn-xround uppercase" href="#">Read more</a> </div>
</div>
</div>
<!--end item-->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="ce-price-table-4 active margin-bottom">
<div class="inner-box text-center">
<h4 class="uppercase less-mar-1 font-weight-6 title">Standard</h4>
<br/>
<div class="price-circle">
<div class="price"><sup>$</sup>29.9</div>
<i>/mo</i></div>
<br/>
<ul class="plan_features">
<li>1 GB Bandwidth</li>
<li class="highlight">256 MB Memory</li>
<li>Free Domain Name</li>
</ul>
<div class="clearfix"></div>
<a class="btn btn-dark-3 btn-xround uppercase" href="#">Read more</a> </div>
</div>
</div>
<!--end item-->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="ce-price-table-4 margin-bottom">
<div class="inner-box text-center">
<h4 class="uppercase less-mar-1 font-weight-6 title">Unlimited</h4>
<br/>
<div class="price-circle">
<div class="price"><sup>$</sup>38.9</div>
<i>/mo</i></div>
<br/>
<ul class="plan_features">
<li>1 GB Bandwidth</li>
<li class="highlight">256 MB Memory</li>
<li>Free Domain Name</li>
</ul>
<div class="clearfix"></div>
<a class="btn btn-prim btn-xround uppercase" href="#">Read more</a> </div>
</div>
</div>
<!--end item-->
</div>
</div>
</section>
<div class="clearfix"></div>
<!-- end section -->
<section class="parallax-6">
<div class="container-fluid nopadding">
<div class="parallax-overlay primary">
<div class="container sec-tpadding-2 sec-bpadding-2">
<div class="row">
<div class="col-xs-12 nopadding">
<div class="sec-title-container text-center">
<h3 class="uppercase font-weight-7 nopadding ce-title white"><span class="text-white">What People Says</span></h3>
</div>
</div>
<div class="clearfix"></div>
<!--end title-->
<div class="col-md-8 col-centered text-center slide-controls-2">
<div id="owl-demo3" class="owl-carousel owl-theme">
<div class="item">
<h4 class="raleway text-white font-weight-3">Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse et justo Praesent mattis commodo augue Aliquam ornare.</h4>
<br/>
<h5 class="text-white less-mar-1">Matthew</h5>
<p class="text-dark">Manager - Mediatricks</p>
</div>
<!--end carousel item-->
<div class="item">
<h4 class="raleway text-white font-weight-3">Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse et justo Praesent mattis commodo augue Aliquam ornare.</h4>
<br/>
<h5 class="text-white less-mar-1">Charlotte</h5>
<p class="text-dark">Manager - Mediatricks</p>
</div>
<!--end carousel item-->
<div class="item">
<h4 class="raleway text-white font-weight-3">Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse et justo Praesent mattis commodo augue Aliquam ornare.</h4>
<br/>
<h5 class="text-white less-mar-1">John Doe</h5>
<p class="text-dark">Manager - Mediatricks</p>
</div>
<!--end carousel item-->
</div>
<!--end carousel-->
</div>
<!--end item-->
</div>
</div>
</div>
</div>
</section>
<div class="clearfix"></div>
<!--end section-->
<section class="section-dark sec-padding">
<div class="container ">
<div class="row"> <br/>
<div class="col-md-3 col-sm-12 col-xs-12 clearfix margin-bottom">
<h4 class="less-mar3 font-weight-4 text-white">About Us</h4>
<div class="clearfix"></div>
<div class="footer-title-bottomstrip white"></div>
<ul class="footer-quick-links-4">
<li><a href="#"> Placerat bibendum</a></li>
<li><a href="#"> Ullamcorper odio nec turpis</a></li>
<li><a href="#"> Aliquam porttitor vestibulum ipsum</a></li>
<li><a href="#"> Lobortis enim nec nisi</a></li>
<li><a href="#"> Placerat bibendum</a></li>
<li><a href="#"> Ullamcorper odio nec turpis</a></li>
<li><a href="#"> Aliquam porttitor vestibulum ipsum</a></li>
<li><a href="#"> Lobortis enim nec nisi</a></li>
</ul>
<div class="clearfix"></div>
<br/>
<ul class="ce-sc-icons">
<li><a target="_blank" class="twitter" href="https://twitter.com/codelayers"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" href="https://www.facebook.com/codelayers"><i class="fa fa-facebook"></i></a></li>
<li><a class="active" href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<!--end item-->
<div class="col-md-3 col-sm-12 col-xs-12 clearfix margin-bottom">
<h4 class="less-mar3 font-weight-4 text-white">Products & Services</h4>
<div class="clearfix"></div>
<div class="footer-title-bottomstrip white"></div>
<ul class="footer-quick-links-4">
<li><a href="#"> Placerat bibendum</a></li>
<li><a href="#"> Ullamcorper odio nec turpis</a></li>
<li><a href="#"> Aliquam porttitor vestibulum ipsum</a></li>
<li><a href="#"> Lobortis enim nec nisi</a></li>
<li><a href="#"> Placerat bibendum</a></li>
<li><a href="#"> Ullamcorper odio nec turpis</a></li>
<li><a href="#"> Placerat bibendum</a></li>
<li><a href="#"> Aliquam porttitor vestibulum ipsum</a></li>
<li><a href="#"> Lobortis enim nec nisi</a></li>
<li><a href="#"> Placerat bibendum</a></li>
</ul>
</div>
<!--end item-->
<div class="col-md-3 col-sm-12 col-xs-12 bmargin clearfix margin-bottom">
<div class="item-holder">
<h4 class="less-mar3 font-weight-4 text-white">Recent Posts</h4>
<div class="footer-title-bottomstrip white"></div>
<div class="clearfix"></div>
<div class="fo-posts">
<div class="image-left"><img src="http://placehold.it/80x80" alt=""/></div>
<div class="text-box-right">
<h6 class="less-mar3 nopadding"><a href="#" class="text-white">Shared Hosting </a></h6>
<p>Lorem ipsum dolor sit</p>
<div class="post-info"> <span>By John Doe</span><span> June 19</span> </div>
</div>
</div>
<div class="col-divider-margin-1"></div>
<div class=" divider-line solid dark opacity-2 "></div>
<div class="col-divider-margin-2"></div>
<div class="fo-posts">
<div class="image-left"><img src="http://placehold.it/80x80" alt=""/></div>
<div class="text-box-right">
<h6 class="less-mar3 nopadding"><a href="#" class="text-white">Domain Transfer </a></h6>
<p>Lorem ipsum dolor sit</p>
<div class="post-info"> <span>By John Doe</span><span> June 19</span> </div>
</div>
</div>
<div class="col-divider-margin-1"></div>
<div class=" divider-line solid dark opacity-2 "></div>
<div class="col-divider-margin-2"></div>
<div class="fo-posts">
<div class="image-left"><img src="http://placehold.it/80x80" alt=""/></div>
<div class="text-box-right">
<h6 class="less-mar3 nopadding"><a href="#" class="text-white">VPS Hosting</a></h6>
<p>Lorem ipsum dolor sit</p>
<div class="post-info"> <span>By John Doe</span><span> June 19</span> </div>
</div>
</div>
</div>
</div>
<!--end item-->
<div class="col-md-3 col-sm-12 col-xs-12 clearfix margin-bottom">
<h4 class="less-mar3 font-weight-4 text-white">Need Help?</h4>
<div class="clearfix"></div>
<div class="footer-title-bottomstrip white"></div>
<ul class="footer-quick-links-4">
<li><a href="#"> Placerat bibendum</a></li>
<li><a href="#"> Ullamcorper odio nec turpis</a></li>
<li><a href="#"> Aliquam porttitor vestibulum ipsum</a></li>
<li><a href="#"> Lobortis enim nec nisi</a></li>
<li><a href="#"> Placerat bibendum</a></li>
<li><a href="#"> Ullamcorper odio nec turpis</a></li>
<li><a href="#"> Placerat bibendum</a></li>
<li><a href="#"> Aliquam porttitor vestibulum ipsum</a></li>
<li><a href="#"> Lobortis enim nec nisi</a></li>
<li><a href="#"> Placerat bibendum</a></li>
</ul>
</div>
<!--end item-->
<div class="clearfix"></div>
<div class="col-divider-margin-4"></div>
<div class="divider-line solid white opacity-2"></div>
<div class="col-divider-margin-4"></div>
<div class="col-md-3 margin-bottom"> <img src="images/logo/w-logo.png" alt=""/> </div>
<!--end item-->
<div class="col-md-9">
<input class="ce-newsletter-1" type="search" placeholder="Email Address">
<input name="search" value="Submit" class="ce-newsletter-submit-1" type="submit">
</div>
<!--end item-->
</div>
</div>
</section>
<div class="clearfix"></div>
<!--end section-->
<section class="sec-moreless-padding">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 bmargin">
<ul class="footer-payment-logo-list">
<li>
<h6>We Accept:</h6>
</li>
<li><img src="http://placehold.it/50x40" alt=""/></li>
<li><img src="http://placehold.it/50x40" alt=""/></li>
<li><img src="http://placehold.it/50x40" alt=""/></li>
<li><img src="http://placehold.it/50x40" alt=""/></li>
<li><img src="http://placehold.it/50x40" alt=""/></li>
</ul>
</div>
<!--end item-->
<div class="col-md-4 col-sm-12 col-xs-12 bmargin">
<ul class="footer-payment-logo-list">
<li>
<h6>Awards:</h6>
</li>
<li><img src="http://placehold.it/60x45" alt=""/></li>
<li><img src="http://placehold.it/60x45" alt=""/></li>
<li><img src="http://placehold.it/60x45" alt=""/></li>
</ul>
</div>
<!--end item-->
<div class="col-md-2 col-sm-12 col-xs-12 bottom-margin"> <a class="btn btn-green" href="#"><i class="fa fa-comments"></i> Live Chat</a> </div>
<!--end item-->
</div>
</div>
</section>
<div class="clearfix"></div>
<!-- end section -->
<div class="clearfix"></div>
<div class="divider-line solid light"></div>
<section>
<div class="divider-line solid light opacity-1"></div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center sec-moreless-padding"> <span>Copyright © 2019 <a href="https://1.envato.market/onda-html-by-codelayers">Onda</a> By <a href="https://1.envato.market/codelayers">Codelayers</a> | All rights reserved.</span></div>
</div>
</div>
</section>
<div class="clearfix"></div>
<!--end section-->
<a href="#" class="scrollup"></a><!-- end scroll to top of the page-->
</div>
<!--end site wrapper-->
</div>
<!--end wrapper boxed-->
<!-- Scripts -->
<script src="js/jquery/jquery.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/less/less.min.js" data-env="development"></script>
<!-- Scripts END -->
<!-- Template scripts -->
<script src="js/megamenu/js/main.js"></script>
<!-- REVOLUTION JS FILES -->
<script type="text/javascript" src="js/revolution-slider/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 5.0 EXTENSIONS
(Load Extensions only on Local File Systems !
The following part can be removed on Server for On Demand Loading) -->
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.carousel.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.video.min.js"></script>
<script type="text/javascript">
var tpj=jQuery;
var revapi4;
tpj(document).ready(function() {
if(tpj("#rev_slider").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider");
}else{
revapi4 = tpj("#rev_slider").show().revolution({
sliderType:"standard",
jsFileLocation:"js/revolution-slider/js/",
sliderLayout:"auto",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
onHoverStop:"off",
arrows: {
style:"erinyen",
enable:true,
hide_onmobile:true,
hide_under:778,
hide_onleave:true,
hide_delay:200,
hide_delay_mobile:1200,
tmp:'',
left: {
h_align:"left",
v_align:"center",
h_offset:80,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:80,
v_offset:0
}
}
,
touch:{
touchenabled:"on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
}
,
},
viewPort: {
enable:true,
outof:"pause",
visible_area:"80%"
},
responsiveLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[640,640,500,400],
lazyType:"smart",
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
shadow:0,
spinner:"off",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
autoHeight:"off",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
disableProgressBar:"on",
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
}); /*ready*/
</script>
<script>
$(window).load(function(){
setTimeout(function(){
$('.loader-live').fadeOut();
},1000);
})
</script>
<script src="js/parallax/jquery.parallax-1.1.3.js"></script>
<script src="js/owl-carousel/owl.carousel.js"></script>
<script src="js/owl-carousel/custom.js"></script>
<script src="js/progress-circle/raphael-min.js"></script>
<script src="js/progress-circle/custom.js"></script>
<script src="js/progress-circle/jQuery.circleProgressBar.js"></script>
<script src="js/tabs/js/responsive-tabs.min.js" type="text/javascript"></script>
<script src="js/functions/functions.js"></script>
</body>
</html>