Welcome

First of all, Thank you so much for purchasing this item. You are really awesome! You are entitled to get free lifetime updates to this product and support from the - Themetags team directly.

Template folder structure

Item folder

This section is about the AppCo File structure. I hope it will help to understand project files.


    AppCo
        |-- css
        |-- fonts
        |-- img
        |-- js
        |   ─ index.html
        |   ─ index-1.html
        |   - others .html files



css folder

below css files included in this css folder


    |-- css
    |     |-- bootstrap.min.css
    |     |-- mignific-popup.css
    |     |-- owl.carousel.min.css
    |     |-- owl.theme.default.css
    |     |-- themify-icons.css
    |     |-- animate.min.css
    |     |-- jquery.mb.YTPlayer.min.css
    |     |-- style.css
    |     |-- responsive.css


  • bootstrap.min.css file contain - Bootstrap css.
  • mignific-popup.css file contain - Magnific Popup Popup css. It's is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
  • owl.carousel.min.css and owl.theme.default.css file contain - Owl Carousel custom carousel css. It's Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
  • themify-icons.css file contain - Themify Icons another line icon css.
  • animate.min.css file contain - Animation css website animation.
  • jquery.mb.YTPlayer.min.css file contain - Background video css it's background video css.
  • style.css fil contain all custom css.
  • responsive.css for small device support responsive css write here.

fonts folder

This folder contain fonts.


   
    |-- fonts
    |     |--
    |     |--
    |     |--
    |     |--
    |     |--
    |     |--



img folder

All images with logo, favicon, client or customer, team, slider etc included this folder.

   
    |-- img
    |     |--
    |     |--
    |     |--
    |     |--
    |     |--
    |     |--


js folder

Js folder contain an lib folder, in this folder has all plugins like bootstrap, jquery, popper etc.

   
    js
    |-- bootstrap.min.js
    |-- jquery.easing.min.js
    |-- jquery-3.4.1.min.js
    |-- jquery.magnific-popup.min.js
    |-- owl.carousel.min.js
    |-- popper.min.js
    |-- jquery.mb.YTPlayer.min.js
    |-- wow.min.js
    |-- scripts.js


  • bootstrap.min.js Bootstrap plugin js.
  • jquery.easing.min.js jQuery Easing it's jQuery plugin from GSGD to give advanced easing options.
  • jquery-3.4.1.min.js jQuery plugin.
  • jquery.magnific-popup.min.js Magnific Popup Js is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
  • owl.carousel.min.js Owl Carousel custom carousel js. It's Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
  • jquery.mb.YTPlayer.min.js Background video for youtube, vimeo background video js
  • wow.min.js Website animation for animation
  • scripts.js is contain all custom js.

Template customize and edit

HTML structure


   
   <!DOCTYPE html>
   <html lang="en">
       <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
       <!-- SEO Meta description -->
       <meta name="description" content="">
       <!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
       <!--title-->
       <!--favicon icon-->
       <!-- style -->
   </head>
       <body>
           
           
           <!--start header section-->
           <header class="header">
               <!--start navbar-->
               <nav class="navbar navbar-expand-lg fixed-top bg-transparent">
                   ...
               </nav>
               <!--end navbar-->
           </header>
           <!--end header section-->
           
          <!--body content wrap start-->
           <div class="main">
           
               <!--hero section start-->
              <section class="hero-section pt-100 background-img" style="background: url('img/app-hero-bg.jpg')no-repeat center center / cover">
                   ...
               </section>
               <!--hero section end-->
           
               <!--promo section start-->
               <section>
                  ...
               </section>
               <!--promo section end-->
           
               <!--about us section start-->
               <section id="about" class="about-us ptb-100 gray-light-bg">
                   ...
               </section>
               <!--about us section end-->
               ..............
           </div>
           <!--body content wrap end-->
           
           <!--shape image start-->
           <div class="shape-img subscribe-wrap">
               <img src="img/footer-top-shape.svg" alt="footer shape" class="img-fluid">
               <div class="container">
                   <!--footer subscribe form -->
               </div>
           </div>
           <!--shape image end-->
           
           <!--footer section start-->
           <footer class="footer-setion">
           
               <!--footer top start-->
               <div class="footer-top pt-150 pb-5 background-img-2"
                    style="background: url('img/footer-bg.png')no-repeat center top / cover">
                   
               </div>
               <!--footer top end-->
           
               <!--footer copyright start-->
               <div class="footer-bottom gray-light-bg pt-4 pb-4">
                   
               </div>
               <!--footer copyright end-->
           </footer>
           <!--footer section end-->
           
           <!-- javascript libraries and custom js -->
       </body>
   </html>



Template Head


   
<!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- SEO Meta description -->
        <meta name="description"
            content="AppCo app landing page template or product landing page template helps you easily create websites for your app or product,  landing page template form promotion and many more.">
        <meta name="author" content="ThemeTags">

        <!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
        <meta property="og:site_name" content=""/> <!-- website name -->
        <meta property="og:site" content=""/> <!-- website link -->
        <meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
        <meta property="og:description" content=""/> <!-- description shown in the actual shared post -->
        <meta property="og:image" content=""/> <!-- image link, make sure it's jpg -->
        <meta property="og:url" content=""/> <!-- where do you want your post to link to -->
        <meta property="og:type" content="article"/>

        <!--title-->
        <title>AppCo App Landing Page Template</title>

        <!--favicon icon-->
        <link rel="icon" href="img/favicon.png" type="image/png" sizes="16x16">

        <!--google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7COpen+Sans&display=swap"
            rel="stylesheet">

        <!--Bootstrap css-->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!--Magnific popup css-->
        <link rel="stylesheet" href="css/magnific-popup.css">
        <!--Themify icon css-->
        <link rel="stylesheet" href="css/themify-icons.css">
        <!--animated css-->
        <link rel="stylesheet" href="css/animate.min.css">
        <!--ytplayer css-->
        <link rel="stylesheet" href="css/jquery.mb.YTPlayer.min.css">
        <!--Owl carousel css-->
        <link rel="stylesheet" href="css/owl.carousel.min.css">
        <link rel="stylesheet" href="css/owl.theme.default.min.css">
        <!--custom css-->
        <link rel="stylesheet" href="css/style.css">
        <!--responsive css-->
        <link rel="stylesheet" href="css/responsive.css">

    </head>



Changing title, fonts, favicon

You can update title, favicon font and also OG info with SEO meta description.

Title

In this head section you can find the title tag. Just replace the text on title tag.


       
    <!--title-->
<title>AppCo App Landing Page Template</title>



favicon

if you replace favicon.png image or icon on img folder then favicon will automatically update.

       
    <!--favicon icon-->
    <link rel="icon" href="img/favicon.png" type="image/png" sizes="16x16">


fonts

AppCo uses 2 fonts: Montserrat & Open+Sans from the Google Fonts Library. You can change the fonts file in below link on head section.

       
    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7COpen+Sans&display=swap" rel="stylesheet">


We have used two fonts Sans and Montserrat. For body we use Open Sans and all type of heading we used Montserrat font.


We have two type of header Transparent header with white logo and Transparent header with color logo

Logo Setting

The Logo can be found in the Nav Container - .navbar on header section.


       
    <a class="navbar-brand" href="index.html"><img src="img/logo-white-1x.png" width="120" alt="logo" class="img-fluid"></a>



Image & Background image

How to change image and background image

Appco download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like img/your-image.jpg or img/your-image.svg or img/your-image.png

*We only included SVG images it's MIT license Open-source illustrations for every project you can use it.

for image

       
  <img src="your image path" alt="image alt text" class="img-fluid">

for background image

When you use background image then you should follow bellow structure .background-img need to call on parent div. 

       
  <section class="hero-section pt-100 background-img" style="background: url('img/hero-bg-2.jpg')no-repeat center center / cover">
      <div class="container">
          <div class="row">
              <!--SECTION CONTENTS-->
          </div>
      </div>
  </section>


Header Menu Item

You can find the menu inside the nav tag on header section. In this menu items you can change the menu text like - Home, Features, Pricing ...etc.

       
    <div class="collapse navbar-collapse main-menu" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link page-scroll dropdown-toggle" href="#" id="navbarDropdownHome" role="button"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Home
                </a>
                <div class="dropdown-menu submenu" aria-labelledby="navbarDropdownHome">
                    <a class="dropdown-item" href="index.html">Demo Template 1</a>
                    <a class="dropdown-item" href="index-2.html">Demo Template 2</a>
                    <a class="dropdown-item" href="index-3.html">Demo Template 3</a>
                    <a class="dropdown-item" href="index-4.html">Demo Template 4</a>
                    <a class="dropdown-item" href="index-5.html">Demo Template 5</a>
                    <a class="dropdown-item" href="index-6.html">Demo Template 6</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link page-scroll" href="#about">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link page-scroll" href="#features">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link page-scroll" href="#pricing">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link page-scroll" href="#screenshots">Screenshots</a>
            </li>
            <li class="nav-item">
                <a class="nav-link page-scroll" href="#team">Team</a>
            </li>
            <li class="nav-item">
                <a class="nav-link page-scroll" href="#contact">Contact</a>
            </li>
   
        </ul>
    </div>



Hero section

We have different hero section please check index.html to index-6.html demos

Here is index.html hero section included

       
    <!--hero section start-->
    <section class="hero-section pt-100 background-img"
             style="background: url('img/app-hero-bg.jpg')no-repeat center center / cover">
        <div class="container">
            <div class="row align-items-center justify-content-between pt-5 pb-5">
                <div class="col-md-7 col-lg-6">
                    <div class="hero-content-left text-white">
                        <h1 class="text-white"><span>Brainstorming</span> for desired perfect Usability</h1>
                        <p class="lead">
                            Our design projects are fresh and simple and will benefit your business greatly. Learn more
                            about our work!
                        </p>

                        <form action="#" method="post" class="subscribe-form">
                            <div class="d-flex align-items-center">
                                <input type="text" class="form-control input" id="email" name="email"
                                       placeholder="info@yourdomain.com">
                                <input type="submit" class="button btn solid-btn" id="submit" value="Subscribe">
                            </div>
                        </form>

                        <div class="video-promo-content py-4 d-flex align-items-center">
                            <a href="https://www.youtube.com/watch?v=9No-FiEInLA"
                               class="popup-youtube video-play-icon-without-bip video-play-icon mr-3"><span class="ti-control-play"></span></a> Watch Video Overview

                        </div>
                    </div>
                </div>
                <div class="col-md-5 col-lg-5">
                    <div class="hero-animation-img">
                        <img src="img/app-product.png" alt="app" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-img-absolute">
            <img src="img/hero-bg-shape-1.svg" alt="wave shape" class="img-fluid">
        </div>
    </section>
    <!--hero section end-->




Background Video section

We have background video hero section please check demo 5 or index-5.html

How to use your video on this section

       
    <!--hero section start-->
    <section class="hero-section pt-100 background-img"
             style="background: url('img/app-hero-bg.jpg')no-repeat center center / cover">
        <div class="container">
            <div class="row align-items-center justify-content-between pt-5 pb-5">
                <div class="col-md-7 col-lg-6">
                    <div class="hero-content-left text-white">
                        <h1 class="text-white"><span>Brainstorming</span> for desired perfect Usability</h1>
                        <p class="lead">
                            Our design projects are fresh and simple and will benefit your business greatly. Learn more
                            about our work!
                        </p>

                        <form action="#" method="post" class="subscribe-form">
                            <div class="d-flex align-items-center">
                                <input type="text" class="form-control input" id="email" name="email"
                                       placeholder="info@yourdomain.com">
                                <input type="submit" class="button btn solid-btn" id="submit" value="Subscribe">
                            </div>
                        </form>

                        <div class="video-promo-content py-4 d-flex align-items-center">
                            <a href="https://www.youtube.com/watch?v=9No-FiEInLA"
                               class="popup-youtube video-play-icon-without-bip video-play-icon mr-3"><span class="ti-control-play"></span></a> Watch Video Overview

                        </div>
                    </div>
                </div>
                <div class="col-md-5 col-lg-5">
                    <div class="hero-animation-img">
                        <img src="img/app-product.png" alt="app" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-img-absolute">
            <img src="img/hero-bg-shape-1.svg" alt="wave shape" class="img-fluid">
        </div>
    </section>
    <!--hero section end-->


This is background video hero section. In this section you can find bellow div. In this div you can see a youtube video link end of the link you can see your video ID like this gOqlwlQjVis you just replace this id. Another attribute is startAt:0 it's mean this video start from 0.

       
    <div class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=LV3cjaA7NtE',containment:'.video-section-wrap', quality:'highres', autoPlay:true, showControls: false, startAt:0, mute:true, opacity: 1}"></div>


Coming Soon Page

Under the pages on main menu you can find coming soon page. Go to js file and select scripts.js open it and find bellow code change this date 2022/01/30


    $('#clock').countdown('2022/01/30', function(event) {
        //code here
    });



Promo section



    <!--promo section start-->
    <section class="promo-section pt-100">
        <div class="container">
            <div class="row justify-content-center">
                <!--PROMO HEADING-->
            </div>
            <div class="row equal">
                <div class="col-md-4 col-lg-4">
                    <div class="single-promo single-promo-hover single-promo-1 rounded text-center white-bg p-5 h-100 wow fadeInLeft" data-wow-delay="0.2s">
                    <!--PROMO SINGLE CONTENT-->
                    </div>
                </div>
                <div class="col-md-4 col-lg-4">
                    <div class="single-promo single-promo-hover single-promo-1 rounded text-center white-bg p-5 h-100 wow fadeInLeft" data-wow-delay="0.4s">
                        <!--PROMO SINGLE CONTENT-->
                    </div>
                </div>
                <div class="col-md-4 col-lg-4">
                    <div class="single-promo single-promo-hover single-promo-1 rounded text-center white-bg p-5 h-100 wow fadeInLeft" data-wow-delay="0.6s">
                        <!--PROMO SINGLE CONTENT-->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--promo section end-->



footer tag contain footer section. in this footer section has footer logo, footer menu, copyright and social links.



    <!--footer section start-->
    <footer class="footer-setion">

        <!--footer top start-->
        <div class="footer-top pt-150 pb-5 background-img-2"
            style="background: url('img/footer-bg.png')no-repeat center top / cover">
            <div class="container">
                <div class="row justify-content-between">
                    <!--FOOTER TOP CONTENT-->
                </div>
            </div>
        </div>
        <!--footer top end-->

        <!--footer copyright start-->
        <div class="footer-bottom gray-light-bg pt-4 pb-4">
            <div class="container">
            <!--COPYRIGHT CONTENT-->
            </div>
        </div>
        <!--footer copyright end-->
    </footer>
    <!--footer section end-->




Utility Classes

We don't override Bootstrap class, so you can use bootstrap elements class. we have just created custom classes for this template.


Color

.color-primary .color-secondary

Background Color

.gray-light-bg, .primary-bg, .secondary-bg

Other classes

.ptb-100, .pt-100, .pb-100 .mt--120 ... etc


contact Forms

We have used 2 types of form in our template. The contact us form and Get a quote form. Both forms are done by the Ajax call and used PHP as a backend language. Here is the Javascript code and PHP code.

Go to the scripts.js file and check the following code:


    // contact form
    if($("#contactForm").length) {
        $("#contactForm").validator().on("submit", function (event) {
            if (event.isDefaultPrevented()) {
            // handle the invalid form...
                submitMSG(false, '.contact-us');
            } else {
            // everything looks good!
                event.preventDefault();
                submitContactForm();
            }
        });
    }


    function submitContactForm(){
        // Initiate Variables With Form Content
        var name    = $("#contactForm #name").val();
        var email   = $("#contactForm #email").val();
        var phone   = $("#contactForm #phone").val();
        var company = $("#contactForm #company").val();
        var message = $("#contactForm #message").val();

        $.ajax({
            type: "POST",
            url: "libs/contact-form-process.php",
            data: "name=" + name + "&email=" + email + "&phone=" + phone + "&company=" + company + "&message=" + message,
            success : function(text){
                if (text == "success"){
                    formSuccess();
                } else {
                    submitMSG(false, '.contact-us');
                }
            }
        });
    }

    function formSuccess(){
        $("#contactForm")[0].reset();
        submitMSG(true, '.contact-us');
    }

    function submitMSG(valid, parentSelector){
        if(valid){
            $(parentSelector + " .message-box").removeClass('d-none').addClass('d-block ');
            $(parentSelector + " .message-box div").removeClass('alert-danger').addClass('alert-success').text('Form submitted successfully');
        } else {
            $(parentSelector + " .message-box").removeClass('d-none').addClass('d-block ');
            $(parentSelector + " .message-box div").removeClass('alert-success').addClass('alert-danger').text('Found error in the form. Please check again.');
        }
    }



PHP file: libs/contact-form-process.php

Change the email address "hellothemetags@gmail.com" with your email address. Please make sure that you have given permission to send an email from your server.


    ...

    // change email with your email
    $EmailTo = "hellothemetags@gmail.com";
    $Subject = "AppCo:: New Message Received form contact";

    // prepare email body text
    $Body = "";
    $Body .= "Name: ";
    $Body .= $name;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $email;
    $Body .= "\n";
    $Body .= "Phone: ";
    $Body .= $phone;
    $Body .= "\n";
    $Body .= "Company: ";
    $Body .= $company;
    $Body .= "\n";
    $Body .= "Message: ";
    $Body .= $message;
    $Body .= "\n";

    // send email
    $success = mail($EmailTo, $Subject, $Body, "From:".$email);

    ...



Get the Quote Form

Go to the scripts.js file and check the following code:


    // Subscription
  if($("#getQuoteFrm").length) {
    $("#getQuoteFrm").validator().on("submit", function (event) {
        if (event.isDefaultPrevented()) {
          // handle the invalid form...
            submitMSG(false);
        } else {
          // everything looks good!
            event.preventDefault();
            submitGetQuoteForm();
        }
    });
  }

  function submitGetQuoteForm(){
    // Initiate Variables With Form Content
    var name = $('#getQuoteFrm input[name="name"]').val();
    var email = $('#getQuoteFrm input[name="email"]').val();
    var subject = $('#getQuoteFrm input[name="subject"]').val();
    var message = $('#getQuoteFrm textarea[name="message"]').val();
   
    if (!$('#getQuoteFrm #exampleCheck1').is(":checked")) {
        submitMSG(false, '.sign-up-form-wrap');
        return;
    }

    $.ajax({
        type: "POST",
        url: "libs/quote-form-process.php",
        data: "name=" + name + "&email=" + email + "&subject=" + subject + "&message=" + message,
        success : function(text){
            if (text == "success"){
                quoteFormSuccess();
            } else {
                submitMSG(false, '.sign-up-form-wrap');
            }
        }
    });
  }

  function quoteFormSuccess(){
    $("#getQuoteFrm")[0].reset();
    submitMSG(true, '.sign-up-form-wrap');
  }


PHP file: libs/quote-form-process.php

Change the email address "hellothemetags@gmail.com" with your email address. Please make sure that you have given permission to send an email from your server.


    // change email with your email
    $EmailTo = "hellothemetags@gmail.com";
    $Subject = "AppCo:: New Message Received form get quote";

    // prepare email body text
    $Body = "";
    $Body .= "Name: ";
    $Body .= $name;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $email;
    $Body .= "\n";
    $Body .= "Subject: ";
    $Body .= $subject;
    $Body .= "\n";
    $Body .= "Message: ";
    $Body .= $message;
    $Body .= "\n";

    // send email
    $success = mail($EmailTo, $Subject, $Body, "From:".$email);



Customer Support

Support

If you have any trouble while editing this template or if you simply want to ask a question about something, feel free to contact us at hellothemetags@gmail.com or to post your request on Themeforest support form.

Support includes

  • Responding to questions or problems regarding the item and its features
  • Fixing bugs and reported issues
  • Providing updates

Support doesn't include

  • Customization and installation services
  • Support for third party software and plug-ins

Support is taken very seriously, so every template is completely covered according to ThemeForest’s policies.

Credits

Images and Videos

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make AppCo a really beautiful template for our awesome users:



JS Libraries

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make AppCo a really beautiful template for our awesome users:



CSS and Fonts

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make AppCo a really beautiful template for our awesome users: