1. Home
  2. Docs
  3. eLan – Moodle Theme Documentation
  4. Creating content
  5. Home Page

Home Page

Here is the home page HTML content. You can simply use the code form below

Note: Add course and blog section Information manually. Update Image and link from code.

First step: Copying the HTML code and add into the editor

<div class="main-banner-area">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-12">
                <div class="main-banner-content">
                    <span class="sub-title"><i class="ri-book-mark-line"></i> New Year Sale! Hurry! Get Special Pricing Today</span>
                    <h1>Top Leading Distance Learning Provider</h1>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.</p>
                    <a href="http://elan.envytheme.com/login/signup.php?" class="default-btn"><i class="ri-user-2-fill"></i> Join For Free</a>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="main-banner-image">
                    <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/banner1.png" alt="image">
                </div>
            </div>
        </div>
        <div class="single-courses-box">
            <div class="image">
                <a href="http://elan.envytheme.com/course/view.php?id=2" class="d-block">
                    <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/courses1.jpg" alt="image">
                </a>
                <div class="category-list">
                    <a href="http://localhost/moodle/edmo/course/index.php?categoryid=14">Node.js</a>
                    <a href="http://localhost/moodle/edmo/course/index.php?categoryid=14">Data</a>
                </div>
            </div>
            <div class="content">
                <div class="price">
                    Free
                </div>
                <div class="author">
                    <div class="d-flex align-items-center">
                        <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/user1.jpg" alt="image">
                        <span>James Smith</span>
                    </div>
                </div>
                <h3><a href="http://elan.envytheme.com/course/view.php?id=2">Node.js for Beginners: Go From Zero to Hero with Node.js</a></h3>
                <ul class="courses-box-list d-flex align-items-center justify-content-between">
                    <li><i class="ri-book-2-fill"></i> 15 Lessons</li>
                    <li><i class="ri-team-fill"></i> 255 Students</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="popular-tag"><img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/popular-tag.png" alt="image"></div>
</div>

<!-- Start Features Area -->
<div class="features-area pt-100 pb-70">
    <div class="container">
        <div class="section-title">
            <span class="sub-title">EDUCATION FOR EVERYONE</span>
            <h2>Affordable Online Courses and Learning Opportunities​</h2>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="single-features-box">
                    <div class="image">
                        <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/features1.png" alt="image">
                    </div>
                    <h3>Learn Latest Top Skills</h3>
                    <p>Learning top skills can bring an extra-ordinary outcome in a career.</p>
                    <a href="http://elan.envytheme.com/login/signup.php?" class="link-btn">Register Now <i class="ri-arrow-right-line"></i></a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="single-features-box active">
                    <div class="image">
                        <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/features2.png" alt="image">
                    </div>
                    <h3>Learn in Your Own Pace</h3>
                    <p>Learning top skills can bring an extra-ordinary outcome in a career.</p>
                    <a href="http://elan.envytheme.com/login/signup.php?" class="link-btn">Register Now <i class="ri-arrow-right-line"></i></a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="single-features-box">
                    <div class="image">
                        <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/features3.png" alt="image">
                    </div>
                    <h3>From Industry Experts</h3>
                    <p>Learning top skills can bring an extra-ordinary outcome in a career.</p>
                    <a href="http://elan.envytheme.com/login/signup.php?" class="link-btn">Register Now <i class="ri-arrow-right-line"></i></a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="single-features-box">
                    <div class="image">
                        <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/features4.png" alt="image">
                    </div>
                    <h3>Learning From Anywhere </h3>
                    <p>Learning top skills can bring an extra-ordinary outcome in a career.</p>
                    <a href="http://elan.envytheme.com/login/signup.php?" class="link-btn">Register Now <i class="ri-arrow-right-line"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Features Area -->

<!-- Start About Area -->
<div class="about-area">
    <div class="container-fluid">
        <div class="about-inner-area">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-12">
                    <div class="about-image">
                        <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/about1.jpg" alt="image">
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="about-content">
                        <span class="sub-title">ONLINE LEARNING</span>
                        <h2>Learn Something New, and Grow Your Skills From Anywhere in the World!</h2>
                        <p>We understand better that online-based learning can make a significant change to reach students from all over the world! Giving options to learn better always can offer the best outcomes!</p>
                        <ul class="features-list">
                            <li><span><i class="ri-user-2-line"></i> Expert Trainers</span></li>
                            <li><span><i class="ri-riding-line"></i> Lifetime Access</span></li>
                            <li><span><i class="ri-remote-control-line"></i> Remote Learning</span></li>
                            <li><span><i class="ri-layout-grid-line"></i> Self Development</span></li>
                        </ul>
                        <a href="https://edmo.envytheme.com/course/index.php?categoryid=14" class="default-btn"><i class="ri-user-2-fill"></i> View All Courses</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End About Area -->

<!-- Start Courses Area -->
<div class="courses-area ptb-100">
    <div class="container">
        <div class="section-title">
            <span class="sub-title">LEARN AT YOUR OWN PACE</span>
            <h2>eLan Popular Courses</h2>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-4 col-md-6">
                <div class="single-courses-box">
                    <div class="image">
                        <a href="http://elan.envytheme.com/course/view.php?id=2" class="d-block">
                            <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/courses1.jpg" alt="image">
                        </a>
                        <div class="category-list">
                            <a href="https://edmo.envytheme.com/course/index.php?categoryid=2">Node.js</a>
                            <a href="https://edmo.envytheme.com/course/index.php?categoryid=2">Data</a>
                        </div>
                    </div>
                    <div class="content">
                        <div class="price">
                            $49
                        </div>
                        <div class="author">
                            <div class="d-flex align-items-center">
                                <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/user1.jpg" alt="image">
                                <span>James Smith</span>
                            </div>
                        </div>
                        <h3><a href="http://elan.envytheme.com/course/view.php?id=2">Node.js for Beginners: Go From Zero to Hero with Node.js</a></h3>
                        <ul class="courses-box-list d-flex align-items-center justify-content-between">
                            <li><i class="ri-book-2-fill"></i> 15 Lessons</li>
                            <li><i class="ri-team-fill"></i> 255 Students</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-courses-box">
                    <div class="image">
                        <a href="http://elan.envytheme.com/course/view.php?id=2" class="d-block">
                            <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/courses2.jpg" alt="image">
                        </a>
                        <div class="ribbon"><span>POPULAR</span></div>
                    </div>
                    <div class="content">
                        <div class="price">
                            $59
                        </div>
                        <div class="author">
                            <div class="d-flex align-items-center">
                                <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/user2.jpg" alt="image">
                                <span>Jasika Smith</span>
                            </div>
                        </div>
                        <h3><a href="http://elan.envytheme.com/course/view.php?id=2">Deep Learning a-z™: Hands-on Artificial Neural Networks</a></h3>
                        <ul class="courses-box-list d-flex align-items-center justify-content-between">
                            <li><i class="ri-book-2-fill"></i> 11 Lessons</li>
                            <li><i class="ri-team-fill"></i> 41 Students</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-courses-box">
                    <div class="image">
                        <a href="http://elan.envytheme.com/course/view.php?id=2" class="d-block">
                            <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/courses3.jpg" alt="image">
                        </a>
                        <div class="category-list">
                            <a href="https://edmo.envytheme.com/course/index.php?categoryid=2">-10%</a>
                        </div>
                    </div>
                    <div class="content">
                        <div class="price">
                            $79
                        </div>
                        <div class="author">
                            <div class="d-flex align-items-center">
                                <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/user3.jpg" alt="image">
                                <span>Joe Root</span>
                            </div>
                        </div>
                        <h3><a href="http://elan.envytheme.com/course/view.php?id=2">The Data Science Course 2021: Complete Data Science</a></h3>
                        <ul class="courses-box-list d-flex align-items-center justify-content-between">
                            <li><i class="ri-book-2-fill"></i> 24 Lessons</li>
                            <li><i class="ri-team-fill"></i> 120 Students</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12">
                <div class="courses-info">
                    <p>Enjoy the top notch learning methods and achieve next level skills! You are the creator of your own career &amp; we will guide you through that. <a href="http://elan.envytheme.com/login/signup.php?">Register Free Now!</a></p>
                    <a href="https://edmo.envytheme.com/course/index.php?categoryid=2" class="default-btn"><i class="ri-user-2-fill"></i> View All Courses</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Courses Area -->

<!-- Start Funfacts Area -->
<div class="funfacts-area bg-color pt-100 pb-70">
    <div class="container">
        <div class="section-title">
            <span class="sub-title">LEARN AT YOUR OWN PACE</span>
            <h2>Flexible Study at Your Own Pace, According to Your Own Needs</h2>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-3 col-sm-3 col-md-3 col-6">
                <div class="single-funfacts-box color-white">
                    <h3><span class="odometer" data-count="1926"></span></h3>
                    <p>Finished Sessions</p>
                </div>
            </div>
            <div class="col-lg-3 col-sm-3 col-md-3 col-6">
                <div class="single-funfacts-box color-white">
                    <h3><span class="odometer" data-count="3279"></span></h3>
                    <p>Enrolled Learners</p>
                </div>
            </div>
            <div class="col-lg-3 col-sm-3 col-md-3 col-6">
                <div class="single-funfacts-box color-white">
                    <h3><span class="odometer" data-count="25"></span></h3>
                    <p>Online Instructors</p>
                </div>
            </div>
            <div class="col-lg-3 col-sm-3 col-md-3 col-6">
                <div class="single-funfacts-box color-white">
                    <h3><span class="odometer" data-count="99"></span><span class="sign">%</span></h3>
                    <p>Satisfaction Rate</p>
                </div>
            </div>
        </div>
    </div>
    <div class="lines">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</div>
<!-- End Funfacts Area -->

<!-- Start Testimonials Area -->
<div class="testimonials-area bg-color pb-100">
    <div class="container">
        <div class="testimonials-slides owl-carousel owl-theme">
            <div class="single-testimonials-box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum
                    dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                <div class="client-info">
                    <div class="d-flex align-items-center">
                        <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/user1.jpg" alt="image">
                        <div class="title">
                            <h3>John Smith</h3>
                            <span>Web Developer</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="single-testimonials-box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum
                    dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                <div class="client-info">
                    <div class="d-flex align-items-center">
                        <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/user2.jpg" alt="image">
                        <div class="title">
                            <h3>Sarah Taylor</h3>
                            <span>UX/UI Designer</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="single-testimonials-box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum
                    dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                <div class="client-info">
                    <div class="d-flex align-items-center">
                        <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/user3.jpg" alt="image">
                        <div class="title">
                            <h3>James Anderson</h3>
                            <span>Developer</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="lines">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</div>
<!-- End Testimonials Area -->

<!-- Start Intro Video Area -->
<div class="intro-video-area bg-color">
    <div class="container">
        <div class="section-title">
            <span class="sub-title">OUR INTRO VIDEO</span>
            <h2>Watch Our Students Feedback</h2>
        </div>
        <div class="video-box">
            <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/video1.jpg" alt="image">
            <a href="https://www.youtube.com/watch?v=PWvPbGWVRrU" class="video-btn popup-video"><i class="ri-play-line"></i></a>
        </div>
    </div>
    <div class="lines">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</div>
<!-- End Intro Video Area -->

<!-- Start Get Instant Area -->
<div class="get-instant-area ptb-100">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-12">
                <div class="get-instant-content">
                    <span class="sub-title">GET INSTANT ACCESS TO THE FREE</span>
                    <h2>Self Development Course</h2>
                    <p>eLan Self Development Course can assist you in bringing the significant changes in personal understanding and reshaping the confidence to achieve the best from your career! We trust that learning should be enjoyable, and only that
                        can make substantial changes to someone!</p>
                    <a href="http://elan.envytheme.com/login/signup.php?" class="default-btn"><i class="ri-login-box-line"></i> Join For Free</a>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="get-instant-image">
                    <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/get-instant.jpg" alt="image">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Get Instant Area -->

<!-- Start Blog Area -->
<div class="blog-area pt-100 pb-70 bg-FBF8F5">
    <div class="container">
        <div class="section-title">
            <span class="sub-title">NEWS AND BLOGS</span>
            <h2>Our Latest Publications</h2>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-4 col-md-6">
                <div class="single-blog-post">
                    <div class="image">
                        <a href="http://elan.envytheme.com/blog/index.php?entryid=1" class="d-block">
                            <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/blog1.jpg" alt="image">
                        </a>
                        <span class="date">February 20, 2021</span>
                    </div>
                    <div class="content">
                        <h3><a href="http://elan.envytheme.com/blog/index.php?entryid=1">Resources for Teachers</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                        <a href="http://elan.envytheme.com/blog/index.php?entryid=1" class="link-btn">Read More <i class="ri-arrow-right-line"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-blog-post">
                    <div class="image">
                        <a href="http://elan.envytheme.com/blog/index.php?entryid=1" class="d-block">
                            <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/blog2.jpg" alt="image">
                        </a>
                        <span class="date">February 19, 2021</span>
                    </div>
                    <div class="content">
                        <h3><a href="http://elan.envytheme.com/blog/index.php?entryid=1">Instructional Strategies </a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                        <a href="http://elan.envytheme.com/blog/index.php?entryid=1" class="link-btn">Read More <i class="ri-arrow-right-line"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-blog-post">
                    <div class="image">
                        <a href="http://elan.envytheme.com/blog/index.php?entryid=1" class="d-block">
                            <img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/blog3.jpg" alt="image">
                        </a>
                        <span class="date">February 18, 2021</span>
                    </div>
                    <div class="content">
                        <h3><a href="http://elan.envytheme.com/blog/index.php?entryid=1">Fitness Guideline Program</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                        <a href="http://elan.envytheme.com/blog/index.php?entryid=1" class="link-btn">Read More <i class="ri-arrow-right-line"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Blog Area -->

<!-- Start Get Started Area -->
<div class="get-started-area ptb-100">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-5 col-lg-7 col-md-7">
                <div class="get-started-content">
                    <span class="sub-title">AFFORDABLE CERTIFICATION</span>
                    <h2>Get Your Quality Skills Certificate Through Online Exam</h2>
                    <p>Students friendly pricing for the certificate programs helps individuals to get their skill certificate easier than ever!</p>
                    <a href="http://elan.envytheme.com/login/signup.php?" class="default-btn"><i class="ri-user-2-fill"></i> Get Started Now</a>
                </div>
            </div>
        </div>
    </div>
    <div class="get-started-shape1"><img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/shape1.png" alt="image"></div>
    <div class="get-started-shape2"><img src="http://elan.envytheme.com/draftfile.php/5/user/draft/528748745/shape2.png" alt="image"></div>
</div>
<!-- End Get Started Area -->

Update Image and link from code http://elan.envytheme.com/

Was this article helpful to you? Yes No

How can we help?