App Launch

App Landing Page HTML5 Template

Introdution

App Landing Page HTML5 Template. If you have any questions that aren’t covered in this article, please mail us at support@awaiken.com

 
 

Features

Folders & Files

Template folders and files are divided as following.

HTML Structure

This Template is a responsive layout and using Bootstrap v3.3.7 as css frameworks.

Here is the general structure of HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
     ....
    <!-- CSS LOAD -->
</head>
<body>

     <!-- Header Section Starts-->
     <header>
          <nav id="main-nav" class="navbar navbar-default navbar-fixed-top">
               <div class="container">
                    ....
                    <div class="navbar-collapse collapse" id="navigation">
                    <!-- Nabvar --->
                    </div>
               </div>
          </nav>
     </header>
     <!-- Header Section Ends-->

     <!-- Banner Section Starts -->
     <section class="banner parallax" id="home">
        ....
     </section>
     <!-- Banner Section Ends -->

     <!-- Features Section starts -->
      <section class="feature" id="feature">
        .... 
      </section> 
     <!-- Features Section Ends -->

    <!-- Key Features Section starts -->
    <section class="key-feature">
       ....
    </section>
    <!-- Key Features Section Ends -->

    <!-- How it work section starts -->
    <section class="how-it-work" id="howitwork">
       .... 
    </section> 
    <!-- How it work section Ends -->

    <!-- Request Download Link section starts -->
    <section class="request-download">
       .... 
    </section>
    <!-- Request Download Link section Ends-->

    <!-- Complete Project starts -->
    <section class="complete-project-area">
       ....
    </section> 
    <!-- Complete Project Section Ends -->

    <!-- App Screenshot Section starts -->
    <section class="screenshot">
       ....
    </section>
    <!-- App Screenshot Section Ends -->

    <!-- Testimonials & Newsletter Section starts -->
    <section class="testimonials-newsletter">
       ....
    </section>
    <!-- Testimonials & Newsletter Section Ends -->

   <!-- Pricing Section starts -->
   <section class="pricing" id="price">
      .... 
   </section> 
   <!-- Pricing Section Ends -->

   <!-- Our Support Section starts -->
   <section class="our-support" id="support">
      ....
   </section>
   <!-- Our Support Section Ends -->

   <!-- Contact us Section starts -->
   <section class="contact-us" id="contact">
      ....
   </section>
   <!-- Contact us Section Ends --> 

   <!-- Footer Section Starts --> 
   <footer> .... </footer> 
   <!-- Footer Section Ends -->

   <!-- Popup Page Privacy Policy -->
   <div class="popup-page mfp-hide" id="privacy-policy">
     ....
   </div>
   <!-- Popup Page Privacy Policy End-->

   <!-- Popup Page Term & Condition -->
   <div class="popup-page mfp-hide" id="term-condition">
     ....
   </div>
   <!-- Popup Page Term & Condition End--> 

  <!-- JS LOAD -->
</body>
</html>

CSS Files

We have used following CSS files to create different layout of app launch.

  1. bootstrap.min.css - framework
  2. font-awesome.min.css - font icons
  3. flaticon.css - flaticon icons
  4. linearicons.css - font icons
  5. owl.carousel.css - owl carousel
  6. swiper.min.css - Swiper carousel
  7. slicknav.css - slicknav menu
  8. animate.css - animated css
  9. magnific-popup.css - popup for screenshot, pages & video
  10. custom.css - Css file for layout
Note: We have included only required file in particular layout.

JavaScript

We have used following Javascript files to create different layout of app launch.

  1. jquery-1.12.4.min.js - Javascript library
  2. typed.js - Animated Typing
  3. jquery.parallax-1.1.3.js - Parallax background
  4. SmoothScroll.js - SmoothScroll
  5. bootstrap.min.js - Bootstrap framework js
  6. validator.min.js - Jquery for Form validation
  7. waypoints.min.js - Counterup js file
  8. jquery.counterup.min.js - Counterup js file
  9. owl.carousel.js - Owl carousel for testimonial
  10. slicknav.js - Responsive menu for mobile
  11. wow.js - Animation
  12. jquery.magnific-popup.min.js - Magnific Popup
  13. swiper.min.js - Swiper carousel
  14. function.js - configuration code for layout
Note: We have included only required file in particular layout.

Contact form PHP

form-process.php - is used for sending an email 
 
You need to add your email, please open this file and edit variable $EmailTo.
$EmailTo = "demo@awaiken.com";

Youtube Video ( For layout 1 only )

This section is only for index-video.html page.

If you want to change header background youtube video. Open index-video.html file and find below snippet.

<a class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=obLiXbMPWrs',containment:'#home',
mobileFallbackImage:'images/video-bg.png', showControls:false, autoPlay:true, zoom:0, loop:true, 
mute:true,  startAt:2, opacity:1, quality:'default'}"></a>

In above code change videoURL parameter.

Flaticon

We have used Flaticon for some layouts, See the following image ( layout 2 ). If you want to change icon, here is the steps https://www.flaticon.com/iconfonts how to convert icon to font-icon and how to use it into template.

Sources and Credits

Twitter Bootstrap framework:
 
 
Fonts:
 
 
Icons:
 
 
Images in preview are used from:
 
Note : The images used in the template are not included in the main download file, they are only for the preview purpose.

Thanks

 
If you have any questions that aren’t covered in this article, please feel free to contact us at support@awaiken.com