ULaunch

Multi Purpose Products Landing Page


 

Features

Template folders and files are divided as following.

  1. css - contains css files
  2. fonts - contains fonts files
  3. images - contains images
  4. js - contains javascript files
  5. index.html - Main landing page
  6. form-process.php - contact form process file

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 class="navbar navbar-default navbar-fixed-top navbar-scrollspy bootsnav" 
data-minus-value-desktop="68" data-minus-value-mobile="68" data-speed="1000"> <div class="container"> <!-- Start Header Navigation --> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="images/logo.png" class="logo" alt=""></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> <i class="fa fa-bars"></i> </button> </div> <!-- End Header Navigation --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav navbar-right"> <!-- Menu Items Here --> </ul> </div><!-- /.navbar-collapse --> </div> </nav> </header> <!-- Header Section Ends-->      <!-- Banner Section Starts -->      <section class="banner" id="home"> ....      </section>   <!-- Banner Section Ends -->      <!-- Features section starts --> <section class="feature" id="feature"> .... </section> <!-- Features section Ends --> <!-- About Product section starts --> <section class="about-product"> .... </section> <!-- About Product section Ends --> <!-- Footer Section Starts --> <footer> .... </footer> <!-- Footer Section Ends --> <!-- JS LOAD --> </body> </html>

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

  1. bootstrap.min.css - Framework
  2. bootsnav.css - menu
  3. font-awesome.min.css - Font icons font-awesome
  4. flaticon.css - Font icons flaticon
  5. swiper.min.css - Swiper carousel
  6. animate.css - animated css
  7. magnific-popup.css - popup for screenshot, images & video
  8. sliderstyle.css - MS Slider CSS
  9. custom.css - Css file for layout
Note: We have included only required file in particular layout.

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

  1. jquery-1.12.4.min.js - Javascript library
  2. SmoothScroll.js - SmoothScroll
  3. bootstrap.min.js - Bootstrap framework
  4. bootsnav.js - Bootstrap menu
  5. validator.min.js - Contact form validation
  6. jquery.waypoints.min.js - Trigger a function when you scroll to an element
  7. jquery.counterup.min.js - Animates a number from zero (counting up towards it)
  8. wow.js - Animation
  9. jquery.magnific-popup.min.js - Magnific Popup
  10. swiper.min.js - Swiper carousel
  11. function.js - configuration code for layout
Note: We have included only required file in particular layout.
form-process.php - is used for sending an email 
 
You need to add your email, please open "form-process.php" file and edit variable $EmailTo.
$EmailTo = "demo@awaiken.com";

We have used two font library

  1. fontawesome : Here you can see icon cheatsheet https://fontawesome.com/cheatsheet
  2. flaticon : We have used Flaticon for some layouts. 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 HTML template.

To use element in your template follow the following steps

  1. Copy elements.css file from elements/css folder to your template css folder
  2. Copy elements.js file from elements/js folder to your template js folder
  3. Copy images files from elements/images folder to your template images folder
Note: Don't modify our elements.css and elements.js file. We recomonded you to please make your one own css file & one js files and add that in your page, so whenever the update of ULaunch comes it does not affect your code.

To use accordions in your template open elements/accordion.html and follow the following steps.

  1. Select your style
  2. Bottom of each style you can see "View Code" button click on it, now you can see HTML code.
  3. Copy HTML code in your template at your desire location.

To use buttons in your template open elements/buttons.html and follow the following steps.

  1. Select your style
  2. Right side of each title you can see "View Code" button click on it, now you can see HTML code.
  3. Copy HTML code in your template at your desire location.

To use Infobar in your template open elements/infobar.html and follow the following steps.

  1. Select your style
  2. Right side of each title you can see "View Code" button click on it, now you can see HTML code.
  3. Copy HTML code in your template at your desire location.

To use Offer Box in your template open elements/offerbox.html file and follow the following steps.

  1. Select your style
  2. Right side of each title you can see "View Code" button click on it, now you can see HTML code.
  3. Copy HTML code in your template at your desire location.

To use Pricing Box in your template open elements/pricing-box.html file and follow the following steps.

  1. Select your style
  2. Bottom of each style you can see "View Code" button click on it, now you can see HTML code.
  3. Copy HTML code in your template at your desire location.

To use Product Box in your template open elements/product-box.html file and follow the following steps.

  1. Select your style
  2. Bottom of each style you can see "View Code" button click on it, now you can see HTML code.
  3. Copy HTML code in your template at your desire location.

To use Progress Bar in your template open elements/progress-bar.html file and follow the following steps.

  1. Select your style
  2. Bottom of each style you can see "View Code" button click on it, now you can see HTML code.
  3. Copy HTML code in your template at your desire location.
  4. Copy jquery.waypoints.min.js file from elements/js folder to your template js folder and include it in template using script tag.

To use Stats Counter in your template open elements/stats-counter.html file and follow the following steps.

  1. Select your style
  2. Bottom of each style you can see "View Code" button click on it, now you can see HTML code.
  3. Copy HTML code in your template at your desire location.
  4. Copy jquery.waypoints.min.js and jquery.counterup.min.js file from elements/js folder to your template js folder and include both file in template using script tag.

We have used Counter-Up jQuery plugin for Stats Counter. For more detail read here https://github.com/bfintal/Counter-Up

To use Tab in your template open elements/tab.html file and follow the following steps.

  1. Select your style
  2. Bottom of each style you can see "View Code" button click on it, now you can see HTML code.
  3. Copy HTML code in your template at your desire location.
  4. Copy bootstrap-responsive-tabs.css file from elements/css folder to your template css folder and include it in template using link tag.
  5. Copy jquery.bootstrap-responsive-tabs.min.js file from elements/js folder to your template js folder and include it in template using script tag.

To use Team Box in your template open elements/team-box.html file and follow the following steps.

  1. Select your style
  2. Bottom of each style you can see "View Code" button click on it, now you can see HTML code.
  3. Copy HTML code in your template at your desire location.

We have used Counter-Up jQuery plugin for Stats Counter. For more detail read here https://github.com/bfintal/Counter-Up

To use Testimonials in your template open elements/testimonials.html file and follow the following steps.

  1. Select your style
  2. Bottom of each style you can see "View Code" button click on it, now you can see HTML & JS code.
  3. Copy HTML code in your template at your desire location.
  4. Copy JS code in your template JS file.
  5. Copy swiper.min.css file from elements/css folder to your template css folder and include it in template using link tag.
  6. Copy swiper.min.js file from elements/js folder to your template js folder and include it in template using script tag.

We have used Swiper slider jQuery plugin for testimonials. For more detail read here https://github.com/nolimits4web/swiper

Twitter Bootstrap framework:
 
 
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.