Emilono Documentation

Introduction

Emilono is a Bootstrap 4 and Sass based Professional HTML5 template.

Also, this template has Ajax based contact form submission, well commented and easily customizable source code with detailed documentation. These features will help to make the template uses and customization based on the ultimate needs.

Template Features:

• Onepage Demos
• Easy to customize
• HTML5 & CSS3
• Clean & Simple Design
• Fully Responsive Layout
• Crossbrowser Compatible with Edge, IE10+, Firefox, Safari, Opera, Chrome
• W3 Valid
• Retina ready
• FontAwesome Free icons
• Powered with Bootstrap (4.x)
• Build with Sass
• Smooth animation
• AJAX contact form Submission
• AJAX subscriptions form Submission
• Well documented

Unzip the archive and find out the folder emilono or emilono-rtl There are all the template files in this folder.

The file and folder structure is something like this:

Default demo:

01-Construction:

1. 01-construction/index.html
2. 01-construction/assets/css — folder with css files.
3. 01-construction/assets/fonts — folder with fonts files.
4. 01-construction/assets/img — folder with image files.
5. 01-construction/assets/js — folder with Javascript files.
6. 01-construction/assets/php — folder with form-process.php files.

02-Restaurant:

1. 02-restaurant/index.html
2. 02-restaurant/assets/css — folder with css files.
3. 02-restaurant/assets/fonts — folder with fonts files.
4. 02-restaurant/assets/img — folder with image files.
5. 02-restaurant/assets/js — folder with Javascript files.

03-Travel:

1. 03-travel/index.html
2. 03-travel/assets/css — folder with css files.
3. 03-travel/assets/fonts — folder with fonts files.
4. 03-travel/assets/img — folder with image files.
5. 03-travel/assets/js — folder with Javascript files.
6. 03-travel/assets/php — folder with form-process.php files.

04-Travel:

1. 04-travel/index.html
2. 04-travel/assets/css — folder with css files.
3. 04-travel/assets/fonts — folder with fonts files.
4. 04-travel/assets/img — folder with image files.
5. 04-travel/assets/js — folder with Javascript files.
6. 04-travel/assets/php — folder with form-process.php files.
7. 04-travel/assets/video — folder with video files.

05-Restaurant:

1. 05-restaurant/index.html
2. 05-restaurant/assets/css — folder with css files.
3. 05-restaurant/assets/fonts — folder with fonts files.
4. 05-restaurant/assets/img — folder with image files.
5. 05-restaurant/assets/js — folder with Javascript files.
6. 05-restaurant/assets/php — folder with form-process.php files.
7. 05-restaurant/assets/video — folder with video files.

06-Restaurant:

1. 06-restaurant/index.html
2. 06-restaurant/assets/css — folder with css files.
3. 06-restaurant/assets/fonts — folder with fonts files.
4. 06-restaurant/assets/img — folder with image files.
5. 06-restaurant/assets/js — folder with Javascript files.
6. 06-restaurant/assets/php — folder with form-process.php files.

07-Real-Estate:

1. 07-real-estate/index.html
2. 07-real-estate/assets/css — folder with css files.
3. 07-real-estate/assets/fonts — folder with fonts files.
4. 07-real-estate/assets/img — folder with image files.
5. 07-real-estate/assets/js — folder with Javascript files.
6. 07-real-estate/assets/php — folder with form-process.php files.

08-Creative:

1. 08-creative/index.html
2. 08-creative/assets/css — folder with css files.
3. 08-creative/assets/fonts — folder with fonts files.
4. 08-creative/assets/img — folder with image files.
5. 08-creative/assets/js — folder with Javascript files.
6. 08-creative/assets/php — folder with form-process.php files.

09-Doctor:

1. 09-doctor/index.html
2. 09-doctor/assets/css — folder with css files.
3. 09-doctor/assets/fonts — folder with fonts files.
4. 09-doctor/assets/img — folder with image files.
5. 09-doctor/assets/js — folder with Javascript files.
6. 09-doctor/assets/php — folder with form-process.php files.

10-IT:

1. 10-it/index.html
2. 10-it/assets/css — folder with css files.
3. 10-it/assets/fonts — folder with fonts files.
4. 10-it/assets/img — folder with image files.
5. 10-it/assets/js — folder with Javascript files.

11-Agency:

1. 11-agency/index.html
2. 11-agency/assets/css — folder with css files.
3. 11-agency/assets/fonts — folder with fonts files.
4. 11-agency/assets/img — folder with image files.
5. 11-agency/assets/js — folder with Javascript files.
6. 11-agency/assets/php — folder with form-process.php files.

12-Seo:

1. 12-seo/index.html
2. 12-seo/assets/css — folder with css files.
3. 12-seo/assets/fonts — folder with fonts files.
4. 12-seo/assets/img — folder with image files.
5. 12-seo/assets/js — folder with Javascript files.
6. 12-seo/assets/php — folder with form-process.php files.

13-Creative:

1. 13-creative/index.html
2. 13-creative/assets/css — folder with css files.
3. 13-creative/assets/fonts — folder with fonts files.
4. 13-creative/assets/img — folder with image files.
5. 13-creative/assets/js — folder with Javascript files.

14-Creative:

1. 14-creative/index.html
2. 14-creative/assets/css — folder with css files.
3. 14-creative/assets/fonts — folder with fonts files.
4. 14-creative/assets/img — folder with image files.
5. 14-creative/assets/js — folder with Javascript files.

15-Ico:

1. 15-ico/index.html
2. 15-ico/assets/css — folder with css files.
3. 15-ico/assets/fonts — folder with fonts files.
4. 15-ico/assets/img — folder with image files.
5. 15-ico/assets/js — folder with Javascript files.
6. 15-ico/assets/php — folder with form-process.php files.

16-Gym:

1. 16-gym/index.html
2. 16-gym/assets/css — folder with css files.
3. 16-gym/assets/fonts — folder with fonts files.
4. 16-gym/assets/img — folder with image files.
5. 16-gym/assets/js — folder with Javascript files.

17-Event:

1. 17-event/index.html
2. 17-event/assets/css — folder with css files.
3. 17-event/assets/fonts — folder with fonts files.
4. 17-event/assets/img — folder with image files.
5. 17-event/assets/js — folder with Javascript files.
6. 17-event/assets/php — folder with form-process.php files.

18-Event:

1. 18-event/index.html
2. 18-event/assets/css — folder with css files.
3. 18-event/assets/fonts — folder with fonts files.
4. 18-event/assets/img — folder with image files.
5. 18-event/assets/js — folder with Javascript files.
6. 18-event/assets/php — folder with form-process.php files.

19-Auto-Servicing:

1. 19-auto-servicing/index.html
2. 19-auto-servicing/assets/css — folder with css files.
3. 19-auto-servicing/assets/fonts — folder with fonts files.
4. 19-auto-servicing/assets/img — folder with image files.
5. 19-auto-servicing/assets/js — folder with Javascript files.

20-City:

1. 20-city/index.html
2. 20-city/assets/css — folder with css files.
3. 20-city/assets/fonts — folder with fonts files.
4. 20-city/assets/img — folder with image files.
5. 20-city/assets/js — folder with Javascript files.

21-Plumbing:

1. 21-plumbing/index.html
2. 21-plumbing/assets/css — folder with css files.
3. 21-plumbing/assets/fonts — folder with fonts files.
4. 21-plumbing/assets/img — folder with image files.
5. 21-plumbing/assets/js — folder with Javascript files.

RTL demo:

01-Construction:

1. 01-construction/index.html
2. 01-construction/assets/css — folder with css files.
3. 01-construction/assets/fonts — folder with fonts files.
4. 01-construction/assets/img — folder with image files.
5. 01-construction/assets/js — folder with Javascript files.
6. 01-construction/assets/php — folder with form-process.php files.

02-Restaurant:

1. 02-restaurant/index.html
2. 02-restaurant/assets/css — folder with css files.
3. 02-restaurant/assets/fonts — folder with fonts files.
4. 02-restaurant/assets/img — folder with image files.
5. 02-restaurant/assets/js — folder with Javascript files.

03-Travel:

1. 03-travel/index.html
2. 03-travel/assets/css — folder with css files.
3. 03-travel/assets/fonts — folder with fonts files.
4. 03-travel/assets/img — folder with image files.
5. 03-travel/assets/js — folder with Javascript files.
6. 03-travel/assets/php — folder with form-process.php files.

04-Travel:

1. 04-travel/index.html
2. 04-travel/assets/css — folder with css files.
3. 04-travel/assets/fonts — folder with fonts files.
4. 04-travel/assets/img — folder with image files.
5. 04-travel/assets/js — folder with Javascript files.
6. 04-travel/assets/php — folder with form-process.php files.
7. 04-travel/assets/video — folder with video files.

05-Restaurant:

1. 05-restaurant/index.html
2. 05-restaurant/assets/css — folder with css files.
3. 05-restaurant/assets/fonts — folder with fonts files.
4. 05-restaurant/assets/img — folder with image files.
5. 05-restaurant/assets/js — folder with Javascript files.
6. 05-restaurant/assets/php — folder with form-process.php files.
7. 05-restaurant/assets/video — folder with video files.

06-Restaurant:

1. 06-restaurant/index.html
2. 06-restaurant/assets/css — folder with css files.
3. 06-restaurant/assets/fonts — folder with fonts files.
4. 06-restaurant/assets/img — folder with image files.
5. 06-restaurant/assets/js — folder with Javascript files.
6. 06-restaurant/assets/php — folder with form-process.php files.

07-Real-Estate:

1. 07-real-estate/index.html
2. 07-real-estate/assets/css — folder with css files.
3. 07-real-estate/assets/fonts — folder with fonts files.
4. 07-real-estate/assets/img — folder with image files.
5. 07-real-estate/assets/js — folder with Javascript files.
6. 07-real-estate/assets/php — folder with form-process.php files.

08-Creative:

1. 08-creative/index.html
2. 08-creative/assets/css — folder with css files.
3. 08-creative/assets/fonts — folder with fonts files.
4. 08-creative/assets/img — folder with image files.
5. 08-creative/assets/js — folder with Javascript files.
6. 08-creative/assets/php — folder with form-process.php files.

09-Doctor:

1. 09-doctor/index.html
2. 09-doctor/assets/css — folder with css files.
3. 09-doctor/assets/fonts — folder with fonts files.
4. 09-doctor/assets/img — folder with image files.
5. 09-doctor/assets/js — folder with Javascript files.
6. 09-doctor/assets/php — folder with form-process.php files.

10-IT:

1. 10-it/index.html
2. 10-it/assets/css — folder with css files.
3. 10-it/assets/fonts — folder with fonts files.
4. 10-it/assets/img — folder with image files.
5. 10-it/assets/js — folder with Javascript files.

11-Agency:

1. 11-agency/index.html
2. 11-agency/assets/css — folder with css files.
3. 11-agency/assets/fonts — folder with fonts files.
4. 11-agency/assets/img — folder with image files.
5. 11-agency/assets/js — folder with Javascript files.
6. 11-agency/assets/php — folder with form-process.php files.

12-Seo:

1. 12-seo/index.html
2. 12-seo/assets/css — folder with css files.
3. 12-seo/assets/fonts — folder with fonts files.
4. 12-seo/assets/img — folder with image files.
5. 12-seo/assets/js — folder with Javascript files.
6. 12-seo/assets/php — folder with form-process.php files.

13-Creative:

1. 13-creative/index.html
2. 13-creative/assets/css — folder with css files.
3. 13-creative/assets/fonts — folder with fonts files.
4. 13-creative/assets/img — folder with image files.
5. 13-creative/assets/js — folder with Javascript files.

14-Creative:

1. 14-creative/index.html
2. 14-creative/assets/css — folder with css files.
3. 14-creative/assets/fonts — folder with fonts files.
4. 14-creative/assets/img — folder with image files.
5. 14-creative/assets/js — folder with Javascript files.

15-Ico:

1. 15-ico/index.html
2. 15-ico/assets/css — folder with css files.
3. 15-ico/assets/fonts — folder with fonts files.
4. 15-ico/assets/img — folder with image files.
5. 15-ico/assets/js — folder with Javascript files.
6. 15-ico/assets/php — folder with form-process.php files.

16-Gym:

1. 16-gym/index.html
2. 16-gym/assets/css — folder with css files.
3. 16-gym/assets/fonts — folder with fonts files.
4. 16-gym/assets/img — folder with image files.
5. 16-gym/assets/js — folder with Javascript files.

17-Event:

1. 17-event/index.html
2. 17-event/assets/css — folder with css files.
3. 17-event/assets/fonts — folder with fonts files.
4. 17-event/assets/img — folder with image files.
5. 17-event/assets/js — folder with Javascript files.
6. 17-event/assets/php — folder with form-process.php files.

18-Event:

1. 18-event/index.html
2. 18-event/assets/css — folder with css files.
3. 18-event/assets/fonts — folder with fonts files.
4. 18-event/assets/img — folder with image files.
5. 18-event/assets/js — folder with Javascript files.
6. 18-event/assets/php — folder with form-process.php files.

19-Auto-Servicing:

1. 19-auto-servicing/index.html
2. 19-auto-servicing/assets/css — folder with css files.
3. 19-auto-servicing/assets/fonts — folder with fonts files.
4. 19-auto-servicing/assets/img — folder with image files.
5. 19-auto-servicing/assets/js — folder with Javascript files.

20-City:

1. 20-city/index.html
2. 20-city/assets/css — folder with css files.
3. 20-city/assets/fonts — folder with fonts files.
4. 20-city/assets/img — folder with image files.
5. 20-city/assets/js — folder with Javascript files.

21-Plumbing:

1. 21-plumbing/index.html
2. 21-plumbing/assets/css — folder with css files.
3. 21-plumbing/assets/fonts — folder with fonts files.
4. 21-plumbing/assets/img — folder with image files.
5. 21-plumbing/assets/js — folder with Javascript files.

Upload the template files to server with the help of one of the FTP-clients like FileZilla.

These are the css files which are loaded into the template in Head Section.

<!-- Links of CSS files -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">

These are the css files used for RTL version.

<!-- Links of CSS files -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/rtl.css">
<link rel="stylesheet" href="assets/css/responsive.css">

            

This is the basic structure of Top Navbar:

<!-- Navbar Area -->
<div class="navbar-area">
    <div class="container">
        <div class="navbar-menu">
            <div class="row align-items-center">
                <div class="col-6 col-sm-6 col-md-6 col-lg-6">
                    <div class="logo">
                        <a href="index.html"><img src="assets/img/logo.png" alt="image"></a>
                    </div>
                </div>

                <div class="col-6 col-sm-6 col-md-6 col-lg-6">
                    <div class="burger-menu">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Navbar Area -->

These are the JS files which are loaded into the template before the end of the HEAD and BODY Section.

<!-- Links of JS files -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.ajaxchimp.min.js"></script>
<script src="assets/js/form-validator.min.js"></script>
<script src="assets/js/contact-form-script.js"></script>
<script src="assets/js/main.js"></script>

The general template structure is the same throughout the template, each of the part is under a section with a section id name. Here is the general structure:

<footer class="footer-area">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-6">
                <p>Copyright 2019 by <a href="#" target="_blank">EnvyTheme</a>. All rights reserved</p>
            </div>

            <div class="col-lg-6 col-md-6">
                <ul>
                    <li><span>Stay Connect:</span></li>
                    <li><a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#" target="_blank"><i class="fab fa-youtube"></i></a></li>
                    <li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                    <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
                    <li><a href="#" target="_blank"><i class="fab fa-instagram"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

We have added some utility classes with media queries for different screen sizes. All of the custom responsive css code are under the responsive.css file at the bottom showing, how many screen size we truck for media query:

/* Here is the css code for max-width : 767px: */

/* Small Devices, Mobile, SmartPhone, Iphone ----------- */
@media screen and (max-width: 767px) {

}

/* Here is the css code for (min-width : 768px) and (max-width : 991px) */

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 991px) {

}

/* Here is the css code for (min-width : 992px) and (max-width : 1199px) */

/* iPads (landscape) ----------- */
@media only screen and (min-width : 992px) and (max-width : 1199px) {

}

The Contact form html there have include jQuery form validation with the backend and include php file for email send system, the php email system function keeps under email.php file in the main folder, code example is as follows :

<form id="contactForm">
    <div class="form-group">
        <input type="text" name="name" id="name" class="form-control" required data-error="Please enter your name" placeholder="Name">
        <div class="help-block with-errors"></div>
    </div>

    <div class="form-group">
        <input type="email" name="email" id="email" class="form-control" required data-error="Please enter your email" placeholder="Email">
        <div class="help-block with-errors"></div>
    </div>

    <div class="form-group">
        <textarea name="message" class="form-control" id="message" cols="30" rows="5" required data-error="Write your message" placeholder="Your Message"></textarea>
        <div class="help-block with-errors"></div>
    </div>

    <button type="submit">Send Message</button>
    <div id="msgSubmit" class="h3 text-center hidden"></div>
    <div class="clearfix"></div>
</form>

assets/php/form-process.php file

https://mailchimp.com/help/add-a-signup-form-to-your-website/

Paste URL on main.js File

Note: All images are used for preview purpose only and not included in the final purchase files.

Images from:
https://freepik.com
https://pixabay.com
https://unsplash.com
https://pexels.com

IconFont
FontAwesome

If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/envytheme ).
or send details query to support email hello@envytheme.com.

We aim to answer all questions within 24 hours . In some cases the waiting time can be extended to 48 hours.

We hope you found this document helpful. Thank you!