File: /home/dh_ncpy7d/beitarbeersheva.com/campaign/index-hero-form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>Urip Landing Page Template - Hero Form Layout</title>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Montserrat:700,400|Varela+Round">
<!-- Font Icon -->
<link rel="stylesheet" href="fonts/icomoon/icomoon.css">
<!-- Swipebox -->
<link rel="stylesheet" href="css/swipebox.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style-v2.css">
<link rel="stylesheet" href="css/style-responsive-v2.css">
<link rel="stylesheet" href="css/expandableGallery.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- FAV AND TOUCH ICONS -->
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<link rel="icon" type="image/png" href="images/favicon/favicon-32.png">
<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="images/favicon/apple-touch-icon-152.png">
<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/favicon/apple-touch-icon-144.png">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/favicon/apple-touch-icon-114.png">
<!-- For iPad and iPad mini models with a 1× display -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="images/favicon/apple-touch-icon-76.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/favicon/apple-touch-icon-72.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-57.png">
</head>
<body>
<!--
==========================
== BEGIN HEADER CONTENT ==
==========================
-->
<header id="main-header" class="the-header the-origin-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<a href="http://worksofwisnu.com/theme-preview/urip/index-hero-form.html" class="logo"><img src="images/logo.png" alt="Urip Logo"></a> <!-- Your Logo -->
<a href="#0" id="nav-menu-trigger" class="menu-toggle flip pull-right all-caps">Menu<span class="icon-menu5"></span></a> <!-- Menu Toggle -->
</div> <!--/ .col-lg-12 -->
</div> <!--/ .row -->
</div> <!--/ .container -->
</header>
<!--
=========================
==/ END HEADER CONTENT ==
=========================
-->
<!--
============================
== BEGIN NAV MENU CONTENT ==
============================
-->
<nav id="nav-wrapper">
<a class="nav-close" href="#0"><span class="icon-cross2"></span></a>
<ul id="main-nav" class="main-nav all-caps">
<li class="current"><a href="#hero">Home</a></li>
<li><a href="#what-we-do">What We Do</a></li>
<li><a href="#our-features">Our Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#our-team">The Team</a></li>
<li><a href="#customer-story">Customers</a></li>
<li class="dropdown">
<a class="external" href="#0">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a href="#0">Some Submenu</a></li>
<li><a href="#0">And More</a></li>
</ul>
</li>
</ul> <!--/ .main-nav -->
<ul class="secondary-nav">
<li><a href="#0">About This Template</a></li>
<li><a href="#0">Privacy Policy</a></li>
<li><a href="#0">Terms of Service</a></li>
<li><a href="#0">Legal</a></li>
<li><a href="#0">Careers</a></li>
<li><a class="contact-trigger">Contact Us</a></li>
</ul> <!--/ .secondary-nav -->
</nav>
<!--
===========================
==/ END NAV MENU CONTENT ==
===========================
-->
<!--
========================
== BEGIN MAIN CONTENT ==
========================
-->
<main id="main-content" class="hero-form-layout" style="margin-bottom: 234px;">
<!--
========================
== BEGIN HERO SECTION ==
========================
-->
<section id="hero" class="breaking" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="50">
<div class="hero-split-right"></div>
<div class="container">
<div class="vertical-center-wrapper">
<div class="vertical-center-table">
<div class="vertical-center-content">
<!-- BEGIN Hero Content -->
<div class="hero-content row">
<div class="col-lg-6 col-md-6 col-sm-6 margin-top-40">
<p class="lead zero-bottom text-shadow-xsmall" data-sr="enter top over 1s and move 50px wait 0.4s">Meet Urip Landing Page Template</p>
<h2 class="text-shadow-medium" data-sr="enter top over 1s and move 50px wait 0.3s">All in One Landing Page that Converts</h2>
<div class="row">
<div class="col-lg-10">
<div class="embed-responsive embed-responsive-16by9" data-sr="enter bottom over 1s and move 75px">
<iframe src="https://player.vimeo.com/video/93094247?color=19a9e5&title=0&byline=0&portrait=0" width="470" height="265" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div> <!--/ .embed-responsive -->
</div>
</div> <!--/ .row -->
</div> <!--/ .col-lg-6 -->
<div class="hero-form-wrapper col-lg-5 col-lg-offset-1 col-md-6 col-md-offset-0 col-sm-6 col-sm-offset-0 col-xs-10 col-xs-offset-1 centered" data-sr="over 1.25s">
<h4 class="all-caps margin-bot-15">Create Account for Free</h4>
<p class="zero-bottom">
Create account in 30 seconds. No credit card required.<br>
Already have an account? <a href="#0" class="more">Log in here.</a>
</p>
<form class="register-form margin-top-32 margin-bot-5" id="register-form" method="post">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="required-field">
<input name="heroFname" id="hero-fname" class="hero-input" type="text" placeholder="First Name">
</div> <!--/ .required-field -->
</div>
<div class="col-lg-6 col-md-6">
<input name="heroLname" id="hero-lname" class="hero-input" type="text" placeholder="Last Name">
</div>
<div class="col-lg-12 col-md-12">
<div class="required-field">
<input name="heroUsername" id="hero-username" class="hero-input" type="text" placeholder="Choose Username">
</div> <!--/ .required-field -->
</div>
<div class="col-lg-12 col-md-12">
<div class="required-field">
<input name="heroEmail" id="hero-email" class="hero-input" type="text" placeholder="Email Address">
</div> <!--/ .required-field -->
</div>
<div class="col-lg-8 col-md-8">
<input name="heroPhone" id="hero-phone" class="hero-input" type="text" placeholder="Phone Number">
</div>
<div class="col-lg-4 col-md-4">
<button id="hero-submit" type="submit" class="submit-btn">Create</button>
</div>
</div>
</form> <!--/ .register-form -->
<p class="zero-bottom">By creating account, you agree to the <a href="#0" class="more">Terms of Service</a></p>
</div> <!--/ .hero-form-wrapper -->
</div> <!--/ .row -->
<!-- END Hero Content -->
</div> <!--/ .vertical-center-content -->
</div> <!--/ .vertical-center-table -->
</div> <!-- / .vertical-center-wrapper -->
</div> <!--/ .container -->
</section>
<!--
=======================
==/ END HERO SECTION ==
=======================
-->
<!--
==============================
== BEGIN TOP CLIENT SECTION ==
==============================
-->
<section id="top-client" class="centered">
<div class="container">
<div class="row">
<!-- BEGIN Client Logo -->
<div class="client-logo">
<div class="the-logo col-lg-2 col-md-2">
<h5 class="top-logo-text all-caps" data-sr="enter left over 1s and move 50px wait .1s">Trusted By </h5>
</div> <!--/ .the-logo -->
<div class="the-logo col-lg-2 col-md-2 col-sm-3 col-xs-3">
<a href="#0"><img src="images/client/client.png" alt="Client Logo" data-sr="scale up 30% wait .2s"/></a>
</div> <!--/ .the-logo -->
<div class="the-logo col-lg-2 col-md-2 col-sm-3 col-xs-3">
<a href="#0"><img src="images/client/client.png" alt="Client Logo" data-sr="scale up 30% wait .5s"/></a>
</div> <!--/ .the-logo -->
<div class="the-logo col-lg-2 col-md-2 col-sm-3 col-xs-3">
<a href="#0"><img src="images/client/client.png" alt="Client Logo" data-sr="scale up 30% wait .7s"/></a>
</div> <!--/ .the-logo -->
<div class="the-logo col-lg-2 col-md-2 col-sm-3 col-xs-3">
<a href="#0"><img src="images/client/client.png" alt="Client Logo" data-sr="scale up 30% wait .9s"/></a>
</div> <!--/ .the-logo -->
<div class="the-logo col-lg-2 col-md-2 hidden-sm hidden-xs">
<a href="#0"><img src="images/client/client.png" alt="Client Logo" data-sr="scale up 30% wait 1.1s"/></a>
</div> <!--/ .the-logo -->
</div> <!--/ .client-logo -->
<!-- END Client Logo -->
</div> <!--/ .row -->
</div> <!--/ .container -->
</section>
<!--
=============================
==/ END TOP CLIENT SECTION ==
=============================
-->
<!--
==============================
== BEGIN WHAT WE DO SECTION ==
==============================
-->
<section id="what-we-do" class="centered">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- BEGIN Attention Box -->
<div class="attention-box">
<h5 class="all-caps">Hello!!</h5>
<p><strong>Attention Grabber -</strong> this notification would be clearly seen by your visitor and drive convertions.</p>
<a href="#0" class="more">Learn More</a>
</div> <!--/ .attention-box -->
<!--/ END Attention Box -->
</div>
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 centered">
<p class="section-title">What We Do</p>
<h2 class="section-heading">We make your business gain more revenue at a glance.</h2>
</div> <!--/ .col-lg-8 -->
<div class="clearfix"></div>
<div class="col-lg-10 col-lg-offset-1">
<p><strong>Maecenas sed diam eget</strong> risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. <strong>Nulla vitae elit libero</strong>, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis <a href="#0">vestibulum</a>. Maecenas mollis interdum!</p>
</div><!--/ .col-lg-10 -->
<div class="clearfix"></div>
<a href="#0" class="cta cta-default all-caps contact-trigger"> Get in Touch</a>
</div> <!--/ .row -->
</div> <!--/ .container -->
</section>
<!--
=============================
==/ END WHAT WE DO SECTION ==
=============================
-->
<!--
================================
== BEGIN HOW IT WORKS SECTION ==
================================
-->
<section id="how-it-works" class="gray-bg centered">
<div class="container-full">
<div class="row">
<!-- BEGIN How it Works Column -->
<ul class="how-it-works-col">
<li class="col-lg-4 col-md-4 col-sm-4">
<div class="how-it-works-title">
<img src="images/219x176.png" alt="Fully Responsive" data-sr="enter bottom over 1s and move 80px wait 0.3s">
<h4>Fully Responsive</h4>
</div> <!--/ .how-it-works-title -->
<div class="how-it-works-info">
<h4>Fully Responsive</h4>
<p><strong>Aenean eu leo quam</strong>. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#0">Cras mattis</a> consectetur purus sit amet fermentum. </p>
</div> <!--/ .how-it-works-info -->
</li> <!--/ .one-third-col -->
<li class="col-lg-4 col-md-4 col-sm-4">
<div class="how-it-works-title">
<img src="images/219x176.png" alt="Fully Responsive" data-sr="enter bottom over 1s and move 80px wait 0.5s">
<h4>Easy to Customize</h4>
</div> <!--/ .how-it-works-title -->
<div class="how-it-works-info">
<h4>Easy to Customize</h4>
<p><strong>Aenean eu leo quam</strong>. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#0">Cras mattis</a> consectetur purus sit amet fermentum. </p>
</div> <!--/ .how-it-works-info -->
</li> <!--/ .one-third-col -->
<li class="col-lg-4 col-md-4 col-sm-4">
<div class="how-it-works-title">
<img src="images/219x176.png" alt="Fully Responsive" data-sr="enter bottom over 1s and move 80px wait 0.7s">
<h4>Well Documented</h4>
</div> <!--/ .how-it-works-title -->
<div class="how-it-works-info">
<h4>Well Documented</h4>
<p><strong>Aenean eu leo quam</strong>. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#0">Cras mattis</a> consectetur purus sit amet fermentum. </p>
<a href="#0" class="cta cta-default all-caps">Purchase Now</a>
</div> <!--/ .how-it-works-info -->
</li> <!--/ .one-third-col -->
</ul>
<!--/ END How it Works Column -->
</div> <!--/ .row -->
</div> <!--/ .container-full -->
</section>
<!--
===============================
==/ END HOW IT WORKS SECTION ==
===============================
-->
<!--
================================
== BEGIN OUR FEATURES SECTION ==
================================
-->
<section id="our-features">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 centered">
<p class="section-title">Our Features</p>
<h2 class="section-heading">See the benefits you can get by working with our experts.</h2>
</div> <!--/ .col-lg-8 -->
<div class="clearfix"></div>
<!-- BEGIN 1st Row Features -->
<div class="the-feature col-lg-6 col-md-6 col-sm-6">
<div class="row">
<a href="#0">
<div class="col-lg-2 col-md-2">
<span class="feature-icon icon-gears"></span>
</div>
<div class="col-lg-10 col-md-10">
<h4 class="feature-title">Bootstrap 3.3.2</h4>
<p>Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</a>
</div> <!--/ .row -->
</div> <!--/ .the-feature -->
<div class="the-feature col-lg-6 col-md-6 col-sm-6">
<div class="row">
<a href="#0">
<div class="col-lg-2 col-md-2">
<span class="feature-icon icon-trophy3"></span>
</div>
<div class="col-lg-10 col-md-10">
<h4 class="feature-title">Professional Design</h4>
<p>Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</a>
</div> <!--/ .row -->
</div> <!--/ .the-feature -->
<!--/ END 1st Row Features -->
<!-- BEGIN 2nd Row Features -->
<div class="the-feature col-lg-6 col-md-6 col-sm-6">
<div class="row">
<a href="#0">
<div class="col-lg-2 col-md-2">
<span class="feature-icon icon-lightbulb"></span>
</div>
<div class="col-lg-10 col-md-10">
<h4 class="feature-title">High Conversion</h4>
<p>Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</a>
</div> <!--/ .row -->
</div> <!--/ .the-feature -->
<div class="the-feature col-lg-6 col-md-6 col-sm-6">
<div class="row">
<a href="#0">
<div class="col-lg-2 col-md-2">
<span class="feature-icon icon-mobile4"></span>
</div>
<div class="col-lg-10 col-md-10">
<h4 class="feature-title">Fully Responsive</h4>
<p>Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</a>
</div> <!--/ .row -->
</div> <!--/ .the-feature -->
<!--/ END 2nd Row Features -->
<!-- BEGIN 3rd Row Features -->
<div class="the-feature col-lg-6 col-md-6 col-sm-6 zero-bottom">
<div class="row">
<a href="#0">
<div class="col-lg-2 col-md-2">
<span class="feature-icon icon-adjustments"></span>
</div>
<div class="col-lg-10 col-md-10">
<h4 class="feature-title">Customization</h4>
<p>Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</a>
</div> <!--/ .row -->
</div> <!--/ .the-feature -->
<div class="the-feature col-lg-6 col-md-6 col-sm-6 zero-bottom">
<div class="row">
<a href="#0">
<div class="col-lg-2 col-md-2">
<span class="feature-icon icon-browser2"></span>
</div>
<div class="col-lg-10 col-md-10">
<h4 class="feature-title">Cross Browser Compatible</h4>
<p>Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</a>
</div> <!--/ .row -->
</div> <!--/ .the-feature -->
<!--/ END 3rd Row Features -->
<div class="col-lg-12 col-md-12 col-sm-12 centered" style="margin-top: 20px;">
<a href="#0" class="cta cta-default all-caps">Learn More</a>
</div>
</div> <!--/ .row -->
</div> <!--/ .container -->
</section>
<!--
===============================
==/ END OUR FEATURES SECTION ==
===============================
-->
<!--
===============================
== BEGIN FEATURETTES SECTION ==
===============================
-->
<section id="featurettes" class="expandable-gallery gray-bg no-padding">
<div class="container-full">
<div class="row">
<!-- BEGIN 1st Row Featurettes / Expandable Gallery Row -->
<div class="expandable-gallery-wrapper col-lg-6 col-md-6 no-padding">
<ul class="expandable-gallery-item">
<li class="selected"><img src="images/stocks/stock1.jpg" alt="Photo Stocks"></li>
<li><img src="images/stocks/stock2.jpg" alt="Photo Stocks"></li>
<li><img src="images/stocks/stock3.jpg" alt="Photo Stocks"></li>
</ul> <!-- expandable-gallery-item -->
<ul class="expandable-gallery-nav">
<li><a href="#0" class="expand-prev inactive">Next</a></li>
<li><a href="#0" class="expand-next">Prev</a></li>
</ul> <!-- expandable-gallery-nav -->
<a href="#0" class="expandable-close">Close</a>
</div> <!--/ .expandable-gallery-wrapper -->
<div class="expandable-gallery-info two-blocks-col col-lg-6 col-md-6">
<h3>We even give you more</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
<ul class="checklist">
<li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
<li>Aenean lacinia bibendum nulla sed consectetur.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
<li>Etiam porta sem malesuada magna mollis euismod a pharetra augue.</li>
<li class="visible-lg">Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
</ul> <!--/ .checklist -->
<a href="#0" class="more">Read More</a>
</div> <!--/ .expandable-gallery-info -->
<!--/ END 1st Row Featurettes / Expandable Gallery Row -->
<div class="clearfix"></div>
<!-- BEGIN 2nd Row Featurettes -->
<div class="two-blocks-col col-lg-6 col-md-6">
<h3>Content tab example</h3>
<!-- BEGIN Content Tab -->
<div class="content-tab-wrapper" role="tabpanel">
<!-- BEGIN Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#first" aria-controls="first" role="tab" data-toggle="tab"><span class="icon-cog2"></span>Settings</a></li>
<li role="presentation"><a href="#second" aria-controls="second" role="tab" data-toggle="tab"><span class="icon-cloud-upload"></span>Upload</a></li>
<li role="presentation"><a href="#third" aria-controls="second" role="tab" data-toggle="tab"><span class="icon-bar-graph-2"></span>Analytics</a></li>
<li role="presentation"><a href="#fourth" aria-controls="third" role="tab" data-toggle="tab"><span class="icon-archive2"></span>Archive</a></li>
<li role="presentation"><a href="#fifth" aria-controls="fourth" role="tab" data-toggle="tab"><span class="icon-share3"></span>Sharing</a></li>
</ul>
<!--/ END Nav tabs -->
<!-- BEGIN Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="first">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<a href="#0" class="more">Read More</a>
</div> <!-- First Tab Pane -->
<div role="tabpanel" class="tab-pane fade" id="second">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<a href="#0" class="more">Read More</a>
</div> <!-- Second Tab Pane -->
<div role="tabpanel" class="tab-pane fade" id="third">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<a href="#0" class="more">Read More</a>
</div> <!-- Third Tab Pane -->
<div role="tabpanel" class="tab-pane fade" id="fourth">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<a href="#0" class="more">Read More</a>
</div> <!-- Fourth Tab Pane -->
<div role="tabpanel" class="tab-pane fade" id="fifth">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<a href="#0" class="more">Read More</a>
</div> <!-- Fifth Tab Pane -->
</div>
<!--/ END Tab panes -->
</div> <!--/ .content-tab-wrapper -->
<!--/ END Content Tab -->
</div> <!--/ .two-blocks-col -->
<div class="featurettes-quote-wrapper col-lg-6 col-md-6 no-padding">
<div class="vertical-center-wrapper">
<div class="vertical-center-table">
<div class="vertical-center-content">
<div class="featurettes-quote centered">
Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
<h4 class="featurettes-quote-author">- John Doe</h4>
</div>
</div> <!--/ .vertical-center-content -->
</div> <!--/ .vertical-center-table -->
</div> <!--/ .vertical-center-wrapper -->
</div> <!--/ .col-lg-6 -->
<!--/ END 2nd Row Featurettes -->
</div> <!--/ .row -->
</div> <!--/ .container-full -->
</section>
<!--
==============================
==/ END FEATURETTES SECTION ==
==============================
-->
<!--
===========================
== BEGIN COUNTER SECTION ==
===========================
-->
<section id="counter" class="breaking centered" class="breaking" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="40">
<div class="color-overlay">
<div class="breaking-content">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<span class="counter-icon icon-happy3 urip-orange-color" data-sr="scale up 20% wait .2s"></span> <!--/ .counter-icon -->
<span class="counter">12345</span> <!--/ .counter -->
<span class="counter-title">Happy Customers</span> <!--/ .counter-title -->
</div> <!--/ .col-lg-3 -->
<div class="col-lg-3 col-md-3 col-sm-3">
<span class="counter-icon icon-lock4 urip-orange-color" data-sr="scale up 20% wait .4s"></span> <!--/ .counter-icon -->
<span class="counter">12345</span> <!--/ .counter -->
<span class="counter-title">Data Savings</span> <!--/ .counter-title -->
</div> <!--/ .col-lg-3 -->
<div class="col-lg-3 col-md-3 col-sm-3">
<span class="counter-icon icon-envelope urip-orange-color" data-sr="scale up 20% wait .6s"></span> <!--/ .counter-icon -->
<span class="counter">12345</span> <!--/ .counter -->
<span class="counter-title">Subscribers</span> <!--/ .counter-title -->
</div> <!--/ .col-lg-3 -->
<div class="col-lg-3 col-md-3 col-sm-3">
<span class="counter-icon icon-global urip-orange-color" data-sr="scale up 20% wait .8s"></span> <!--/ .counter-icon -->
<span class="counter">12345</span> <!--/ .counter -->
<span class="counter-title">Global Supports</span> <!--/ .counter-title -->
</div> <!--/ .col-lg-3 -->
</div> <!--/ .row -->
</div> <!--/ .container -->
</div> <!--/ .breaking-content -->
</div> <!--/ .color-overlay -->
</section>
<!--
==========================
==/ END COUNTER SECTION ==
==========================
-->
<!--
===========================
== BEGIN PRICING SECTION ==
===========================
-->
<section id="pricing" class="centered">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 centered">
<p class="section-title">Pricing Tables</p>
<h2 class="section-heading">Select the plan that suits you.<br>Upgrade, downgrade, or cancel anytime.</h2>
</div> <!--/ .col-lg-8 -->
<div class="clearfix"></div>
<!-- BEGIN Pricing Table -->
<ul class="pricing">
<div class="col-lg-3 col-md-3 col-sm-3 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<li class="price" data-sr="enter bottom over 1s and move 80px wait 0.2s">
<h5 class="price-title">Bronze</h5>
<div class="price-amount">$25</div>
<ul class="price-feature">
<li>1 Maecenas sed diam eget risus varius blandit</li>
<li>200 Cras justo odio dapibus quam</li>
<li>UNLIMITED facilisis faucibus dolor auctor</li>
<li>Vivamus sagittis lacus vel augue laoreet rutrum</li>
</ul> <!--/ .price-feature -->
<a href="#0" class="price-button all-caps">Buy Now</a>
</li> <!--/ .price -->
</div> <!--/ .col-lg-3 -->
<div class="col-lg-3 col-md-3 col-sm-3 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<li class="price" data-sr="enter bottom over 1s and move 80px wait 0.3s">
<h5 class="price-title">Silver</h5>
<div class="price-amount">$35</div>
<ul class="price-feature">
<li>2 Maecenas sed diam eget risus varius blandit</li>
<li>250 Cras justo odio dapibus quam</li>
<li>UNLIMITED facilisis faucibus dolor auctor</li>
<li>Vivamus sagittis lacus vel augue laoreet rutrum</li>
</ul> <!--/ .price-feature -->
<a href="#0" class="price-button all-caps">Buy Now</a>
</li> <!--/ .price -->
</div> <!--/ .col-lg-3 -->
<div class="col-lg-3 col-md-3 col-sm-3 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<li class="price best-value" data-sr="enter bottom over 1s and move 80px wait 0.4s">
<h5 class="price-title">Gold</h5>
<span class="best-value-label">best value</span>
<div class="price-amount">$50</div>
<ul class="price-feature">
<li>3 Maecenas sed diam eget risus varius blandit</li>
<li>400 Cras justo odio dapibus quam</li>
<li>UNLIMITED facilisis faucibus dolor auctor</li>
<li>Vivamus sagittis lacus vel augue laoreet rutrum</li>
<li>Sed blandit non mi <span class="price-label">Free</span></li>
</ul> <!--/ .price-feature -->
<a href="#0" class="price-button all-caps">Buy Now</a>
</li> <!--/ .price -->
</div> <!--/ .col-lg-3 -->
<div class="col-lg-3 col-md-3 col-sm-3 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<li class="price" data-sr="enter bottom over 1s and move 80px wait 0.5s">
<h5 class="price-title">Platinum</h5>
<div class="price-amount">$75</div>
<ul class="price-feature">
<li>2 Maecenas sed diam eget risus varius blandit</li>
<li>450 Cras justo odio dapibus quam</li>
<li>UNLIMITED facilisis faucibus dolor auctor</li>
<li>Vivamus sagittis lacus vel augue laoreet rutrum <span class="price-label">Free</span></li>
</ul> <!--/ .price-feature -->
<a href="#0" class="price-button all-caps">Buy Now</a>
</li> <!--/ .price -->
</div> <!--/ .col-lg-3 -->
</ul> <!--/ .pricing -->
<!--/ END Pricing Table -->
</div> <!--/ .row -->
</div> <!--/ .container -->
</section>
<!--
==========================
==/ END PRICING SECTION ==
==========================
-->
<!--
=======================
== BEGIN TAB SECTION ==
=======================
-->
<section id="tab-section" class="gray-bg">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 centered">
<h2 class="section-heading margin-top-min-13">We have everything to make your business a success.</h2>
</div> <!--/ .col-lg-8 -->
<div class="clearfix"></div>
<!-- BEGIN Section Tab -->
<div class="section-tab" role="tabpanel">
<!-- BEGIN Nav tabs -->
<ul class="nav nav-tabs centered" role="tablist">
<li role="presentation" class="active"><a href="#one" aria-controls="one" role="tab" data-toggle="tab">Tab One</a></li>
<li role="presentation"><a href="#two" aria-controls="two" role="tab" data-toggle="tab">Tab Two</a></li>
<li role="presentation"><a href="#three" aria-controls="three" role="tab" data-toggle="tab">Tab Three</a></li>
</ul>
<!--/ END Nav tabs -->
<!-- BEGIN Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="one">
<div class="col-lg-6 col-md-6" data-sr="enter left over 1s and move 110px">
<img class="animated fadeInLeft margin-bot-8 large-image-mockup" src="images/mockup/imac.png" alt="iMac Mockup"/>
</div> <!--/ .col-lg-6 -->
<div class="col-lg-6 col-md-6" data-sr="enter right over 1s and move 110px">
<!-- BEGIN Accordion -->
<div class="panel-group accordion-wrapper animated fadeInRight" id="accordion" role="tablist" aria-multiselectable="true">
<!-- BEGIN 1st Accordion -->
<div class="panel panel-default">
<div class="panel-heading panel-active" role="tab" id="first_accordion_heading">
<h4 class="panel-title">
<a href="#first_accordion_content" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="first_accordion_content">Euismod Malesuada Parturient</a>
</h4> <!--/ .panel-title -->
</div> <!--/ .panel-heading -->
<div id="first_accordion_content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="first_accordion_heading">
<div class="panel-body">
<p>Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>
<a href="#0" class="more">Read More</a>
</div> <!--/ .panel-body -->
</div> <!--/ #first_accordion_content -->
</div> <!--/ .panel -->
<!--/ END 1st Accordion -->
<!-- BEGIN 2nd Accordion -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="second_accordion_heading">
<h4 class="panel-title">
<a href="#second_accordion_content" class="collapsed" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="second_accordion_content">Venenatis Egestas Fusce Sem</a>
</h4> <!--/ .panel-title -->
</div> <!--/ .panel-heading -->
<div id="second_accordion_content" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="second_accordion_heading">
<div class="panel-body">
<p>Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>
<a href="#0" class="more">Read More</a>
</div> <!--/ .panel-body -->
</div> <!--/ #second_accordion_content -->
</div> <!--/ .panel -->
<!--/ END 2nd Accordion -->
<!-- BEGIN 3rd Accordion -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="third_accordion_heading">
<h4 class="panel-title">
<a href="#third_accordion_content" class="collapsed" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="third_accordion_content">Inceptos Tortor Consectetur</a>
</h4> <!--/ .panel-title -->
</div> <!--/ .panel-heading -->
<div id="third_accordion_content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="third_accordion_heading">
<div class="panel-body">
<p>Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>
<a href="#0" class="more">Read More</a>
</div> <!--/ .panel-body -->
</div> <!--/ #third_accordion_content -->
</div> <!--/ .panel -->
<!--/ END 3rd Accordion -->
<!-- BEGIN 4th Accordion -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="fourth_accordion_heading">
<h4 class="panel-title">
<a href="#fourth_accordion_content" class="collapsed" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="fourth_accordion_content">Donec ullamcorper nulla fringilla</a>
</h4> <!--/ .panel-title -->
</div> <!--/ .panel-heading -->
<div id="fourth_accordion_content" class="panel-collapse collapse" role="tabpanel" aria-labelledby="fourth_accordion_heading">
<div class="panel-body">
<p>Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>
<a href="#0" class="more">Read More</a>
</div> <!--/ .panel-body -->
</div> <!--/ #third_accordion_content -->
</div> <!--/ .panel -->
<!--/ END 4th Accordion -->
</div> <!--/ .accordion-wrapper -->
<!--/ END Accordion -->
</div> <!--/ .col-lg-6 -->
</div><!-- First Tab Pane -->
<div role="tabpanel" class="tab-pane fade" id="two">
<div class="col-lg-10 col-lg-offset-1 centered">
<p> Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. </p>
<a href="#0" class="cta cta-stroke all-caps">Purchase Now</a>
<div class="clearfix"></div>
<div class="browser-mockup-wrapper animated fadeInUp">
<a href="https://www.youtube.com/watch?v=Hhk4N9A0oCA" class="swipebox-video play-btn animated pulse"><span class="icon-play2"></span></a>
<img class="margin-top-40" src="images/mockup/browser.png" alt="Browser Mockup" />
</div> <!--/ .browser-mockup-wrapper -->
</div> <!--/ .col-lg-12 -->
</div><!-- Second Tab Pane -->
<div role="tabpanel" class="tab-pane fade" id="three">
<div class="side-feature col-lg-6 col-md-6 animated fadeIn">
<div class="row">
<div class="side-feature-icon col-lg-2 col-md-2 col-sm-4 col-xs-3">
<span class="icon-happy3 urip-blue-color"></span>
</div> <!--/ .side-feature-icon -->
<div class="side-feature-info col-lg-10 col-md-10 col-sm-6 col-xs-9">
<h4>Ultricies Inceptos Vulputate Ridiculus</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div> <!--/ .side-feature-info -->
<div class="side-feature-icon col-lg-2 col-md-2 col-sm-4 col-xs-3">
<span class="icon-lock4 side-feature-icon urip-blue-color"></span>
</div> <!--/ .side-feature-icon -->
<div class="side-feature-info col-lg-10 col-md-10 col-sm-6 col-xs-9">
<h4>Bibendum Fermentum Ultricies</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div> <!--/ .side-feature-info -->
<div class="side-feature-icon col-lg-2 col-md-2 col-sm-4 col-xs-3">
<span class="icon-global side-feature-icon urip-blue-color"></span>
</div> <!--/ .side-feature-icon -->
<div class="side-feature-info col-lg-10 col-md-10 col-sm-6 col-xs-9">
<h4>Pharetra Justo Parturient Nullam Sit</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div> <!--/ .side-feature-info -->
</div> <!--/ .row -->
</div> <!--/ .side-feature .col-lg-6 -->
<div class="col-lg-6 col-md-6 animated bounceInRight">
<div class="perspective-mockup-bg"></div>
</div> <!--/ .col-lg-6 -->
</div><!-- Third Tab Pane -->
</div>
<!--/ END Tab panes -->
</div>
<!--/ END Section Tab -->
</div> <!--/ .row -->
</div> <!--/ .container -->
</section>
<!--
======================
==/ END TAB SECTION ==
======================
-->
<!--
============================
== BEGIN BREAKOUT SECTION ==
============================
-->
<section id="breakout" class="breaking centered" class="breaking" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="40">
<div class="color-overlay">
<div class="breaking-content">
<div class="container">
<div class="row">
<div class="col-lg-12 centered">
<h4>Still confused choosing the right plan?</h4>
<p class="sub-lead">Register now and get free access to all of our premium services for 7 days.</p>
<a href="#0" class="cta cta-default all-caps clearfix" data-sr="enter bottom over 1s and move 75px">Register Now</a>
<div class="clearfix"></div>
<small data-sr="enter bottom over 1s and move 75px wait 0.2s"><em>*no credit card required</em></small>
</div> <!--/ .col-lg-12 -->
</div> <!--/ .row -->
</div> <!--/ .container -->
</div> <!--/ .breaking-content -->
</div> <!--/ .color-overlay -->
</section>
<!--
===========================
==/ END BREAKOUT SECTION ==
===========================
-->
<!--
============================
== BEGIN OUR TEAM SECTION ==
============================
-->
<section id="our-team">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 centered">
<p class="section-title">Meet The Team</p>
<h2 class="section-heading">Our team is passionate about bringing you to the top.</h2>
</div> <!--/ .col-lg-8 -->
<div class="clearfix"></div>
<!--BEGIN The Team Wrapper -->
<div class="the-team-wrapper">
<div class="col-lg-3 col-md-3">
<h4 class="all-caps hidden-xs">The Team</h4>
<a href="#0" id="mobile-team-filter" class="mobile-filter-select visible-xs"><h4 class="all-caps">The Team<span class="icon-chevron-thin-down"></span></h4></a>
<ul class="filter">
<li class="current all"><a href="#0">Everyone</a></li>
<li class="manager"><a href="#0">Manager</a></li>
<li class="developer"><a href="#0">Developer</a></li>
<li class="designer"><a href="#0">Designer</a></li>
<li class="marketing"><a href="#0">Marketing</a></li>
<li class="support"><a href="#0">Support</a></li>
</ul> <!--/ .filter -->
</div> <!--/ .col-lg-3 -->
<!-- BEGIN Team Photos -->
<div class="col-lg-9 col-md-9">
<div class="row">
<ul id="team_grid">
<li class="col-lg-4 col-md-4 col-sm-4 col-sm-offset-0 col-xs-6 col-xs-offset-3 team-item" data-type="manager developer" data-id="id-1">
<div class="team-item-content">
<img src="images/team-photo/270x320.png" alt="Team Photo"/>
<div class="team-info centered">
<h6>Jonathan Doe</h6>
<small>An experienced Web/UX Designer on a mission to use his God-given gifts in design to help others.<br/><br class="visible-lg visible-xs"/>He has worked with people in many different countries, and from many different industries. </small>
<ul class="team-social">
<li><a href="#0"><span class="icon-link2"></span></a></li>
<li><a href="#0"><span class="icon-linkedin2"></span></a></li>
<li><a href="#0"><span class="icon-twitter"></span></a></li>
</ul> <!--/ .team-social -->
</div> <!--/ .team-info -->
</div> <!--/ .team-item-content -->
</li> <!--/ .team-item -->
<li class="col-lg-4 col-md-4 col-sm-4 col-sm-offset-0 col-xs-6 col-xs-offset-3 team-item" data-type="manager marketing designer" data-id="id-2">
<div class="team-item-content">
<img src="images/team-photo/270x320.png" alt="Team Photo"/>
<div class="team-info centered">
<h6>Robert Doe</h6>
<small>An experienced Web/UX Designer on a mission to use his God-given gifts in design to help others.<br/><br class="visible-lg visible-xs"/>He has worked with people in many different countries, and from many different industries. </small>
<ul class="team-social">
<li><a href="#0"><span class="icon-link2"></span></a></li>
<li><a href="#0"><span class="icon-linkedin2"></span></a></li>
<li><a href="#0"><span class="icon-twitter"></span></a></li>
</ul> <!--/ .team-social -->
</div> <!--/ .team-info -->
</div> <!--/ .team-item-content -->
</li> <!--/ .team-item -->
<li class="col-lg-4 col-md-4 col-sm-4 col-sm-offset-0 col-xs-6 col-xs-offset-3 team-item" data-type="designer developer" data-id="id-3">
<div class="team-item-content">
<img src="images/team-photo/270x320.png" alt="Team Photo"/>
<div class="team-info centered">
<h6>Hannah Doe</h6>
<small>An experienced Web/UX Designer on a mission to use his God-given gifts in design to help others.<br/><br class="visible-lg visible-xs"/>He has worked with people in many different countries, and from many different industries. </small>
<ul class="team-social">
<li><a href="#0"><span class="icon-link2"></span></a></li>
<li><a href="#0"><span class="icon-linkedin2"></span></a></li>
<li><a href="#0"><span class="icon-twitter"></span></a></li>
</ul> <!--/ .team-social -->
</div> <!--/ .team-info -->
</div> <!--/ .team-item-content -->
</li> <!--/ .team-item -->
<li class="col-lg-4 col-md-4 col-sm-4 col-sm-offset-0 col-xs-6 col-xs-offset-3 team-item" data-type="marketing support" data-id="id-4">
<div class="team-item-content">
<img src="images/team-photo/270x320.png" alt="Team Photo"/>
<div class="team-info centered">
<h6>Megan Doe</h6>
<small>An experienced Web/UX Designer on a mission to use his God-given gifts in design to help others.<br/><br class="visible-lg visible-xs"/>He has worked with people in many different countries, and from many different industries. </small>
<ul class="team-social">
<li><a href="#0"><span class="icon-link2"></span></a></li>
<li><a href="#0"><span class="icon-linkedin2"></span></a></li>
<li><a href="#0"><span class="icon-twitter"></span></a></li>
</ul> <!--/ .team-social -->
</div> <!--/ .team-info -->
</div> <!--/ .team-item-content -->
</li> <!--/ .team-item -->
<li class="col-lg-4 col-md-4 col-sm-4 col-sm-offset-0 col-xs-6 col-xs-offset-3 team-item" data-type="marketing support" data-id="id-5">
<div class="team-item-content">
<img src="images/team-photo/270x320.png" alt="Team Photo"/>
<div class="team-info centered">
<h6>Steve Doe</h6>
<small>An experienced Web/UX Designer on a mission to use his God-given gifts in design to help others.<br/><br class="visible-lg visible-xs"/>He has worked with people in many different countries, and from many different industries. </small>
<ul class="team-social">
<li><a href="#0"><span class="icon-link2"></span></a></li>
<li><a href="#0"><span class="icon-linkedin2"></span></a></li>
<li><a href="#0"><span class="icon-twitter"></span></a></li>
</ul> <!--/ .team-social -->
</div> <!--/ .team-info -->
</div> <!--/ .team-item-content -->
</li> <!--/ .team-item -->
<li class="col-lg-4 col-md-4 col-sm-4 col-sm-offset-0 col-xs-6 col-xs-offset-3 team-item" data-type="support" data-id="id-6">
<div class="team-item-content">
<img src="images/team-photo/270x320.png" alt="Team Photo"/>
<div class="team-info centered">
<h6>Mike Doe</h6>
<small>An experienced Web/UX Designer on a mission to use his God-given gifts in design to help others.<br/><br class="visible-lg visible-xs"/>He has worked with people in many different countries, and from many different industries. </small>
<ul class="team-social">
<li><a href="#0"><span class="icon-link2"></span></a></li>
<li><a href="#0"><span class="icon-linkedin2"></span></a></li>
<li><a href="#0"><span class="icon-twitter"></span></a></li>
</ul> <!--/ .team-social -->
</div> <!--/ .team-info -->
</div> <!--/ .team-item-content -->
</li> <!--/ .team-item -->
</ul> <!--/ #team_grid -->
</div> <!--/ .row -->
</div> <!--/ .col-lg-9 -->
<!-- END Team Photos -->
</div>
<!--BEGIN The Team Wrapper -->
</div> <!--/ .row -->
</div> <!--/ .container -->
</section>
<!--
===========================
==/ END OUR TEAM SECTION ==
===========================
-->
<!--
==================================
== BEGIN CUSTOMER STORY SECTION ==
==================================
-->
<section id="customer-story" class="gray-bg centered">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 centered">
<p class="section-title">Customer Stories</p>
<h2 class="section-heading">See how person and companies gained success with us.</h2>
</div> <!--/ .col-lg-8 -->
<div class="clearfix"></div>
<!-- BEGIN Customer Logo and Testimonials -->
<div class="customer-box-wrapper centered margin-bot-35">
<ul class="customer-logos">
<!-- BEGIN 1st Logo -->
<li>
<div class="vertical-center-wrapper">
<div class="vertical-center-table">
<div class="vertical-center-content">
<img class="customer-logo" src="images/client/client.png" alt="Customer Logo" data-sr="scale up 30%" /> <!--/ .customer-logo -->
</div>
</div>
</div> <!--/ .vertical-center-wrapper -->
<div class="customer-quote">
<small>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</small>
<span class="customer-link all-caps"><a href="#0">Thomas Doe Jr.</a></span>
</div> <!--/ .customer-quote -->
</li>
<!--/ END 1st Logo -->
<!-- BEGIN 2nd Logo -->
<li class="center-customer-logo">
<div class="vertical-center-wrapper">
<div class="vertical-center-table">
<div class="vertical-center-content">
<img class="customer-logo" src="images/client/client.png" alt="Customer Logo" data-sr="scale up 30% wait .2s"/> <!--/ .customer-logo -->
</div>
</div>
</div> <!--/ .vertical-center-wrapper -->
<div class="customer-quote">
<small>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</small>
<span class="customer-link all-caps"><a href="#0">Thomas Doe Jr.</a></span>
</div> <!--/ .customer-quote -->
</li>
<!-- END 2nd Logo -->
<!-- BEGIN 3rd Logo -->
<li>
<div class="vertical-center-wrapper">
<div class="vertical-center-table">
<div class="vertical-center-content">
<img class="customer-logo" src="images/client/client.png" alt="Customer Logo" data-sr="scale up 30% wait .4s"/> <!--/ .customer-logo -->
</div>
</div>
</div> <!--/ .vertical-center-wrapper -->
<div class="customer-quote">
<small>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</small>
<span class="customer-link all-caps"><a href="#0">Thomas Doe Jr.</a></span>
</div> <!--/ .customer-quote -->
</li>
<!-- END 3rd Logo -->
</ul> <!--/ .customer-logos -->
<hr>
<ul class="customer-logos">
<!-- BEGIN 4th Logo -->
<li>
<div class="vertical-center-wrapper">
<div class="vertical-center-table">
<div class="vertical-center-content">
<img class="customer-logo" src="images/client/client.png" alt="Customer Logo" data-sr="scale up 30% wait .6s"/> <!--/ .customer-logo -->
</div>
</div>
</div> <!--/ .vertical-center-wrapper -->
<div class="customer-quote">
<small>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</small>
<span class="customer-link all-caps"><a href="#0">Thomas Doe Jr.</a></span>
</div> <!--/ .customer-quote -->
</li>
<!-- END 4th Logo -->
<!-- BEGIN 5th Logo -->
<li class="center-customer-logo">
<div class="vertical-center-wrapper">
<div class="vertical-center-table">
<div class="vertical-center-content">
<img class="customer-logo" src="images/client/client.png" alt="Customer Logo" data-sr="scale up 30% wait .8s"/> <!--/ .customer-logo -->
</div>
</div>
</div> <!--/ .vertical-center-wrapper -->
<div class="customer-quote">
<small>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</small>
<span class="customer-link all-caps"><a href="#0">Thomas Doe Jr.</a></span>
</div> <!--/ .customer-quote -->
</li>
<!-- END 5th Logo -->
<!-- BEGIN 6th Logo -->
<li>
<div class="vertical-center-wrapper">
<div class="vertical-center-table">
<div class="vertical-center-content">
<img class="customer-logo" src="images/client/client.png" alt="Customer Logo" data-sr="scale up 30% wait 1s"/> <!--/ .customer-logo -->
</div>
</div>
</div> <!--/ .vertical-center-wrapper -->
<div class="customer-quote">
<small>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</small>
<span class="customer-link all-caps"><a href="#0">Thomas Doe Jr.</a></span>
</div> <!--/ .customer-quote -->
</li>
<!-- END 6th Logo -->
</ul> <!--/ .customer-logos -->
</div> <!--/ .customer-box-wrapper -->
<!--/ END Customer Logo and Testimonials -->
<div class="clearfix"></div>
<a href="#0" class="cta cta-default all-caps">More Stories</a>
</div> <!--/ .row -->
</div> <!--/ .container -->
</section>
<!--
=================================
==/ END CUSTOMER STORY SECTION ==
=================================
-->
<!--
=============================
== BEGIN SUBSCRIBE SECTION ==
=============================
-->
<section id="subscribe-section" class="breaking" class="breaking" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="200">
<div class="color-overlay">
<div class="breaking-content">
<div class="container">
<div class="row">
<div class="col-lg-3 col-lg-offset-2 col-md-3 col-md-offset-2 col-sm-4 centered">
<img class="subscribe-icon" src="images/132x149.png" alt="Open Envelope Icon" data-sr="scale up 40% wait .2s"/>
</div> <!--/ .col-lg-3 -->
<div class="subscribe-section-content col-lg-5 col-md-5 col-sm-7">
<h4>Subscribe For Updates</h4>
<p>Join our 622,314 subscribers and get access to the latest tools, freebies, product announcements and much more!</p>
<form id="footer-subscribe" class="the-subscribe-form">
<div class="input-group">
<input type="email" class="form-control" placeholder="Enter Email Address">
<span class="input-group-btn">
<button class="btn btn-subscribe all-caps" type="submit">Subscribe</button>
</span>
</div> <!--/ .input-group -->
</form> <!--/ #footer-subscribe -->
</div> <!--/ .col-lg-5 -->
</div> <!--/ .row -->
</div> <!--/ .container -->
</div> <!--/ .breaking-content -->
</div><!--/ .color-overlay -->
</section>
<!--
============================
==/ END SUBSCRIBE SECTION ==
============================
-->
</main> <!--/ #main-content -->
<!--
=======================
==/ END MAIN CONTENT ==
=======================
-->
<!--
==========================
== BEGIN FOOTER CONTENT ==
==========================
-->
<footer id="main-footer">
<div class="container">
<div class="row">
<ul class="footer-nav all-caps">
<li><a href="#0">About</a></li>
<li><a href="#0">Privacy</a></li>
<li><a href="#0">Terms</a></li>
<li><a href="#0">Legal</a></li>
<li><a href="#0">Jobs</a></li>
<li><a href="#0">Contact</a></li>
</ul> <!--/ .footer-nav -->
<ul class="footer-social">
<li><a href="#0"><span class="icon-facebook-with-circle"></span></a></li>
<li><a href="#0"><span class="icon-twitter-with-circle"></span></a></li>
<li><a href="#0"><span class="icon-linkedin-with-circle"></span></a></li>
<li><a href="#0"><span class="icon-instagram-with-circle"></span></a></li>
<li><a href="#0"><span class="icon-google-with-circle"></span></a></li>
<li><a href="#0"><span class="icon-dribbble-with-circle"></span></a></li>
<li><a href="#0"><span class="icon-pinterest-with-circle"></span></a></li>
<li><a href="#0"><span class="icon-vimeo-with-circle"></span></a></li>
</ul> <!--/ .footer-social -->
<div class="copyright">
<p>Copyright 2015 Urip Landing Page - All rights reserved.</p>
<!-- BEGIN language popover -->
<div class="language">
<span class="icon-globe"></span>
<a tabindex="0"
role="button"
data-toggle="popover"
data-trigger="focus"
data-html="true"
data-placement="top"
data-content="
<ul class='language-selection'>
<li><a href='#'>Bahasa Indonesia</a></li>
<li><a href='#'>Dansk</a></li>
<li><a href='#'>Deutsch</a></li>
<li><a href='#'>Espanol</a></li>
<li><a href='#'>Francais</a></li>
<li><a href='#'>ภาษาไทย</a></li>
<li><a href='#'>日本語</a></li>
</ul>"
>English (US) <span class="icon-chevron-small-up"></span></a>
</div> <!--/ .language -->
<!-- END language popover -->
</div> <!--/ .copyright -->
</div> <!--/ .row -->
</div> <!--/ .container -->
</footer>
<!--
=========================
==/ END FOOTER CONTENT ==
=========================
-->
<!--
=========================
== BEGIN TO TOP BUTTON ==
=========================
-->
<a id="to-top"><span class="icon-chevron-thin-up"></span></a>
<!--
========================
==/ END TO TOP BUTTON ==
========================
-->
<!--
=================================
== BEGIN CONTACT MODAL CONTENT ==
=================================
-->
<div class="contact-overlay overlay-scale">
<a class="overlay-close">Close</a>
<div class="container">
<div class="row">
<div class="contact-content col-lg-10 col-lg-offset-1 centered">
<h2 class="all-caps"> Contact Us </h2>
<p>Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas mollis interdum!</p>
<!-- BEGIN Contact Form -->
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3">
<form class="contact-form" id="contact-form" method="post">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="required-field">
<input name="fname" id="fname" class="contact-input" type="text" placeholder="First Name">
</div> <!--/ .required-field -->
</div> <!--/ .col-lg-6 -->
<div class="col-lg-6 col-md-6">
<input name="lname" id="lname" class="contact-input" type="text" placeholder="Last Name">
</div> <!--/ .col-lg-6 -->
<div class="col-lg-12 col-md-12">
<div class="required-field">
<input name="email" id="email" class="contact-input" type="email" placeholder="Email Address">
</div> <!--/ .required-field -->
</div> <!--/ .col-lg-12 -->
<div class="col-lg-12 col-md-12">
<input name="subject" id="subject" class="contact-input" type="text" placeholder="Subject">
</div> <!--/ .col-lg-12 -->
<div class="col-lg-12 col-md-12">
<div class="required-field">
<textarea name="message" id="message" rows="9" placeholder="Message"></textarea>
</div> <!--/ .required-field -->
</div> <!--/ .col-lg-12 -->
<div class="col-lg-12 col-md-12 all-caps centered">
<button id="submit" type="submit" class="submit-btn">Submit</button>
</div> <!--/ .col-lg-12 -->
</div>
</form> <!--/ .contact-form -->
</div> <!--/ .col-lg-6 -->
<!--/ END Contact Form -->
</div> <!--/ .contact-content -->
</div> <!--/ .row -->
</div> <!--/ .container -->
</div> <!--/ .contact-overlay -->
<!--
================================
==/ END CONTACT MODAL CONTENT ==
================================
-->
<!--
======================================
== BEGIN FORM NOTIFICATIONS CONTENT ==
======================================
-->
<!-- BEGIN Subscribe Form Alert/Notification -->
<div id="subscribe-error-notification" class="notif-box">
<span class="icon-bullhorn notif-icon"></span>
<p>Subscribe error, please review your email address.</p>
<a class="notification-close"><span class="icon-cross2"></span></a>
</div> <!--/ #error-notification -->
<div id="subscribe-success-notification" class="notif-box">
<span class="icon-checkmark notif-icon"></span>
<p>You're now subscribed, thank you!</p>
<a class="notification-close"><span class="icon-cross2"></span></a>
</div> <!--/ #success-notification -->
<!-- END Subscribe Form Alert/Notifications -->
<!-- BEGIN Contact Form Alert/Notifications -->
<div id="error-notification" class="notif-box">
<span class="icon-bullhorn notif-icon"></span>
<p>There was a problem with your submission. Please check the field(s) with red label below.</p>
<a class="notification-close"><span class="icon-cross2"></span></a>
</div> <!--/ #error-notification -->
<div id="success-notification" class="notif-box">
<span class="icon-checkmark notif-icon"></span>
<p>Your message has been sent. We'll get back to you soon!</p>
<a class="notification-close"><span class="icon-cross2"></span></a>
</div> <!--/ #success-notification -->
<!-- END Contact Form Alert/Notifications -->
<!-- BEGIN Hero Form Alert/Notifications -->
<div id="hero-error-notification" class="notif-box">
<span class="icon-bullhorn notif-icon"></span>
<p>There was a problem with your submission. Please check the field(s) with red label below.</p>
<a class="notification-close"><span class="icon-cross2"></span></a>
</div> <!--/ #error-notification -->
<div id="hero-success-notification" class="notif-box">
<span class="icon-checkmark notif-icon"></span>
<p>Your account details has been submitted. Please check your email for verification.</p>
<a class="notification-close"><span class="icon-cross2"></span></a>
</div> <!--/ #success-notification -->
<!-- END Hero Form Alert/Notifications -->
<!--
=====================================
==/ END FORM NOTIFICATIONS CONTENT ==
=====================================
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- SmoothScroll -->
<script src="js/minified/SmoothScroll.min.js"></script>
<!-- Classie -->
<script src="js/minified/classie.min.js"></script>
<!-- One Page Nav -->
<script src="js/minified/jquery.nav.min.js"></script>
<!-- AjaxChimp -->
<script src="js/minified/jquery.ajaxchimp.min.js"></script>
<!-- Swipebox -->
<script src="js/minified/jquery.swipebox.min.js"></script>
<!-- Expandable Gallery on 2 Block Column -->
<script src="js/minified/expandableGallery.min.js"></script>
<!-- Counter Up -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="js/minified/jquery.counterup.min.js"></script>
<!-- Quicksand JS -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/minified/jquery-css-transform.min.js"></script>
<script src="js/minified/jquery-animate-css-rotate-scale.min.js"></script>
<script src="js/minified/jquery.quicksand.min.js"></script>
<!-- Headhesive -->
<script src="js/minified/headhesive.min.js"></script>
<!-- ScrollReveal -->
<script src="js/minified/scrollReveal.min.js"></script>
<!-- Stellar JS -->
<script src="js/jquery.stellar.js"></script>
<!-- Custom JS -->
<script src="js/urip-v2.js"></script>
<!-- Expandable Navigation Menu -->
<script src="js/minified/expandableNav.min.js"></script>
</body>
</html>