Appstop - Apps Landign Page

This is Clean Apps Landing Page.

Created: 04 may 2020
Latest Update:10 june 2020

Thank you for purchasing our theme. Appstop - Apps Landing page. If you have any question, please feel free to contact us.

Main File Structure

All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Appstop" folder.
You will find the index.html file on the root that will be edited.
There are 1 directory called "assets".
Also you will see 4 directories under assets directory "css, js, fonts, img".
In the css folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.

                        
                            Appstop/
                            ├── assets/css/
                            │   ├── bootstrap.min.css
                            │   ├── font-awesome.min.css
                            │   ├── jquery.animatedheadline.css
                            │   ├── animate.min.css
                            │   ├── owl.theme.default.min.css
                            │   ├── owl.carousel.css
                            │   └── style.css
                            │   └── responsive.css
                            ├── assets/fonts
                            ├── assets/img
                            ├── assets/js/
                            │   ├── -3.0.0.min.js
                            │   ├── bootstrap.min.js jquery
                            │   ├── scrollIt.min.jss
                            │   ├── jquery.animatedheadline.min.js
                            │   ├── wow.min.js
                            │   ├── init.js
                            │   ├── owl.carousel.min.js 
                            │   ├── jquery.waypoints.js 
                            │   ├── custom.js 
                            |
                            ├── index.html
                        
                    

HTML Structure

The base structure was organized by row, col-** class
                        
                         <!--=========== Preloader Start=========== -->
                          <div id="preloader-wrap">
                             <div class="preloader"></div>
                          </div>
                          <!-- ===========Preloader End ===========-->
                          <!--===========Menu Area Start======-->
                          <!--Navbar Start-->
                          <nav class="navbar navbar-expand-lg">
                             <div class="container">
                                <!-- LOGO -->
                                <a class="navbar-brand logo" href="index.html">
                                <img src="assets/img/logo.png" alt="Logo">
                                </a>
                                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="fa fa-bars"></span>
                                </button>
                                <div class="navbar-collapse collapse" id="navbarCollapse">
                                   <ul class="navbar-nav ml-auto">
                                      <li class="nav-item">
                                         <a class="nav-link" href="#" data-scroll-nav="0">Home</a>
                                      </li>
                                      <li class="nav-item">
                                         <a class="nav-link" href="#" data-scroll-nav="1">Features</a>
                                      </li>
                                      <li class="nav-item">
                                         <a class="nav-link" href="#" data-scroll-nav="2">How it works</a>
                                      </li>
                                      <li class="nav-item">
                                         <a class="nav-link" href="#" data-scroll-nav="3">Screenshot</a>
                                      </li>
                                      <li class="nav-item">
                                         <a class="nav-link" href="#" data-scroll-nav="4">Pricing</a>
                                      </li>
                                      <li class="nav-item">
                                         <a class="nav-link" href="#" data-scroll-nav="5">Team</a>
                                      </li>
                                      <li class="nav-item">
                                         <a class="nav-link" href="#" data-scroll-nav="6">Blog</a>
                                      </li>
                                      <li class="nav-item">
                                         <a class="nav-link" href="#" data-scroll-nav="7">Contact</a>
                                      </li>
                                   </ul>
                                </div>
                             </div>
                          </nav>
                          <!--Navbar End-->
                          <!--===============Menu Area End============-->
                          <!--===========Header Area Start===========-->
                          <div class="header_area" data-scroll-index="0">
                             <div class="container">
                                <div class="row header_content">
                                   <div class="col-md-8">
                                      <div class="header">
                                         <div class="banner-welcome">
                                            <div class="caption-inner">
                                               <h4>Ready to showcase</h4>
                                               <div class="ah-headline clip is-full-width">
                                                  <span class="ah-words-wrapper" style="width: 231.617px;">
                                                  <b class="is-visible"> App Landing Page</b>
                                                  <b class="is-hidden"> Promote Product</b>
                                                  <b class="is-hidden"> The Best Mobile App</b>
                                                  </span>
                                               </div>
                                            </div>
                                            <p>Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
                                            <a href="#" class="appstop-dn">
                                            Download now <i class="fa fa-arrow-circle-o-down animate-dn"></i>
                                            </a>
                                         </div>
                                      </div>
                                   </div>
                                   <div class="col-md-4">
                                      <div class="header-phone-img animate-img">
                                         <img src="assets/img/phone-app.png" alt="Phone image" class="animate-im">
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </div>
                          <div class="shape-bottom">
                             <img src="assets/img/wave-header.png" alt="shape" class="bottom-shape img-fluid">
                          </div>
                          <!--===========Header Area End===========-->
                          <!--===========Features Area Start===========-->
                          <section class="feature-area section_70" data-scroll-index="1">
                             <div class="container">
                                <div class="row justify-content-center">
                                   <div class="col-md-9 col-lg-8">
                                      <div class="section-heading text-center mb-5">
                                         <h2>Feature</h2>
                                         <p> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
                                      </div>
                                   </div>
                                </div>
                                <div class="feature-content">
                                   <div class="row">
                                      <div class="col-lg-4 col-md-12 col-sm-12 ">
                                         <!--single feature-->
                                         <div class="single-feature-left text-right wow fadeInLeft">
                                            <div class="row">
                                               <div class="col-md-10 order-2 order-lg-1">
                                                  <div>
                                                     <h5>Super Fast</h5>
                                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, nisi!</p>
                                                  </div>
                                               </div>
                                               <div class="col-md-2 order-1 order-lg-2">
                                                  <div>
                                                     <i class="fa fa-rocket" aria-hidden="true"></i>
                                                  </div>
                                               </div>
                                            </div>
                                         </div>
                                         <!--single-feature-->
                                         <div class="single-feature-left text-right wow fadeInLeft">
                                            <div class="row">
                                               <div class="col-md-10 order-2 order-lg-1">
                                                  <div>
                                                     <h5>Unlimited Features</h5>
                                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, nisi!</p>
                                                  </div>
                                               </div>
                                               <div class="col-md-2 order-1 order-lg-2">
                                                  <div>
                                                     <i class="fa fa-lightbulb-o" aria-hidden="true"></i>                        
                                                  </div>
                                               </div>
                                            </div>
                                         </div>
                                         <!--single-feature-->
                                         <div class="single-feature-left text-right wow fadeInLeft">
                                            <div class="row">
                                               <div class="col-md-10 order-2 order-lg-1">
                                                  <div>
                                                     <h5>Retina Ready</h5>
                                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, nisi!</p>
                                                  </div>
                                               </div>
                                               <div class="col-md-2 order-1 order-lg-2">
                                                  <div>
                                                     <i class="fa fa-eye " aria-hidden="true"></i>                     
                                                  </div>
                                               </div>
                                            </div>
                                         </div>
                                      </div>
                                      <div class="col-lg-4 col-md-12 col-sm-12">
                                         <div class="feautre-img animate-img text-center">
                                            <img src="assets/img/1-1.png" alt="animate img" class="animate-im">
                                         </div>
                                      </div>
                                      <div class="col-lg-4 col-md-12 col-sm-12">
                                         <!--single-feature-->
                                         <div class="single-feature-right text-left wow fadeInRight">
                                            <div class="row">
                                               <div class="col-md-2">
                                                  <div>
                                                     <i class="fa fa-heartbeat" aria-hidden="true"></i>                        
                                                  </div>
                                               </div>
                                               <div class="col-md-10">
                                                  <div class="ml-2">
                                                     <h5>User Friendly</h5>
                                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, nisi!</p>
                                                  </div>
                                               </div>
                                            </div>
                                         </div>
                                         <!--single-feature-->
                                         <div class="single-feature-right text-left wow fadeInRight">
                                            <div class="row">
                                               <div class="col-md-2">
                                                  <div>
                                                     <i class="fa fa-code" aria-hidden="true"></i>                  
                                                  </div>
                                               </div>
                                               <div class="col-md-10">
                                                  <div class="ml-2">
                                                     <h5>Well Documented</h5>
                                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, nisi!</p>
                                                  </div>
                                               </div>
                                            </div>
                                         </div>
                                         <!--single-feature-->
                                         <div class="single-feature-right text-left wow fadeInRight">
                                            <div class="row">
                                               <div class="col-md-2">
                                                  <div>
                                                     <i class="fa fa-superpowers" aria-hidden="true"></i> 
                                                  </div>
                                               </div>
                                               <div class="col-md-10">
                                                  <div class="ml-2">
                                                     <h5>Super Powerful</h5>
                                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, nisi!</p>
                                                  </div>
                                               </div>
                                            </div>
                                         </div>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </section>
                          <!--===========Features Area End===========-->
                          <!--===========how it work start===========-->
                          <section class="work-process-area section_70" data-scroll-index="2">
                             <div class="container">
                                <div class="row justify-content-center">
                                   <div class="col-md-9 col-lg-8">
                                      <div class="section-heading text-center mb-5">
                                         <h2>Our Work Process</h2>
                                         <p>Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p>
                                      </div>
                                   </div>
                                </div>
                                <div class="row">
                                   <div class="col-md-12">
                                      <div class="work-process-wrap">
                                         <div class="single-work-process wow fadeInLeft mt-lg-5 mt-md-5 mt-sm-5 mt-5">
                                            <div class="work-process-icon-wrap color-1-bg rounded">
                                               <i class="fa fa-lightbulb-o"></i>
                                               <span class="process-step">1</span>
                                            </div>
                                            <span class="work-process-divider"></span>
                                            <div class="work-process-content mt-4">
                                               <h5>Generate Ideas</h5>
                                               <p>Compellingly harness reliable methodologies and orthogonal web services. </p>
                                            </div>
                                         </div>
                                         <div class="single-work-process wow fadeInLeft mt-lg-5 mt-md-5 mt-sm-5 mt-5">
                                            <div class="work-process-icon-wrap rounded">
                                               <i class="fa fa-home"></i>
                                               <span class="process-step">2</span>
                                            </div>
                                            <span class="work-process-divider"></span>
                                            <div class="work-process-content mt-4">
                                               <h5>Collect Contents</h5>
                                               <p>Compellingly harness reliable methodologies and orthogonal web services. </p>
                                            </div>
                                         </div>
                                         <div class="single-work-process wow fadeInLeft mt-lg-5 mt-md-5 mt-sm-5 mt-5">
                                            <div class="work-process-icon-wrap rounded">
                                               <i class="fa fa-laptop"></i>
                                               <span class="process-step">3</span>
                                            </div>
                                            <span class="work-process-divider"></span>
                                            <div class="work-process-content mt-4">
                                               <h5>Create Design</h5>
                                               <p>Compellingly harness reliable methodologies and orthogonal web services. </p>
                                            </div>
                                         </div>
                                         <div class="single-work-process wow fadeInLeft mt-lg-5 mt-md-5 mt-sm-5 mt-5">
                                            <div class="work-process-icon-wrap color-4-bg rounded">
                                               <i class="fa fa-tv"></i>                                <span class="process-step">4</span>
                                            </div>
                                            <span class="work-process-divider"></span>
                                            <div class="work-process-content mt-4">
                                               <h5>Launch Project</h5>
                                               <p>Compellingly harness reliable methodologies and orthogonal web services. </p>
                                            </div>
                                         </div>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </section>
                          <!--===========how it work end===========-->
                          <!--===========screenshots start===========-->
                          <section class="screenshots-area section_70" data-scroll-index="3">
                             <div class="container">
                                <div class="row justify-content-center">
                                   <div class="col-md-9 col-lg-8">
                                      <div class="section-heading text-center mb-5">
                                         <h2>Show Our Apps Screenshots</h2>
                                         <p>Credibly synthesize multimedia based networks vis-a-vis top-line growth strategies. Continually leverage existing worldwide interfaces </p>
                                      </div>
                                   </div>
                                </div>
                                <!--start app screen carousel-->
                                <div class="screen-slider-content wow fadeInUp text-center">
                                   <div class="screenshot-frame"></div>
                                   <div class="screen-carousel owl-carousel owl-theme dot-indicator ">
                                      <img src="assets/img/01.png" class="img-fluid" alt="screenshots"/>
                                      <img src="assets/img/02.png" class="img-fluid" alt="screenshots"/>
                                      <img src="assets/img/03.png" class="img-fluid" alt="screenshots"/>
                                      <img src="assets/img/04.png" class="img-fluid" alt="screenshots"/>
                                      <img src="assets/img/05.png" class="img-fluid" alt="screenshots"/>
                                      <img src="assets/img/06.png" class="img-fluid" alt="screenshots"/>
                                   </div>
                                </div>
                                <!--end app screen carousel-->
                             </div>
                          </section>
                          <!--===========screenshots end===========-->
                          <!--=========== Pricing area start===========-->
                          <section class="pricing-area section_70" data-scroll-index="4">
                             <div class="container">
                                <div class="row justify-content-center">
                                   <div class="col-md-9 col-lg-8">
                                      <div class="section-heading text-center mb-5">
                                         <h2>Pricing plans</h2>
                                         <p>we shows only the best websites, portfolios ans landing pages built completely with passion, simplicity & creativity !ince the 1500s </p>
                                      </div>
                                   </div>
                                </div>
                                <!-- .row end -->
                                <div class="row">
                                   <!-- Pricing Packge #1-->
                                   <div class=" col-lg-4 col-md-6 mt-5 price-table wow fadeInUp">
                                      <div class="pricing-panel">
                                         <!--  Pricing heading  -->
                                         <div class="pricing--heading text--center">
                                            <h4>Single</h4>
                                            <div class="pricing--heading">
                                               <p>free</p>
                                               <div class="pricing--desc">
                                                  All plans are include , People Search, and A/B Testing Report.
                                               </div>
                                            </div>
                                         </div>
                                         <!--  Pricing body  -->
                                         <div class="pricing--body">
                                            <a class="btn btn-getstart" href="#">Get Started</a>
                                         </div>
                                         <!--  Pricing Body  -->
                                      </div>
                                   </div>
                                   <!-- .pricing-table End -->
                                   <!-- Pricing Packge #2-->
                                   <div class=" col-lg-4 col-md-6 mt-5 price-table wow fadeInUp">
                                      <div class="pricing-panel pricing-active">
                                         <!--  Pricing heading  -->
                                         <div class="pricing--heading text--center">
                                            <h4>Premium</h4>
                                            <div class="pricing--heading">
                                               <p><span class="currency">$</span>19</p>
                                               <div class="pricing--desc">
                                                  All plans are include , People Search, and A/B Testing Report.
                                               </div>
                                            </div>
                                         </div>
                                         <!--  Pricing body  -->
                                         <div class="pricing--body">
                                            <a class="btn btn-getstart" href="#">Get Started Now</a>
                                         </div>
                                         <!--  Pricing Body  -->
                                      </div>
                                   </div>
                                   <!-- .pricing-table End -->
                                   <!-- Pricing Packge #3-->
                                   <div class=" col-lg-4 col-md-6 mt-5 price-table wow fadeInUp">
                                      <div class="pricing-panel">
                                         <!--  Pricing heading  -->
                                         <div class="pricing--heading text--center">
                                            <h4>Agency</h4>
                                            <div class="pricing--heading">
                                               <p><span class="currency">$</span>29</p>
                                               <div class="pricing--desc">
                                                  All plans are include , People Search, and A/B Testing Report.
                                               </div>
                                            </div>
                                         </div>
                                         <!--  Pricing body  -->
                                         <div class="pricing--body">
                                            <a class="btn btn-getstart" href="#">Get Started</a>
                                         </div>
                                         <!--  Pricing Body  -->
                                      </div>
                                   </div>
                                   <!-- .pricing-table End -->
                                </div>
                             </div>
                          </section>
                          <!-- ===========Pricing Table end=========== -->
                          <!-- ===========Counter Area Start=========== -->
                          <section class="counter-area section_50">
                             <div class="container">
                                <div class="row">
                                   <div class="col-md-3 col-sm-6 col-6 wow fadeInDown">
                                      <div class="signle-counter text-center ">
                                         <i class="fa fa-download"></i>
                                         <p>DOWNLOAD</p>
                                         <h3 class="counter" data-count="700">0</h3>
                                      </div>
                                   </div>
                                   <div class="col-md-3 col-sm-6 col-6 wow fadeInDown">
                                      <div class="signle-counter text-center ">
                                         <i class="fa fa-users"></i>
                                         <p>HAPPY CLIENTS</p>
                                         <h3 class="counter" data-count="900">0</h3>
                                         <!-- <h3 class="counter">2k</h3> -->
                                      </div>
                                   </div>
                                   <div class="col-md-3 col-sm-6 col-6 wow fadeInDown">
                                      <div class="signle-counter text-center ">
                                         <i class="fa fa-bookmark"></i>
                                         <p>BOOKMARK</p>
                                         <h3 class="counter" data-count="500">0</h3>
                                      </div>
                                   </div>
                                   <div class="col-md-3 col-sm-6 col-6 wow fadeInDown">
                                      <div class="signle-counter text-center ">
                                         <i class="fa fa-star"></i>
                                         <p>RATING STARs</p>
                                         <h3 class="counter" data-count="800">0</h3>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </section>
                          <!--=========== Counter Area End=========== -->
                          <!--===========Quote and support section end===========-->
                          <section class="team-area section_70" data-scroll-index="5">
                             <div class="container">
                                <div class="row justify-content-center">
                                   <div class="col-md-9 col-lg-8">
                                      <div class="section-heading text-center mb-5">
                                         <h2>Our Team</h2>
                                         <p> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
                                      </div>
                                   </div>
                                </div>
                                <div class="row">
                                   <!--Team Member-->
                                   <div class="col-md-4 col-sm-6 col-xs-12 wow fadeInLeftBig">
                                      <div class="team-member">
                                         <div class="inner-box">
                                            <div class="image-box">
                                               <img src="assets/img/team-1.jpg" alt="">
                                               <!--Overlay Box-->
                                               <div class="overlay-box">
                                                  <!--User Info-->
                                                  <div class="user-info">
                                                     <div class="text">
                                                        CEO Founder
                                                     </div>
                                                     <h4>Tina Meyer</h4>
                                                  </div>
                                                  <!--Social Icon Two-->
                                                  <ul class="social-icon-team">
                                                     <li>
                                                        <a href="#"><span class="fa fa-facebook"></span></a>
                                                     </li>
                                                     <li>
                                                        <a href="#"><span class="fa fa-twitter"></span></a>
                                                     </li>
                                                     <li>
                                                        <a href="#"><span class="fa fa-google-plus"></span></a>
                                                     </li>
                                                  </ul>
                                               </div>
                                            </div>
                                         </div>
                                      </div>
                                   </div>
                                   <!--Team Member-->
                                   <div class="col-md-4 col-sm-6 col-xs-12 wow fadeInLeftBig">
                                      <div class="team-member">
                                         <div class="inner-box">
                                            <div class="image-box">
                                               <img src="assets/img/team-2.jpg" alt="">
                                               <!--Overlay Box-->
                                               <div class="overlay-box">
                                                  <!--User Info-->
                                                  <div class="user-info">
                                                     <div class="text">
                                                        ui designer                 
                                                     </div>
                                                     <h4>Sayed mostafa</h4>
                                                  </div>
                                                  <!--Social Icon Two-->
                                                  <ul class="social-icon-team">
                                                     <li>
                                                        <a href="#"><span class="fa fa-facebook"></span></a>
                                                     </li>
                                                     <li>
                                                        <a href="#"><span class="fa fa-twitter"></span></a>
                                                     </li>
                                                     <li>
                                                        <a href="#"><span class="fa fa-google-plus"></span></a>
                                                     </li>
                                                  </ul>
                                               </div>
                                            </div>
                                         </div>
                                      </div>
                                   </div>
                                   <!--Team Member-->
                                   <div class="col-md-4 col-sm-6 col-xs-12 wow fadeInLeftBig">
                                      <div class="team-member">
                                         <div class="inner-box">
                                            <div class="image-box">
                                               <img src="assets/img/team-3.jpg" alt="">
                                               <!--Overlay Box-->
                                               <div class="overlay-box">
                                                  <!--User Info-->
                                                  <div class="user-info">
                                                     <div class="text">
                                                        ui developer
                                                     </div>
                                                     <h4>Sharon Murdock</h4>
                                                  </div>
                                                  <!--Social Icon Two-->
                                                  <ul class="social-icon-team">
                                                     <li>
                                                        <a href="#"><span class="fa fa-facebook"></span></a>
                                                     </li>
                                                     <li>
                                                        <a href="#"><span class="fa fa-twitter"></span></a>
                                                     </li>
                                                     <li>
                                                        <a href="#"><span class="fa fa-google-plus"></span></a>
                                                     </li>
                                                  </ul>
                                               </div>
                                            </div>
                                         </div>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </section>
                          <!--===========Blog section start===========-->
                          <section class="blog-area section_70" data-scroll-index="6">
                             <div class="blog-wrap">
                                <div class="container">
                                   <div class="row">
                                      <div class="col-lg-5 col-md-12 wow slideInLeft mb-30">
                                         <div class="blog-left mt-3 ml-3">
                                            <div class="row">
                                               <div class="col-xs-12">
                                                  <div class="blog-left-heading mb-20">
                                                     <h2>Latest News About Our Appstop</h2>
                                                  </div>
                                               </div>
                                            </div>
                                            <p>Lorem ipsum is simply dummy text of the printing and typesetting industry.
                                               Lorem Ipsum has
                                               been the industry’s standard.Lorem ipsum is simply dummy text of the
                                               printing and typesetting industry.
                                            </p>
                                            <a class="btn btn-getstart" href="#">View All Posts</a>
                                         </div>
                                      </div>
                                      <div class="col-lg-7 col-md-12">
                                         <div class="row">
                                            <div class="col-md-6 mb-20 wow bounce">
                                               <div class="blog-content blog_border blog_bg mt-3">
                                                  <h4>Promote Product</h4>
                                                  <p>Lorem ipsum is simply dummy text of the printing and typesetting
                                                     industry. Lorem Ipsum standard dummy.
                                                  </p>
                                                  <a href="#">Read More</a>
                                                  <div class="user">
                                                     <div class="row">
                                                        <div class="author-name pull-left">
                                                           <p><img src="assets/img/blog-1.jpg" alt="user">Alex,</p>
                                                        </div>
                                                        <div class="post-on pull-right">
                                                           <p class="text-right"> 4 May, 2020</p>
                                                        </div>
                                                     </div>
                                                  </div>
                                               </div>
                                            </div>
                                            <div class="col-md-6 wow bounce mb-20">
                                               <div class="blog-content blog_border blog_bg mt-3">
                                                  <h4>Best App Landing page</h4>
                                                  <p>Lorem ipsum is simply dummy text of the printing and typesetting
                                                     industry. Lorem
                                                     Ipsum
                                                     standard dummy.
                                                  </p>
                                                  <a href="#">Read More</a>
                                                  <div class="user">
                                                     <div class="row">
                                                        <div class="author-name pull-left">
                                                           <p><img src="assets/img/blog-2.jpg" alt="user"> John Smith, </p>
                                                        </div>
                                                        <div class="post-on pull-right">
                                                           <p class="text-right"> 5 may, 2020</p>
                                                        </div>
                                                     </div>
                                                  </div>
                                               </div>
                                            </div>
                                         </div>
                                      </div>
                                   </div>
                                </div>
                             </div>
                          </section>
                          <!--===========Blog section end===========-->
                          <!-- ===========Download Area start=========== -->
                          <section class="download-area section_70">
                             <div class="container">
                                <div class="row">
                                   <div class="col-md-12 mb-50">
                                      <div class="download-heading text-center wow fadeInUp animated" style="visibility: visible;">
                                         <h2>Download Updated App</h2>
                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam autem
                                            repudiandae corporis.
                                         </p>
                                      </div>
                                   </div>
                                   <div class="col-md-12 mt-3">
                                      <div class="download-info  animated" style="visibility: visible;">
                                         <div class="row">
                                            <div class="col-md-4 col-sm-4 wow fadeInUp">
                                               <a href="#" class="download-btn color-white ab2">
                                               <i class="fa fa-apple"></i>
                                               <small>Download from the</small><br>
                                               App Store
                                               </a>
                                            </div>
                                            <div class="col-md-4 col-sm-4 wow fadeInUp">
                                               <a href="#" class="download-btn color-white ab1">
                                               <i class="fa fa-android"></i>
                                               <small>Download from the</small><br>
                                               Google play
                                               </a>
                                            </div>
                                            <div class="col-md-4 col-sm-4 wow fadeInUp">
                                               <a href="#" class="download-btn color-white ab3">
                                               <i class="fa fa-windows"></i>
                                               <small>Download from the</small><br>
                                               Windows
                                               </a>
                                            </div>
                                         </div>
                                      </div>
                                   </div>
                                </div>
                                <!-- row end  -->
                             </div>
                             <!-- container end  -->
                          </section>
                          <!--=========== Download area end=========== -->
                          <!--===========Contact Area Start ===========-->
                          <section class="contact_area section_70" data-scroll-index="7">
                             <div class="container">
                                <div class="row">
                                   <div class="section-head text-center col-lg-8 offset-lg-2 col-md-10 offset-md-1">
                                      <h4>Contact Us</h4>
                                   </div>
                                   <div class="col-lg-5 wow fadeInLeft">
                                      <div class="info bg-img mb-md50" data-background="img/map.png">
                                         <div class="item">
                                            <div class="cont">
                                               <h6>Phone : </h6>
                                               <p>+20 010 2517 8918</p>
                                            </div>
                                         </div>
                                         <div class="item">
                                            <div class="cont">
                                               <h6>Address : </h6>
                                               <p>3rd Avenue, Upper East Side,<br> San Francisco</p>
                                            </div>
                                         </div>
                                         <div class="item">
                                            <div class="cont">
                                               <h6>Email : </h6>
                                               <p>email_support@youradress.com</p>
                                            </div>
                                         </div>
                                      </div>
                                   </div>
                                   <div class="col-lg-7 wow fadeInRight">
                                      <form class="form" action="mailto:yourmail@gmail.com" method="post" enctype="text/plain"  >
                                         <div class="messages"></div>
                                         <div class="controls">
                                            <div class="row">
                                               <div class="col-md-6">
                                                  <div class="form-group">
                                                     <input id="form_name" type="text" name="name" placeholder="Name" required="required">
                                                  </div>
                                               </div>
                                               <div class="col-md-6">
                                                  <div class="form-group">
                                                     <input id="form_email" type="email" name="email" placeholder="Email" required="required">
                                                  </div>
                                               </div>
                                               <div class="col-md-12">
                                                  <div class="form-group">
                                                     <input id="form_subject" type="text" name="subject" placeholder="Subject">
                                                  </div>
                                               </div>
                                               <div class="col-md-12">
                                                  <div class="form-group">
                                                     <textarea id="form_message" name="message" placeholder="Message" rows="4" required="required"></textarea>
                                                  </div>
                                               </div>
                                               <div class="col-md-12 text-center">
                                                  <button type="submit" class="btn btn-getstart"><span>Send Message</span></button>
                                               </div>
                                            </div>
                                         </div>
                                      </form>
                                   </div>
                                </div>
                             </div>
                          </section>
                          <!--=========== Contact Area End=========== -->
                          <!-- ===========Footer Area Start=========== -->
                          <footer class="text-center">
                             <div class="container">
                                <!-- Logo -->
                                <a class="logo" href="#">
                                <img src="assets/img/logo.png" alt="logo">          
                                </a>
                                <p>&copy; 2020. All Rights Reserved.</p>
                             </div>
                          </footer>
                          <!-- ===========Footer Area End=========== -->
                        
                    

CSS Structure

The base structure was organized by row, col-** class
                        
                    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png">
                      <!--Bootstrap css-->
                      <link rel="stylesheet" href="assets/css/bootstrap.min.css">
                      <!--Font Awesome css-->
                      <link rel="stylesheet" href="assets/css/font-awesome.min.css">
                      <!--Animatedheadline css-->
                      <link rel="stylesheet" href="assets/css/jquery.animatedheadline.css">
                      <!--Animate css-->
                      <link rel="stylesheet" href="assets/css/animate.min.css">
                      <!--Owl Carousel css-->
                      <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
                      <!--Owl Carousel css-->
                      <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
                      <!--Site Main Style css-->
                      <link rel="stylesheet" href="assets/css/style.css">
                      <!--Responsive css-->
                      <link rel="stylesheet" href="assets/css/responsive.css">

                        
                    

JavaScript Structure

The base structure was organized by row, col-** class
                        

                            <!--Jquery js-->
                          <script src="assets/js/jquery-3.0.0.min.js"></script>
                          <!--Bootstrap js-->
                          <script src="assets/js/bootstrap.min.js"></script>
                          <!--ScrollIt js-->
                          <script src="assets/js/scrollIt.min.js"></script>
                          <!--Animatedheadline js-->
                          <script src="assets/js/jquery.animatedheadline.min.js"></script>
                          <!--Wow js-->
                          <script src="assets/js/wow.min.js"></script>
                          <!--Counter js-->
                          <script src="assets/js/jquery.waypoints.js"></script>
                          <!--Init js-->
                          <script src="assets/js/init.js"></script>
                          <!--Owl Carousel js-->
                          <script src="assets/js/owl.carousel.min.js"></script>
                          <!--Main js-->
                          <script src="assets/js/custom.js"></script>

                        
                    

Sliders Structure

The base structure was organized by row, col-** class
                    
                        <!--===========screenshots start===========-->
                        <section class="screenshots-area section_70" data-scroll-index="3">
                           <div class="container">
                              <div class="row justify-content-center">
                                 <div class="col-md-9 col-lg-8">
                                    <div class="section-heading text-center mb-5">
                                       <h2>Show Our Apps Screenshots</h2>
                                       <p>Credibly synthesize multimedia based networks vis-a-vis top-line growth strategies. Continually leverage existing worldwide interfaces </p>
                                    </div>
                                 </div>
                              </div>
                              <!--start app screen carousel-->
                              <div class="screen-slider-content wow fadeInUp text-center">
                                 <div class="screenshot-frame"></div>
                                 <div class="screen-carousel owl-carousel owl-theme dot-indicator ">
                                    <img src="assets/img/01.png" class="img-fluid" alt="screenshots"/>
                                    <img src="assets/img/02.png" class="img-fluid" alt="screenshots"/>
                                    <img src="assets/img/03.png" class="img-fluid" alt="screenshots"/>
                                    <img src="assets/img/04.png" class="img-fluid" alt="screenshots"/>
                                    <img src="assets/img/05.png" class="img-fluid" alt="screenshots"/>
                                    <img src="assets/img/06.png" class="img-fluid" alt="screenshots"/>
                                 </div>
                              </div>
                              <!--end app screen carousel-->
                           </div>
                        </section>
                        <!--===========screenshots end===========-->
                    
                    

TEMPLATE FEATURES

  • Valid HTML5 & CSS3
  • Build on Bootstrap 4+
  • Advance Framework
  • Responsive Design
  • Clean & Optimized Code
  • Crossbrowser Compatible with IE10+, Firefox, Opera, Chrome
  • W3 validator
  • Awesome Customized Slider
  • Font Awesome Icon Fonts
  • Google Fonts
  • Awesome Support

Installing Template (FTP Install)

  • Unzip the archive downloaded from your account
  • Open your FTP manager and login to your hosting.
  • Browse the required directory (Normally public_html)
  • Upload the files inside Appstop folder.

Email Send Process

  • Open send_form_email.php
  • And EDIT THE 2 LINES BELOW AS REQUIRED

    $email_to = "you@yourdomain.com";
    $email_subject = "Your email subject line";

Supports

Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.