Defia - All In One Marketing Landing Page

Dear customers, thank you for choosing our products. In this document, you will find an in-depth description of all the template's features and functionality.

If you have any questions not attended to by our template documentation, please contact us. If you like our template, please leave your feedback. Thanks :)

Template Version: 1.1
By: lucky_roo
Response time (up to): 1 business day.

Installation

Follow the steps below to setup your site template:

Please note that Defia is a simple HTML template and not a Wordpress theme/plugin.

Log into your hosting space via an FTP software (Filezilla for example).
Unzip the downloaded package and open the /html folder to find all the template files.
Below is the folder structure and needs to be uploaded to your website root directory:
- html/contact – Contact form PHP files
- html/css - Stylesheets folder
- html/images - Images folder
- html/img - Images folder
- html/js - Javacripts folder
- html/webfonts – Icon fonts (Font Awesome) folder
Upload the HTML files corresponding to the variant of your choice along with all directories in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder. You should upload all or specific HTML files as per your need.

Tips Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

HTML Structure

Defia follows a simple and easy to customize coding structure. Here is the sample for your reference:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Defia - All In One Marketing Landing Page</title>
        <meta name="description" content=""/>
        <meta name="keywords" content=""/>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">

        <!-- Font Awesome CSS -->
        <link rel="stylesheet" href="css/fontawesome-all.min.css">

        <!-- Include all css plugins (below), or include individual files as needed -->

        <!-- Theme CSS -->
        <link rel="stylesheet" href="css/theme.css">
        <link rel="stylesheet" href="css/styles.css">
    </head>

    <body id="page-top" data-preloader-color="bg-secondary">

    <!-- Header Start -->
    <header class="fixed-top">
        ...
    </header>
    <!-- //Header End -->

    
    <!-- Main Start -->
    <div class="main h-100 p-0">

        <!-- Section - Hero Start -->
        <section id="hero" class="bg-img-cover bg-overlay-7 h-100">
        ...    
        </section>
        <!-- //Section - Hero End -->

        <!-- Modal - Video Start -->
        <div id="modal-video" class="modal fade" tabindex="-1" role="dialog">
        ...    
        </div>
        <!-- //Modal - Video End -->

        <!-- Section - Intro Start -->
        <section id="intro">
        ...    
        </section>
        <!-- //Section - Intro End -->

        <!-- Section - Overview Start -->
        <section id="overview" class="bg-img-cover bg-overlay-7">
        ...    
        </section>
        <!-- //Section - Overview End -->

        <!-- Section - Benefits Start -->
        <section id="benefits">
        ...    
        </section>
        <!-- //Section - Benefits End -->

        <!-- Section - How It Works Start -->
        <section id="how-it-works" class="border-top">
        ...    
        </section>
        <!-- //Section - How It Works End -->

        <!-- Milestones Start -->
        <div id="milestones" class="bg-img-cover bg-overlay-7 section">
        ...    
        </div>
        <!-- //Milestones End -->

        <!-- Section - Team Start -->
        <section id="team">
        ...    
        </section>
        <!-- //Section - Team End -->

        <!-- Section - Testimonial Start -->
        <section id="testimonial" class="border-top">
        ...    
        </section>
        <!-- //Section - Testimonial End -->

        <!-- Section - Pricing Start -->
        <section id="pricing" class="bg-img-cover bg-overlay-7">
        ...    
        </section>
        <!-- //Section - Pricing End -->

        <!-- Section - FAQ Start -->
        <section id="faq">
        ...    
        </section>
        <!-- //Section - FAQ End -->

        <!-- Section - Contact Start -->
        <section id="contact" class="border-top">
        ...    
        </section>
        <!-- //Section - Contact End -->

        <!-- Section - Footer CTA Start -->
        <section id="footer-cta" class="bg-img-cover bg-overlay-7">
        ...    
        </section>
        <!-- //Section - Footer CTA End -->

        <!-- Footer Start -->
        <footer class="py-5">
        ...    
        </footer>
        <!-- //Footer End -->

    </div>
    <!-- //Main End -->


    <!-- Scroll to top -->
    <a href="#page-top" class="page-scroll scroll-to-top shadow">
        <i class="fas fa-chevron-up"></i>
    </a>

    <!-- jQuery & Bootstrap JS -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

    <!-- Include all js plugins (below) -->
    <script src="js/plugins.js"></script>

    <!-- Theme JS -->
    <script src="js/theme.js"></script>
    
    </body>
</html>

Logo Settings

The Logo Container can be found in the header.

<!-- Header Start -->
<header class="fixed-top">
    <div class="container h-100">
        <div class="row align-items-center h-100 no-gutters">
            <div class="col-12">
                <nav id="navigation" class="navbar navbar-expand-xl p-0">
                    <div class="navbar-header align-items-center d-flex">
                        <a href="#page-top" class="navbar-brand m-0 page-scroll">
                            <img src="img/logo-text-dark.png" alt="" class="logo-text-dark"/>
                            <img src="img/logo-text-light.png" alt="" class="logo-text-light"/>
                        </a>
                    </div>
                    <!-- //.navbar-header -->
                </nav>
            </div>
            <!-- //.col-12 -->
        </div>
        <!-- //.row -->
    </div>
    <!-- //.container -->
</header>
<!-- //Header End -->

Note The Logo Image's maximum height can be 60px.

Icons

We use excellent Font Awesome service. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Basic Use

In the <head> of your html, reference the location to your font icons style css.

<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/fontawesome-all.min.css">

You can place Font Awesome icons just about anywhere using a CSS style prefix and the icon’s name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity).

<i class="fas fa-camera-retro"><i>

Styles & Prefixes

Font Awesome 5 icons can be any of 4 different styles, each with its own prefix. The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.

Style	Style Prefix	Code
Solid	`fas`	`<i class="fas fa-camera-retro">`
Regular	`far` PRO	`<i class="far fa-camera-retro">`
Light	`fal` PRO	`<i class="fal fa-camera-retro">`
Brands	`fab`	`<i class="fab fa-facebook">`

Check The CheatSheet

Page Link

You can add link/button which direct you to other section of the same page with smooth scroll effect like it is one page website. You just need to add class: page-scroll and href should be the ID of the section as per the example shown below:

<a href="#overview" class="page-scroll">Overview</a>

<!-- Section - Overview Start -->
<section id="overview">    
...
</section>
<!-- //Section - Overview End -->

NotePlease note that destination section should have valid ID.

External Page Link

<a href="https://themeforest.net/" target="_blank">External Page Link</a>

Demos

1. CTA with Modal Video (YouTube)

2. With Product Image

3. With Countdown

4. Mailchimp Subscribe Form

5. Subscribe Form + Countdown

6. Subscribe Form + Video (Vimeo)

7. Subscribe Form + Video (YouTube)

8. Parallax Background

9. Background Slideshow

10. Video Background (Vimeo)

11. Video Background (YouTube)

12. CTA with Modal Video (Vimeo)

13. Pricing Custom v1 (With Action Button)

14. Pricing Custom v2

15. Pricing Custom v3

Background - Static

HTML:

<!-- Section - Hero Start -->
<section id="hero" class="bg-img-cover bg-overlay-7 h-100">
...    
</section>
<!-- //Section - Hero End -->

CSS: (css/styles.css)

/*
* Section - Hero
*/

#hero {
  background-image: url("../images/bg-hero.jpg");
}

Note You can find this demo in cta-modal-video-youtube.html page.

Background - Parallax

HTML:

<!-- Section - Hero Start -->
<section id="hero-bg-parallax" class="bg-img-parallax">
    <!-- BG Parallax -->
    <div class="bg-parallax bg-overlay-7"></div>
    ...
</section>
<!-- //Section - Hero End -->

CSS: (css/styles.css)

#hero-bg-parallax > .bg-parallax {
  background-image: url("../images/bg-hero-parallax.jpg");
}

Note You can find this demo in hero-bg-parallax.html page.

Background - Slideshow

HTML:

<!-- Section - Hero Start -->
<section id="hero-bg-slideshow" class="bg-slideshow h-100 overflow-hidden p-0 w-100">
    <div class="flexslider h-100 position-relative w-100">
        <div class="slides h-100 w-100">
            <div class="bg-img-cover bg-overlay-7 d-block h-100 w-100">
            ...
            </div>
            <!-- //.bg-img-cover -->
            
            <div class="bg-img-cover bg-overlay-7 d-block h-100 w-100">
            ...
            </div>
            <!-- //.bg-img-cover -->

            <div class="bg-img-cover bg-overlay-7 d-block h-100 w-100">
            ...
            </div>
            <!-- //.bg-img-cover -->
        </div>
        <!-- //.slides -->
    </div>
    <!-- //.flexslider -->
</section>
<!-- //Section - Hero End -->

CSS: (css/styles.css)

/*
* Section - Hero
*/

#hero-bg-slideshow .slides > .bg-img-cover:nth-child(1) {
  background-image: url("../images/bg-hero-slideshow-1.jpg");
}
#hero-bg-slideshow .slides > .bg-img-cover:nth-child(2) {
  background-image: url("../images/bg-hero-slideshow-2.jpg");
}
#hero-bg-slideshow .slides > .bg-img-cover:nth-child(3) {
  background-image: url("../images/bg-hero-slideshow-3.jpg");
}

Note You can find this demo in hero-bg-slideshow.html page.

Background - Video (Vimeo)

Important Notice!

The plug in works only if used under a web server. It doesn't work if you run the HTML page as file (file://...).
If you want to run it locally on your computer you need a web server installed (for ex: MAMP for Mac, XAMPP for Windows, LAMP for linux) and reach the file from http://localhost... or whatever you mapped in the Host file as localhost.

Include files:

<!-- JS -->
<script src="js/jquery.mb.vimeo_player.min.js"></script>

HTML:

<!-- Section - Hero Start -->
<section id="hero-bg-vimeo" data-property="{videoURL:'https://vimeo.com/176916362'}" class="bg-overlay-7 bg-video bg-vimeo h-100 w-100">
...
</section>
<!-- //Section - Hero End -->

Note You can find this demo in hero-bg-video-vimeo.html page.

Background - Video (YouTube)

Important Notice!

The plug in works only if used under a web server. It doesn't work if you run the HTML page as file (file://...).
If you want to run it locally on your computer you need a web server installed (for ex: MAMP for Mac, XAMPP for Windows, LAMP for linux) and reach the file from http://localhost... or whatever you mapped in the Host file as localhost.

Include files:

<!-- JS -->
<script src="assets/js/jquery.mb.YTPlayer.min.js"></script>

HTML:

<!-- Section - Hero Start -->
<section id="hero-bg-youtube" class="bg-overlay-7 bg-video bg-youtube h-100 w-100">
    <!-- BG Video - YouTube -->
    <div class="h-100 player w-100" data-property="{videoURL:'https://www.youtube.com/watch?v=mRvqcvqB4EI'}"></div>

    ...
</section>
<!-- //Section - Hero End -->

Note You can find this demo in hero-bg-video-youtube.html page.

Background - Opacity

<!-- Section - Hero Start -->
<section id="hero" class="bg-img-cover bg-overlay-7 h-100">
...
</section>
<!-- //Section - Hero End -->

Helper Classes:

.bg-overlay-9 - For opacity level of 0.9
.bg-overlay-8 - For opacity level of 0.8
.bg-overlay-7 - For opacity level of 0.7
.bg-overlay-6 - For opacity level of 0.6
.bg-overlay-5 - For opacity level of 0.5
.bg-overlay-4 - For opacity level of 0.4
.bg-overlay-3 - For opacity level of 0.3
.bg-overlay-2 - For opacity level of 0.2
.bg-overlay-1 - For opacity level of 0.1

Mailchimp Subscribe Form

Go to your Mailchimp account. Then create a new list or go to your existing list.
Then Signup forms. Select Embedded forms.
You will find form action URL in this page.

Open your html file and find following code. Just replace that mailchimp form action url with your mailchimp list url.

BEFORE:

<!-- Begin Mailchimp Subscribe Form -->
<div id="mc_embed_signup" class="mt-5">
    <form action="YOUR_MAILCHIMP_LIST_URL" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="bg-dark border border-gray-700 d-inline-block form-subscribe form-subscribe-inline justify-content-center rounded shadow-lg validate" target="_blank" novalidate>
    ...    
    </form>
</div>
<!-- //End Mailchimp Subscribe Form -->

AFTER:

<!-- Begin Mailchimp Subscribe Form -->
<div id="mc_embed_signup" class="mt-5">
    <form action="https://lucky-roo.us11.list-manage.com/subscribe/post?u=1e24a547e8ca8812f4aa86f5d&id=fcb59e27aa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="bg-dark border border-gray-700 d-inline-block form-subscribe form-subscribe-inline justify-content-center rounded shadow-lg validate" target="_blank" novalidate>
    ...    
    </form>
</div>
<!-- //End Mailchimp Subscribe Form -->

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

Background Color

.bg-gray-100 - For background color of gray
.bg-gray-200 - For background color of gray
.bg-gray-300 - For background color of gray
.bg-gray-400 - For background color of gray
.bg-gray-500 - For background color of gray
.bg-gray-600 - For background color of gray
.bg-gray-700 - For background color of gray
.bg-gray-800 - For background color of gray
.bg-gray-900 - For background color of gray

.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-light
.bg-dark

Button

Defia contains many types of button like small, medium, large, outline buttons, etc. All of this types are customized.

<a href="#" class="btn btn-primary">Button</a>
<a href="#" class="btn btn-secondary">Button</a>
<a href="#" class="btn btn-secondary btn-large">Button</a>

<a href="#" class="btn btn-outline-primary">Button</a>
<a href="#" class="btn btn-outline-secondary">Button</a>
<a href="#" class="btn btn-outline-secondary btn-large">Button</a>

Button Size

.btn-small For small size of button
.btn-medium For medium size of button
.btn-large For large size of button

Button Color

.btn-primary
.btn-secondary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-light
.btn-dark

.btn-outline-primary
.btn-outline-secondary
.btn-outline-success
.btn-outline-info
.btn-outline-warning
.btn-outline-danger
.btn-outline-light
.btn-outline-dark

Border

.border - For border each side
.border-top - For border top side only
.border-right - For border right side only
.border-bottom - For border bottom side only
.border-left - For border left side only

Border Width

.border-thick - For thick border
.border-medium-thick - For very thick border
.border-extra-thick - For very thick border

Border Color

.border-gray-100 - For border color of gray
.border-gray-200 - For border color of gray
.border-gray-300 - For border color of gray
.border-gray-400 - For border color of gray
.border-gray-500 - For border color of gray
.border-gray-600 - For border color of gray
.border-gray-700 - For border color of gray
.border-gray-800 - For border color of gray
.border-gray-900 - For border color of gray

.border-primary
.border-secondary
.border-success
.border-info
.border-warning
.border-danger
.border-light
.border-dark

Text Size & Color

Text Size

.h1 - For extra large size of text
.h2 - For extra large size of text
.h3 - For extra large size of text
.h4 - For large size of text
.h5 - For medium size of text
.h6 - For small size of text

.text-small - For small size of text
.text-medium - For medium size of text
.text-large - For large size of text
.text-extra-large - For extra large size of text
.text-extra-large-2 - For extra large size of text
.text-extra-large-3 - For extra large size of text

Text Color

.text-gray-100 - For gray color text
.text-gray-200 - For gray color text
.text-gray-300 - For gray color text
.text-gray-400 - For gray color text
.text-gray-500 - For gray color text
.text-gray-600 - For gray color text
.text-gray-700 - For gray color text
.text-gray-800 - For gray color text
.text-gray-900 - For gray color text

.text-primary
.text-secondary
.text-success
.text-info
.text-warning
.text-danger
.text-light
.text-dark

Miscellaneous

Letter Spacing

.letter-spacing-1 - For letter spacing of 1 pixel
.letter-spacing-2 - For letter spacing of 2 pixel
.letter-spacing-3 - For letter spacing of 3 pixel
.letter-spacing-4 - For letter spacing of 4 pixel
.letter-spacing-5 - For letter spacing of 5 pixel
.letter-spacing-6 - For letter spacing of 6 pixel
.letter-spacing-7 - For letter spacing of 7 pixel
.letter-spacing-8 - For letter spacing of 8 pixel
.letter-spacing-9 - For letter spacing of 9 pixel
.letter-spacing-10 - For letter spacing of 10 pixel
.no-letter-spacing - For letter spacing of none

Opacity

.opacity-0 - Fully transparent
.opacity-1 - For opacity level of 0.1
.opacity-2 - For opacity level of 0.2
.opacity-3 - For opacity level of 0.3
.opacity-4 - For opacity level of 0.4
.opacity-5 - For opacity level of 0.5
.opacity-6 - For opacity level of 0.6
.opacity-7 - For opacity level of 0.7
.opacity-8 - For opacity level of 0.8
.opacity-9 - For opacity level of 0.9
.no-opacity - Fully opaque

Position

.position-absolute - For element position absolute
.position-fixed - For element position fixed
.position-relative - For element position relative
.position-static - For element position static

.bottom - For element position fixed to bottom of the body or parent element
.left - For element position fixed to left of the body or parent element
.right - For element position fixed to right of the body or parent element
.top - For element position fixed to top of the body or parent element

Defia - All In One Marketing Landing Page

Installation

HTML Structure

Logo Settings

Icons

Basic Use

Styles & Prefixes

Page Link

External Page Link

Demos

1. CTA with Modal Video (YouTube)

2. With Product Image

3. With Countdown

4. Mailchimp Subscribe Form

5. Subscribe Form + Countdown

6. Subscribe Form + Video (Vimeo)

7. Subscribe Form + Video (YouTube)

8. Parallax Background

9. Background Slideshow

10. Video Background (Vimeo)

11. Video Background (YouTube)

12. CTA with Modal Video (Vimeo)

13. Pricing Custom v1 (With Action Button)

14. Pricing Custom v2

15. Pricing Custom v3

Background - Static

Background - Parallax

Background - Slideshow

Background - Video (Vimeo)

Background - Video (YouTube)

Background - Opacity

Helper Classes:

Countdown

Contact Form

Mailchimp Subscribe Form

Helper Classes

Background Color

Button

Border

Text Size & Color

Miscellaneous

Credits and Sources

Plugins

Images used on demo

Video used on demo