App Landing Page HTML5 Template. If you have any questions that aren’t covered in this article, please mail us at support@awaiken.com
Template folders and files are divided as following.
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>
We have used following CSS files to create different layout of app launch.
We have used following Javascript files to create different layout of app launch.
$EmailTo = "demo@awaiken.com";
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.
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.