File: //home/awaldron/_domains/cmt.alanwaldron.com/base-template.html
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Commet - Community Engagement Platform</title>
<!-- Icon -->
<link rel="shortcut icon" href="images/logo-sm.png" type="image/x-icon">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Owl Carousel -->
<link href="css/owl.carousel.css" rel="stylesheet">
<!-- Owl Carousel Theme-->
<link href="css/owl.theme.default.css" rel="stylesheet">
<!-- Animations -->
<link href="css/animations.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Animate -->
<link href="css/animate.css" rel="stylesheet">
<!-- Lity -->
<link href="css/lity.css" rel="stylesheet">
<!-- Style -->
<link href="css/style.css" rel="stylesheet">
<!-- Media Queries -->
<link href="css/media-queries.css" rel="stylesheet">
<!-- Change color here -->
<link href="css/color/red-2.css" rel="stylesheet">
</head>
<body id="top">
<!-- Preloader -->
<div class="preloader">
<div class="waves">
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle"><img src="images/logo-sm.png" alt="App ollo"></div>
</div>
</div>
<!-- Preloader end-->
<!-- Navigation panel-->
<nav id="navigation" class="navbar no-scrolled">
<div class="container">
<div class="navbar-header">
<!-- Burger menu button -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="burger-menu">
<span class="burger"></span>
</span>
</button>
<!-- Burger menu button end-->
<!-- Header logo -->
<a class="navbar-brand" href="index.php">
<img src="images/commet-logo-w.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<!-- Navigation links -->
<li class="active"><a href="#top">Home</a></li>
<li><a href="#start">About</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#screenshots">Screenshots</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="blog.html">Blog</a></li>
<!-- Navigation links end-->
</ul>
</div>
</div>
</nav>
<!-- Navigation panel end-->
<!-- Header -->
<header id="header-1">
<div class="header-masc">
<!-- Background animation -->
<div class="space-header">
<div class="stars"></div>
</div>
<!-- Background animation end-->
<!-- Social icons -->
<!--
<div class="social-icons">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a></li>
</ul>
</div>
-->
<!-- Social icons end -->
<!-- Background animation end -->
<div class="container header-container">
<div class="row">
<div class="col-md-8 col-sm-12 main-title wow fadeInUp" data-wow-duration="1.9s">
<div>
<!-- Main header title -->
<h1 class="white">Explore the world with <b>communities</b> of people like you</h1>
<!-- Main header suptitle -->
<!-- <h3 class="white"><i>It`s very <span data-typer-targets="simple,easy,fun!"></span></i></h3> -->
<br>
<!-- Appstore button -->
<a href="#" class="btn dwnld-btn appstore"><i class="fa fa-apple" aria-hidden="true"></i> App Store</a>
<!-- Playmarket button -->
<a href="#" class="btn dwnld-btn playmarket"><i class="fa fa-android" aria-hidden="true"></i> Google Play</a>
</div>
</div>
<div class="col-md-4 col-sm-0 header-phone">
<div class="illustration">
<!-- Phone -->
<div class="front-phone wow fadeInUp" data-wow-duration="1.7s">
<div class="iphone-x single-phone">
<i></i>
<b></b>
<div class="header-slider">
<div class="slide">
<!-- Screenshon 1 -->
<img src="images/screenshot(1)375x812.jpg" alt="Screenshot">
</div>
<div class="slide">
<!-- Screenshon 2 -->
<img src="images/screenshot(2)375x812.jpg" alt="Screenshot">
</div>
<div class="slide">
<!-- Screenshon 3 -->
<img src="images/screenshot(3)375x812.jpg" alt="Screenshot">
</div>
<div class="slide">
<!-- Screenshon 4 -->
<img src="images/screenshot(4)375x812.jpg" alt="Screenshot">
</div>
<div class="slide">
<!-- Screenshon 5 -->
<img src="images/screenshot(5)375x812.jpg" alt="Screenshot">
</div>
<div class="slide">
<!-- Screenshon 6 -->
<img src="images/screenshot(6)375x812.jpg" alt="Screenshot">
</div>
</div>
</div>
</div>
<!-- Phone end -->
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header end -->
<!-- Start section -->
<section id="start">
<div class="padding-masc">
<div class="container text-center">
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="icon-place theme-background">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<h4>Easy to use</h4>
<p class="mb30">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dicta earum error incidunt laborum quibusdam?</p>
</div>
<div class="col-sm-12 col-md-4">
<div class="icon-place theme-background">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<h4>Awesome design</h4>
<p class="mb30">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dicta earum error incidunt laborum quibusdam?</p>
</div>
<div class="col-sm-12 col-md-4">
<div class="icon-place theme-background">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<h4>100% Responsive</h4>
<p class="mb30">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dicta earum error incidunt laborum quibusdam?</p>
</div>
</div>
</div>
</div>
</section>
<!-- Start section end -->
<!-- About section -->
<section id="about">
<div class="padding-masc">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-push-6 about-text">
<div>
<!-- Title -->
<h3><b>About</b> App ollo</h3>
<!-- Description -->
<h4 class="mb30"><i class="color">Lorem ipsum dolor sit.</i></h4>
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem nesciunt et, excepturi quia ab, eius perferendis praesentium quibusdam eligendi. Maxime autem distinctio. Assumenda amet molestiae voluptatum nostrum iusto consequatur cumque minima corrupti similique dicta.</p>
<br>
<p>Autem provident, numquam cumque fugit nemo quidem, quas quia illum excepturi repellendus consequuntur nobis! Illo totam nostrum qui voluptatum quisquam.</p>
<br>
<ul class="text-list">
<li><i class="fa fa-check"></i> Quibusdam eligendi</li>
<li><i class="fa fa-check"></i> Adipisicing elit</li>
<li><i class="fa fa-check"></i>Maxime autem</li>
</ul>
<br>
<p>Rerum nostrum iusto magni facere esse!</p>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-pull-6 text-center">
<div class="illustration">
<!-- Front phone -->
<div class="back-phone wow slideInUp" data-wow-duration="1.3s" data-wow-delay=".2s">
<div class="iphone-x">
<i></i>
<b></b>
<!-- Screenshot -->
<img src="images/screenshot(2)375x812.jpg" alt="Screenshot">
</div>
</div>
<!-- Front phone end -->
<!-- Back phone -->
<div class="front-phone wow slideInUp" data-wow-duration="1.2s">
<div class="iphone-x">
<i></i>
<b></b>
<!-- Screenshot -->
<img src="images/screenshot(1)375x812.jpg" alt="Screenshot">
</div>
</div>
<!-- Back phone end -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About section end-->
<!-- Video section -->
<section id="video">
<div class="masc">
<!-- Background animation -->
<div class="space">
<div class="stars"></div>
</div>
<!-- Background animation end -->
<div class="container">
<div class="row">
<div class="col-md-6 video-text">
<div>
<!-- Title -->
<h3 class="white">Watch <b>Video</b> Presentation</h3>
<!-- Description -->
<h4><i>Lorem ipsum dolor sit.</i></h4>
</div>
</div>
<div class="col-md-6 text-center video-button">
<div class="waves">
<div class="circle-1"></div>
<div class="circle-2"></div>
<a href="//www.youtube.com/watch?v=J7UwSVsiwzI" data-lity>
<div class="circle wow bounceIn" data-toggle="modal" data-target="#myModal"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Video section end -->
<!-- Features section -->
<section id="features">
<div class="padding-masc">
<div class="container">
<div class="col-lg-12 text-center">
<!-- Title -->
<h3>How it <b>Work</b>?</h3>
<!-- Description -->
<h4 class="mb30"><i class="color">Lorem ipsum dolor sit.</i></h4>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-sm-6 text-right-adaptive">
<ul>
<li>
<div class="future">
<!-- Change the .fa-circle to change the icon -->
<h4>
<!-- for mobile --><i class="fa fa-circle hiden right" aria-hidden="true"></i> Easy to edit
<!-- for desctop --><i class="fa fa-circle left" aria-hidden="true"></i></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
</li>
<li>
<div class="future">
<h4>
<!-- for mobile --><i class="fa fa-circle hiden right" aria-hidden="true"></i> Pixel perfect
<!-- for desctop --><i class="fa fa-circle left" aria-hidden="true"></i></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
</li>
<li>
<div class="future">
<h4>
<!-- for mobile --><i class="fa fa-circle hiden right" aria-hidden="true"></i> Friendly support
<!-- for desctop --><i class="fa fa-circle left" aria-hidden="true"></i></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
</li>
</ul>
</div>
<div class="col-md-4 col-sm-4 text-center advantages-phone">
<div class="illustration">
<!-- Phone -->
<div class="front-phone wow fadeInUp" data-wow-duration="1.2s">
<div class="iphone-x single-phone">
<i>Speaker</i>
<b>Camera</b>
<!-- Screenshot -->
<img src="images/screenshot(3)375x812.jpg" alt="Screenshot">
</div>
</div>
<!-- Phone end -->
</div>
</div>
<div class="col-md-4 col-sm-6 col-sm-6 text-left">
<ul>
<li>
<div class="future">
<h4><i class="fa fa-circle right" aria-hidden="true"></i> Responsive design</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
</li>
<li>
<div class="future">
<h4><i class="fa fa-circle right" aria-hidden="true"></i> Well-documented</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
</li>
<li>
<div class="future">
<h4><i class="fa fa-circle right" aria-hidden="true"></i> Clean code</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Features section end -->
<!-- Screenshons section -->
<section id="screenshots">
<div class="padding-masc">
<!--Title-->
<h3>App <b>Screenshots</b></h3>
<!-- Description -->
<h4><i class="color">Lorem ipsum dolor sit.</i></h4>
<div class="screenshots-slider">
<div class="slide wow fadeInUp" data-wow-duration="1s">
<a href="images/screenshot(1)375x812.jpg" data-lity data-lity-desc="Screenshot 1"><img src="images/screenshot(1)375x812.jpg" alt="Screenshot"></a>
</div>
<div class="slide wow fadeInUp" data-wow-duration="1.5s">
<a href="images/screenshot(2)375x812.jpg" data-lity data-lity-desc="Screenshot 2"><img src="images/screenshot(2)375x812.jpg" alt="Screenshot"></a>
</div>
<div class="slide wow fadeInUp" data-wow-duration="1.5s">
<a href="images/screenshot(3)375x812.jpg" data-lity data-lity-desc="Screenshot 3"><img src="images/screenshot(3)375x812.jpg" alt="Screenshot"></a>
</div>
<div class="slide wow fadeInUp" data-wow-duration="1.5s">
<a href="images/screenshot(4)375x812.jpg" data-lity data-lity-desc="Screenshot 4"><img src="images/screenshot(4)375x812.jpg" alt="Screenshot"></a>
</div>
<div class="slide wow fadeInUp" data-wow-duration="1.5s">
<a href="images/screenshot(5)375x812.jpg" data-lity data-lity-desc="Screenshot 5"><img src="images/screenshot(5)375x812.jpg" alt="Screenshot"></a>
</div>
<div class="slide wow fadeInUp" data-wow-duration="1.5s">
<a href="images/screenshot(6)375x812.jpg" data-lity data-lity-desc="Screenshot 6"><img src="images/screenshot(6)375x812.jpg" alt="Screenshot"></a>
</div>
</div>
</div>
</section>
<!-- Screenshons section end-->
<!-- Download section -->
<section id="download">
<div class="masc">
<!-- Background animation -->
<div class="space">
<div class="stars"></div>
</div>
<!-- Background animation end -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 download-text">
<div>
<!--Title-->
<p class="h1 white">Download<br><b>App ollo</b>Today!</p>
<!-- Description -->
<h3 class="white"><i>It`s very simple!</i></h3>
<br>
<!-- Appstore button -->
<a href="#" class="btn dwnld-btn appstore"><i class="fa fa-circle" aria-hidden="true"></i> Download</a>
<!-- Playmarket button -->
<a href="#" class="btn dwnld-btn playmarket"><i class="fa fa-circle" aria-hidden="true"></i> Download</a>
</div>
</div>
<div class="col-xs-12 col-md-6 text-center">
<div class="illustration">
<!-- Back phone -->
<div class="back-phone wow slideInUp" data-wow-duration="1.3s" data-wow-delay=".2s">
<div class="iphone-x">
<i></i>
<b></b>
<!-- Screenshot -->
<img src="images/screenshot(5)375x812.jpg" alt="Screenshot">
</div>
</div>
<!-- Back phone end -->
<!-- Front phone -->
<div class="front-phone wow slideInUp" data-wow-duration="1.2s">
<div class="iphone-x">
<i></i>
<b></b>
<!-- Screenshot -->
<img src="images/screenshot(4)375x812.jpg" alt="Screenshot">
</div>
</div>
<!-- Front phone end -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Download section end-->
<!-- Reviews section -->
<section id="reviews">
<div class="padding-masc">
<!--Title-->
<h3><b>Reviews</b> About Us</h3>
<!-- Description -->
<h4><i class="color">Lorem ipsum dolor sit.</i></h4>
<div class="reviews-slider">
<!-- Review 1 -->
<div class="slide wow fadeInUp" data-wow-duration="1s">
<div class="avatar" style="background-image: url(images/team1.400x400.jpeg);"></div>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star empty" aria-hidden="true"></i>
<!-- Empty star -->
<!-- Name -->
<h4 class="mt15">Oliver Stone</h4>
<!-- Text -->
<p>Lorem ipsum dolor sit amet, vitae officiis rem incidunt obcaecati sequi. Soluta, vitae, reiciendis.</p>
</div>
<!-- Review 2 -->
<div class="slide wow fadeInUp" data-wow-duration="1.5s">
<div class="avatar" style="background-image: url(images/team2.400x400.jpeg);"></div>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<!-- Name -->
<h4 class="mt15">Oliver Stone</h4>
<!-- Text -->
<p>Lorem ipsum dolor sit amet, vitae officiis rem incidunt obcaecati sequi. Soluta, vitae, reiciendis.</p>
</div>
<!-- Review 3 -->
<div class="slide wow fadeInUp" data-wow-duration="1.5s">
<div class="avatar" style="background-image: url(images/team3.400x400.jpeg);"></div>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star empty" aria-hidden="true"></i>
<!-- Empty star -->
<i class="fa fa-star empty" aria-hidden="true"></i>
<!-- Empty star -->
<!-- Name -->
<h4 class="mt15">Oliver Stone</h4>
<!-- Text -->
<p>Lorem ipsum dolor sit amet, vitae officiis rem incidunt obcaecati sequi. Soluta, vitae, reiciendis.</p>
</div>
<!-- Review 4 -->
<div class="slide wow fadeInUp" data-wow-duration="1.5s">
<div class="avatar" style="background-image: url(images/team4.400x400.jpeg);"></div>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star empty" aria-hidden="true"></i>
<!-- Empty star -->
<!-- Name -->
<h4 class="mt15">Oliver Stone</h4>
<!-- Text -->
<p>Lorem ipsum dolor sit amet, vitae officiis rem incidunt obcaecati sequi. Soluta, vitae, reiciendis.</p>
</div>
</div>
</div>
</section>
<!-- Reviews section end -->
<!-- Team section -->
<section id="team">
<div class="padding-masc">
<div class="container text-center">
<!--Title-->
<h3>Our <b>Team</b></h3>
<!-- Description -->
<h4 class="mb50"><i class="color">Lorem ipsum dolor sit.</i></h4>
<div class="row">
<!-- Team member 1 -->
<div class="col-xs-12 col-sm-6 col-md-3 wow fadeInUp team-main" data-wow-duration="1.3s">
<div class="team-item">
<img src="images/team1.400x400.jpeg" alt="Team member">
<span>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
</span>
</div>
<div class="name mb30">
<!-- Name -->
<h4>Nazar <br class="hiden">Sadman</h4>
<!-- Position -->
<p>UI/UX Designer</p>
</div>
</div>
<!-- Team member 1 end -->
<!-- Team member 2 -->
<div class="col-xs-12 col-sm-6 col-md-3 wow fadeInUp team-main" data-wow-duration="1s">
<div class="team-item">
<img src="images/team2.400x400.jpeg" alt="Team member">
<span>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
</span>
</div>
<div class="name mb30">
<!-- Name -->
<h4>Oscar <br class="hiden">Oldman</h4>
<!-- Position -->
<p>Creative Director</p>
</div>
</div>
<!-- Team member 2 end -->
<!-- Team member 3 -->
<div class="col-xs-12 col-sm-6 col-md-3 wow fadeInUp team-main" data-wow-duration="1s">
<div class="team-item">
<img src="images/team3.400x400.jpeg" alt="Team member">
<span>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
</span>
</div>
<div class="name mb30">
<!-- Name -->
<h4>Sarah <br class="hiden">Goodman</h4>
<!-- Position -->
<p>Product Designer</p>
</div>
</div>
<!-- Team member 3 end -->
<!-- Team member 4 -->
<div class="col-xs-12 col-sm-6 col-md-3 wow fadeInUp team-main" data-wow-duration="1.3s">
<div class="team-item">
<img src="images/team4.400x400.jpeg" alt="Team member">
<span>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
</span>
</div>
<div class="name mb30">
<!-- Name -->
<h4>John <br class="hiden">Newman</h4>
<!-- Position -->
<p>Programer</p>
</div>
</div>
<!-- Team member 4 end -->
</div>
</div>
</div>
</section>
<!-- Team section end -->
<!-- Stats section -->
<section id="stats">
<div class="masc">
<!-- Background animation -->
<div class="space">
<div class="stars"></div>
</div>
<!-- Background animation end-->
<div class="container">
<div class="stat">
<!-- item 1 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter wow fadeIn" data-wow-duration="1.3s">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="counter">300 </span><span class="thousand">k</span>
<h4 class="white mb30">Downloads</h4>
</div>
</div>
<!-- item 2 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter wow fadeIn" data-wow-duration="1.3s" data-wow-delay=".2s">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="counter">250 </span><span class="thousand">k</span>
<h4 class="white mb30">Happy Users</h4>
</div>
</div>
<!-- item 3 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter wow fadeIn" data-wow-duration="1.3s" data-wow-delay=".4s">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="counter">220 </span><span class="thousand">k</span>
<h4 class="white mb30">Premium Users</h4>
</div>
</div>
<!-- item 4 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter wow fadeIn" data-wow-duration="1.3s" data-wow-delay=".6s">
<i class="fa fa-circle" aria-hidden="true"></i>
<span class="counter">443</span>
<h4 class="white mb30">honors & awards</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats section end -->
<!-- Price section -->
<section id="price">
<div class="padding-masc">
<div class="container">
<!--Title-->
<h3>Choose Your <b>Plan</b></h3>
<!-- Description -->
<h4 class="mb60"><i class="color">Lorem ipsum dolor sit.</i></h4>
<div class="row">
<!-- Plan 1 -->
<div class="plan col-md-4 wow fadeInUp" data-wow-duration="1.5s">
<ul>
<li class="plan-title">
<h3>Bundle 1</h3>
</li>
<li class="plan-price">$1500</li>
<li>
<ul class="options">
<li>1x <span>Installation</span></li>
<li>Odoo <span>Documentation</span></li>
<li>Unlimited <span>option 3</span></li>
<li>Unlimited <span>option 4</span></li>
<li>1x <span>option 5</span></li>
</ul>
</li>
<li class="btn price-button"><a href="#" class="btn button order"><i class="fa fa-check"></i> Order Now</a></li>
</ul>
</div>
<!-- Plan 2 <Optimal> -->
<div class="plan col-md-4 wow fadeInUp" data-wow-duration="1s">
<ul class="center-plan">
<li class="plan-title">
<div class="optimal"><i class="fa fa-check"></i>
<p>Optimal plan</p>
</div>
<h3>Bundle 2</h3>
</li>
<li class="plan-price color">$1500</li>
<li>
<ul class="options">
<li>2x <span>option 1</span></li>
<li>Free <span>option 2</span></li>
<li>Unlimited <span>option 3</span></li>
<li>Unlimited <span>option 4</span></li>
<li>2x <span>option 5</span></li>
</ul>
</li>
<li class="btn price-button"><a href="#" class="btn button order color"><i class="fa fa-check"></i> Order Now</a></li>
</ul>
</div>
<!-- Plan 3 -->
<div class="plan col-md-4 wow fadeInUp" data-wow-duration="1.5s">
<ul>
<li class="plan-title">
<h3>Bundle 3</h3>
</li>
<li class="plan-price">$1500</li>
<li>
<ul class="options">
<li>2x <span>option 1</span></li>
<li>Free <span>option 2</span></li>
<li>Unlimited <span>option 3</span></li>
<li>Unlimited <span>option 4</span></li>
<li>3x <span>option 5</span></li>
</ul>
</li>
<li class="btn price-button"><a href="#" class="btn button order"><i class="fa fa-check"></i> Order Now</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Price section end -->
<!-- FAQ section -->
<section id="faq">
<div class="padding-masc">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-push-6 faq-text">
<div>
<!-- Title -->
<h3>Frequently Asked <b>Questions</b></h3>
<!-- Description -->
<h4 class="mb50"><i class="color">Lorem ipsum dolor sit.</i></h4>
<div class="panel-group" id="accordion">
<!-- Question 1 -->
<div class="panel panel-default text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<div class="panel-heading">
<!-- Question -->
<h4 class="panel-title">Sedeiusmod tempor inccsetetur aliquatraiy? <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4>
</div>
</a>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<!-- Answer -->
<p class="default-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodas temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrd exercitation ullamco laboris nisi ut aliquip ex comodo consequat. Duis aute dolor in reprehenderit.</p>
</div>
</div>
</div>
<!-- Question 1 end -->
<!-- Question 2 -->
<div class="panel panel-default text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<div class="panel-heading">
<!-- Question -->
<h4 class="panel-title">Tempor inccsetetur aliquatraiy? <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4>
</div>
</a>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<!-- Answer -->
<p class="default-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- Question 2 end -->
<!-- Question 3 -->
<div class="panel panel-default text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
<div class="panel-heading">
<!-- Question -->
<h4 class="panel-title">Lorem ipsum dolor amet, consectetur adipisicing ? <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4>
</div>
</a>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<!-- Answer -->
<p class="default-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- Question 3 end -->
<!-- Question 4 -->
<div class="panel panel-default text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
<div class="panel-heading">
<!-- Question -->
<h4 class="panel-title">Lorem ipsum dolor amet, consectetur adipisicing ? <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4>
</div>
</a>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<!-- Answer -->
<p class="default-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!-- Question 4 end -->
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-pull-6 text-center">
<div class="illustration">
<!-- Back phone -->
<div class="back-phone wow slideInUp" data-wow-duration="1.3s" data-wow-delay=".2s">
<div class="iphone-x">
<i></i>
<b></b>
<!-- screenshot -->
<img src="images/screenshot(6)375x812.jpg" alt="Screenshot">
</div>
</div>
<!-- Back phone end -->
<!-- Front phone -->
<div class="front-phone wow slideInUp" data-wow-duration="1.2s">
<div class="iphone-x">
<i></i>
<b></b>
<!-- screenshot -->
<img src="images/screenshot(5)375x812.jpg" alt="Screenshot">
</div>
</div>
<!-- Front phone end -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ section end-->
<!-- Latest posts section -->
<section id="blog">
<div class="padding-masc">
<div class="container text-center">
<!-- Title -->
<h3>Latest <b>Blog</b> Posts</h3>
<!-- Description -->
<h4 class="mb50"><i class="color">Lorem ipsum dolor sit.</i></h4>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 wow fadeInUp" data-wow-duration="1.3s">
<!-- Blog post 1 -->
<a href="blog.html" target="_blank" class="blog-post-link">
<div class="blog-item">
<div class="category">category</div>
<img src="images/background-img.jpg" alt="Post image">
<span>
<i class="fa fa-link" aria-hidden="true"></i>
</span>
</div>
<div class="post-text">
<h4>Perfect Showcase for Your Application</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dicta earum error incidunt laborum quibusdam...</p>
<p class="date"><i class="fa fa-calendar" aria-hidden="true"></i> 24.12.17 <i class="fa fa-clock-o" aria-hidden="true"></i> 17:17</p>
<p class="interactive"><i class="fa fa-heart-o" aria-hidden="true"></i> 45 <i class="fa fa-comment-o" aria-hidden="true"></i> 14</p>
</div>
</a>
<!-- Blog post 1 end-->
</div>
<div class="col-xs-12 col-sm-6 col-md-4 wow fadeInUp" data-wow-duration="1s">
<!-- Blog post 2 -->
<a href="blog.html" target="_blank" class="blog-post-link">
<div class="blog-item">
<div class="category">category</div>
<img src="images/background-img.jpg" alt="Post image">
<span>
<i class="fa fa-link" aria-hidden="true"></i>
</span>
</div>
<div class="post-text">
<h4>Blog Post Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dicta earum error incidunt laborum quibusdam...</p>
<p class="date"><i class="fa fa-calendar" aria-hidden="true"></i> 24.12.17 <i class="fa fa-clock-o" aria-hidden="true"></i> 17:17</p>
<p class="interactive"><i class="fa fa-heart-o" aria-hidden="true"></i> 45 <i class="fa fa-comment-o" aria-hidden="true"></i> 14</p>
</div>
</a>
<!-- Blog post 2 end -->
</div>
<div class="col-xs-12 col-sm-6 col-md-4 wow fadeInUp" data-wow-duration="1.3s">
<!-- Blog post 3 -->
<a href="blog.html" target="_blank" class="blog-post-link">
<div class="blog-item">
<div class="category">category</div>
<img src="images/background-img.jpg" alt="Post image">
<span>
<i class="fa fa-link" aria-hidden="true"></i>
</span>
</div>
<div class="post-text">
<h4>App ollo is Awesome</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dicta earum error incidunt laborum quibusdam...</p>
<p class="date"><i class="fa fa-calendar" aria-hidden="true"></i> 24.12.17 <i class="fa fa-clock-o" aria-hidden="true"></i> 17:17</p>
<p class="interactive"><i class="fa fa-heart-o" aria-hidden="true"></i> 45 <i class="fa fa-comment-o" aria-hidden="true"></i> 14</p>
</div>
</a>
<!-- Blog post 3 end -->
</div>
</div>
</div>
<!-- Subscribe -->
<div class="container subscribe">
<div class="row">
<div class="col-md-5 subscribe-text">
<div>
<!--Title-->
<h3><b>Subscribe</b> Our Blog!</h3>
</div>
</div>
<div class="col-md-7 subscribe-input">
<!-- Subscribe form -->
<div class="input-group">
<!-- Email input -->
<input type="email" name="email" class="form-control" placeholder="Email" required>
<span class="input-group-btn"><button class="btn" type="button"><i class="fa fa-paper-plane" aria-hidden="true"></i></button></span>
</div>
<!-- Subscribe form end -->
</div>
</div>
</div>
<!-- Subscribe end -->
</div>
</section>
<!-- Latest posts section end -->
<!-- Footer section -->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-md-4 footer-logo">
<!-- Footer logo -->
<a class="footer-brand" href="#">
<p><img src="images/logo-md.png" alt="App ollo"> App ollo</p>
</a>
</div>
<div class="col-md-4 footer-social">
<!-- Footer social icons -->
<div>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="col-md-4 copyright">
<!-- Footer copyright -->
<p>Copyright © early 2018 App ollo all right reserved.</p>
</div>
</div>
</div>
</footer>
<!-- Footer section end-->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Owl Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- Wow -->
<script src="js/wow.min.js"></script>
<!-- Lity -->
<script src="js/lity.min.js"></script>
<!-- Smooth Scroll -->
<script src="js/smooth-scroll.min.js"></script>
<!-- Waypoints -->
<script src="js/waypoints.min.js"></script>
<!-- Counter up -->
<script src="js/counterup.min.js"></script>
<!-- Typed -->
<script src="js/typer.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html>