<!

--BANNER-->

<nav class="header bg-header transparent-dark " data-pages="header" data-pages-

header="autoresize" data-pages-resize-class="dark">

<div class="container relative">

<!-- Inicia el contenido de la izquierda del banner-->

<div class="pull-left">

<!-- .header-inner Esta clase alinea los elementos en el centro del eje y-->

<div class="header-inner">

<!-- LOGO -->

<img src="assets/images/logo_black.png" width="152" height="21" data-src-

retina="assets/images/logo_black_2x.png" class="logo" alt="">

<img src="assets/images/logo_white.png" width="152" height="21" data-src-

retina="assets/images/logo_white_2x.png" class="alt" alt="">

</div>

</div>

<!-- Inicia la cabecera para dispositivos moviles y tablets-->

<div class="pull-right">

<div class="header-inner">

<a href="#" class="search-toggle visible-sm-inline visible-xs-inline p-r-10" data-

toggle="search"><i class="fs-14 pg-search"></i></a>

<div class="visible-sm-inline visible-xs-inline menu-toggler pull-right p-l-10" data-

pages="header-toggle" data-pages-element="#header">

<div class="one"></div>
 <div class="two"></div>

<div class="three"></div>

</div>

</div>

</div>

<!-- FINALIZA LA CABECERA PARA DISPOSITIVOS MOVILES Y TABLETS-->

<!-- CONTENIDO DE LA PARTE DERECHA DEL BANNER-->

<div class="menu-content mobile-dark pull-right clearfix" data-pages-direction="slideRight"

id="header">

<!-- BEGIN HEADER CLOSE TOGGLE FOR MOBILE -->

<div class="pull-right">

<a href="#" class="padding-10 visible-xs-inline visible-sm-inline pull-right m-t-10 m-b-10

m-r-10" data-pages="header-toggle" data-pages-element="#header">

<i class=" pg-close_line"></i>

</a>

</div>

<!-- END HEADER CLOSE TOGGLE FOR MOBILE -->

<!-- ELEMENTOS DE LA BARRA DE NAVEGACION-->

<div class="header-inner">

<ul class="menu">

<li class="">

<a href="#" class="active">Home </a> <!-- HOME-->

</li>

<li class="classic">

<!-- LISTA DE ELEMENTOS DEL COMPONENTE ELEMENT DE LA NAVBAR-->

 <a href="javascript:;">

Elements <i class="pg-arrow_minimize m-l-5"></i>

</a>

<nav class="classic ">

<span class="arrow"></span>

<ul>

<li>

<a href="http://pages.revox.io/frontend/1.0/doc/#color"
target="_blank">Colors</a>

</li>

<li>

<a href="http://pages.revox.io/frontend/1.0/doc/#icons" target="_blank">Icons</a>

</li>

<li>

<a href="http://pages.revox.io/frontend/1.0/doc/#buttons"
target="_blank">Buttons</a>

</li>

<li>

<a href="http://pages.revox.io/frontend/1.0/doc/#modals"
target="_blank">Modals</a>

</li>

<li>

<a href="http://pages.revox.io/frontend/1.0/doc/#progress_bars"
target="_blank">Progress &amp; Activity</a>

</li>

<li>

<a href="http://pages.revox.io/frontend/1.0/doc/#accordians"
target="_blank">Accordians</a>

</li>

<li>

<a href="http://pages.revox.io/frontend/1.0/doc/#tabs" target="_blank">Tabs</a>

</li>

</ul>

</nav>

</li>

<li class="">

<a href="pricing.html">Pricing </a> <!-- ELEMENTO PRICING DE LA NAVBAR -->

</li>

<li class="open">

<a href="portfolio.html">Portfolio </a> <!-- ELEMENTO PORTAFOLIO DE LA NAVBAR -->

</li>

<li class="">

<a href="contact.html">Contact Us</a> <!--ELEMENTO CONTACT E LA NAVBAR-->

</li>

</ul>

<a href="#" class="search-toggle hidden-xs hidden-sm" data-toggle="search"><i class="fs-

14 pg-search"></i></a> <!-- BOTON DE BUSQUEDA -->

<!-- BEGIN COPYRIGHT FOR MOBILE -->

<div class="font-arial m-l-35 m-r-35 m-b-20 visible-sm visible-xs m-t-20">

<p class="fs-11 no-margin small-text p-b-20">Exclusive only at ,Themeforest. See

Standard licenses &amp; Extended licenses

</p>

<p class="fs-11 small-text muted">Copyright 2014 REVOX</p>

 </div>

<!-- END COPYRIGHT FOR MOBILE -->

</div>

<!-- FINALIZA LOS ELEMENTOS DEL MENU-->

</div>

</div>

</nav>

<!-- INICIO DE LA SECCION 1 -->

<div class="content-layer">

<div class="inner full-height" style="transform: translateY(34px);">

<div class="container-xs-height full-height">

 <div class="col-xs-height col-middle text-left">

<!--INICIA EL CONTENEDOR -->

<div class="container">

<div class="col-md-6 no-padding col-xs-10 col-xs-offset-1">

<!-- FUENTE DE MAYOR TAMAO QUE TIENE EL CONTENEDOR, h1-->

<h1 class="light sm-text-center" data-swiper-parallax="-15%" style="transform:

translate3d(0%, 0px, 0px); transition-duration: 0ms;"> Create your own front-end with endless
possibilities.</h1>

<!-- TEXTO SIGUIENTE AL DE MAYOR TAMAO, h4-->

<h4 class="sm-text-center">Save time, save money, look more professional and

win more clients.</h4>

<!-- FUENTE DE COLOR BLANCO QUE POSEE EL CONTENEDOR, h5-->

<h5 class="block-title text-white sm-text-center">Behind the scenes watch

tour</h5>

<!-- LA FUENTE MAS PEQUEA QUE POSEE EL CONTENEDOR-->

<p class="fs-12 font-arial hint-text sm-text-center">Available at themeforest,

envato market place.</p>

</div>

</div>

</div>

</div>

</div>

</div>
<!-- MOUSE ANIMADO -->

<div class="mouse-wrapper">

<div class="mouse">

<div class="mouse-scroll"></div>

</div >

</div>

<!-- INICIO SECCION 2 -->

<!-- INICIO DEL CONTENEDOR DE LA SECCION 2 -->

<section class="bg-master-lightest p-b-85 p-t-75">

<div class="container">

<div class="md-p-l-20 md-p-r-20 xs-no-padding">

<h5 class="block-title hint-text no-margin">Explore</h5> <!-- TEXTO EXPLORE, h5 -->

 <div class="row">

<!-- DIV QUE JUSTIFICA EL TEXTO DE FUENTE GRANDE A LA IZQUIERDA DE LA SECCION -->

<div class="col-sm-5 col-md-4">

<h1 class="m-t-5">Different ways to Organize your Content.</h1>

</div>

<!-- DIV QUE JUSTIFICA EL TEXTO A LA DERECHA DE LA SECCION -->

<div class="col-sm-7 col-md-8 no-padding xs-p-l-15 xs-p-r-15">

<div class="p-t-20 p-l-35 md-p-l-5 md-p-t-15">

<p>Our long standing vision has been to bypass the usual admin dashboard structure,
and move forward with a more sophisticated yet simple framework that would create a credible
impact on the many conventional dashboard users.</p>

<p class="hint-text font-arial small-text col-md-7 no-padding">A product is accessible

when all people regardless of ability can navigate it, understand it, and use it to achieve
goals.</p>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- FIN DEL CONTENEDOR DE LA SECCION 2 -->

<!-- INICIO DE LA SECCION 3 -->

<!-- INICIO DEL CONTENIDO DE LA SECCION 3 -->

<section class="p-b-85 p-t-75 p-b-65 p-t-55">

<div class="container">

<div class="md-p-l-20 xs-no-padding clearfix">

<!-- DIV QUE ALMACENA EL ELMENTO DE LA IZQUIERDA DE LA SECCION 3 -->

<div class="col-sm-4 no-padding">

<div class="p-r-40 md-pr-30">

<img alt="" class="m-b-20" src="assets/images/Parachute.svg">

<h6 class="block-title p-b-5">Launch Design <i class="pg-arrow_right m-l-10"></i></h6>

<p class="m-b-30">Awesome notepad app. It gives you a quick and simple notepad
editing experience when you write notes.</p>

<p class="muted font-arial small-text col-sm-9 no-padding">Icon Fonts, Vector SVG's,

pages 14x14px vector icons.</p>

</div>

<div class="visible-xs b-b b-grey-light m-t-30 m-b-30"></div>

</div>

<!-- DIV QUE ALMACENA EL ELMENTO CENTRAL DE LA SECCION 3 -->

 <div class="col-sm-4 no-padding">

<div class="p-r-40 md-pr-30">

<img alt="" class="m-b-20" src="assets/images/Prizemedalion.svg">

<h6 class="block-title p-b-5">Award Wining <i class="pg-arrow_right m-l-10"></i></h6>

<p class="m-b-30">Quick chat helps you to Keep in touch with your friends and
colleagues while working. It has a unique responsive design.</p>

<p class="muted font-arial small-text col-sm-9 no-padding">Limitless possibilities,

Highly customizable, Great UI &amp; UX</p>

</div>

<div class="visible-xs b-b b-grey-light m-t-30 m-b-30"></div>

</div>

<!-- DIV QUE ALMACENA EL ELMENTO DE LA DERECHA DE LA SECCION 3 -->

<div class="col-sm-4 no-padding">

<div class="p-r-40 md-pr-30">

<img alt="" class="m-b-20" src="assets/images/Umbrella.svg">

<h6 class="block-title p-b-5">Shop ready <i class="pg-arrow_right m-l-10"></i></h6>

<p class="m-b-30">This is a very young collection of charts, with the goal of keeping
these components very customizable.</p>

<p class="muted font-arial small-text col-sm-9 no-padding">Highly customizable NVD3,

rickshaw, Spark Lines, D3.</p>

</div>

</div>

</div>

</div>

</section>

<!-- FIN DEL CONTENIDO DE LA SECCION 3 -->

<!-- INICIO DE LA SECCION 4 -->

<section class="bg-master-lightest p-b-85 p-t-75 no-overflow">

<div class="container">

<! CONTENEDOR DE TEXTO DE LA SECCION 4 -->

<div class="md-p-l-20 md-p-r-20 xs-no-padding">

<! TITULO -->

<h5 class="block-title hint-text no-margin">MENU CLIPPING</h5>

<div class="row">

<div class="col-sm-5">

<!-- FUENTE DE MAYOR TAMAO DEL TEXTO, H1 -->

<h1 class="m-t-5 m-b-20">Easier to remember and access.</h1>

<!-- TEXTO DE DESCRIPCION DE LA SECCION 4 -->

<p class="m-b-20">Menu clipping makes it easier to keep track of the page you are at
&amp; helps you to identify menu labels using abbreviations</p>

<p class="hint-text font-arial small-text col-md-8 no-padding">This is something extra to

give users an exceptional user experience with a condensed menu.</p>

</div>

<!-- DIV QUE CONTIENE LA IMAGEN DEL CELULAR QUE ESTA A LA DERECHA DE LA SECCION 4 -->

<div class="col-sm-7 no-padding xs-p-l-15 xs-p-r-15">

<div class="content-mask-md">

<!-- MANEJADOR DE LA TRANSICION QUE TIENE LA IMAGEN-->

<div class="device_morph pull-center-inner" id="iphone01" data-pages="float" data-

max-top-translate="40" data-max-bottom-translate="300" data-speed="-0.1" data-delay="1000"
data-curve="ease" style="transition: transform 1s ease; transform: translateY(30.6598px);">

<img alt="" class="xs-image-responsive-height image-responsive-width"

src="assets/images/b_phone.png">
 <div class="screen">

<div class="iphone-border">

<img src="assets/images/mobile_preview.jpg" class="image-responsive-height lazy

loaded" alt="">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>}

<!-- INICIO DE LA SECCION 5 -->

<section class="p-b-85 p-t-75 bg-master-lighter">

<div class="container">

<!-- DIV DONDE ESTA ALMACENADO LOS COMPONENTES DE LA SECCION 5 -->

<div class="md-p-l-20 xs-no-padding clearfix">

<div class="row visible-sm">

<!-- DIV DONDE ESTA EL TEXTO DE TITULO DE LA SECCION 5 -->

<div class="col-sm-8 m-b-40">

<h2>Save time, save money, look more professional and win more clients.</h2>

<p class="hint-text font-arial small-text col-md-4 col-sm-6 no-padding">Via Senior Vice

President Design REVOX Ltd. 12345</p>

</div>
 </div>

<div class="row">

<!-- CONTENEDOR DE LA IMAGEN DEL CELULAR A LA IZQUIERDA DE LA SECCION -->

<div class="col-md-4 col-sm-4">

<div class="device_morph" data-pages="auto-scroll">

<!-- IMAGEN DEL CELULAR -->

<img alt="" class="xs-image-responsive-height image-responsive-width"

src="assets/images/b_phone.png" id="mobile_phone">

<div class="screen">

<!-- DIV QUE MANEJA LA ANIMACION DENTRO DEL CELULAR -->

<div class="iphone-border">

<img src="assets/images/mobile_preview.jpg" class="image-responsive-height lazy

loaded" alt="" style="transform: translateY(-840px);">

</div>

</div>

</div>

</div>

<div class="col-md-7 col-md-offset-1 col-sm-offset-2 col-sm-6">

<div class="clearfix hidden-sm">

<h2>Save time, save money, look more professional and win more clients.</h2>

<p class="hint-text font-arial small-text col-md-4 col-sm-6 no-padding">Via Senior Vice

President Design REVOX Ltd. 12345</p>

</div>

<!-- ELEMENTOS EN FORMADE ITEMS EN LA SECCION 5-->

<div class="col-md-9 col-md-offset-1 col-sm-11">

<div class="p-t-50">
 <dl>

<dt class="block-title p-b-15 text-black">Launch Design <i class="pg-arrow_right m-l-

10"></i></dt>

<dd class="m-b-30">Our long standing vision has been to bypass the usual admin
dashboard structure, and move forward with a more sophisticated yet simple framework</dd>

</dl>

<dl>

<dt class="block-title p-b-15 text-black">Responsive <i class="pg-arrow_right m-l-

10"></i></dt>

<dd class="m-b-30">Our long standing vision has been to bypass the usual admin
dashboard structure, and move forward with a</dd>

</dl>

<dl>

<dt class="block-title text-black p-b-15 ">Launch Your Design <i class="pg-

arrow_right m-l-10"></i></dt>

<dd class="m-b-30">Our long standing vision has been to bypass the usual admin
dashboard structure.</dd>

</dl>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- INICIO DE LA SECCION 6 -->

<section class="p-b-85 p-t-75 ">

<!-- INICIA EL SLIDER DE TESTIMONIOS-->

<div class="swiper-container swiper-container-horizontal" id="testimonials_slider">

<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-

2748px, 0px, 0px);">

<!-- TESTIMONIO-->

<div class="swiper-slide" style="width: 1374px;">

<div class="container">

<div class="col-sm-8 col-sm-offset-2">

<h3 class="text-center">

Our motivation "Perfection simplified" helps to

craft meaningful experiences for the people around us, This mission inspires us

to jump out of bed each day and guides every aspect of what we

do.

</h3>

<img alt="" class="m-t-20" src="assets/images/signature_sample.png">

</div>

</div>

</div>
 <!-- FIN DEL TESTIMONIO-->

<!-- SEGUNDO TESTIMONIO-->

<div class="swiper-slide swiper-slide-prev" style="width: 1374px;">

<div class="container">

<div class="col-sm-8 col-sm-offset-2">

<h3 class="text-center">

The dashboard will synergize with the colour selection made by the user and
appropriately amend. Similarly, all other elements will sync according to the base colours.

</h3>

<img alt="" class="m-t-20" src="assets/images/signature_sample.png">

</div>

</div>

</div>

<!-- FIN DEL TESTIMONIO-->

<!-- INICIO DEL TESTIMONIO-->

<div class="swiper-slide swiper-slide-active" style="width: 1374px;">

<div class="container">

<div class="col-sm-8 col-sm-offset-2">

<h3 class="text-center">

Given our emphasis on operational efficiency and optimization, we have focused

heavily on GPU performance with animation to ensure an ultra smooth and fast User Experience.

</h3>

<img alt="" class="m-t-20" src="assets/images/signature_sample.png">

</div>

</div>

</div>
 <!-- FIN DEL TESTIMONIO-->

</div>

<!-- NAVEGACION DE LOS TESTIMONIOS-->

<div class="swiper-pagination relative p-t-20 swiper-pagination-clickable"><span

class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span
class="swiper-pagination-bullet swiper-pagination-bullet-active"></span></div>

</div>

<!-- FIN DEL SLIDER DE TESTIMONIOS-->

</section>