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

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

  1. bootstrap.min.css - Framework
  2. font-awesome-all.css - Font icons font-awesome
  3. flaticon.css - Font icons flaticon
  4. swiper.min.css - Swiper carousel
  5. animate.css - animated css
  6. magnific-popup.css - popup for screenshot, images & video
  7. sliderstyle.css - MS Slider CSS
  8. 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-3.6.0.min.js - Javascript library
  2. SmoothScroll.js - SmoothScroll
  3. bootstrap.min.js - Bootstrap framework
  4. validator.min.js - Contact form validation
  5. jquery.waypoints.min.js - Trigger a function when you scroll to an element
  6. jquery.counterup.min.js - Animates a number from zero (counting up towards it)
  7. wow.js - Animation
  8. jquery.magnific-popup.min.js - Magnific Popup
  9. swiper.min.js - Swiper carousel
  10. parallaxie.js - parallax effects
  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 = "info@yourdomain.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.