Smiley
HTML Business & Startup Landing Page Template
Smiley is Business & Startup HTML landing page template with modern animation and clean features. In addition real flexibility and customization. It comes with various banner content for leadgen and clickthrough purpose. We hope you like it! :)
Welcome! First of all we want to thank you for purchasing our Premium Startup Landing Page Template
We really do appreciate every sale. If you like our work please do not forget to rate it. It helps us in developing new and better items.
In the following sections we will explain how to set up and use it the easiest way possible. If you have any questions that you feel should have been in this document you can contact us through our profile page on themeforest.net/user/morad and we'll get back to you as soon as possible. Thanks so much!!!
For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit this tempate.
Use Firebug or Chrome Developer Tools.
Do not start from scratch, use an existing page from the demo and modify it to learn how it works.
Quickly find what you are looking for in this document by using your browser's "Find in Page" feature, typically Control + F.
Don't forget to re-explore the live demo for layouts, usage ideas and sample code.
- Based on Twitter Bootstrap 3.3.5
- Built With Sass
- 100% W3C Valid Files
- Fully Responsive Layout (PC, Tablet and Mobile phone)
- Cross Browser Compatible (Chrome, Opera, Safari, Mozzila, IE9+)
- Taking Care of Content Posibbilities
- One Page Scroll Nav
- Banner Slider, Background Video, Parallax and Fullscreen
- Popup Preview Leadgen Form.
- 7 Content Blocks
- 11 Skins color
- Unlimited Colors
- Content Scroll Animation
- Working PHP Form With Validation
- Very Easy to Customize
- Very Detailed Documentation
- Font Awesome Icons
- ET Line Icons
- Over 800 Google Web Fonts You Can Use
HTML folder is structured as following:
css - contains all sass and css files
js - contains all js files
images - separated into 2 folders. 1st "general-elements" contains general elements like pattern, logo and related design elements. 2nd "files" contains the images used in preview.
php - contains php files related to forms.
13 .html files - for main page.
In HTML Structure, we will talk about every structure of all content used as possible. These content are as following:
HTML Markup
Travel Tour template is based on Bootstrap v3.3.5 - a collection of CSS and JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
Bootstrap's base grid is a variation of the grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.
The default Bootstrap3 grid system is composed by 12 columns, named like "col-*-1", "col-*-2", "col-*-3"...."col-*-12". Grid systems are used for creating page layouts through a series of rows and columns that house your content.
Each .html file contains the HTML structure of the template. Here is the general structure (shortened):
<div class="container">
<div class="row">
<div class="col-md-12">1 Column - Content goes here</div>
</div>
<div class="row">
<div class="col-md-6">1/2 Column - Content goes here</div>
<div class="col-md-6">1/2 Column - Content goes here</div>
</div>
<div class="row">
<div class="col-md-4">1/3 Column - Content goes here</div>
<div class="col-md-4">1/3 Column - Content goes here</div>
<div class="col-md-4">1/3 Column - Content goes here</div>
</div>
<div class="row">
<div class="col-md-3">1/4 Column - Content goes here</div>
<div class="col-md-3">1/4 Column - Content goes here</div>
<div class="col-md-3">1/4 Column - Content goes here</div>
<div class="col-md-3">1/4 Column - Content goes here</div>
</div>
</div>
General Structure
All HTML files has the same structure. I made this similarity to save time and efforts.
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- Meta
============================================= -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1, max-scale=1">
<!-- Stylesheets
============================================= -->
<link href="css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Poppins:300,400,600,700" rel="stylesheet">
<!-- Favicon
============================================= -->
<link rel="shortcut icon" href="images/general-elements/favicon/favicon.png">
<link rel="apple-touch-icon" href="images/general-elements/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/general-elements/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/general-elements/favicon/apple-touch-icon-114x114.png">
<!-- Title
============================================= -->
<title>Smiley</title>
</head>
<body>
<div id="scroll-progress"><span class="scroll-percent"></span></div>
<!-- Loading Progress
============================================= -->
<div id="loading-progress">
</div><!-- #loading-progress end -->
<!-- Document Full Container
============================================= -->
<div id="full-container">
<!-- Header
============================================= -->
<header id="header" class="style-1 anim-moveleft" data-scroll-index="0">
<div id="header-wrap">
.
.
.
<div id="mobile-menu-wrap">
.
.
</div><!-- #mobile-menu-wrap end -->
</div><!-- #header-wrap end -->
</header><!-- #header end -->
<!-- Slider
============================================= -->
<section id="banner">
<div id="home" class="banner-parallax" data-scroll-index="0">
<div class="banner-slider">
.
.
.
</div><!-- .banner-slider end -->
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
<!-- Content
============================================= -->
<section id="content">
<div id="content-wrap">
.
.
.
</div><!-- #content-wrap -->
</section><!-- #content end -->
<!-- Footer Mini
============================================= -->
<footer id="footer-mini">
.
.
.
</footer><!-- #footer-mini end -->
</div><!-- #full-container end -->
<a class="scroll-top-icon scroll-top" href="#"><i class="fa fa-angle-up"></i></a>
<!-- External JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
.
.
.
<script src='js/functions.js'></script>
</body>
</html>
Now i will talk about each main section as following:
<head>
<head> contains common meta tags, title, favicon and the attachment of CSS stylesheet.
<head>
<!-- Meta
============================================= -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1, max-scale=1">
<!-- Stylesheets
============================================= -->
<link href="css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Poppins:300,400,600,700" rel="stylesheet">
<!-- Favicon
============================================= -->
<link rel="shortcut icon" href="images/general-elements/favicon/favicon.png">
<link rel="apple-touch-icon" href="images/general-elements/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/general-elements/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/general-elements/favicon/apple-touch-icon-114x114.png">
<!-- Title
============================================= -->
<title>Smiley</title>
</head>
Body
<body> contains the appearing content like header, main content and footer. JS attachment is at the end of body tag
<body>
<div id="scroll-progress"><span class="scroll-percent"></span></div>
<!-- Loading Progress
============================================= -->
<div id="loading-progress">
</div><!-- #loading-progress end -->
<!-- Document Full Container
============================================= -->
<div id="full-container">
<!-- Header
============================================= -->
<header id="header" class="style-1 anim-moveleft" data-scroll-index="0">
<div id="header-wrap">
.
.
.
<div id="mobile-menu-wrap">
.
.
</div><!-- #mobile-menu-wrap end -->
</div><!-- #header-wrap end -->
</header><!-- #header end -->
<!-- Slider
============================================= -->
<section id="banner">
<div id="home" class="banner-parallax" data-scroll-index="0">
<div class="banner-slider">
.
.
.
</div><!-- .banner-slider end -->
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
<!-- Content
============================================= -->
<section id="content">
<div id="content-wrap">
.
.
.
</div><!-- #content-wrap -->
</section><!-- #content end -->
<!-- Footer Mini
============================================= -->
<footer id="footer-mini">
.
.
.
</footer><!-- #footer-mini end -->
</div><!-- #full-container end -->
<a class="scroll-top-icon scroll-top" href="#"><i class="fa fa-angle-up"></i></a>
<!-- External JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
.
.
.
<script src='js/functions.js'></script>
</body>
There are 3 uses for the banner, Banner Slider, Banner Parallax and Video Background. This beside a list of header content types, it will be as following:
- Banner Slider
- Banner Parallax
- Video Background
- Banner Fullscreen
- Leadgen Subscribe Mailchimp
- Leadgen 1 Left
- Leadgen 1 Right
- Leadgen 2
- Video Box 1 Left
- Video Box 1 Right
- Video Box 2 Left
- Video Box 2 Right
- Video Button 1 Left
- Video Button 1 Right
- Video Button 1 Center
First, the Banner container has the following code:
<!-- Slider
============================================= -->
<section id="banner" class="rounded-bottom">
.
.
.
</section><!-- #banner end -->
If you want to show the Rounded Bottom style, just add class "rounded-bottom" to the <section id="banner"> element.
They will be explained as following:
1. Banner Slider
Banner Slider is the main slider of the template. It's built with OwlCarousel.
It has the following code:
<!-- Slider
============================================= -->
<section id="banner">
<div id="home" class="banner-parallax" data-scroll-index="0">
<div class="banner-slider">
<ul class="owl-carousel slider-img-bg">
<li>
<div class="slide">
<img src="images/files/sliders/banner/img-1.jpg">
.
.
.
</div><!-- .slide end -->
</li>
<li>
.
.
.
</li>
</ul>
</div><!-- .banner-slider end -->
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
Each slide is a single <li>
The <img> tag in the above code is for the appearing background image for each slide.
After the <img> tag, there will be each slide content which represent the overlay content. It has the following code:
<!-- Slider
============================================= -->
<section id="banner">
<div id="home" class="banner-parallax" data-scroll-index="0">
<div class="banner-slider">
<ul class="owl-carousel slider-img-bg">
<li>
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.30"></div><!-- .overlay-colored end -->
<div class="overlay-pattern" data-bg-color="#000" data-bg-color-opacity="0"></div><!-- .overlay-pattern end -->
<div class="slide">
<img src="images/files/sliders/banner/img-1.jpg">
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="banner-center-box text-center">
<h1>
Awesome & Creative<br><span class="colored">Travel Template</span>
</h1>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
<a class="btn colorful large hover-dark" href="#">Eplore More</a>
</div><!-- .banner-center-box end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
</div><!-- .slide end -->
</li>
<li>
.
.
.
</li>
</ul>
</div><!-- .banner-slider end -->
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
When you use dark background pre each slide, you can add class "text-white" to <div class="banner-center-box">
Also if you want make texts to be text aligned left, just remove class "text-center" from <div class="banner-center-box">
You have the ability to add Overlay Colored layer and Overlay Pattern layer for each slide.
They will be as following:
Overlay Colored
You can use the style of Overlay Colored layer by adding <div> with class="overlay-colored" directly before .section-inner as shown above.
You can control color and color opacity manually through 2 data attributes that you can include with this .overlay-colored element.
The 1st data attribute is data-bg-color which accepts only hexadecimal of 6 digits. Look at the code example used above.
The 2nd data attribute is data-bg-color-opacity which controls the opacity of the color. It accepts values from 0 to 1. Look at the code example above.
They are listed as following:
- Background Color : Add data-bg-color.
It must have 6 letters of Hex value.
- Background Color Opacity : Add data-bg-color-opacity.
You can change the opacity value by adding value between 0 to 1.
Overlay Pattern
You can use the style of Overlay Pattern layer by adding <div> with class="overlay-pattern" directly before .section-inner and after Overlay Colored as shown above.
You can also control color and color opacity (if you want to use) manually through 2 data attributes that you can include with this .overlay-pattern element. You can get the 2 data attributes from the above overlay Colored.
2. Banner Parallax
You can only use the banner section without slider, just making it work as parallax background. You also can use the same content used in the slider.
It has the following code:
<!-- Slider
============================================= -->
<section id="banner">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-6.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.50"></div><!-- .overlay-colored end -->
<div class="overlay-pattern" data-bg-color="#000" data-bg-color-opacity="0"></div><!-- .overlay-pattern end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="banner-center-box text-center">
<h1>
Awesome & Creative<br><span class="colored">Travel Template</span>
</h1>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
<a class="btn colorful large hover-dark" href="#">Eplore More</a>
</div><!-- .banner-center-box end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
Take care that the first element must be <img> in the .banner-parallax. This img tag is used to set the background of the banner parallax.
You can also use Overlay Pattern and Overlay Colored like used in banner slider and prallax sections in main content of the template.
They use the same way they are using in Banner Slider, but just add these 2 elements before the element with class="slide-content" as shown in the above code.
3. Video Background
Use video background in banner section just by adding div element with class "video-background"before the element with class="slide-content" as following:
<!-- Slider
============================================= -->
<section id="banner">
<div class="banner-parallax">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.50"></div><!-- .overlay-colored end -->
<div class="overlay-pattern" data-bg-color="#000" data-bg-color-opacity="0"></div><!-- .overlay-pattern end -->
<div class="video-background" data-property="{videoURL:'BZWm8oNSPIU'}"></div><!-- end .video-background end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="banner-center-box text-center">
<h1>
Awesome & Creative<br><span class="colored">Travel Template</span>
</h1>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
<a class="btn colorful large hover-dark" href="#">Eplore More</a>
</div><!-- .banner-center-box end -->
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
To specify the video you want to use, just add data attribute data-propery. Inside it, you will find variable called videoURL.
Give it the value with the id of the video you want to use.
4. Banner Fullscreen
To make the banner appears as a fullscreen, just add class="fullscreen" to the <section id="banner"> element as following:
<!-- Slider
============================================= -->
<section id="banner" class="fullscreen">
.
.
5. Leadgen Subscribe MailChimp
The use of MailChimp subscribe is available in this template in the banner section.
It has the following code:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-1.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.3"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="banner-center-box text-white">
<h1 class="anim-movebottom-seq">
<span class="colored">Smile</span>. It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
<form class="signup-form anim-movebottom-seq">
<img src="images/general-elements/signup-form.png" alt="">
<div class="sf1-notifications">
<div class="sf1-notifications-content"></div>
</div><!-- .sf1-notifications end -->
<div class="form-group">
<input type="email" placeholder="You Email">
<input type="submit" class="form-control" value="Sign Up">
</div><!-- .form-group end -->
</form><!-- .signup-form end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-8 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
There is related content with the form which is used to show error popup message with class "sf1-notifications". It's existed inside the form <form class="signup-form">.
as this form:
<div class="sf1-notifications">
<div class="sf1-notifications-content"></div>
</div><!-- .sf1-notifications end -->
To use your own mailchimp post URL, in custom.js file, go to the "Mailchimp Subscribe Form" section and change the value of url option in the following code with your own mailchimp post URL:
// *** Mailchimp Subscribe Form *** //
$( ".signup-form" ).ajaxChimp({
.
.
url: "http://themeforest.us12.list-manage.com/subscribe/post?u=271ee03ffa4f5e3888d79125e&id=163f4114e2" //Replace this with your own mailchimp post URL.
.
.
.
});
6. Leadgen 1 Left
There are 2 form styles; vertical and horizontal. This one style is the vertical one with 2 positions options; left and right.
This one is for the left position style. It's as following:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-13.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.7"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-4 pl-40 pl-md-15">
<div class="banner-center-box text-white">
<h1 class="anim-movebottom-seq">
<span class="colored">Smile.</span>
<br>
It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
</div><!-- .banner-center-box end -->
</div><!-- .col-md-8 end -->
<div class="col-md-4 col-md-pull-8">
<div class="banner-center-box">
<div class="box-header-form bh-form-1 anim-movebottom-seq" data-move-distance="80">
<h3 class="colored">Register Now</h3>
<p>Take Your Free Trial</p>
<form id="header-form-1">
<div class="hf1-notifications">
<div class="hf1-notifications-content"></div>
</div><!-- .hf1-notifications end -->
<div class="form-group">
<input type="text" name="hf1Name" id="hf1Name" class="form-control" placeholder="Your Name">
</div><!-- .form-group end -->
<div class="form-group">
<input type="text" name="hf1Email" id="hf1Email" class="form-control" placeholder="Your Email">
</div><!-- .form-group end -->
<div class="form-group">
<input type="text" name="hf1PhoneNum" id="hf1PhoneNum" class="form-control" placeholder="Phone Number">
</div><!-- .form-group end -->
<div class="form-group">
<input type="submit" class="form-control" value="Get a Quote">
<span class="form-note"><i class="fa fa-info-circle"></i>We will never share your personal info</span>
</div><!-- .form-group end -->
</form><!-- #header-form-1 end -->
</div><!-- .box-header-form end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-4 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
The form is wrapped with <div class="box-header-form">. For this first form style, it has class bh-form-1 as show above in the code.
You can add custom error and success message for the header form validation.
There are 2 data attributes that you can you for this purpose.
These 2 data attributes are data-error-msg and data-success-msg.
Use them with the proper value you want. This useful for different languages support as its controlled by js.
So it's a good option to get some way to edit it flexibly.
In the pages where the leadgen form is not used like in index-video-box-1-left.html or index-video-btn-1-right.html, there is abilily to also use leadgen form through "Popup Preview".
The Popup Preview container has class "popup-preview" and added after #full-container.
There is class="popup-btn" added to the button in CTA Title 1 section that used to show the Popup Preview. So you can add this class to any button you want, and it will do the same function of showing the Popup Preview.
It has the following code:
.
.
.
</footer><!-- #footer-mini end -->
</div><!-- #full-container end -->
<a class="scroll-top-icon scroll-top" href="#"><i class="fa fa-angle-up"></i></a>
<div class="popup-preview">
<div class="popup-bg"></div>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="popup-content">
<div class="box-header-form bh-form-1">
<div class="popup-close hamburger hamburger--slider is-active">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div><!-- .popup-close -->
<h3 class="colored">Register Now</h3>
<p>Take Your Free Trial</p>
<form id="header-form-1">
<div class="hf1-notifications">
<div class="hf1-notifications-content"></div>
</div><!-- .hf1-notifications end -->
<div class="form-group">
<input type="text" name="hf1Name" id="hf1Name" class="form-control" placeholder="Your Name">
</div><!-- .form-group end -->
<div class="form-group">
<input type="text" name="hf1Email" id="hf1Email" class="form-control" placeholder="Your Email">
</div><!-- .form-group end -->
<div class="form-group">
<input type="text" name="hf1PhoneNum" id="hf1PhoneNum" class="form-control" placeholder="Phone Number">
</div><!-- .form-group end -->
<div class="form-group">
<input type="submit" class="form-control" value="Get a Quote">
<span class="form-note"><i class="fa fa-info-circle"></i>We will never share your personal info</span>
</div><!-- .form-group end -->
</form><!-- #header-form-1 end -->
</div><!-- .box-header-form end -->
</div><!-- .popup-content end -->
</div><!-- .col-md-4 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .popup-preview -->
Also, there is ability to add support for the language that error messages appear with. This is supported by the validation plugin used with the contact form.
Here is how the related language file is attached:
<!-- External JavaScripts
============================================= -->
.
.
<script src='js/jquery.validate.min.js'></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ar.js"></script>
.
.
Just attach the proper javascript line (directly after jquery validate attachment) that match the language you want form the following list of CDNs:
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ar.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_bg.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ca.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_cs.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_da.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_de.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_el.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_es.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_eu.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_fa.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_fi.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_fr.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_he.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_hu.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_it.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ja.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_kk.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_lt.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_lv.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_nl.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_no.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_pl.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ro.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ru.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_si.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_sk.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_sl.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_th.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_tr.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_vi.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/methods_de.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/methods_nl.js
After a user fill the form successfully, the php file that called hf1-process.php in php folder is sending the data entered to the email assign in the hf1-process.php. In this file, you will find in line 6 a variable called $EmailTo. Set its value to the email you want.
Here is the line of this variable:
<?php
.
$EmailTo = "moradxd@gmail.com";
.
?>
7. Leadgen 1 Right
In this style, it the same as Leadgen 1 Left code. It's just exchange in the grid layout.
It has the following code:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-13.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.7"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="banner-center-box text-white">
<h1 class=" anim-movebottom-seq">
<span class="colored">Smile.</span>
<br>
It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
</div><!-- .banner-center-box end -->
</div><!-- .col-md-8 end -->
<div class="col-md-4">
<div class="banner-center-box">
<div class="box-header-form bh-form-1 anim-movebottom-seq" data-move-distance="80">
<h3 class="colored">Register Now</h3>
<p>Take Your Free Trial</p>
<form id="header-form-1">
<div class="hf1-notifications">
<div class="hf1-notifications-content"></div>
</div><!-- .hf1-notifications end -->
<div class="form-group">
<input type="text" name="hf1Name" id="hf1Name" class="form-control" placeholder="Your Name">
</div><!-- .form-group end -->
<div class="form-group">
<input type="text" name="hf1Email" id="hf1Email" class="form-control" placeholder="Your Email">
</div><!-- .form-group end -->
<div class="form-group">
<input type="text" name="hf1PhoneNum" id="hf1PhoneNum" class="form-control" placeholder="Phone Number">
</div><!-- .form-group end -->
<div class="form-group">
<input type="submit" class="form-control" value="Get a Quote">
<span class="form-note"><i class="fa fa-info-circle"></i>We will never share your personal info</span>
</div><!-- .form-group end -->
</form><!-- #header-form-1 end -->
</div><!-- .box-header-form end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-4 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
8. Leadgen 2
For the 2nd form style which is the horizontal style. It has the following code:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-13.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.7"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1 text-center">
<div class="banner-center-box text-white">
<h1 class="anim-movebottom-seq">
<span class="colored">Smile.</span>
It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
<div class="box-header-form bh-form-2 anim-movebottom-seq">
<form id="header-form-1" class="form-inline">
<div class="hf1-notifications">
<div class="hf1-notifications-content"></div>
</div><!-- .hf1-notifications end -->
<div class="form-group">
<input type="text" name="hf1Name" id="hf1Name" class="form-control" placeholder="Your Name">
</div><!-- .form-group end -->
<div class="form-group">
<input type="text" name="hf1Email" id="hf1Email" class="form-control" placeholder="Your Email">
</div><!-- .form-group end -->
<div class="form-group">
<input type="text" name="hf1PhoneNum" id="hf1PhoneNum" class="form-control" placeholder="Phone Number">
</div><!-- .form-group end -->
<div class="form-group">
<input type="submit" class="form-control" value="Get a Quote">
</div><!-- .form-group end -->
</form><!-- #header-form-1 end -->
<span class="form-note"><i class="fa fa-info-circle"></i>We will never share your personal info</span>
</div><!-- .box-header-form end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-10 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
The form is wrapped with <div class="box-header-form">. For this first form style, it has class bh-form-2 as show above in the code.
9. Video Box 1 Left
There are 2 styles of video box; the 1st (the current one) is a video box works as lightbox. The 2nd is a video box with instant play inside the video box itself.
Each video box has left and right positions.
The 1st one Video Box 1 Left code is as following:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-6.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.7"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="banner-center-box">
<div class="video-preview vp-banner anim-movebottom-seq" data-move-distance="80">
<a class="img-bg lightbox-iframe" href="https://vimeo.com/45830194">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.5"></div><!-- .overlay-colored end -->
<img src="images/files/parallax-bg/img-13.jpg" alt="">
</a><!-- .img-bg end -->
<a class="video-btn lightbox-iframe" href="https://vimeo.com/45830194">
<i class="fa fa-play"></i>
</a><!-- .video-btn end -->
</div><!-- .video-preview end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-6 end -->
<div class="col-md-6 pl-40 pl-md-0">
<div class="banner-center-box text-white">
<h1 class="anim-movebottom-seq">
<span class="colored">Smile.</span>
It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
</div><!-- .banner-center-box end -->
</div><!-- .col-md-6 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
10. Video Box 1 Right
It's the same as Video Box 1 Left but with exchange in grid order.
It has the following code:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-6.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.7"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="banner-center-box text-white">
<h1 class="anim-movebottom-seq">
<span class="colored">Smile.</span>
It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
</div><!-- .banner-center-box end -->
</div><!-- .col-md-6 end -->
<div class="col-md-6">
<div class="banner-center-box">
<div class="video-preview vp-banner anim-movebottom-seq" data-move-distance="80">
<a class="img-bg lightbox-iframe" href="https://vimeo.com/45830194">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.5"></div><!-- .overlay-colored end -->
<img src="images/files/parallax-bg/img-13.jpg" alt="">
</a><!-- .img-bg end -->
<a class="video-btn lightbox-iframe" href="https://vimeo.com/45830194">
<i class="fa fa-play"></i>
</a><!-- .video-btn end -->
</div><!-- .video-preview end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-6 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
11. Video Box 2 Left
This is the 2nd video box style with instant play inside the video box itself.
It has the following code:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-6.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.7"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="banner-center-box">
<div class="video-preview vp-banner anim-movebottom-seq" data-move-distance="80">
<iframe src="http://player.vimeo.com/video/95558527"></iframe>
</div><!-- .video-preview end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-6 end -->
<div class="col-md-6 pl-40">
<div class="banner-center-box text-white">
<h1 class="anim-movebottom-seq">
<span class="colored">Smile.</span>
It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
</div><!-- .banner-center-box end -->
</div><!-- .col-md-6 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
12. Video Box 2 Right
It's the same as Video Box 2 Left but with exchange in grid order.
It has the following code:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-6.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.7"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="banner-center-box text-white">
<h1 class="anim-movebottom-seq">
<span class="colored">Smile.</span>
It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
</div><!-- .banner-center-box end -->
</div><!-- .col-md-6 end -->
<div class="col-md-6">
<div class="banner-center-box">
<div class="video-preview vp-banner anim-movebottom-seq" data-move-distance="80">
<iframe src="http://player.vimeo.com/video/95558527"></iframe>
</div><!-- .video-preview end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-6 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
13. Video Button 1 Left
There are 3 position styles for the video button; left(this one), right and center position.
The 1st one Video Button 1 Left code is as following:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-6.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.7"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="banner-center-box text-white">
<h1 class="anim-movebottom-seq">
<span class="colored">Smile.</span>
<br>
It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
<a class="video-btn lightbox-iframe anim-movebottom-seq" href="https://vimeo.com/45830194">
<i class="fa fa-play"></i>
<span class="title">Play The Preview <br> Explore More Details</span>
</a><!-- .video-btn end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-8 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
14. Video Button 1 Right
It's the same as Video Button 1 Left but with pushing the grid column.
It has the following code:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-6.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.7"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-4">
<div class="banner-center-box text-white text-right">
<h1 class="anim-movebottom-seq">
<span class="colored">Smile</span><br>
It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
<a class="video-btn lightbox-iframe anim-movebottom-seq" href="https://vimeo.com/45830194">
<i class="fa fa-play"></i>
<span class="title">Play The Preview <br> Explore More Details</span>
</a><!-- .video-btn end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-8 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
15. Video Button 1 Center
It's the same as Video Button 1 Left but with centering to the grid column.
It has the following code:
<!-- Banner
============================================= -->
<section id="banner" class="rounded-bottom" data-scroll-index="0">
<div class="banner-parallax">
<img src="images/files/parallax-bg/img-6.jpg" alt="">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.7"></div><!-- .overlay-colored end -->
<div class="slide-content">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="banner-center-box text-white text-center">
<h1 class="anim-movebottom-seq">
<span class="colored">Smile.</span>
It's Time For Better Template
</h1>
<div class="description anim-movebottom-seq">
Lorem Ipsum is simply dummy text of the printing and type
<br>
setting industry. text ever since the 1500s.
</div>
<a class="video-btn lightbox-iframe anim-movebottom-seq" href="https://vimeo.com/45830194">
<i class="fa fa-play"></i>
<span class="title">Play The Preview <br> Explore More Details</span>
</a><!-- .video-btn end -->
</div><!-- .banner-center-box end -->
</div><!-- .col-md-8 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .slide-content end -->
<div class="separator-bottom"></div>
</div><!-- .banner-parallax end -->
</section><!-- #banner end -->
In this section, we will talk about sections contents in main content area.
First, i will talk about the general structure of 2 common styles of content which are Flat Section and Parallax Section
Main Content Structure
The main content has the following code:
<!-- Content
============================================= -->
<section id="content">
<div id="content-wrap">
.
.
.
</div><!-- #content-wrap -->
</section><!-- #content end -->
For Flat Section and Parallax Section, they will be explained as following:
Now i will show the 1st type, Flat Section as following:
Flat Section
It used for showing content with plan background color without parallax background image effect. This feature has separated section for this purpose.
Flat Section is a div with class "flat-section" as following:
<!-- === Fun Facts =========== -->
<div id="fun-facts" class="flat-section" data-scroll-index="1">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="section-title text-center anim-scaledown">
<h2>Why you will choose us?</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has
<br>
been standard dummy text ever since the 1500s
</p>
</div><!-- .section-title end -->
</div><!-- .col-md-8 end -->
<div class="col-md-12">
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .flat-section end -->
I use in this example the section call "Fun Facts". You will find Section Title where it presents the title of each section.
You also will find div with class="section-content" where you can add the section content.
Parallax Section
This section type is used for showing content with parallax background style effect.
Parallax Section is a div with class "parallax-section" as following:
<!-- === Service Features =========== -->
<div id="service-features" class="parallax-section" data-scroll-index="1" data-parallax-bg-img="img-37.jpg" data-stellar-background-ratio="0.2">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.4"></div><!-- .overlay-colored end -->
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-4">
</div><!-- .col-md-4 end -->
<div class="col-md-4">
</div><!-- .col-md-4 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .parallax-section end -->
You can specify custom Background Image (as included above) using data attribute called data-parallax-bg-image where you can give it value of image which must be existed in images/files/parallax-bg folder.
You have the ability to add Overlay Colored layer and Overlay Pattern layer.
They will be as following:
Overlay Colored
You can use the style of Overlay Colored layer by adding <div> with class="overlay-colored" directly before .section-content as shown above.
You can control color and color opacity manually through 2 data attributes that you can include with this .overlay-colored element.
The 1st data attribute is data-bg-color which accepts only hexadecimal of 6 digits. Look at the code example used above.
The 2nd data attribute is data-bg-color-opacity which controls the opacity of the color. It accepts values from 0 to 1. Look at the code example above.
They are listed as following:
- Background Color : Add data-bg-color.
It must have 6 letters of Hex value.
- Background Color Opacity : Add data-bg-color-opacity.
You can change the opacity value by adding value between 0 to 1.
Overlay Pattern
You can use the style of Overlay Pattern layer by adding <div> with class="overlay-pattern" directly before .section-content and after Overlay Colored as shown above.
You can also control color and color opacity (if you want to use) manually through 2 data attributes that you can include with this .overlay-pattern element. You can get the 2 data attributes from the above overlay Colored.
Now i will talk about all content section such as Fun Facts, Services Features, ... to Footer Mini section.
Each section of them is has id of the setion name for the purpose of One Page Scroll Nav or custom styling for this section.
"Fun Facts"
It uses Flat Section with id="fun-facts".
It has the following code:
<!-- === Fun Facts =========== -->
<div id="fun-facts" class="flat-section" data-scroll-index="1">
.
.
.
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
.
.
.
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .flat-section end -->
There is box counters with class box-counter. These boxes are wrapped with <div class="fun-facts-boxes">.
It has the following code:
<div class="fun-facts-boxes">
<div class="box-counter anim-movebottom-seq text-center">
<div class="bc-content">
<h1><span class="counter-stats">277</span></h1>
<h5>Completed Works</h5>
</div><!-- .bc-content end -->
</div><!-- .box-counter end -->
.
.
.
</div><!-- .fun-facts-boxes end -->
"Services Features"
It uses Parallax Section with id="services-features".
It has the following code:
<!-- === Service Features =========== -->
<div id="service-features" class="parallax-section" data-scroll-index="1" data-parallax-bg-img="img-37.jpg" data-stellar-background-ratio="0.2">
<div class="overlay-colored" data-bg-color="#000" data-bg-color-opacity="0.4"></div><!-- .overlay-colored end -->
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-4">
</div><!-- .col-md-4 end -->
.
.
.
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .parallax-section end -->
There is box info with class box-info-1. It has the following code:
<div class="box-info box-info-1 text-white mb-50 anim-rotate-y-seq">
<div class="box-icon icon x2 colorful-icon mr-20"><i class="icon-lightbulb"></i></div>
<div class="box-content">
<h4 class="capitalized">Ultra Responsive</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been indust.
</p>
</div><!-- .box-content end -->
</div><!-- .box-info-1 end -->
"Watch Video"
It uses Flat Section with id="watch-video".
It has the following code:
<!-- === Watch Video =========== -->
<div id="watch-video" class="flat-section" data-scroll-index="2">
.
.
.
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
.
.
.
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .flat-section end -->
There is a simple video attached as the following:
<div class="video-preview anim-movebottom"><iframe src="http://player.vimeo.com/video/95558527"></iframe></div>
"Clients Testmonials"
It uses Flat Section with id="clients-testmonials".
It has the following code:
<!-- === Clients Testmonials =========== -->
<div id="clients-testmonials" class="flat-section" data-scroll-index="3">
.
.
.
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
.
.
.
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .flat-section end -->
There is carousel slider with class="most-popular-slider" . It has the following code:
<div class="testmonials-slider anim-movebottom">
<ul class="owl-carousel">
<li>
<div class="slide">
<div class="testmonial-single-1">
<span class="quote-sign">“</span>
<div class="ts-content">
“Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been standard dummy text ever since the 1500s.”
</div><!-- .ts-content end -->
<div class="ts-person">
<h5>Ahmed Hamdy</h5>
<span>Envato Inc</span>
</div><!-- .ts-person end -->
</div><!-- .testmonial-single-1 -->
</div><!-- .slide end -->
</li>
<li>
.
.
</li>
</ul>
</div><!-- .testmonials-slider end -->
"Our Clients"
It uses Flat Section with id="our-clients".
It has the following code:
<!-- === Our Clients =========== -->
<div id="our-clients" class="flat-section" data-scroll-index="3">
.
.
.
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
.
.
.
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .flat-section end -->
There is carousel slider with class="most-popular-slider" . It has the following code:
<div class="clients-slider">
<ul class="owl-carousel">
<li>
<div class="slide">
<div class="client-single"><img src="images/files/sliders/clients/img-1.png" alt=""></div>
</div><!-- .slide end -->
</li>
<li>
.
.
</li>
</ul>
</div><!-- .clients-slider end -->
"Call To Action - Title 1"
It uses Flat Section with id="cta-title-1".
It has the following code:
<!-- === Our Clients =========== -->
<div id="our-clients" class="flat-section" data-scroll-index="3">
.
.
.
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-md-12">
.
.
.
</div><!-- .col-md-12 end -->
</div><!-- .row end -->
</div><!-- .container end -->
</div><!-- .section-content end -->
</div><!-- .flat-section end -->
There is container for the content with class box-cta.
It has the following code:
<div class="box-cta text-center">
<img src="images/files/logo-header.png" alt="">
<h1><span class="colored">Smile.</span> It's Time For Better Template</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
<br>
industry. text ever since the 1500s.
</p>
<a class="btn large colorful hover-transparent-dark" href="#make-appointment">Sign Up Now</a>
<img class="shape-1 anim-moveleft-seq" src="images/files/cta-title-shape-1.png" alt="" data-move-duration="2000">
<img class="shape-2 anim-moveright-seq" src="images/files/cta-title-shape-2.png" alt="" data-move-duration="2000">
<img class="shape-3 anim-moveleft-seq" src="images/files/cta-title-shape-3.png" alt="" data-move-duration="2000">
<img class="shape-4 anim-moveright-seq" src="images/files/cta-title-shape-4.png" alt="" data-move-duration="2000">
</div><!-- .box-cta end -->
In this section, i will talk about miscellaneous other contents like Button, Lightboxes, ... etc.
They will be as following:
Buttons
Buttons come with almost all common basic styles around. It comes with 6 styles in both default state and hover state where you can combine and specify these options manually between default state and hover state.
Here is all features included with Buttons:
- 6 Default States
- 6 Hover States
- 3 Sizes
- Rounded or Not
First here is the initial code for Buttons as following:
<a class="btn" href="#">
Read More
</a>
Now i will talk about how to change between Buttons features as following:
6 Default States
There are 6 default states for buttons by adding these following classes to the <a>:
- white
- transparent-white
- dark
- transparent-dark
- colorful
- transparent-colorful
8 Hover States
There are 6 hover states for buttons by adding these following classes to the <a>:
- hover-white
- hover-transparent-white
- hover-dark
- hover-transparent-dark
- hover-colorful
- hover-transparent-colorful
3 Sizes
There are 5 sizes for buttons by adding these following classes to the <a>:
- x-small
- small
- medium
- large
- x-large
Rounded or Not
You can choose between rounded state or not for buttons by adding "rounded" class to the <a>:
Here an example showing the use of these features:
<a class="btn small colorful hover-dark rounded" href="#">Take a Tour</a>
Lightboxes
There are 3 common type of light boxes are used, Lightbox Image, Lightbox Gallery and Lightbox Iframe.
They will be as following:
Lightbox Image
It used <a> tag. Just add class lightbox-img to it and give the href the destination of the image that will be popuped.
Here is some example:
<a class="overlay lightbox-img" href="images/files/portfolio/lightbox/img-2.jpg"></a>
Lightbox Gallery
It used <a> tag. Just add class lightbox-gallery to it and give the href the destination of the image that will be popuped.
Here is some example:
<a class="overlay lightbox-gallery" href="images/files/portfolio/lightbox/img-2.jpg"></a>
Lightbox Iframe
It used <a> tag. Just add class lightbox-iframe to it and give the href the destination of the video that will be popuped.
Here is some example:
<a class="overlay lightbox-iframe" href="https://vimeo.com/45830194"></a>
In this section, i will talk about general styling features like Skins, Scroll Animation, CSS Helpers ... etc.
They will be as following:
Skins
There are 10 skins included with the template.
In css/scss/skins folder, you will find the 10 skins sass files (beside default one) that you can make change from the 10 skins included.
You will need to add for example @import "skins/_skin-green"; in style.scss files as the following place directly after @import "_variables";:
// Imports ( Others at Bottom )
// ==================================
@import "_variables";
@import "skins/_skin-green";
@import "bootstrap";
@import "owl.carousel";
@import "owl.theme.default";
@import "font-awesome.min";
@import "animate.min";
@import "magnific-popup";
// ==================================
For the example above, what you will need to change is _skin-green to the file name you want to choose.
Here are the 10 skins file names:
- _skin-red
- _skin-green
- _skin-blue
- _skin-yellow
- _skin-orange
- _skin-brown
- _skin-light-green
- _skin-lamo
- _skin-purple
- _skin-turquoise
There is a default color file with the name of _skin-default.scss with the default color value. You can remove it or keep it as it is.
If you want to make custom color, just copy and paste on of these files in css/scss/skins folder and edite the color used in it, then replace its name with the included name in the style.scss file.
CSS Helpers
There are some classes you can use to add some Padding, Margin or Height for any elements you want.
They are very useful to optimize content spacing and height to make content looks fit.
Padding
The option of using custom padding is very useful to optimize content spacing and making content looks fit.
In the template, fixed classes are added to apply padding in all directions like left, right, top, bottom, top-bottom and left-right.
The range values is from 0px to 140px with difference 10px for each step.
Now i will show example of each side of padding:
Padding Left
It's named from class pl-10 to pl-140 with step 10px. Here is example:
<div class="pl-10"> . . . </div>
Padding Right
It's named from class pr-10 to pr-140 with step 10px. Here is example:
<div class="pr-10"> . . . </div>
Padding Top
It's named from class pt-10 to pt-140 with step 10px. Here is example:
<div class="pt-10"> . . . </div>
Padding Bottom
It's named from class pb-10 to pb-140 with step 10px. Here is example:
<div class="pb-10"> . . . </div>
Padding Left Right
It's named from class plr-10 to plr-140 with step 10px. Here is example:
<div class="plr-10"> . . . </div>
Padding Top Botom
It's named from class ptb-10 to ptb-140 with step 10px. Here is example:
<div class="ptb-10"> . . . </div>
In small devices, it's sometimes needed to change these applied padding values, so there are also classes made to be applied in the small devices that starts from widths < 992px
Here are examples of how it's applied:
Responsive Padding Left
It's named from class pl-md-10 to pl-md-140 with step 10px. Here is example:
<div class="pl-md-10"> . . . </div>
Responsive Padding Right
It's named from class pr-md-10 to pr-md-140 with step 10px. Here is example:
<div class="pr-md-10"> . . . </div>
Responsive Padding Top
It's named from class pt-md-10 to pt-md-140 with step 10px. Here is example:
<div class="pt-md-10"> . . . </div>
Responsive Padding Bottom
It's named from class pb-md-10 to pb-md-140 with step 10px. Here is example:
<div class="pl-md-10"> . . . </div>
Responsive Padding Left Right
It's named from class plr-md-10 to plr-md-140 with step 10px. Here is example:
<div class="plr-md-10"> . . . </div>
Responsive Padding Top Botom
It's named from class ptb-md-10 to ptb-m-140 with step 10px. Here is example:
<div class="ptb-md-10"> . . . </div>
Margin
The option of using custom margin is very useful to optimize content spacing and making content looks fit.
In the template fixed classes are added to apply margin in all directions like left, right, top, bottom, top-bottom and left-right.
The range values is from 0px to 140px with difference 10px for each step.
Now i will show example of each side of margin:
Margin Left
It's named from class ml-10 to ml-140 with step 10px. Here is example:
<div class="ml-10"> . . . </div>
Margin Right
It's named from class mr-10 to mr-140 with step 10px. Here is example:
<div class="mr-10"> . . . </div>
Margin Top
It's named from class mt-10 to mt-140 with step 10px. Here is example:
<div class="mt-10"> . . . </div>
Margin Bottom
It's named from class mb-10 to mb-140 with step 10px. Here is example:
<div class="mb-10"> . . . </div>
Margin Left Right
It's named from class mlr-10 to mlr-140 with step 10px. Here is example:
<div class="mlr-10"> . . . </div>
Margin Top Botom
It's named from class mtb-10 to mtb-140 with step 10px. Here is example:
<div class="mtb-10"> . . . </div>
In small devices, it's sometimes needed to change these applied margin values, so there are also classes made to be applied in the small devices that starts from widths < 992px
Here are examples of how it's applied:
Responsive Margin Left
It's named from class ml-md-10 to ml-md-140 with step 10px. Here is example:
<div class="ml-md-10"> . . . </div>
Responsive Margin Right
It's named from class mr-md-10 to mr-md-140 with step 10px. Here is example:
<div class="mr-md-10"> . . . </div>
Responsive Margin Top
It's named from class mt-md-10 to mt-md-140 with step 10px. Here is example:
<div class="mt-md-10"> . . . </div>
Responsive Margin Bottom
It's named from class mb-10 to mb-md-140 with step 10px. Here is example:
<div class="mb-md-10"> . . . </div>
Responsive Margin Left Right
It's named from class mlr-md-10 to mlr-md-140 with step 10px. Here is example:
<div class="mlr-md-10"> . . . </div>
Responsive Margin Top Botom
It's named from class mtb-md-10 to mtb-md-140 with step 10px. Here is example:
<div class="mtb-md-10"> . . . </div>
Height
The option of using custom height is very useful to optimize content height of some specific element and making content looks fit. I used it in portfolio single page in the image preview.
It's named from class h-0 to h-900.
From class h-0 to h-100 with step 10px.
From class h-100 to h-900 with step 20px.
Here is example:
<div class="h-10"> . . . </div>
In small devices, it's sometimes needed to change these applied height values, so there are also classes made to be applied in the small devices that starts from widths < 992px
It's named from class h-md-0 to h-md-900.
From class h-md-0 to h-md-100 with step 10px.
From class h-md-100 to h-md-900 with step 20px.
Here is example:
<div class="h-md-10"> . . . </div>
All CSS files css files are stored at "css" folder.
It's all built with Sass. Sass files are existed in css/scss folder.
style.scss has all codes and imports for other sass files.
_variables.scss files has all css variables of values used in the template
All css files are imported in the style.css file as following:
/*=================================================================================
Theme Name: Smiley
Theme URI: http://moradhamdy.com/morad/smiley-demo
Description: Business Landing Page HTML Template
Author: Morad
Author URI: http://moradhamdy.com/
Version: 1.0
SCSS Stylesheet
===================================================================================*/
// Imports ( Others at Bottom )
// ==================================
@import "_variables";
@import "skins/_skin-default";
@import "bootstrap";
@import "animate.min";
@import "owl.carousel";
@import "owl.theme.default";
@import "font-awesome.min";
@import "et-line";
@import "magnific-popup";
@import "jssocials";
@import "jssocials-theme-minima";
@import "css-helpers";
// ==================================
/**
* styles.css file is divided as the following:
*
* ( 01 ) - General Basics
* ( 02 ) - Form Settings
* ( 03 ) - Header
* ( 04 ) - Banner
* ( 05 ) - Content
* ( 06 ) - Single Pages
* ( 07 ) - Footer
*
*/
And at the end of style.scss file, there is the import of responsive.scss as following:
.
.
.
// Imports ( Rest imports )
// ==================================
@import "responsive";
// ==================================
This template uses several scripts many of which are documented within the template's code. If you're a developer, you will find this particularly useful.
There are jquery plugins used such as Owl-Carousel, Scroll It, Jquery Vakidate, ... etc.
These files are existed in js folder. Javascript files are attached at the bottom of each HTML. It looks like this:
<!-- External JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/jRespond.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.waitforimages.min.js"></script>
<script src="js/jquery.transit.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.mb.YTPlayer.min.js"></script>
<script src="js/hoverIntent.js"></script>
<script src="js/simple-scrollbar.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/scrollIt.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src='js/functions.js'></script>
For the case of using another language rather than english, you will need to add the proper attachment of js file for header form validation message. I have talked about this in section "Banner" in 3. Leadgen 1 Left part.
Here is how you will update the attachment of all js files.
<!-- External JavaScripts
============================================= -->
.
.
<script src='js/jquery.validate.min.js'></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ar.js"></script>
.
.
In the functions.js, there the codes of using plugins and custom scripts.
All codes almost well commented for understanding and customization.
I didn't include PSD files as there is almost no graphical elements are built on Photoshop :)
Fonts
CSS
Scripts
PSD
No PSD files included!
Support includes bugs fixing, and general problem solving with features explained on the template’s official sales page.
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Regards,
Morad
Here are the updates series information.
Version 1.0
First release.
Version 1.1
-
Adding the ability to show leadgen form as Popup Preview content in pages that don't contain leadgen form in banner section.
Please revise the 6. Leadgen 1 Left in Banner documentation section for more explanations.
Version 1.2
-
Fixing responsive issue related to button in CTA Title 1 section. Just replace css files, or just style.css file.