Getting Started

Before you get started, please be sure to always check out these documentation files. We outline all kinds of good information, and provide you with all the details you need know to use Elomoas HTML Template.

If you are unable to find your answer here in the documentation, please contact us on our Support Forum or directly from our themeforest account

Please don't forget to rate Elomoas with 5 stars and leave a nice review, it means a lot to us.

Introduction

Follow the steps below to setup your site template:

Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website

Below is the folder structure and needs to be uploaded to your website root directory

HTML/css - Stylesheet files
HTML/fonts – Icon font files
HTML/images - Image files
HTML/js - Javacript files
HTML/scss - Scss files

You should upload all or specific HTML files as per your need

You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users

HTML Structure

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

<!doctype html>
<html class="no-js" lang="en">
<head>
	
	<meta charset="utf-8">
	<!-- description -->
	<meta name="description" content="">
	<!-- keywords -->
	<meta name="keywords" content="">
	<!-- favicon -->

	<!-- style -->

</head>
<body class="color-theme-blue mont-font">

	<div class="preloader"></div>

	
	<!-- main wrap start-->
	<div class="main-wrapper">

		<!-- header wrapper -->
		<div class="navigation scroll-bar"">
		...
		</div>
		<!-- header wrapper -->

		
		.
		.
		.

		
	<!-- main wrap end -->	
	</div>

	<!-- javascript libraries -->
	</body>
</html>

<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">

<!-- CSS -->
<link rel="stylesheet" href="css/themify-icons.css"">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">

Bootstrap Color

For change the Bootstrap Color you need to change variable.scss

primary

secondary

success

info

warning

danger

light

dark

Color Pattern

To change the color pattern using class name as mention in body tag.

color-theme-red

color-theme-green

color-theme-blue

color-theme-pink

color-theme-yellow

color-theme-orange

color-theme-gray

color-theme-brown

color-theme-darkgreen

color-theme-deeppink

color-theme-cadetblue

color-theme-darkorchid

Typography

To change the text color using class name in h1,h2.h3,h4,h5,h6,p Tag

text-grey-100

text-grey-200

text-grey-300

text-grey-400

text-grey-500

text-grey-600

text-grey-700

text-grey-800

text-grey-900

Display .display1-size

Display .display2-size

Display .display3-size

Display .display4-size

Headline .font-xsssss

Headline .font-xssss

Headline .font-xsss

Headline .font-xss

Headline .font-xs

Headline .font-sm

Headline .font-md

Headline .font-lg

Headline .font-xl

Headline .font-xxl

Font Weight .fw-100

Font Weight .fw-200

Font Weight .fw-300

Font Weight .fw-400

Font Weight .fw-500

Font Weight .fw-600

Font Weight .fw-700

Font Weight .fw-800

Font Weight .fw-900

RTL Stucture

To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

<!doctype html>
<html lang="en" dir="rtl">
<head>
    
    <meta charset="utf-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Elomoas - Online Course and LMS HTML Template</title>

    <link rel="stylesheet" href="../css/themify-icons.css">
    <link rel="stylesheet" href="../css/feather.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/style-rtl.css">

</head>
<body class="color-theme-blue mont-font">

    <div class="preloader"></div>

    
    <!-- main wrap start-->
    <div class="main-wrapper">

        <!-- header wrapper -->
        <div class="navigation scroll-bar"">
        ...
        </div>
        <!-- header wrapper -->

        
        .
        .
        .

        
    <!-- main wrap end -->   
    </div>

    <!-- javascript libraries -->
    

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

    <script src="../js/apexcharts.min.js"></script> 
    <script src="../js/chart.js"></script> 
    <script src="../js/scripts-rtl.js"></script>
    </body>
</html>

Change Log

To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

Credits

Credits to other libraries and frameworks we have used in this template.

jQuery (https://jquery.com/)

Bootstrap (https://getbootstrap.com/)

Animate On Scroll Library (https://michalsnik.github.io/aos/)

Feather Icon (https://feather.com/)

Themify Icon (https://themify.me/themify-icons/)

Apex Chart (https://apexcharts.com/)

Owl Carousel (https://owlcarousel2.github.io/OwlCarousel2/)

Support

Thanks for choosing This Template Elomoas

To get support for our theme, please write us your problem using our support form or email to: uttamdhar81@gmail.com

We aim to give you our support within 24 hours and be as customer-friendly as possible, so please be patient and hang on tight till we get back to you. Please note that we are not available at weekends.

Animate on Scroll

In order to make it work you'll have to make sure your build process has configured styles loader, and bundles it all correctly.

1. Include the library in your page

<!-- CSS -->
<link rel="stylesheet" href="css/aos.min.css" type="text/css" media="all">

<!-- SCRIPT -->
<script type="text/javascript" src="js/aos.min.js"></script>

2. How to use it?

<!-- SCRIPT -->
<script>
AOS.init();
</script>


            
<div data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000">
    .
    .

</div>

Apex Chart

While ApexCharts brings you the goodness of open-source charts, FusionCharts offers additional visualizations for your dashboards.

1. Include the library in your page

<!-- SCRIPT -->
<script type="text/javascript" src="js/apexcharts.min.js"></script>

2. How to use it?

<!-- SCRIPT -->
<script>
AOS.init();
</script>

2. After loading all the files, you are ready to build your first chart. To create a chart with minimal configuration, write as follows

<!-- SCRIPT -->
var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

3. HTML file add div

<!-- SCRIPT -->
<div id="chart"></div>

Owl Carousel

While ApexCharts brings you the goodness of open-source charts, FusionCharts offers additional visualizations for your dashboards.

1. Include css library in your main.scss page

<!-- CSS -->
@import "./../vendor/owl-carousel/css/owl.carousel.min.css";
@import "./../vendor/owl-carousel/css/owl.theme.default.css";

2. Include js library in your page at the bottom

<!-- SCRIPT -->
<script type="text/javascript" src="js/plugin.js"></script>

<!-- HTML -->
<div class="owl-carousel category-card owl-theme">
    <div class="item"></div>
    .
    .
</div>

Feather Icon

Simply beautiful open source icons

1. Include css library in your page

<!-- CSS -->
<link rel="stylesheet" href="css/feather.css" type="text/css" media="all">

<!-- HTML -->
<i class="feather-layer"></i>

Thimify Icon

Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7 - available to the public, 100% FREE! You may use or distribute it for any purpose, whether personal or commercial. This icon set is a must have tool for web designers and developers.

1. Include css library in your page

<!-- CSS -->
<link rel="stylesheet" href="css/themify-icons.css" type="text/css" media="all">

<!-- HTML -->
<i class="ti ti-layer"></i>

Widgets

Course Video

<!-- video course -->
<div class="card w300 p-0 shadow-xss border-0 rounded-lg overflow-hidden mr-1 mb-4">
    <div class="card-image w-100 mb-3">
        <a href="default-course-details.html" class="video-bttn position-relative d-block"><img src="image path" alt="image" class="w-100" style="opacity: 1;"></a>
    </div>
    <div class="card-body pt-0">
        <span class="font-xsssss fw-700 pl-3 pr-3 lh-32 text-uppercase rounded-lg ls-2 alert-warning d-inline-block text-warning mr-1">Python</span>
        <span class="font-xss fw-700 pl-3 pr-3 ls-2 lh-32 d-inline-block text-success float-right"><span class="font-xsssss">$</span> 240</span>
        <h4 class="fw-700 font-xss mt-3 lh-28 mt-0"><a href="default-course-details.html" class="text-dark text-grey-900">Complete Python Bootcamp From Zero to Hero in Python </a></h4>
        <h6 class="font-xssss text-grey-500 fw-600 ml-0 mt-2"> 32 Lesson </h6>
        <ul class="memberlist mt-3 mb-2 ml-0 d-block">
            <li><a href="#"><img src="image path" alt="user" class="w30 d-inline-block" style="opacity: 1;"></a></li>
            .
            .
        </ul>
    </div>
</div>
<!-- video course -->

User Profile

<!-- profile  -->
<div class="card w200 d-block border-0 shadow-xss rounded-lg overflow-hidden mb-4">
    <div class="card-body position-relative h100 bg-gradiant-bottom bg-image-cover bg-image-center" style="background-image: url(images/c-3.png);"></div>
    <div class="card-body d-block w-100 pl-4 pr-4 pb-4 text-center">
        <figure class="avatar ml-auto mr-auto mb-0 mt--6 position-relative w75 z-index-1"><img src="http://localhost/Elomoas/images/user-11.png" alt="image" class="float-right p-1 bg-white rounded-circle w-100" style="opacity: 1;"></figure>
        <div class="clearfix"></div>
        <h4 class="fw-700 font-xsss mt-3 mb-1">Aliqa Macale </h4>
        <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-2">support@gmail.com</p>
        <span class="live-tag mt-2 mb-3 bg-danger p-2 z-index-1 rounded-lg text-white font-xsssss text-uppersace fw-700 ls-3">LIVE</span>
    </div>
</div>
<!-- profile  -->

<!-- Subscribe  -->
<div class="card overflow-hidden subscribe-widget p-3 mb-3 rounded-xxl border-0">
    <div class="card-body d-block text-left">
        <h1 class="text-grey-800 font-xl fw-900 mb-4 lh-3">Sign up for our newsletter</h1>
        <form action="#" class="mt-3">
            <div class="form-group icon-input">
                <i class="ti-email text-grey-500 font-sm"></i>
                <input type="text" class="form-control mb-2 bg-aliceblue border-0 style1-input pl-5" placeholder="Enail address">
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="blankCheckbox" value="option1" aria-label="">
                <label class="text-grey-500 font-xssss" for="blankCheckbox">By checking this box, you confirm that you have read and are agreeing to our terms of use regarding.</label>
            </div>
        </form>
        <ul class="d-flex align-items-center justify-content-between mt-3">
            <li><a href="#" class="btn-round-md bg-facebook"><i class="font-xs ti-facebook text-white"></i></a></li>
            .
            .
        </ul>
    </div>
</div>
<!-- Subscribe  -->

Profile

<!-- profile  -->
<div class="card overflow-hidden subscribe-widget p-3 mb-3 rounded-xxl border-0">
    <div class="card-body p-2 d-block text-center bg-no-repeat bg-image-topcenter" style="background-image: url(images/user-pattern.png);">
        <a href="#" class="position-absolute right-0 mr-4"><i class="feather-edit text-grey-500 font-xs"></i></a>
        <figure class="avatar ml-auto mr-auto mb-0 mt-2 w90"><img src="images/user-12.png" alt="image" class="float-right shadow-sm rounded-circle w-100"></figure>
        <div class="clearfix"></div>
        <h2 class="text-black font-xss lh-3 fw-700 mt-3 mb-1">Hendrix Stamp</h2>
        <h4 class="text-grey-500 font-xssss mt-0"><span class="d-inline-block bg-success btn-round-xss m-0"></span> Available</h4>
        <div class="clearfix"></div>
        <div class="col-12 text-center mt-4 mb-2">
            <a href="#" class="p-0 ml-1 btn btn-round-md rounded-xl bg-lightblue"><i class="text-current ti-comment-alt font-sm"></i></a>
            .
            .
        </div>
        <ul class="list-inline border-0 mt-4">
            <li class="list-inline-item text-center mr-4"><h4 class="fw-700 font-md">500+ <span class="font-xsssss fw-500 mt-1 text-grey-500 d-block">Connections</span></h4></li>
            .
            .
        </ul>

        <div class="col-12 pl-0 mt-4 text-left">
            <h4 class="text-grey-800 font-xsss fw-700 mb-3 d-block">My Skill <a href="#"><i class="ti-angle-right font-xsssss text-grey-700 float-right "></i></a></h4>
            <div class="carousel-card owl-carousel owl-theme overflow-visible nav-none">
                <div class="item"><a href="#" class="btn-round-xxxl border bg-aliceblue"><img src="images/download1.png" alt="icon" class="p-3"></a></div>
                .
                .
            </div>
        </div>  

    </div>
</div>
<!-- profile  -->

Follower

<!-- Follower  -->
<div class="card mb-4 d-block w-100 shadow-xss rounded-lg p-5 border-0 text-center">
    <a href="#" class="position-absolute right-0 mr-4 top-0 mt-3"><i class="ti-more text-grey-500 font-xs"></i></a>
    <a href="#" class="ml-auto mr-auto rounded-lg overflow-hidden d-inline-block">
        <img src="image path" alt="icon" class="p-0 w100 shadow-xss">
    </a>
    <h4 class="fw-700 font-xs mt-3 mb-1">Aliqa Macale <i class="ti-check font-xssss btn-round-xs bg-success text-white ml-1"></i></h4>
    <p class="fw-600 font-xssss text-grey-500 mt-0 mb-2">support@gmail.com</p>
    <div class="clearfix"></div>
    <span class="font-xssss fw-600 text-grey-500 d-inline-block ml-1">Desinger</span>
    <span class="dot ml-2 mr-2 d-inline-block btn-round-xss bg-grey"></span>
    .
    .
    <ul class="list-inline border-0 mt-4">
        <li class="list-inline-item text-center mr-4"><h4 class="fw-700 font-md">500+ <span class="font-xsssss fw-500 mt-1 text-grey-500 d-block">Connections</span></h4></li>
        .
        .
    </ul>
    <a href="#" class="mt-3 p-0 btn p-2 lh-24 w100 ml-1 ls-3 d-inline-block rounded-xl bg-current font-xsssss fw-700 ls-lg text-white">FOLLOW</a>
</div>
<!-- Follower  -->

Education

<!-- Education  -->
<div class="card overflow-hidden subscribe-widget p-3 mb-3 rounded-xxl border-0 shadow-xss">
    <div class="card-body p-3 d-block text-left">
         <h4 class="pl-35 mb-4 font-xsss fw-600 text-grey-900 position-relative"><i class="feather-shield font-lg text-current position-absolute left-0"></i> Experience <span class="d-block text-grey-500 mt-1 font-xssss">0 - 2 Year </span></h4>
         .
         .
         <a href="#" class="bg-primary-gradiant border-0 text-white fw-600 text-uppercase font-xssss float-left rounded-lg d-block mt-4 w-100 p-2 lh-34 text-center ls-3 ">BUy Now</a>
    </div>
</div>
<!-- Education  -->

Badge Widget

<!-- Badge Widget  -->
<div class="card mb-4 d-block w-100 shadow-xss rounded-lg p-xxl-5 p-4 border-0 text-center">
    <a href="#" class="position-absolute right-0 mr-4 top-0 mt-3"><i class="ti-more text-grey-500 font-xs"></i></a>
    <a href="#" class="btn-round-xxxl rounded-lg ml-auto mr-auto">
        <img src="image path" alt="icon" class="w-100">
    </a>
    <h4 class="fw-700 font-xsss mt-4">Bronze User</h4>
    <p class="fw-500 font-xssss text-grey-500 mt-3">Learn new secrets to creating awesome Microsoft Access databases</p>
    <div class="clearfix"></div>
    <div class="progress mt-3 h10">
      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
    </div>
    <a href="#" class="mt-3 d-inline-block text-grey-900 fw-700 rounded-lg text-center font-xssss ls-3">UNLOCK</a>
</div>
<!-- Badge Widget  -->

Price Widget

<!-- Price Widget  -->
<div class="card p-4 mb-4 bg-primary border-0 shadow-xss rounded-lg">
    <div class="card-body">
        <h2 class="text-white font-xsssss fw-700 text-uppercase ls-3 ">Starter</h2>
        <h1 class="display2-size text-white fw-700">€ 49</h1>
        <h4 class="text-white fw-500 mb-4 lh-24 font-xssss">For anyone validating Framer as a professional prototyping tool.</h4>
        <h4 class="text-white font-xssss mb-2"><i class="ti-check mr-2 text-white"></i> Unlimited views</h4>
        ..
        .
        <a href="#" class="btn btn-block border-0 w-100 bg-white p-3 text-primary fw-600 rounded-lg d-inline-block font-xssss btn-light">Subscribe</a>
    </div>
</div>
<!-- Price Widget  -->

Review Widget

<!-- Review Widget  -->
<div class="card w-100 border-0 mt-0 mb-4 p-4 shadow-xss position-relative rounded-lg bg-white">
    <div class="row">
        <div class="col-5 pr-0">
            <h2 class="display3-size lh-1 m-0 text-grey-900 fw-700">4.2</h2>
        </div>
        <div class="col-7 pl-0 text-right">
            <div class="star d-block w-100 text-right">
                <img src="image path" alt="star" class="w10">
                <img src="image path" alt="star" class="w10">
                .
                .
                .
            </div>
            <h4 class="font-xsssss text-grey-600 fw-600 mt-1">Based on 433 rating</h4>
        </div>
    </div>
    <div class="bg-aliceblue theme-dark-bg rounded-sm p-2 mt-3 mb-4">
        <div class="row mt-3">
            <div class="col-3 pr-1 mt-0"><img src="images/star.png" alt="star" class="w10 float-left"><h4 class="font-xsss fw-600 text-grey-600 ml-1 float-left d-inline">5</h4></div>
            <div class="col-7 pl-0 pr-2">
                <div id="bar_1" data-value="45" class="bar-container">
                    <div class="bar-percentage" style="width: 70%;"></div>
                </div>
            </div>
            <div class="col-2 pl-0"><h4 class="font-xssss fw-600 text-grey-800">70%</h4></div>
        </div>
        
        .
        .
    </div>
    <div class="row"><a href="#" class="d-block p-2 lh-32 w-100 text-center ml-3 mr-3 bg-aliceblue fw-600 font-xssss text-grey-900">Add a Review</a></div>
</div>
<!-- Review Widget  -->

Live Video

Include css library in your page

<!-- CSS -->
<link rel="stylesheet" href="css/video-player.css" type="text/css" media="all">

Here the code you need to put html page

<!-- Live Video  -->
<div class="card border-0 mb-0 rounded-lg overflow-hidden live-stream bg-image-center bg-image-cover" style="background-image: url(image path);">
    <div class="card-body d-flex justify-content-start p-2 position-absolute top-0 w-100 bg-gradiant-top">
        <figure class="avatar mb-0 mt-0 overflow-hidden"><img src="image path" alt="image" class="z-index-1 shadow-sm rounded-circle w40"></figure><h5 class="text-white mt-1 fw-700 ml-2 z-index-1 ">Cabe Deo <span class="d-block font-xsssss mt-1 fw-400 text-grey-300 z-index-1 ">2 hour</span></h5>
        <span class="live-tag position-absolute right-15 mt-2 bg-danger p-2 z-index-1  rounded-lg text-white font-xsssss text-uppersace fw-700 ls-3">LIVE</span>
    </div>
    <div class="card-body text-center p-2 position-absolute w-100 bottom-0 bg-gradiant-bottom">
        <a href="#" class="btn-round-xl d-md-inline-block d-none bg-blur m-3 mr-0 z-index-1"><i class="feather-grid text-white font-md"></i></a>
        <a href="#" class="btn-round-xl d-md-inline-block d-none bg-blur m-3 z-index-1"><i class="feather-mic-off text-white font-md"></i></a>       
        <a href="#" class="btn-round-xxl bg-danger z-index-1"><i class="feather-phone-off text-white font-md"></i></a>   
        <a href="#" class="btn-round-xl d-md-inline-block d-none bg-blur m-3 z-index-1"><i class="ti-video-camera text-white font-md"></i></a>   
        <a href="#" class="btn-round-xl d-md-inline-block d-none bg-blur m-3 ml-0 z-index-1"><i class="ti-settings text-white font-md"></i></a>  
        <span class="p-2 bg-blur z-index-1 text-white fw-700 font-xssss rounded-lg right-15 position-absolute mb-4 bottom-0">44:00</span>    
    </div>
</div>
<!-- Live Video  -->

Bar Chart

Include the library in your page

<!-- SCRIPT -->
<script type="text/javascript" src="js/apexcharts.min.js"></script>
<script type="text/javascript" src="js/chart.js"></script>

Here the code you need to put html page

<!-- Bar Chart  -->
<div id="chart-usersMultiplee"></div>
<!-- Live Video  -->

Author Profile

Here the code you need to put html page

Author Profile
<div class="card d-block w-100 border-0 shadow-xss rounded-lg overflow-hidden mb-3" style="background-image: url(image path);">
    <div class="card-body p-lg-5 p-4 bg-black-08">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-lg-12 pl-lg-5 pt-lg-5">
                <figure class="avatar ml-0 mb-4 position-relative w100 z-index-1"><img src="image path" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
            </div>
            <div class="col-lg-4 pl-lg-5 pb-lg-5 pb-3">
                <h4 class="fw-700 font-md text-white mt-3 mb-1">Hendrix Stamp <i class="ti-check font-xssss btn-round-xs bg-success text-white ml-1"></i></h4>
                <span class="font-xssss fw-600 text-grey-500 d-inline-block ml-0">support@gmail.com</span>
                <ul class="memberlist mt-3 mb-2 ml-0">
                    <li><a href="#"><img src="image path" alt="user" class="w30 d-inline-block"></a></li>
                    .
                    .
                </ul>
            </div>
            <div class="col-lg-4 d-block">
                <h2 class="display5-size text-white fw-700 lh-1 mr-3">98 <i class="feather-arrow-up-right text-success font-xl"></i></h2>
                <h4 class="text-white font-sm fw-600 mt-0 lh-3">Your learning level points! </h4>
            </div>
            <div class="col-lg-3 mt-4">
                <div id="chart-users-blue3" class="mt-2"></div>
            </div>
        </div>
    </div>
</div>
Author Profile