Applic
App Landing and Saas Template V-1.0
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Basic HTML File Structure
All the HTML file is similarly coded, please follow the sttucture below.
<!doctype html>
<html class="no-js" lang="zxx">
<head>
<!--====== USEFULL META ======-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="App Landing Business Template" />
<meta name="keywords" content="Landing, Business, Onepage, Html, Business, Apps, Apps Landing" />
<!--====== TITLE TAG ======-->
<title>Applic - App Landing and Saas Template</title>
<!--====== FAVICON ICON =======-->
<link rel="shortcut icon" type="image/ico" href="assets/img/favicon.png" />
<!--====== STYLESHEETS ======-->
<link href="assets/css/plugins.css" rel="stylesheet">
<link href="assets/css/icons.css" rel="stylesheet">
<link href="assets/css/typography.css" rel="stylesheet">
<link href="assets/css/header.css" rel="stylesheet">
<link href="assets/css/blog-and-pages.css" rel="stylesheet">
<link href="assets/css/footer.css" rel="stylesheet">
<!--====== MAIN STYLESHEETS ======-->
<link href="style.css" rel="stylesheet">
<link href="assets/css/responsive.css" rel="stylesheet">
<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="overflow-xhidden" data-spy="scroll" data-target=".mainmenu-area" data-offset="90">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--- PRELOADER -->
<div class="preeloader">
<div class="preloader-spinner"></div>
</div>
<!--SCROLL TO TOP-->
<a href="#scroolup" class="scrolltotop"><i class="fa fa-long-arrow-up"></i></a>
<!--START TOP AREA-->
<header class="top-area" id="home">
<div class="header-top-area" id="scroolup">
<!--MAINMENU AREA-->
<div class="mainmenu-area" id="mainmenu-area">
<div class="mainmenu-area-bg"></div>
<nav class="navbar">
<div class="container">
<div class="row">
<div class="col-md-12 flex-v-center">
<div class="navbar-header">
<a href="index.html" class="custom-logo-link default-logo"><img src="assets/img/logo.png" alt="logo"></a>
<a href="index.html" class="custom-logo-link sticky-logo"><img src="assets/img/sticky_logo.png" alt="logo"></a>
</div>
<svg class="ham hamRotate ham8" viewBox="0 0 100 100" width="50">
<path class="line top" d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20" />
<path class="line middle" d="m 30,50 h 40" />
<path class="line bottom" d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20" />
</svg>
<div id="main-nav" class="stellarnav">
<ul id="nav" class="nav navbar-nav pull-right">
<li class="active"><a href="index.html">Home</a>
<ul>
<li class="active"><a href="index.html">Home V1</a></li>
<li><a href="index-2.html">Home V2</a></li>
<li><a href="index-3.html">Home V3</a></li>
<li><a href="index-4.html">Home V4</a></li>
</ul>
</li>
<li><a href="#features">Features</a></li>
<li><a href="#screenshots">Screenshots</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#">Pages</a>
<ul>
<li><a href="blog.html">Blog Page</a></li>
<li><a href="single-blog.html">Single Blog Page</a></li>
<li><a href="shop.html">Shop Page</a></li>
<li><a href="single-shop.html">Single Shop Page</a></li>
</ul>
</li>
</ul>
</div>
<div class="header-call-to-action hidden-sm hidden-xs hidden-md">
<a href="#" class="action-button">Sign Up</a>
<button class="search-button"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div>
</nav>
</div>
<!--END MAINMENU AREA END-->
</div>
<!--WELCOME TEXT AREA-->
<div class="welcome-text-area font16 white">
<div class="area-bg"></div>
<div class="welcome-area section-padding">
<div class="container">
<div class="row flex-v-center">
<div class="col-md-7 col-lg-7 col-sm-12 col-xs-12">
<div class="welcome-text">
<h4 class="wow fadeInUp" data-wow-delay="0.3s">Best app landing </h4>
<h1 class="wow fadeInUp" data-wow-delay="0.6s">Passing Your Apps Life<span>With Our Applic</span></h1>
<p class="wow fadeInUp" data-wow-delay="0.9s">Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation.</p>
<div class="home-button mt40 xs-mt40 wow fadeInUp" data-wow-delay="1.2s">
<a class="xs-mb20" href="#">download</a>
<a href="#">get started <i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="welcome-layer-1 hidden-sm hidden-xs">
<div class="home1-layer-1 wow fadeInRight" data-wow-delay="0.5s">
<img src="assets/img/screenshots/screenshot-1.png" alt="">
</div>
<div class="home1-layer-2 wow fadeInUp" data-wow-delay="1s">
<img src="assets/img/screenshots/screenshot-2.png" alt="">
</div>
<div class="home1-layer-3 wow fadeInRight" data-wow-delay="1.5s">
<img src="assets/img/screenshots/screenshot-3.png" alt="">
</div>
</div>
</div>
</div>
<!--WELCOME TEXT AREA END-->
</header>
<!--END TOP AREA-->
<!--FEATURES AREA-->
<section class="features-area section-padding fix" id="features">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
<div class="area-title sm-center xs-center">
<h4 class="subtitle">App Features</h4>
<h2>Powerful Set of Products & Features</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="features-slider">
<div class="text-icon-box single-features">
<div class="box-icon"><i class="dripicons-headset"></i></div>
<h3>Operator <br> Assisted Calls</h3>
</div>
<div class="text-icon-box single-features">
<div class="box-icon"><i class="dripicons-clock"></i></div>
<h3>Online <br> Meeting</h3>
</div>
<div class="text-icon-box single-features">
<div class="box-icon"><i class="dripicons-graph-pie"></i></div>
<h3>Screen <br> Shareing</h3>
</div>
<div class="text-icon-box single-features">
<div class="box-icon"><i class="dripicons-bell"></i></div>
<h3>Mobile <br> Application</h3>
</div>
<div class="text-icon-box single-features">
<div class="box-icon"><i class="dripicons-cloud"></i></div>
<h3>Cloud <br> Record</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!--FEATURES AREA END-->
<!--ABOUT AREA-->
<section class="about-area section-padding gray-bg" id="about">
<div class="container">
<div class="row">
<div class="col-md-5 col-lg-5 col-sm-12 col-xs-12">
<div class="area-image-content sm-mb50 xs-mb50 wow fadeInRight" data-wow-delay="0.3s">
<img src="assets/img/about/about-mockup.png" alt="">
</div>
</div>
<div class="col-md-5 col-md-offset-1 col-lg-5 col-lg-offset-1 col-sm-12 col-xs-12">
<div class="area-content">
<h3 class="wow fadeInRight" data-wow-delay="0.3s">Engage Your Customer Automatically</h3>
<div class="text-icon-box details-content-box wow fadeInRight" data-wow-delay="0.6s">
<div class="box-icon"><i class="dripicons-graph-pie"></i></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inc ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerc itation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</p>
<a href="#" class="read-more active">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--ABOUT AREA END-->
<!--PROCESS AREA-->
<section class="process-area padding-top" id="process">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6 col-md-offset-3 col-lg-offset-3 col-sm-12 col-xs-12">
<div class="area-title center">
<h4 class="subtitle">working progress</h4>
<h2>How Does Applic Apps Processing Works</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="process-content">
<div class="area-bg"></div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-process-box text-icon-box xs-mb50 wow fadeInLeft" data-wow-delay="0.3s">
<div class="process-icon"><i class="dripicons-lock-open"></i></div>
<h3>Log In First</h3>
<p>Lorem ipsum dolor sit ameconecte ur adipisicing elit sed do eiusmod tempor incididunt labore dolore magnad</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-process-box text-icon-box xs-mb50 wow fadeInLeft" data-wow-delay="0.6s">
<div class="process-icon"><i class="dripicons-pulse"></i></div>
<h3>Data Analysis</h3>
<p>Lorem ipsum dolor sit ameconecte ur adipisicing elit sed do eiusmod tempor incididunt labore dolore magnad</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-process-box text-icon-box hidden-sm wow fadeInLeft" data-wow-delay="0.9s">
<div class="process-icon"><i class="dripicons-basket"></i></div>
<h3>Show Result</h3>
<p>Lorem ipsum dolor sit ameconecte ur adipisicing elit sed do eiusmod tempor incididunt labore dolore magnad</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--PROCESS AREA END-->
<!--GOAL AREA-->
<section class="goal-area section-padding" id="goal">
<div class="container">
<div class="row flex-v-center">
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
<div class="area-content sm-center xs-center wow fadeInLeft" data-wow-delay="0.3s">
<h3>Perfect Solutions For Smart Business</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiu smod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequ atuis aute irure dolor inrep.</p>
<a href="#" class="read-more active">free trial</a>
<a href="#" class="read-more">contact us</a>
</div>
</div>
<div class="col-md-5 col-lg-5 col-md-offset-1 col-lg-offset-1 col-sm-12 col-xs-12">
<div class="area-image-content hidden-sm hidden-xs wow fadeIn" data-wow-delay="0.6s">
<div class="goal-layers">
<div class="goal-layer-1"><img src="assets/img/mockups/goal-mockup-2.png" alt=""></div>
<div class="goal-layer-2" data-parallax='{"y": 180}'><img src="assets/img/mockups/goal-mockup-1.png" alt=""></div>
<div class="goal-layer-3" data-parallax='{"y": 70}'><img src="assets/img/mockups/goal-dots-shape.png" alt=""></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--GOAL AREA END-->
<!--VIDEO PROMO AREA-->
<section class="video-promo-area section-padding white" id="video">
<div class="area-bg"></div>
<div class="container">
<div class="row flex-v-center">
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
<div class="area-image-content sm-center xs-center sm-mb50 xs-mb50 wow fadeInRight" data-wow-delay="0.3s">
<div class="video-bg-layer" data-parallax='{"x": -50,"y": -50}'><img src="assets/img/video/dots-layer.png" alt=""></div>
<img src="assets/img/video/video-bg.jpg" alt="">
<div class="video-button item-center"><button class="video-popup" data-video-id="7TUOI23spt0"><i class="fa fa-play"></i></button></div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
<div class="area-content sm-center xs-center wow fadeInRight" data-wow-delay="0.6s">
<h4 class="subtitle">latest video</h4>
<h3>Watch App Video Demo Presentation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiu smod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-fun-fact mt50 wow fadeInRight" data-wow-delay="0.3s">
<h3><span class="odometer" data-count="85">00</span>K</h3>
<p>Happy User</p>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-fun-fact mt50 wow fadeInRight" data-wow-delay="0.6s">
<h3><span class="odometer" data-count="38">00</span>+</h3>
<p>Expert Member</p>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-fun-fact mt50 wow fadeInRight" data-wow-delay="0.9s">
<h3><span class="odometer" data-count="85">00</span>K+</h3>
<p>Apps Download</p>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single-fun-fact mt50 wow fadeInRight" data-wow-delay="1.2s">
<h3><span class="odometer" data-count="3">00</span>M</h3>
<p>Client Satisfied</p>
</div>
</div>
</div>
</div>
</section>
<!--VIDEO PROMO AREA END-->
<!--SCREENSHOT AREA-->
<section class="screenshot-area fix section-padding" id="screenshots">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="area-content xs-center xs-mb50">
<h4 class="subtitle">Clean Design</h4>
<h3>Applic Apps Screenshot</h3>
<p>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 no strud exercitation ullamco laboris nisi ut aliquip exea commodo consequat.</p>
</div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="screenshot-slider">
<div class="single-screenshot">
<img src="assets/img/screenshots/screenshot-1.png" alt="">
</div>
<div class="single-screenshot">
<img src="assets/img/screenshots/screenshot-2.png" alt="">
</div>
<div class="single-screenshot">
<img src="assets/img/screenshots/screenshot-3.png" alt="">
</div>
<div class="single-screenshot">
<img src="assets/img/screenshots/screenshot-1.png" alt="">
</div>
<div class="single-screenshot">
<img src="assets/img/screenshots/screenshot-2.png" alt="">
</div>
<div class="single-screenshot">
<img src="assets/img/screenshots/screenshot-3.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<!--SCREENSHOT AREA END-->
<!--TESTMONIAL AREA-->
<section class="testmonial-area section-padding gray-bg fix" id="process">
<div class="testmonial-layers">
<div class="testmonial-layer-1" data-parallax='{"y": 200, "smoothness": 100}'><img src="assets/img/bg-layers/layers-1.png" alt=""></div>
<div class="testmonial-layer-2" data-parallax='{"x": 80}'><img src="assets/img/bg-layers/layers-2.png" alt=""></div>
<div class="testmonial-layer-3" data-parallax='{"x": -200, "smoothness": 100}'><img src="assets/img/bg-layers/layers-3.png" alt=""></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6 col-md-offset-3 col-lg-offset-3 col-sm-12 col-xs-12">
<div class="area-title center">
<h4 class="subtitle">Testmonials</h4>
<h2>What Our Client’s Say About Us</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="testmonial-slider">
<div class="single-testmonial">
<div class="author-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod temporse incididunt utses labore et dolore magna aliqua. Ut enim minim veniam quis.</p>
</div>
<div class="author-name-and-thumb">
<div class="author-tumb"><img src="assets/img/testmonial/author-1.png" alt=""></div>
<h4>Raidu Rossow</h4>
<p>Web Designer</p>
</div>
</div>
<div class="single-testmonial">
<div class="author-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod temporse incididunt utses labore et dolore magna aliqua. Ut enim minim veniam quis.</p>
</div>
<div class="author-name-and-thumb">
<div class="author-tumb"><img src="assets/img/testmonial/author-2.png" alt=""></div>
<h4>Raidu Rossow</h4>
<p>Web Designer</p>
</div>
</div>
<div class="single-testmonial">
<div class="author-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod temporse incididunt utses labore et dolore magna aliqua. Ut enim minim veniam quis.</p>
</div>
<div class="author-name-and-thumb">
<div class="author-tumb"><img src="assets/img/testmonial/author-3.png" alt=""></div>
<h4>Raidu Rossow</h4>
<p>Web Designer</p>
</div>
</div>
<div class="single-testmonial">
<div class="author-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod temporse incididunt utses labore et dolore magna aliqua. Ut enim minim veniam quis.</p>
</div>
<div class="author-name-and-thumb">
<div class="author-tumb"><img src="assets/img/testmonial/author-1.png" alt=""></div>
<h4>Raidu Rossow</h4>
<p>Web Designer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--TESTMONIAL AREA END-->
<!--PRICEING AREA-->
<section class="pricing-area padding-100-50" id="pricing">
<div class="container">
<div class="row flex-v-center">
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
<div class="area-title sm-center xs-center">
<h4 class="subtitle">pricing plan</h4>
<h2>Our Latest Pricing Plan </h2>
</div>
</div>
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
<div class="right price-right-menu sm-mb50 xs-mb50 sm-center xs-center">
<ul class="price-menu">
<li class="active"><a data-toggle="tab" href="#monthly">Monthly</a></li>
<li><a data-toggle="tab" href="#yearly">Yearly</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="tab-content">
<div id="monthly" class="tab-pane fade in active">
<div class="row">
<div class="col-md-4">
<div class="single-price mb50">
<div class="price-header">
<div class="price-thumb-hidding">
<img src="assets/img/icons/rocket.png" alt="">
<div class="price-rate"><span class="currency">$</span>45.99</div>
<div class="price-title">Basic Plan</div>
</div>
</div>
<div class="price-details">
<ul>
<li><i class="dripicons-checkmark"></i> Push Notifications</li>
<li><i class="dripicons-checkmark"></i> Offline Synchronization</li>
<li><i class="dripicons-checkmark"></i> SQL Database</li>
<li><i class="dripicons-cross"></i> Speech & Text Analytics</li>
<li><i class="dripicons-cross"></i> 24/7 Support</li>
</ul>
</div>
<div class="price-footer">
<a href="#" class="purchase-button">Purchase</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-price mb50 active">
<div class="sale-promo">popular <span>-50%</span></div>
<div class="price-header">
<div class="price-thumb-hidding">
<img src="assets/img/icons/desktop.png" alt="">
<div class="price-rate"><span class="currency">$</span>45.99</div>
<div class="price-title">Standard Plan</div>
</div>
</div>
<div class="price-details">
<ul>
<li><i class="dripicons-checkmark"></i> Push Notifications</li>
<li><i class="dripicons-checkmark"></i> Offline Synchronization</li>
<li><i class="dripicons-checkmark"></i> SQL Database</li>
<li><i class="dripicons-checkmark"></i> Speech & Text Analytics</li>
<li><i class="dripicons-cross"></i> 24/7 Support</li>
</ul>
</div>
<div class="price-footer">
<a href="#" class="purchase-button">Purchase</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-price mb50">
<div class="price-header">
<div class="price-thumb-hidding">
<img src="assets/img/icons/witing-puzzle.png" alt="">
<div class="price-rate"><span class="currency">$</span>45.99</div>
<div class="price-title">Premium Plan</div>
</div>
</div>
<div class="price-details">
<ul>
<li><i class="dripicons-checkmark"></i> Push Notifications</li>
<li><i class="dripicons-checkmark"></i> Offline Synchronization</li>
<li><i class="dripicons-checkmark"></i> SQL Database</li>
<li><i class="dripicons-checkmark"></i> Speech & Text Analytics</li>
<li><i class="dripicons-checkmark"></i> 24/7 Support</li>
</ul>
</div>
<div class="price-footer">
<a href="#" class="purchase-button">Purchase</a>
</div>
</div>
</div>
</div>
</div>
<div id="yearly" class="tab-pane fade">
<div class="row">
<div class="col-md-4">
<div class="single-price mb50">
<div class="price-header">
<div class="price-thumb-hidding">
<img src="assets/img/icons/rocket.png" alt="">
<div class="price-rate"><span class="currency">$</span>45.99</div>
<div class="price-title">Basic Plan</div>
</div>
</div>
<div class="price-details">
<ul>
<li><i class="dripicons-checkmark"></i> Push Notifications</li>
<li><i class="dripicons-checkmark"></i> Offline Synchronization</li>
<li><i class="dripicons-checkmark"></i> SQL Database</li>
<li><i class="dripicons-cross"></i> Speech & Text Analytics</li>
<li><i class="dripicons-cross"></i> 24/7 Support</li>
</ul>
</div>
<div class="price-footer">
<a href="#" class="purchase-button">Purchase</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-price mb50">
<div class="sale-promo">popular <span>-50%</span></div>
<div class="price-header">
<div class="price-thumb-hidding">
<img src="assets/img/icons/desktop.png" alt="">
<div class="price-rate"><span class="currency">$</span>45.99</div>
<div class="price-title">Standard Plan</div>
</div>
</div>
<div class="price-details">
<ul>
<li><i class="dripicons-checkmark"></i> Push Notifications</li>
<li><i class="dripicons-checkmark"></i> Offline Synchronization</li>
<li><i class="dripicons-checkmark"></i> SQL Database</li>
<li><i class="dripicons-checkmark"></i> Speech & Text Analytics</li>
<li><i class="dripicons-cross"></i> 24/7 Support</li>
</ul>
</div>
<div class="price-footer">
<a href="#" class="purchase-button">Purchase</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-price mb50">
<div class="price-header">
<div class="price-thumb-hidding">
<img src="assets/img/icons/witing-puzzle.png" alt="">
<div class="price-rate"><span class="currency">$</span>45.99</div>
<div class="price-title">Premium Plan</div>
</div>
</div>
<div class="price-details">
<ul>
<li><i class="dripicons-checkmark"></i> Push Notifications</li>
<li><i class="dripicons-checkmark"></i> Offline Synchronization</li>
<li><i class="dripicons-checkmark"></i> SQL Database</li>
<li><i class="dripicons-checkmark"></i> Speech & Text Analytics</li>
<li><i class="dripicons-checkmark"></i> 24/7 Support</li>
</ul>
</div>
<div class="price-footer">
<a href="#" class="purchase-button">Purchase</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--PRICEING AREA END-->
<!--FAQS AREA-->
<section class="faqs-area padding-top gray-bg" id="faqs">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6 col-xs-12">
<div class="area-image-content hidden-sm hidden-xs">
<div class="faqs-mockup-1" data-parallax='{"y": 150, "smoothness": 100}'><img src="assets/img/faqs/faqs-mockup.png" alt=""></div>
<div class="faqs-mockup-2"><img src="assets/img/faqs/faqs-question.png" alt=""></div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xs-12">
<div class="area-content sm-mb80 xs-mb50">
<h4 class="subtitle font500 alt-font uppercase">ask questions</h4>
<h2>Frequently Asked Questions</h2>
<div class="panel-group sm-mt50 xs-mt50" id="accordion-main">
<!-- start tab content -->
<div class="panel panel-default active">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-main" href="#collapseOne">
<div class="panel-title">
<span>01</span>
<span>Creating The Feature Queries Manager ?</span>
<i class="pull-right fa fa-angle-down"></i>
</div>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute dolor in reprehenderit in voluptate velit esse cillum dolore</div>
</div>
</div>
<!-- end tab content -->
<!-- start tab content -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-main" href="#collapseTwo">
<div class="panel-title">
<span>02</span>
<span>Building Diverse Design Teams ?</span>
<i class="pull-right fa fa-angle-down"></i>
</div>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute dolor in reprehenderit in voluptate velit esse cillum dolore</div>
</div>
</div>
<!-- end tab content -->
<!-- start tab content -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-main" href="#collapseThree">
<div class="panel-title">
<span>03</span>
<span>Augmented And Virtual Reality Icon ?</span>
<i class="pull-right fa fa-angle-down"></i>
</div>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute dolor in reprehenderit in voluptate velit esse cillum dolore</div>
</div>
</div>
<!-- end tab content -->
<!-- start tab content -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-main" href="#collapseFour">
<div class="panel-title">
<span>04</span>
<span>How To Create A Flat Vector ?</span>
<i class="pull-right fa fa-angle-down"></i>
</div>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute dolor in reprehenderit in voluptate velit esse cillum dolore</div>
</div>
</div>
<!-- end tab content -->
<!-- start tab content -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-main" href="#collapseFive">
<div class="panel-title">
<span>05</span>
<span>How To Create A Flat Vector ?</span>
<i class="pull-right fa fa-angle-down"></i>
</div>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute dolor in reprehenderit in voluptate velit esse cillum dolore</div>
</div>
</div>
<!-- end tab content -->
<!-- start tab content -->
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-main" href="#collapseSix">
<div class="panel-title">
<span>06</span>
<span>How To Create A Flat Vector ?</span>
<i class="pull-right fa fa-angle-down"></i>
</div>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei temporo incididunt ut labore et dolore magna aliqua. Ut enim ad minim exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute dolor in reprehenderit in voluptate velit esse cillum dolore</div>
</div>
</div>
<!-- end tab content -->
</div>
</div>
</div>
</div>
</div>
</section>
<!--FAQS AREA END-->
<!--BLOG AREA-->
<section class="blog-area padding-100-50" id="blog">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6 col-md-offset-3 col-lg-offset-3 col-sm-12 col-xs-12">
<div class="area-title center">
<h4 class="subtitle">Blog & News</h4>
<h2>Our Latest News And Blogs</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 col-sm-6 col-xs-12">
<div class="single-blog-item mb50 wow fadeInLeft" data-wow-delay="0.3s">
<div class="post-media mb40">
<a href="#"><img src="assets/img/blog/blog-small-thumb-1.jpg" alt=""></a>
</div>
<div class="blog-post-details">
<h3><a href="#">How Improving Website Performan Can Help Save The Planet</a></h3>
<p>Lorem ipsum dolor sit amet consectetur adies pisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-sm-6 col-xs-12">
<div class="single-blog-item mb50 wow fadeInLeft" data-wow-delay="0.6s">
<div class="post-media mb40">
<a href="#"><img src="assets/img/blog/blog-small-thumb-2.jpg" alt=""></a>
</div>
<div class="blog-post-details">
<h3><a href="#">Better Collaboration By Bringing Des Into The Code Review Process</a></h3>
<p>Lorem ipsum dolor sit amet consectetur adies pisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12 hidden-md hidden-sm wow fadeInLeft" data-wow-delay="0.9s">
<div class="single-blog-item mb50">
<div class="blog-post-details">
<h3><a href="#">Monthly Web Development Update DNS Over HTTPS, Notifications</a></h3>
<p>Lorem ipsum dolor sit amet consectetur adies pisicing elit, sed do eiusmod tempor.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<hr class="mb50">
<div class="single-blog-item mb50">
<div class="blog-post-details">
<h3><a href="#">Everything You Need To Know Abe Transactional Email Know</a></h3>
<p>Lorem ipsum dolor sit amet consectetur adies pisicing elit, sed do eiusmod tempor.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--BLOG AREA END-->
<!--CONTACT AREA-->
<section class="contact-area padding-100-50 gray-bg" id="contact">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6 col-md-offset-3 col-lg-offset-3 col-sm-12 col-xs-12">
<div class="area-title center">
<h4 class="subtitle">Contact Us</h4>
<h2>Call Us Or Started To Talk With Us</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-lg-5 col-sm-12 col-xs-12">
<div class="contact-content padding50 mb50">
<div class="single-contact">
<div class="contact-icon"><i class="dripicons-location"></i></div>
<h3>Location</h3>
<p>123 Chalingt Gates, <br> Supper Market New York.</p>
</div>
<div class="single-contact">
<div class="contact-icon"><i class="dripicons-mail"></i></div>
<h3>Contact</h3>
<p>support@gmail.com</p>
<p>infoApplic.net</p>
</div>
<div class="single-contact">
<div class="contact-icon"><i class="dripicons-phone"></i></div>
<h3>Contact</h3>
<p>+8 123 45 678 99</p>
<p>+1 231 45 687 99</p>
</div>
</div>
</div>
<div class="col-md-5 col-lg-5 col-md-offset-1 col-lg-offset-1 col-sm-12 col-xs-12">
<div class="contact-form mb50">
<form action="process.php" id="contact-form" method="post">
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="form-group" id="name-field">
<div class="form-input">
<label for="form-name">Your Name</label>
<input type="text" class="form-control" id="form-name" name="form-name" placeholder="Jhonathan Doe" required>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="form-group" id="email-field">
<div class="form-input">
<label for="form-email">Your Mail</label>
<input type="email" class="form-control" id="form-email" name="form-email" placeholder="support@mail.com" required>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="form-group" id="phone-field">
<div class="form-input">
<label for="form-phone">Your Subject</label>
<input type="text" class="form-control" id="form-phone" name="form-phone" placeholder="Subject..">
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="form-group" id="message-field">
<div class="form-input">
<label for="form-message">Your Message</label>
<textarea class="form-control" rows="6" id="form-message" name="form-message" placeholder="Your Your Message" required></textarea>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="form-group mb0">
<button class="read-more active" type="submit">Send Message</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!--CONTACT AREA END-->
<!--FOOER AREA-->
<footer class="footer-area white relative">
<div class="area-bg"></div>
<div class="footer-top-area section-padding">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 sm-center xs-center sm-mb50 xs-mb50">
<div class="single-widgets">
<div class="footer-logo">
<a href="#"><img src="assets/img/logo.png" alt=""></a>
</div>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit sed do eiusm od tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="footer-search-form">
<form action="#">
<input type="text" name="footer_search" id="footer_search" placeholder="Search Here.">
<button type="submit"><i class="dripicons-search"></i></button>
</form>
</div>
</div>
</div>
<div class="col-md-offset-1 col-md-2 col-sm-4 col-xs-12">
<div class="single-widgets xs-mb50">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="single-widgets xs-mb50">
<h3>Other Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="single-widgets">
<h3>Newsletter</h3>
<p>Lorem ipsum dolor sit amet consec tetur adipisicing elit sed modo</p>
<div class="footer-subscriber-form">
<form action="#">
<input type="email" name="email" id="email" placeholder="mail@example.com">
<button type="submit">subscribe</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom-area">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="footer-copyright text-center">
<p>Copyright © <a href="http://themeforest.net/user/QuomodoTheme"> QuomodoTheme</a> All Right Reserved.</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--FOOER AREA END-->
<!--====== SCRIPTS JS ======-->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<!--====== PLUGINS JS ======-->
<script src="assets/js/vendor/jquery.easing.1.3.js"></script>
<script src="assets/js/vendor/jquery-migrate-1.2.1.min.js"></script>
<script src="assets/js/vendor/jquery.appear.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/stellar.js"></script>
<script src="assets/js/jquery.parallax-layer-scroll.js"></script>
<script src="assets/js/chaffle.min.js"></script>
<script src="assets/js/anime.min.js"></script>
<script src="assets/js/jquery-modal-video.min.js"></script>
<script src="assets/js/venobox.min.js"></script>
<script src="assets/js/stellarnav.min.js"></script>
<script src="assets/js/jquery.sticky.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/placeholdem.min.js"></script>
<script src="assets/js/odometer.min.js"></script>
<script src="assets/js/contact-form.js"></script>
<script src="assets/js/footer-reveal.min.js"></script>
<script src="assets/js/ResizeSensor.min.js"></script>
<script src="assets/js/theia-sticky-sidebar.min.js"></script>
<!--===== ACTIVE JS=====-->
<script src="assets/js/main.js"></script>
</body>
</html>
Here the main Navigation structure If you need any change your Main Navigation, Please follow the instruction below.
<!--MAINMENU AREA-->
<div class="mainmenu-area" id="mainmenu-area">
<div class="mainmenu-area-bg"></div>
<nav class="navbar">
<div class="container">
<div class="row">
<div class="col-md-12 flex-v-center">
<div class="navbar-header">
<a href="index.html" class="custom-logo-link default-logo"><img src="assets/img/logo.png" alt="logo"></a>
<a href="index.html" class="custom-logo-link sticky-logo"><img src="assets/img/sticky_logo.png" alt="logo"></a>
</div>
<svg class="ham hamRotate ham8" viewBox="0 0 100 100" width="50">
<path class="line top" d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20" />
<path class="line middle" d="m 30,50 h 40" />
<path class="line bottom" d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20" />
</svg>
<div id="main-nav" class="stellarnav">
<ul id="nav" class="nav navbar-nav pull-right">
<li class="active"><a href="index.html">Home</a>
<ul>
<li class="active"><a href="index.html">Home V1</a></li>
<li><a href="index-2.html">Home V2</a></li>
<li><a href="index-3.html">Home V3</a></li>
<li><a href="index-4.html">Home V4</a></li>
</ul>
</li>
<li><a href="#features">Features</a></li>
<li><a href="#screenshots">Screenshots</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#">Pages</a>
<ul>
<li><a href="blog.html">Blog Page</a></li>
<li><a href="single-blog.html">Single Blog Page</a></li>
<li><a href="shop.html">Shop Page</a></li>
<li><a href="single-shop.html">Single Shop Page</a></li>
</ul>
</li>
</ul>
</div>
<div class="header-call-to-action hidden-sm hidden-xs hidden-md">
<a href="#" class="action-button">Sign Up</a>
<button class="search-button"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div>
</nav>
</div>
<!--END MAINMENU AREA END-->
We are using few CSS files in our template mentioned in comments section(<!-- -->) to describe the linked for each stylesheet bellow. To make things easiar for you we have used separate stylesheet. If you want to load the page more frequesnt and fast then i would love to suggest to use compressed stylesheet (for decreasing HTTP queries).
<!--====== STYLESHEETS ======-->
<link href="assets/css/plugins.css" rel="stylesheet">
<link href="assets/css/icons.css" rel="stylesheet">
<link href="assets/css/typography.css" rel="stylesheet">
<link href="assets/css/header.css" rel="stylesheet">
<link href="assets/css/blog-and-pages.css" rel="stylesheet">
<link href="assets/css/footer.css" rel="stylesheet">
<!--====== MAIN STYLESHEETS ======-->
<link href="style.css" rel="stylesheet">
<link href="assets/css/responsive.css" rel="stylesheet">
<!--====== SCRIPTS JS ======-->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<!--====== PLUGINS JS ======-->
<script src="assets/js/vendor/jquery.easing.1.3.js"></script>
<script src="assets/js/vendor/jquery-migrate-1.2.1.min.js"></script>
<script src="assets/js/vendor/jquery.appear.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/stellar.js"></script>
<script src="assets/js/jquery.parallax-layer-scroll.js"></script>
<script src="assets/js/chaffle.min.js"></script>
<script src="assets/js/anime.min.js"></script>
<script src="assets/js/jquery-modal-video.min.js"></script>
<script src="assets/js/venobox.min.js"></script>
<script src="assets/js/stellarnav.min.js"></script>
<script src="assets/js/jquery.sticky.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/placeholdem.min.js"></script>
<script src="assets/js/odometer.min.js"></script>
<script src="assets/js/contact-form.js"></script>
<script src="assets/js/footer-reveal.min.js"></script>
<script src="assets/js/ResizeSensor.min.js"></script>
<script src="assets/js/theia-sticky-sidebar.min.js"></script>
<!--===== ACTIVE JS=====-->
<script src="assets/js/main.js"></script>
There are all jQuery files including necessary plugins, all of them be found in jsfolder of home directory. Let's see what each file for:
-
jquery.1.12.4.min.js is stayable version of jQuery which is required to place upon all scripts otherwise none of jquery code will work.
-
bootstrat.min.js
-
owl-carousel.min.js is a jQuery plugin used for sliding client list.
-
jquery.ajaxchimp.js used for Mailchimp.
-
jquery.magnific-popup.min.js used for open image in popup window.
-
wow.min.js used for on scrolling animation.
-
mixitup.min.js Used for filteing portfolio.
-
typeit.min.js used for writing animation on text in welcome area.
-
contact-form.js is a jQuery plugin used for contact form data validation.
-
main.js is a custom jQuery used for active all jQuery file.
We have used only three type font throughout the template
-
Gilroy
Gilroy is a premium font you can also buy licence form here https://www.tinkov.info/gilroy.html or you can use google font All of the fonts are available on
Google Fonts. You can choose other fonts from google directory. We have linked them at head part in
index.html
We have used font ICON ( fontawesome) sets in these templates there are total of 1000+ icons you can see their class to use , just need to difine their classes for use any icon.