.Lancio - Documentation

Lancio - HTML Template - Documentation

Thank you for purchasing Lancio - A multi-purpose HTML Template! We strongly recommend you read this documentation before using Lancio Template.

Getting Started

A brief guide to working with Lancio.

Bootstrap

If you are not familiar with Bootstrap, we strongly recommend you take a look at the online documentation.

FontAwesome icons do not appear when you are viewing the page from a local file. This is because FontAwesome library is linked to an online server.
View online documentation

Please Note: We do not offer support for customizations or plugins in our support policy, If you have a question related to setting up the Template or a Bug, please drop us a line at s.schintu@gmail.com.

File Structure

Uncompress the main folder downloaded from Themeforest - lancio_html.zip.

HTML Pages

.html - HTML templates supplied in this template. Contained in these pages is a precompiled static site and equivalent to what you see in the online demo.
Pages are named according to their purpose, and you can open any of the files in your browser to see it in action, or modify the markup to suit your needs.

Image & Video Assets

Images/Videos are intended for the online demo and are "not" included unless specifically stated.

Contains all of the assets referenced in the html pages. Any images or videos used in the theme are contained inside assets folder.

Images used in html pages should be stored inside assets/img folder & child-folders.
Videos used in html pages should be stored inside assets/video folder & child-folders.

Styles (CSS)

Style sheets .css files used in the theme are contained inside css folder.

bootstrap.min.css contains the native styles of Bootstrap 4.3.1
style.css contains the main styles for this Template.
animate.css contains native styles for Animate.css.
aos.css contains native styles for AOS plug-in.

JS & PHP files

JavaScript - `js` folder

bootstrap.min.js contains required Bootstrap 4.3.1 code.
jquery-3.4.1.min.js contains required jQuery scripts.
jquery.countdown.min.js contains the jQuery countdown script.
jquery.validate.js contains jQuery validation for contact form.
contact.js contains the contact form code.
aos.js contains the AOS plug-in code.
main.js contains additional and customized scripts for the Template.

PHP - `php` folder

contact.php file to edit the email & POST information for the contact form elements.

Page Strucutre

All template pages are code friendly, clear and well organized.

Page starts by uploading the style sheets.

                
                    <!-- Upload Font "https://fonts.google.com/" -->

                    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,500i,700&display=swap" rel="stylesheet">

                    <!-- Bootstrap CSS -->

                    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

                    <!-- Styles CSS -->

                    <link rel="stylesheet" type="text/css" href="css/style.css" />

                    <!-- Load Font Awesome Kit -->

                    <script src="https://kit.fontawesome.com/747940bb1c.js"></script>

                    <!-- Load Animate CSS -->

                    <link rel="stylesheet" type="text/css" href="css/animate.css">

                    <!-- Load AOS CSS -->

                    <link rel="stylesheet" type="text/css" href="css/aos.css">

Each section is commented at start

                
                    <body class="dark">

                     <!-- Content Starts -->

                     <header class="">

                      <div class="container"> 

                       <!-- Change path logo here -->

                       <div class="logo left"><a href=""><mark class="light-blue"><span class="t-red">.</span>Lancio</mark></a>

                       </div>

                      </div>

                     </header>

                    <!-- Section -->

                    <div id="start" class="section back one">

and end

                
                     </div>

                    </div><!-- Section Ends -->

At the very end of each page we load the script files. (JS and extra coding functions)

                
                    <!-- JS files upload -->

                    <script src="js/jquery-3.4.1.min.js"></script> 

                    <script src="js/bootstrap.min.js"></script>

                    <script src="js/jquery.validate.js"></script>

                    <script src="js/contact.js"></script> 

                    <script src="js/main.js"></script>

                    <script src="js/aos.js"></script>

                    <script src="js/jquery.countdown.min.js"></script>

Styles & Colors

This template gives you the flexibility to generate unlimited color combinations by simply changing the class name. You can easily change colors from the style.css sheet, but we added some awesome web colors ready for you to use.

Available colors for this template:

#051b35 dark
#05172bdark-two
#000000black
#999999grey
#ffffffwhite
#f6f8falight-grey
#ffededlight-red
#ebeee5light-green
#f2f2fclight-blue
#17B88Fgreen
#f73859red
#3974D4blue
#434bdfblue-vibrant
#ff9600orange
#ffd200yellow
#570051violet
#ca195dpink

Style Variations

The class color is related to the background color of any element. eg:. dark

To remove the background color of any element. eg:. no-bg

Adding shadow will add a shadow to the element. eg:. shadow
Adding b- (for border) will color the border of the element. eg:. b-dark
Adding t- (for text) will color the text of the element. eg:. t-dark

Example:

dark t-white
yellow t-dark
b-blue-vibrant t-blue-vibrant
I am a vibrant blue! t-blue-vibrant
I am green t-green

Button styles

There 2 main types of buttons. primary-btn (full colored) & primary-line-btn (adds a border around the button). Both by default with a rounded border.

But it doesn't end here. We've added some nice variations to give you full flexibility.

Adding round will add a border radius of 50px. eg:. primary-btn round
Adding square will remove any border radius making the button square. eg:. primary-btn square
Adding small will reduce the button size. eg:. primary-btn small
Adding large will increase the button size. eg:. primary-btn large

Example:

primary-btn small dark t-white
primary-btn red t-white
primary-btn large shadow blue-vibrant t-white
primary-line-btn b-orange t-orange
primary-line-btn round b-pink t-pink
primary-btn square yellow t-dark

Backgrounds

As explained, to change the background color simply add the color class. red

To add a background image (jpg or png) simply add the class back and the number of background two.
This template comes with 5 background classes. ("one" "two" "tree" "four" "five")
Background images are stored inside assets/img/backs

Got it? Limitless for real.

Clean & Fresh Design

Elegant, minimalistic & fresh design with attention to details.

Testimonial Carousel

To change the add or edit the testimonials widget go to Testimonial code line.

                    
                        <!-- Testimonials -->

                <div class="testimonial-container" data-aos="fade-down" data-aos-anchor-placement="center-bottom">

The widget uses Bootstrap default carousel. Each item is customizable with classes using colors and styles explained above.

If you are not familiar with Bootstrap, we strongly recommend you take a look at the carousel documentation.

                
                    <!-- Testimonial Item -->

                    <div class="carousel-item active"> 

                     <div class="item">

                      <div class="img center"><img src="assets/img/user2.jpg"  alt="Lancio" class="img-fluid"></div>

                       <div class="icon t-white"><i class="fas fa-quote-right"></i></div>

                       <div class="text t-white">Lancio is a must-have tool. Maybe one of the best product launch templates so far in the market. Recommended 100%.</div>

                       <div class="name t-blue-vibrant">MARIA De ANDRE'</div>

                       <div class="role t-light-blue">Artist</div>

                      </div>

                     </div>

Price Table Packs

To change the add or edit the Price Packs widget go to Price Table code line.

                    
                        <!-- Price Table -->

                    <div class="col-lg-4" data-aos="fade-right" data-aos-anchor-placement="center-bottom">

The widget uses Bootstrap default grid system. Each item is customizable with classes using colors and styles explained above.

If you are not familiar with Bootstrap grid system, we strongly recommend you take a look at the bootstrap grid system.

                
                    <!-- Price Table -->

                    <div class="col-lg-4" data-aos="fade-right" data-aos-anchor-placement="center-bottom">

                     <div class="info-box white">

                      <div class="t-dark mini-title">Free</div>

                       <div class="price t-blue-vibrant"><span class="currency">$</span>0<span class="value">/mo</span></div>

                           <ul class="highlights">

                            <li class="hg-item t-dark"><i class="fas fa-check t-green"></i> Create unique websites</li>

                            <li class="hg-item t-dark"><i class="fas fa-check t-green"></i> Built in Boostrap 4</li>

                            <li class="hg-item not-included t-dark"><i class="fas fa-times t-red"></i> Stunning ready colors</li>

                            <li class="hg-item not-included t-dark"><i class="fas fa-times t-red"></i> Limiteless variations</li>

                        <li class="hg-item not-included t-dark"><i class="fas fa-times t-red"></i> Optimize all your efforts</li>

                            <li class="hg-item t-dark"><i class="fas fa-check t-green"></i> Basic Support</li>

                            <li class="hg-item"><a href="" class="primary-line-btn b-blue-vibrant t-blue-vibrant">Get Started</a></li>

                          </ul>

                        </div>

                    <!-- End -->

To mask a line as "not included" add the not-included class

                    
                            <li class="hg-item not-included t-dark"><i class="fas fa-times t-red"></i> Optimize all your efforts</li>

To highlight a specific table, add the featured class at main item level

                    
                        <!-- Price Table -->

                    <div class="col-lg-4" data-aos="fade-right" data-aos-anchor-placement="center-bottom">

                         <div class="info-box featured white">

Contact Form

To change the email and other email settings, go to php/contact.

Open contact.php file.
Scroll down around line 29 & fill out the correct info.
Save & Publish

                
                    <//Change E-mail subject here>

                    $subject ="New Registration from site!";

                    $message ="New request!\n\nE-mail: ".$email;

                    <//Change your E-mail here>

                    $mail = mail("youremail@youremailaddress.com", $subject, $message,

Countdown

To change the countdown settings.

Open a -countdown.html template file.
Scroll down till the end of the page.
Change the settings where it says //Change the date here

                
                    <!-- COUNTDOWN -->

                    <script>

                       $("#getting-started")

                      <//Change the date here>

                     .countdown("2020/01/01", function(event) {

                          $(this).text(

                             event.strftime('%D days %H:%M:%S')

                          );

                       });

                    </script>

                    <!-- End Countdown -->

Animation FX

The beautiful animations are created using:

Animate.css by: Daniel Eden
AOS animation by: michalsnik

At each section, block or div, you can change the direction and type of animation

data-aos="fade-left" data-aos-anchor-placement="center-bottom"

To understand better how it works and all available FX's - visit AOS animation by: michalsnik

                
                    <div class="content row center">

                     <div class="col-lg-3" data-aos="fade-right" data-aos-anchor-placement="center-bottom">

                    <div class="info-box border b-blue-vibrant">