Learnhub Documentation


Welcome to Learnhub! Get familiar with the template structure and explore its features:

Learnhub
Working with Doc

You can any work by following our docs

Learnhub
Formatting Content

Our content is more formating for your website

Learnhub
Perfect Responsive

Our Template is full Perfect for all device. You can visit our template all device easily.

Learnhub
Sass Available

The tamplate has Sass available for css. You can Change css by sass

Learnhub
Fast Loading Speed

Learnhub offers faster loading speed. Learnhub helps you build your template so much faster

Learnhub
24 Support System

We are provide 24 hours support for all clients.You can purchase without hesitation.

Getting Started

Welcome to Learnhub! Get familiar with the template structure and explore its features:

Use Learnhub as your next-gen all-in-one Business & Corporate Agency Bootstrap5 Template. It comes with HTML5 and Bootstrap5. We built a component-based and developer-friendly modern template with a clean design and faster loading HTML pages. It includes Main Business, Startup Agency, Law Firm, Insurance, IT Solutions, Event Management, Financial Advisor, Healthcare, Business Consulting, Corporate Business, and other needed inner or detail pages.

Learnhub Core Features

  • HTML5 & CSS3
  • Responsive layout (desktops, tablets, mobile devices)
  • Built with Bootstrap v5.3.3
  • Well structured code
  • Contact Form Working
  • Hinted Typography
  • Dark Mode Available
  • Sass Available
  • W3 Valid 100%
  • Fast Loading Speed
  • Cross Browser Support
  • Dedicated Support, Lifetime Updates
  • And much more …

What's Included

After purchasing Learnhub template on templateforest.net with your Envato account, go to your Download page. You can choose to download Learnhub template only or the entire Learnhub template package which contains the following files:

  1. Learnhub template: A .zip file with all .html files with all necessary assets.
  2. Documentation: An HTML format documentation.
  3. Licensing.

How to Install Learnhub Website Templates

Installing a Learnhub template is not like WordPress or CMS theme installation. Actually, the installation keyword does not apply to a Learnhub template. Why? Because you don’t install anything — Learnhub HTML templates are automatically rendered by the browser.

1. Editing Learnhub Template

Before all that you have to edit your template and place your own contents by replacing old demo contents, in this case, you will need a code editor such as – VScode, Sublime Text, etc. When template editing is done using editor, save the files and folder and go ahead to upload template files on live server.

Step - 1: To switch logo:

Home Page 
                                                
                                                    <a class="header-logo d-inline-block" href="index.html">
                                                        <img class="img-fluid" src="assets/images/logo/logo.webp" alt="Learnhub Logo">
                                                    </a>

4. Uploading to Live Server Using FTP:

First of all, If you don’t have your template on your computer, download Learnhub template to get started, when download/purchase complete you will get a package like this screenshot (after unzip).

Home Page

5. Package comes with documentation unzip the download package, you’ll found a folder with all template files, like above screenshot.

Home Page

6. Now, login to your hosting control panel or FTP client, such as: FileZilla, CyberDuck etc. and upload template files on your server root.

7. Once all files are uploaded, go to www.yoursite.com/index.html you can see the homepage, make sure the initial page is named as index.html

Template Structures

Articles

HTML Structure

This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into differt section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.

Images 
                                            
                                                <!DOCTYPE html>
                                                <html lang="en">

                                                <head>
                                                    <meta charset="UTF-8">
                                                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                                    <meta name="theme-style-mode" content="1">

                                                    <!-- Title -->
                                                    <title>Home || Learnhub - SaaS Website HTML5</title>

                                                    <!-- Favicon -->
                                                    <link rel="shortcut icon" type="image/x-icon" href="assets/images/logo/favico.ico">

                                                    <!-- CSS -->
                                                    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/fontawesome-all.min.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/neue-plak.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/fancybox.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/feather.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/nice-select.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/jquery-ui.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/plyr.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/odometer.css">
                                                    <link rel="stylesheet" href="assets/css/style.css">
                                                </head>

                                                <body>
                                                    

                                                    <!-- JS -->
                                                    <script src="assets/js/vendor/jquery.min.js"></script>
                                                    <script src="assets/js/vendor/paralax-scroll.js"></script>
                                                    <script src="assets/js/vendor/swiper-bundle.min.js"></script>
                                                    <script src="assets/js/vendor/gsap.min.js"></script>
                                                    <script src="assets/js/vendor/ScrollTrigger.min.js"></script>
                                                    <script src="assets/js/vendor/splitText.min.js"></script>
                                                    <script src="assets/js/vendor/TweenMax.min.js"></script>
                                                    <script src="assets/js/vendor/jquery-one-page-nav.js"></script>
                                                    <script src="assets/js/vendor/isotop.js"></script>
                                                    <script src="assets/js/vendor/imageloaded.js"></script>
                                                    <script src="assets/js/vendor/bootstrap.min.js"></script>
                                                    <script src="assets/js/vendor/clock.js"></script>
                                                    <script src="assets/js/vendor/clockTwo.js"></script>
                                                    <script src="assets/js/vendor/fancybox.js"></script>
                                                    <script src="assets/js/vendor/backtotop.js"></script>
                                                    <script src="assets/js/vendor/marquee.min.js"></script>
                                                    <script src="assets/js/vendor/nice-select.min.js"></script>
                                                    <script src="assets/js/vendor/jquery-ui.js"></script>
                                                    <script src="assets/js/vendor/Sortable.min.js"></script>
                                                    <script src="assets/js/vendor/jquery-appear.js"></script>
                                                    <script src="assets/js/vendor/odometer.js"></script>

                                                    <!-- Main JS -->
                                                    <script src="assets/js/main.js"></script>

                                                </body>

                                                </html>

CSS Files and Structure

We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:

HTML Images 
                                            
                                                /*********************************************************************************
                                                  Template Name: Learnhub - Business & Corporate Agency Bootstrap5 Template
                                                  Description: A perfect template for business, corporate, and agency websites. It comes with a nice and clean design.
                                                  Note: This is style css.
                                                **********************************************************************************/
                                                /**************************************************************
                                                  STYLESHEET INDEXING
                                                  |
                                                  |
                                                  |___ Default Styles
                                                  | |
                                                  | |___ edu-common
                                                  | |___ extend
                                                  | |___ forms
                                                  | |___ index
                                                  | |___ mixins
                                                  | |___ reset
                                                  | |___ spacing
                                                  | |___ text-animation
                                                  | |___ typography
                                                  | |___ variables
                                                  |
                                                  |
                                                  |
                                                  |___Utilities Styles
                                                  | |___ advance-tab
                                                  | |___ animation
                                                  | |___ button
                                                  | |___ index
                                                  | |___ shortcode
                                                  | |___ swiper
                                                  |
                                                  |
                                                  |___Components Styles
                                                  | |___ 404
                                                  | |___ about
                                                  | |___ academic-overview
                                                  | |___ accordion
                                                  | |___ achievement
                                                  | |___ area-of-study
                                                  | |___ backtotop
                                                  | |___ badge
                                                  | |___ blog-details
                                                  | |___ blog
                                                  | |___ brand
                                                  | |___ breadcrumb
                                                  | |___ button
                                                  | |___ campus
                                                  | |___ card
                                                  | |___ category
                                                  | |___ contact
                                                  | |___ copyright
                                                  | |___ counter
                                                  | |___ course-details
                                                  | |___ course-filter
                                                  | |___ course-meta
                                                  | |___ course-sidebar
                                                  | |___ course
                                                  | |___ create-course
                                                  | |___ cta
                                                  | |___ department
                                                  | |___ event-details
                                                  | |___ event-slider
                                                  | |___ event
                                                  | |___ faculty
                                                  | |___ filter
                                                  | |___ footer
                                                  | |___ form
                                                  | |___ header
                                                  | |___ hero
                                                  | |___ index
                                                  | |___ instructor-dashboard
                                                  | |___ lesson
                                                  | |___ lrn-common
                                                  | |___ maintenance
                                                  | |___ marquee
                                                  | |___ mobilemenu
                                                  | |___ nav
                                                  | |___ newsletter
                                                  | |___ one-page-navigation
                                                  | |___ pagination
                                                  | |___ privacy-policy
                                                  | |___ quantified
                                                  | |___ review
                                                  | |___ search
                                                  | |___ section-head
                                                  | |___ service
                                                  | |___ shop
                                                  | |___ sidebar
                                                  | |___ signup
                                                  | |___ social
                                                  | |___ style-guide
                                                  | |___ subscription
                                                  | |___ success-stories
                                                  | |___ team
                                                  | |___ testimonial
                                                  | |___ video
                                                  | |___ webinar
                                                  | |___ offcanvas
                                                  | |
                                                  | |
                                                  |___Others styles
                                                  | |___ others
                                                  |
                                                  |
                                                  |___ END STYLESHEET INDEXING
                                                ***************************************************************/

JavaScript Files

There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:

HTML Images

Change Contents

Changing Images

To change any images of the website

  1. Carefully collect the source name of the image (i.e. banner-img.jpg)
  2. Open the file called images.
  3. Find the particular image file.
  4. Replace the file with your image.
  5. Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file: 

                                                    
                                                        <a class="header-logo d-inline-block" href="index.html">
                                                            <img class="img-fluid" src="assets/images/logo/logo.webp" alt="Learnhub Logo">
                                                        </a>
HTML Images

You have to do the following to change this image with your own image:

  1. Open the file called images.
  2. Find the particular image file called banner-img.jpg
  3. Replace the file with your image
  4. Make sure that the file name does not change.

Changing Colors

We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the style.scss file after you have made changes in any of the .scss files.

Changing default template colors

  1. Open the variable.scss file from assets > scss > default folder with a text-editor.
  2. Change the right-side values of the variables to change any default colors of your site.
  3. Save your file.

Have a look at the following image for a visual description:

Images

Header Types

Welcome to Learnhub Header Elements! You can choose 8 types of header packages for creating your website.

01. Header Default

To change any images of the website

Images 

                                
                                    <header class="lrn-header bg-color-dark-100 lrn-border-bottom header-sticky">
                                            <div class="container-fluid plr_mobile--15 plr--30 plr_sm--15 plr_md--25 plr_lg--25">
                                                <div class="d-flex justify-content-between align-items-center ptb_lg--15 ptb_md--15 ptb_sm--15">
                                                    <div class="d-flex align-items-center gap-3">
                                                        <a class="header-logo d-inline-block" href="index.html">
                                                            <img class="img-fluid" src="assets/images/logo/logo.webp" alt="Learnhub Logo">
                                                        </a>
                                    
                                                        <div class="rbt-category-menu-wrapper lrn-side-offcanvas-activation">
                                                            ...
                                                        </div>
                                                        <div class="lrn-header-search-toggle">
                                                            <button type="button" class="lrn-search-1-small lrn-search-btn-sm lrn-header-search-activation" aria-label="Open search">
                                                                <i class="fa-light fa-magnifying-glass"></i>
                                                            </button>
                                                            <button type="button" class="lrn-search-1-small lrn-search-btn-sm lrn-header-search-close" aria-label="Close search">
                                                                <i class="fa-regular fa-xmark"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="d-none align-items-center lrn-search-1">
                                                        <div>
                                                            <i class="fa-sharp fa-regular fa-magnifying-glass"></i>
                                                        </div>
                                                        <input class="lrn-border-w-1" type="text" placeholder="Search in Courses">
                                                    </div>
                                                    <div class="lrn-main-navigation d-none d-xl-flex">
                                                        ...
                                                    </div>
                                                    <div class="d-flex align-items-center gap-lg-5 gap-3 gap-md-4">
                                                        <button type="button" class="position-relative pointer bg-color-dark-600 lrn-cart lrn-cart-activation d-none d-md-flex" aria-label="Open shopping cart">
                                                            <i class="fa-regular fa-cart-shopping color-secondary-100"></i>
                                                            <span
                                                            class="position-absolute top-0 start-100 translate-middle badge bg-color-primary-100 lrn-cart-badge">
                                                            4
                                                        </span>
                                                        </button>
                                                        <div class="lrn-header-info d-none d-md-block">
                                                            <a class="color-secondary-100 fw-400" href="signin.html">Login</a>
                                                        </div>
                                                        <div class="lrn-header-info lrn-btn-group d-none d-md-block">
                                                            <a class="btn color-secondary-100 fw-700 btn-normal b3 lh--5" href="signup.html"><i
                                                        class="fa-regular fa-arrow-right-to-bracket pr--5"></i> Sign
                                                                Up</a>
                                                        </div>
                                                        <button class="lrn-user-btn d-md-none">
                                                            <i class="fa-thin fa-user"></i>
                                                        </button>
                                                        <div class="hamberger d-xl-none">
                                                            <button class="btn hamberger-button hamberger-button-circle v2">
                                                                <i class="fa-regular fa-bars color-secondary-100"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </header>

02. Header Style Two

To change any images of the website

Images 

                            
                                <header class="lrn-header lrn-header-6 header-sticky bg-color-dark-100">
                                    <div class="container d-none d-lg-block">
                                      <div class="lrn-header-top">
                                        <div class="header-t-left">
                                          <div class="item d-flex align-items-center gap-3">
                                            <span class="color-secondary-400 fs--15">Follow Us:</span>
                                            <ul class="social-media">
                                              ...
                                            </ul>
                                          </div>
                                          <div class="item">
                                            <i class="feather-phone-call"></i>
                                            <a class="color-secondary-400 fs--15 link" href="tel:886516315212">(+88) 651-631-5212</a>
                                          </div>
                                          <div class="item">
                                            <i class="fa-regular fa-envelope"></i>
                                            <a class="color-secondary-400 fs--15 link" href="mailto:learnhub.info@gmail.com">learnhub.info@gmail.com</a>
                                          </div>
                                        </div>
                                  
                                        <div class="header-t-right">
                                          ...                                          
                                        </div>
                                      </div>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="container">
                                        <div class="lrn-header-bottom">
                                          <div class="header-b-left">
                                            <a class="lrn-header-logo" href="index.html">
                                              <img src="assets/images/logo/logo.webp" alt="Logo Images" />
                                            </a>
                                            <div class="d-none d-xl-inline">
                                                ...
                                            </div>
                                          </div>
                                          <div class="lrn-header-b-right">
                                            <form class="d-none d-xxl-flex align-items-center lrn-search-1 lrn-search-4">
                                                <input class="lrn-border-w-1" type="text" placeholder="What do you want to learn?">
                                                <div class="content">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
                                                        <rect width="50" height="50" rx="8" />
                                                        <path
                                                            d="M20.522 19.5524C20.2336 19.2638 19.7656 19.2638 19.4772 19.5524C18.4063 20.6234 17.8799 22.1152 18.0329 23.6458C18.071 24.0271 18.3922 24.3113 18.7674 24.3113C18.792 24.3113 18.8168 24.31 18.8415 24.3076C19.2477 24.2669 19.5439 23.9046 19.5033 23.4987C19.3945 22.411 19.7659 21.3534 20.522 20.5972C20.8107 20.3088 20.8107 19.8408 20.522 19.5524Z"
                                                            fill="#D6DAF0" fill-opacity="0.7" />
                                                        <path
                                                            d="M23.4482 15C18.7899 15 15 18.7899 15 23.4482C15 28.1066 18.7899 31.8964 23.4482 31.8964C28.1066 31.8964 31.8964 28.1066 31.8964 23.4482C31.8964 18.7899 28.1065 15 23.4482 15ZM23.4482 30.4186C19.6047 30.4186 16.4778 27.2918 16.4778 23.4482C16.4778 19.6046 19.6047 16.4778 23.4482 16.4778C27.2915 16.4778 30.4186 19.6046 30.4186 23.4482C30.4186 27.2918 27.2918 30.4186 23.4482 30.4186Z"
                                                            fill="#D6DAF0" fill-opacity="0.7" />
                                                        <path
                                                            d="M34.7841 33.7343L29.4147 28.3649C29.126 28.0763 28.6585 28.0763 28.3698 28.3649C28.0812 28.6534 28.0812 29.1213 28.3698 29.4098L33.7393 34.7792C33.8836 34.9235 34.0725 34.9957 34.2617 34.9957C34.4509 34.9957 34.6398 34.9235 34.7841 34.7792C35.0727 34.4907 35.0727 34.0228 34.7841 33.7343Z"
                                                            fill="#D6DAF0" fill-opacity="0.7" />
                                                    </svg>
                                                </div>
                                            </form>
                                            <div class="lrn-header-search-toggle d-xxl-none">
                                              <button type="button" class="lrn-search-btn-sm-2 lrn-header-search-activation" aria-label="Open search">
                                                <i class="fa-light fa-magnifying-glass"></i>
                                              </button>
                                              <button type="button" class="lrn-search-btn-sm-2 lrn-header-search-close" aria-label="Close search">
                                                <i class="fa-regular fa-xmark"></i>
                                              </button>
                                            </div>
                                            <button
                                              type="button"
                                              class="position-relative pointer lrn-cart-2 rounded-full lrn-cart-activation"
                                              aria-label="Open shopping cart"
                                            >
                                              <i class="fa-regular fa-cart-shopping color-secondary-400"></i>
                                              <span
                                                class="position-absolute top-0 start-100 translate-middle badge bg-color-primary-100 lrn-cart-badge"
                                              >
                                                4
                                              </span>
                                            </button>
                                            <button class="hamberger-button hamberger-2">
                                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14" fill="none">
                                                <path d="M19.2308 1.55556H7.94872C7.74471 1.55556 7.54905 1.47361 7.40479 1.32775C7.26053 1.18189 7.17949 0.984057 7.17949 0.777778C7.17949 0.571498 7.26053 0.373667 7.40479 0.227806C7.54905 0.0819441 7.74471 0 7.94872 0H19.2308C19.4348 0 19.6304 0.0819441 19.7747 0.227806C19.919 0.373667 20 0.571498 20 0.777778C20 0.984057 19.919 1.18189 19.7747 1.32775C19.6304 1.47361 19.4348 1.55556 19.2308 1.55556ZM20 7C20 6.79372 19.919 6.59589 19.7747 6.45003C19.6304 6.30417 19.4348 6.22222 19.2308 6.22222H0.769231C0.565218 6.22222 0.369561 6.30417 0.225302 6.45003C0.0810436 6.59589 0 6.79372 0 7C0 7.20628 0.0810436 7.40411 0.225302 7.54997C0.369561 7.69583 0.565218 7.77778 0.769231 7.77778H19.2308C19.4348 7.77778 19.6304 7.69583 19.7747 7.54997C19.919 7.40411 20 7.20628 20 7ZM12.8205 13.2222C12.8205 13.0159 12.7395 12.8181 12.5952 12.6722C12.451 12.5264 12.2553 12.4444 12.0513 12.4444H0.769231C0.565218 12.4444 0.369561 12.5264 0.225302 12.6722C0.0810436 12.8181 0 13.0159 0 13.2222C0 13.4285 0.0810436 13.6263 0.225302 13.7722C0.369561 13.9181 0.565218 14 0.769231 14H12.0513C12.2553 14 12.451 13.9181 12.5952 13.7722C12.7395 13.6263 12.8205 13.4285 12.8205 13.2222Z" fill="#A9B1E0"/>
                                              </svg>
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                  </header>

03. Header With Topbar

Header with topbar and navigation menu to change your header area.

Images 

                            
                                <!-- Top bar -->
                                <div class="topbar d-none d-md-block">
                                    <div class="container">
                                        <div class="row">
                                            <div class="d-flex align-items-center justify-content-center flex-wrap row-gap-1">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
                                                    <path d="M18 9.5C18 10.268 17.0565 10.901 16.8675 11.609C16.6725 12.341 17.166 13.361 16.7955 14.0015C16.419 14.6525 15.2865 14.7305 14.7585 15.2585C14.2305 15.7865 14.1525 16.919 13.5015 17.2955C12.861 17.666 11.841 17.1725 11.109 17.3675C10.401 17.5565 9.768 18.5 9 18.5C8.232 18.5 7.599 17.5565 6.891 17.3675C6.159 17.1725 5.139 17.666 4.4985 17.2955C3.8475 16.919 3.7695 15.7865 3.2415 15.2585C2.7135 14.7305 1.581 14.6525 1.2045 14.0015C0.834 13.361 1.3275 12.341 1.1325 11.609C0.9435 10.901 0 10.268 0 9.5C0 8.732 0.9435 8.099 1.1325 7.391C1.3275 6.659 0.834 5.639 1.2045 4.9985C1.581 4.3475 2.7135 4.2695 3.2415 3.7415C3.7695 3.2135 3.8475 2.081 4.4985 1.7045C5.139 1.334 6.159 1.8275 6.891 1.6325C7.599 1.4435 8.232 0.5 9 0.5C9.768 0.5 10.401 1.4435 11.109 1.6325C11.841 1.8275 12.861 1.334 13.5015 1.7045C14.1525 2.081 14.2305 3.2135 14.7585 3.7415C15.2865 4.2695 16.419 4.3475 16.7955 4.9985C17.166 5.639 16.6725 6.659 16.8675 7.391C17.0565 8.099 18 8.732 18 9.5Z" fill="#2ECA7F" />
                                                    <path d="M11.601 6.82037L8.175 10.2464L6.399 8.47188C6.0135 8.08638 5.388 8.08638 5.0025 8.47188C4.617 8.85738 4.617 9.48288 5.0025 9.86838L7.494 12.3599C7.869 12.7349 8.478 12.7349 8.853 12.3599L12.996 8.21688C13.3815 7.83138 13.3815 7.20587 12.996 6.82037C12.6105 6.43488 11.9865 6.43488 11.601 6.82037Z" fill="#FFFCEE" />
                                                </svg>
                                                <p class="mb-0 text-center color-white fs--16 fw-600 topbar-text">New Enrollments for UX/UI Design Mastery Course Open!
                                                </p>
                                                <div class="offer">
                                                    <p class="mb-0">
                                                        <span>
                                                        20% off
                                                    </span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Header -->
                                <header class="lrn-header lrn-header-2 bg-color-dark-100 lrn-border-bottom header-sticky">
                                    <div class="container-fluid plr_mobile--15 plr_sm--20 plr--20 plr_md--30 plr_lg--30">
                                        <div class="lrn-header-wrapper">
                            
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="lrn-header-info hamberger d-block d-exl-none">
                                                    <button class="btn hamberger-button">
                                                        <i class="fa-solid fa-bars color-secondary-100"></i>
                                                    </button>
                                                </div>
                            
                                                <a class="lrn-header-logo" href="index.html">
                                                    <img src="assets/images/logo/logo.webp" alt="Logo Images">
                                                </a>
                            
                                                <div class="rbt-category-menu-wrapper variant-2 lrn-side-offcanvas-activation">
                                                    <button class="btn fw-500 fs--16 lrn-cate-1 lrn-cate-3 shadow-none rounded-pill">
                                                        <i class="fa-light fa-grid-2"></i> <span class="d-none d-lg-inline px--10">Category</span>
                                                        <i class="d-none d-lg-inline fa-solid fa-chevron-down"></i>
                                                    </button>
                                                    <div class="category-dropdown-menu d-none d-xl-block">
                                                        ...
                                                    </div>
                            
                                                </div>
                            
                                                <form class="d-none d-xl-flex align-items-center lrn-search-1 lrn-search-4">
                                                    <input class="lrn-border-w-1" type="text" placeholder="What do you want to learn?">
                                                    <div class="content">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
                                                            <rect width="50" height="50" rx="8" />
                                                            <path d="M20.522 19.5524C20.2336 19.2638 19.7656 19.2638 19.4772 19.5524C18.4063 20.6234 17.8799 22.1152 18.0329 23.6458C18.071 24.0271 18.3922 24.3113 18.7674 24.3113C18.792 24.3113 18.8168 24.31 18.8415 24.3076C19.2477 24.2669 19.5439 23.9046 19.5033 23.4987C19.3945 22.411 19.7659 21.3534 20.522 20.5972C20.8107 20.3088 20.8107 19.8408 20.522 19.5524Z" fill="#D6DAF0" fill-opacity="0.7" />
                                                            <path d="M23.4482 15C18.7899 15 15 18.7899 15 23.4482C15 28.1066 18.7899 31.8964 23.4482 31.8964C28.1066 31.8964 31.8964 28.1066 31.8964 23.4482C31.8964 18.7899 28.1065 15 23.4482 15ZM23.4482 30.4186C19.6047 30.4186 16.4778 27.2918 16.4778 23.4482C16.4778 19.6046 19.6047 16.4778 23.4482 16.4778C27.2915 16.4778 30.4186 19.6046 30.4186 23.4482C30.4186 27.2918 27.2918 30.4186 23.4482 30.4186Z" fill="#D6DAF0" fill-opacity="0.7" />
                                                            <path d="M34.7841 33.7343L29.4147 28.3649C29.126 28.0763 28.6585 28.0763 28.3698 28.3649C28.0812 28.6534 28.0812 29.1213 28.3698 29.4098L33.7393 34.7792C33.8836 34.9235 34.0725 34.9957 34.2617 34.9957C34.4509 34.9957 34.6398 34.9235 34.7841 34.7792C35.0727 34.4907 35.0727 34.0228 34.7841 33.7343Z" fill="#D6DAF0" fill-opacity="0.7" />
                                                        </svg>
                                                    </div>
                                                </form>
                                                <div class="d-none d-exl-inline">
                                                    <nav class="lrn-mainmenu-nav">
                                                        ...
                                                    </nav>
                                                </div>
                                                <div class="lrn-header-search-toggle d-xl-none">
                                                    <button type="button" class="lrn-search-btn-sm lrn-header-search-activation" aria-label="Open search">
                                                        <i class="fa-light fa-magnifying-glass"></i>
                                                    </button>
                                                    <button type="button" class="lrn-search-btn-sm lrn-header-search-close" aria-label="Close search">
                                                        <i class="fa-regular fa-xmark"></i>
                                                    </button>
                                                </div>
                                            </div>
                            
                                            <div class="d-flex align-items-center gap-3 gap--md-20">
                                                <div class="selection d-none d-sm-block">
                                                    <div class="rbt-header-info">
                                                        ....
                                                    </div>
                                                </div>
                                                <button type="button" class="position-relative pointer lrn-cart-2 rounded-full lrn-cart-activation d-none d-md-flex" aria-label="Open shopping cart">
                                                    <i class="fa-regular fa-cart-shopping color-secondary-100"></i>
                                                    <span
                                                    class="position-absolute top-0 start-100 translate-middle badge bg-color-primary-100 lrn-cart-badge">
                                                    4
                                                </span>
                                                </button>
                                                <div class="lrn-header-info d-none d-xxl-block">
                                                    <a class="color-secondary-100 fw-400" href="signin.html">Login</a>
                                                </div>
                                                <div class="lrn-header-info lrn-btn-group d-none d-md-block">
                                                    <a href="#" class="lrn-btn-primary btn-md btn-rounded">
                                                        <div class="btn-text-wrap">
                                                            <span class="btn-text"><i class="fa-regular fa-arrow-right-to-bracket mr--5"></i>Join for free</span>
                                                            <span class="btn-text"><i class="fa-regular fa-arrow-right-to-bracket mr--5"></i>Join for free</span>
                                                        </div>
                                                    </a>
                                                </div>
                                                <button class="lrn-user-btn d-md-none">
                                                    <i class="fa-thin fa-user"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </header>

04. Header Style Three

Header with ceneter navigation menu to change your header area.

Images 

                                
                                    <header class="lrn-header lrn-header-2 bg-color-dark-100 lrn-border-bottom header-sticky">
                                        <div class="container-fluid plr_mobile--15 plr_sm--20 plr--20 plr_md--30 plr_lg--30">
                                            <div class="lrn-header-wrapper"> 
                                    
                                                <div class="d-flex align-items-center gap-3">
                                                    <a class="lrn-header-logo" href="index.html">
                                                        <img src="assets/images/logo/logo.webp" alt="Logo Images">
                                                    </a>
                                    
                                                    <div class="rbt-category-menu-wrapper lrn-side-offcanvas-activation">
                                                        ...
                                                    </div>
                                    
                                                    <form class="d-none d-lg-flex align-items-center lrn-search-1 lrn-search-3">
                                                        ...
                                                    </form>
                                                    <div class="d-none d-exl-inline">
                                                        ...
                                                    </div>
                                    
                                                    <div class="lrn-header-search-toggle d-flex d-lg-none">
                                                        <button type="button" class="lrn-search-btn-sm square lrn-header-search-activation" aria-label="Open search">
                                                            <i class="fa-light fa-magnifying-glass"></i>
                                                        </button>
                                                        <button type="button" class="lrn-search-btn-sm square lrn-header-search-close" aria-label="Close search">
                                                            <i class="fa-regular fa-xmark"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                    
                                                <div class="d-flex align-items-center gap-3 gap-md-4">
                                                    <div class="d-none d-sm-block">
                                                        <ul class="rbt-dropdown-menu">
                                                            ...
                                                        </ul>
                                    
                                                    </div>
                                                    <button type="button" class="position-relative pointer lrn-cart-2 lrn-cart-activation d-none d-md-flex" aria-label="Open shopping cart">
                                                        <i class="fa-regular fa-cart-shopping color-secondary-100"></i>
                                                        <span
                                                            class="position-absolute top-0 start-100 translate-middle badge bg-color-primary-100 lrn-cart-badge">
                                                            4
                                                        </span>
                                                    </button>
                                                    <div class="lrn-header-info d-none d-xxl-block">
                                                        <a class="color-secondary-100 fw-400" href="signin.html">Login</a>
                                                    </div>
                                                    <div class="lrn-header-info lrn-btn-group d-none d-md-block">
                                                        <a class="btn color-secondary-100 fw-700 lrn-gradient-btn" href="signup.html"><i
                                                                class="fa-regular fa-arrow-right-to-bracket pr--5"></i> Join for free</a>
                                                    </div>
                                    
                                                    <button class="lrn-user-btn square d-md-none">
                                                        <i class="fa-thin fa-user"></i>
                                                    </button>
                                    
                                                    <div class="lrn-header-info hamberger d-block d-exl-none">
                                                        <button class="btn hamberger-button hamberger-btn-square">
                                                            <i class="fa-solid fa-bars color-secondary-100"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                    
                                            </div>
                                        </div>
                                    </header>

All Elemnts and Shortcode Types


Welcome to Learnhub Elements and Shortcode! You can select any elements & shortcode and customize easily and build your website.

Buttons

This the button classes on an <a> and <button> element and create various button.

Images 

                            
                                <button class="lrn-btn-primary btn-xs">
                                    <span class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button</span>
                                    <span class="btn-text">Learnhub Button</span>
                                    </span>
                                </button>
                
                                <button class="lrn-btn-primary btn-sm">
                                    <span class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button</span>
                                    <span class="btn-text">Learnhub Button</span>
                                    </span>
                                </button>
                
                                <button class="lrn-btn-primary btn-md">
                                    <span class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button</span>
                                    <span class="btn-text">Learnhub Button</span>
                                    </span>
                                </button>
                
                                <button class="lrn-btn-primary">
                                    <span class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button</span>
                                    <span class="btn-text">Learnhub Button</span>
                                    </span>
                                </button>

                                <button class="btn lrn-btn-outline color-secondary-100 fw-600 fs--22 lh--7 p-0">LearnHub
                                    Button
                                    <i class="fa-regular fa-arrow-right pl--5"></i>
                                </button>
            
                                <button class="lrn-btn-primary btn-md">
                                    <div class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button <i class="fa-regular fa-arrow-right ml--5"></i></span>
                                        <span class="btn-text">Learnhub Button <i class="fa-regular fa-arrow-right ml--5"></i></span>
                                    </div>
                                </button>
            
                                <button class="lrn-btn-primary btn-md btn-rounded">
                                    <div class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button <i class="fa-regular fa-arrow-right ml--5"></i></span>
                                        <span class="btn-text">Learnhub Button <i class="fa-regular fa-arrow-right ml--5"></i></span>
                                    </div>
                                </button>
            
                                <button class="lrn-btn-secondary-2 btn-square">
                                    <div class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button</span>
                                        <span class="btn-text">Learnhub Button</span>
                                    </div>
                                </button>
            
                                <button class="lrn-btn-secondary-2">
                                    <div class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button</span>
                                        <span class="btn-text">Learnhub Button</span>
                                    </div>
                                </button>
            
                                <button class="lrn-btn-secondary">
                                    <div class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button</span>
                                        <span class="btn-text">Learnhub Button</span>
                                    </div>
                                </button>
            
                                <button class="lrn-btn-secondary btn-rounded">
                                    <div class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button</span>
                                        <span class="btn-text">Learnhub Button</span>
                                    </div>
                                </button>
            
                                <button class="lrn-btn-gradient v2 btn-rounded">
                                    <div class="btn-text-wrap">
                                        <span class="btn-text">Learnhub Button <i class="fa-regular fa-arrow-right ml--5"></i></span>
                                        <span class="btn-text">Learnhub Button <i class="fa-regular fa-arrow-right ml--5"></i></span>
                                    </div>
                                </button>


Badge

This the button classes on an <span> or <a> element and create various badge.

Images 

                                
                                    <span class="lrn-badge-gradient-1 fw-600 fs--20 text-capitalize rounded-pill d-inline-block py--5 px--25">
                                        <span class="lrn-gradient-100 lrn-badge-gradient-text">Our Teacher</span>
                                    </span>

                                    <span class="lrn-badge-solid fw-400 fs--15 text-capitalize rounded-pill">
                                        Our Teacher
                                    </span>

                                    <span
                                        class="lrn-badge-solid lrn-badge-solid-hover fw-400 fs--15 text-capitalize rounded-pill">
                                        Our Teacher
                                    </span>

                                    <span
                                        class="lrn-badge-gradient-1 lrn-badge-dark-gradient fw-600 fs--20 text-capitalize rounded-pill d-inline-block">
                                        <span class="lrn-gradient-100 lrn-badge-gradient-text">UX/UI Design Mastery Course</span>
                                    </span>

                                    <span class="lrn-badge-solid lrn-badge-primary fw-600 rounded-pill">
                                        Education
                                    </span>

                                    <span class="lrn-badge-solid lrn-badge-primary lrn-badge-border-2 fw-600 rounded-pill">
                                        -50%
                                    </span>

Accordion

Extend the default collapse behavior to create an accordion with the panel component see the code for better understanding

Images 

                            
                                <div class="accordion rbt-accordion" id="accordion-example-1">
                                    <div class="accordion-item">
                                        <h6 class="accordion-header">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#rbt-accordion-id-01" aria-expanded="true" aria-controls="rbt-accordion-id-01">
                                                <span class="d-flex align-items-center">
                                                    <span class="accordion-btn-number">01</span>
                                                    How do you invoice your clients?
                                                </span>
                                            </button>
                                        </h6>
                                        <div id="rbt-accordion-id-01" class="accordion-collapse collapse show" data-bs-parent="#accordion-example-1">
                                            <div class="accordion-body">
                                                <p class="mt--10">
                                                    We invoice our clients electronically via <span
                                                        class="color-heading w-500">email, ensuring a
                                                        streamlined and eco-friendly process.</span>
                                                    Invoices
                                                    can be paid online through our secure payment portal,
                                                    which
                                                    accepts various payment methods for your convenience.
                                                    Each
                                                    invoice will include a detailed breakdown of the
                                                    services
                                                    provided and the associated costs. Payment terms will be
                                                    clearly outlined in your project agreement, and we are
                                                    available to answer any questions you may have about the
                                                    invoicing process.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h6 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rbt-accordion-id-02" aria-expanded="false" aria-controls="rbt-accordion-id-02">
                                                <span class="d-flex align-items-center">
                                                    <span class="accordion-btn-number">02</span>
                                                    What are your payment terms?
                                                </span>
                                            </button>
                                        </h6>
                                        <div id="rbt-accordion-id-02" class="accordion-collapse collapse" data-bs-parent="#accordion-example-1">
                                            <div class="accordion-body">
                                                <p class="mt--10">
                                                    Our standard payment terms require a <span
                                                        class="color-heading w-500">50% deposit</span>
                                                    before we
                                                    commence any work on your project, with the <span
                                                        class="color-heading w-500">remaining 50%</span> due
                                                    upon project completion. This approach ensures that we
                                                    can
                                                    allocate the necessary resources to your project from
                                                    the
                                                    start, and it also aligns our interests with delivering
                                                    a
                                                    final product that meets your satisfaction. However, we
                                                    understand that each client has unique financial
                                                    circumstances, so <span class="color-heading w-500">we
                                                        are
                                                        open to discussing customized payment plans that
                                                        better
                                                        suit your needs</span>This can include staggered
                                                    payments tied to project milestones or other
                                                    arrangements
                                                    that provide flexibility and peace of mind.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h6 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rbt-accordion-id-03" aria-expanded="false" aria-controls="rbt-accordion-id-03">
                                                <span class="d-flex align-items-center">
                                                    <span class="accordion-btn-number">03</span>
                                                    Do you offer payment plans for your services?
                                                </span>
                                            </button>
                                        </h6>
                                        <div id="rbt-accordion-id-03" class="accordion-collapse collapse" data-bs-parent="#accordion-example-1">
                                            <div class="accordion-body">
                                                <p class="mt--10">
                                                    Yes, we understand that managing cash flow is crucial
                                                    for
                                                    businesses of all sizes, and we offer flexible payment
                                                    plans
                                                    to accommodate various budget constraints. During our
                                                    initial consultation, <span class="color-heading w-500">we
                                                        will discuss your financial needs and propose</span>
                                                    a
                                                    payment plan that works for you. Options might include
                                                    monthly installments, payments tied to project phases,
                                                    or
                                                    deferred payment schedules. Our goal is to provide you
                                                    with
                                                    the creative services you need without causing undue
                                                    financial strain.
                                                    odit.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h6 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rbt-accordion-id-04" aria-expanded="false" aria-controls="rbt-accordion-id-04">
                                                <span class="d-flex align-items-center">
                                                    <span class="accordion-btn-number">04</span>
                                                    How do you handle project cost overruns?
                                                </span>
                                            </button>
                                        </h6>
                                        <div id="rbt-accordion-id-04" class="accordion-collapse collapse" data-bs-parent="#accordion-example-1">
                                            <div class="accordion-body">
                                                <p class="mt--10">
                                                    We understand that cost overruns can be a major concern
                                                    for
                                                    clients. To mitigate this, we practice diligent project
                                                    management and clear communication throughout the
                                                    project.
                                                    If it becomes apparent that additional work or resources
                                                    are
                                                    required beyond the initial scope, we will provide a
                                                    detailed explanation and a revised estimate. <span
                                                        class="color-heading w-500">We will not proceed with
                                                        any
                                                        additional costs</span> until we have your explicit
                                                    approval. This ensures that you remain in control of
                                                    your
                                                    budget and that any adjustments are made
                                                    collaboratively.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Clients

Showcase of clients logos or images. See below image and code for more information.

Images 

                                
                                    <ul class="lrn-brand-list-2 lrn-brand-list-2 d-flex flex-wrap justify-content-center gap-3 m-0 p-0">
                                        <li>
                                            <a href="#" class="px--30 bg-color-dark-300">
                                                <img src="assets/images/brands/brand-1.svg" alt="svg">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="px--30 bg-color-dark-300">
                                                <img src="assets/images/brands/brand-2.svg" alt="svg">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="px--30 bg-color-dark-300">
                                                <img src="assets/images/brands/brand-3.svg" alt="svg">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="px--30 bg-color-dark-300">
                                                <img src="assets/images/brands/brand-4.svg" alt="svg">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="px--30 bg-color-dark-300">
                                                <img src="assets/images/brands/brand-5.svg" alt="svg">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="px--30 bg-color-dark-300">
                                                <img src="assets/images/brands/brand-6.svg" alt="svg">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="px--30 bg-color-dark-300">
                                                <img src="assets/images/brands/brand-7.svg" alt="svg">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="px--30 bg-color-dark-300">
                                                <img src="assets/images/brands/brand-8.svg" alt="svg">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="px--30 bg-color-dark-300">
                                                <img src="assets/images/brands/brand-9.svg" alt="svg">
                                            </a>
                                        </li>
                                    </ul>

Counters

Different styles of counters for your website are presented in our website.

Images 

                            
                                <div class="lrn-counter lrn-counter-2 h-100 justify-content-center align-items-center">
                                    <div class="lrn-counter-inner h-100 position-relative overflow-hidden text-center lrn-card-border lrn-card-border-2">
                                        <div class="thumbnail-2">
                                            <img src="assets/images/shape/shape-2.svg" alt="shape">
                                        </div>
                                        <div class="position-relative z-3">
                                            <div class="lrn-btn-group d-flex justify-content-center align-items-center">
                                                <div class="lrn-icon">
                                                    <i class="fa-regular fa-graduation-cap"></i>
                                                </div>
                                            </div>
                                            <h3 class="fw-700 fs--30 color-secondary-100 lh--1 mb--10 mt--20 counters"> <span
                                        class="counter" data-number="99">0</span>
                                                <span> + </span>
                                            </h3>
                                            <span class="fw-400 fs--16 lh--7 color-secondary-700">Learners & counting</span>
                                        </div>
                                        <div class="thumbnail-2 rotate">
                                            <img src="assets/images/shape/shape-2.svg" alt="shape">
                                        </div>
                                    </div>
                                </div>

Call To Action

Awesome call to action styles. See below image and code for more information.

Images 

                            
                                <div class="lrn-cta-area">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="lrn-cta-wrapper">
                                                    <div class="lrn-cta-left">
                                                        <span class="lrn-badge-gradient-1 text-capitalize d-inline-block">
                                                            <span class="lrn-gradient-100 lrn-badge-gradient-text">Our Download App</span>
                                                        </span>
                            
                                                        <h2 class="title pt--20 display--2 lh--2 mb-0 lrn-cta-title lrn-text-animation">Download now Learnhub
                                                            <br>
                                                            <span class="lrn-gradient-splite">Mobile Apps</span>
                                                        </h2>
                                                        <div class="dots-right">
                                                           ...
                                                        </div>
                                                        <div class="lrn-cta-item mt--40">
                                                            <ul class="list-unstyled">
                                                                <li>
                                                                    <a href="#">
                                                                        <img class="pb_sm-10 pr--10 pr_sm--0" src="assets/images/icons/play.svg" alt="play store">
                                                                        <br class="d-sm-none" />
                                                                        <span>Android</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <img class="pb_sm-10 pr--10 pr_sm--0" src="assets/images/icons/ios.svg" alt="ios">
                                                                        <br class="d-sm-none" />
                                                                        <span>iOS/ macOS</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <img class="pb_sm-10 pr--10 pr_sm--0" src="assets/images/icons/wind.svg" alt="Windows">
                                                                        <br class="d-sm-none" />
                                                                        <span>Windows</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <img class="pb_sm-10 pr--10 pr_sm--0" src="assets/images/icons/linux.svg" alt="linux">
                                                                        <br class="d-sm-none" />
                                                                        <span>Linux</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="lrn-shape">
                                                        <img src="assets/images/shape/shape-1.svg" alt="shape">
                                                    </div>
                                                    <div class="lrn-cta-right">
                                                        <img src="assets/images/cta/cta-1.png" alt="image">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Footer Style

Welcome to Learnhub Footer You can select any footer & customize easily and build your website.

Footer Default

Awesome Footer styles. See below image and code for more information.

Images 

                            
                                <footer class="lrn-footer bg-color-dark-100 pt--100 pt_sm--80  lrn-footer-border-top">
                                    <div class="container">
                                        <div class="row justify-content-between gy-sm-5 gy-4 g-lg-0 mb--50 mb--lg-60 mb--xl-100">
                                            <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                                                <div class="footer-widget">
                                                    <div class="lrn-footer-logo">
                                                        <a href="index.html">
                                                            <img src="assets/images/logo/logo.webp" alt="Footer">
                                                        </a>
                                                    </div>
                                                    <div class="lrn-footer-info mt--25 mb--20">
                                                        <p class="lrn-footer-desc color-secondary-700 fw-400 fs--16">Education is typically
                                                            divided into various <br> levels,
                                                        including
                                                        primary, secondary</p>
                                                    </div>
                                                    <div class="lrn-footer-link">
                                                        <ul class="lrn-footer-item">
                                                            <li>
                                                                <span class="color-secondary-100 fw-600 pr--5">Phone:</span>
                                                                <a class="color-secondary-700 fw-400" href="tel:+4065550120">(406)
                                                                    555-0120</a>
                                                            </li>
                                                            <li class="mb-0"><span class="color-secondary-100 fw-600 pr--5">Location:</span> <span
                                                                class="color-secondary-700 fw-400">North America, USA</span></li>
                                                        </ul>
                                                    </div>
                                                    <div class="lrn-btn-group d-inline-block mt--25">
                                                        <a href="contactus.html" class="lrn-btn-primary btn-md fs-16 remove-drop">
                                                            <div class="btn-text-wrap">
                                                                <span class="btn-text">Contact With Us <i class="fa-regular fa-arrow-right ml--5"></i></span>
                                                                <span class="btn-text">Contact With Us <i class="fa-regular fa-arrow-right ml--5"></i></span>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-6 col-md-6 col-lg-2">
                                                <div class="footer-widget">
                                                   ....
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-6 col-md-6 col-lg-2">
                                                <div class="footer-widget">
                                                    ....
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                                                <div class="footer-widget">
                                                    ....
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            
                                    <!-- Start Copyright Area  -->
                                    <div class="copyright-area copyright-style-1 copyright-border-top pt--20 pb--20">
                                        ....
                                    </div>
                                    <!-- End Copyright Area  -->
                                </footer>

Footer Two

Awesome Footer Two styles. See below image and code for more information.

Images 

                            
                                <footer class="lrn-footer lrn-footer-5-area px-3 px-xl-5 pb-3 pb-xl-5">
                                    <div class="lrn-footer-wrapper mx-auto lrn-section-gapTop2">
                                        <img class="footer-star" data-parallax='{"x": 20, "y": 20}' src="assets/images/shape/footer-star.webp" alt="Star Shape">
                                        <div class="footer-shadow"></div>
                                        <img class="footer-bg" src="assets/images/shape/footer-5-bg.webp" alt="Background">
                                        <div class="container">
                                            <div class="row justify-content-between gy-5 g-lg-0 mb--50">
                                                <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                                                    <div class="footer-widget">
                                                        ...
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6 col-md-6 col-lg-2">
                                                    <div class="footer-widget">
                                                        ...
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6 col-md-6 col-lg-2">
                                                    <div class="footer-widget">
                                                        ...
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                                                    <div class="footer-widget">
                                                        ...
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Start Copyright Area  -->
                                            <div class="copyright-area copyright-style-1 border-top-white pt--20 pb--20">
                                                ...
                                            </div>
                                            <!-- End Copyright Area  -->
                                        </div>
                                    </div>
                                </footer>

Footer Three

Awesome Footer Three styles. See below image and code for more information.

Images 

                                
                                    <footer class="lrn-footer lrn-footer-4-area v2">
                                        <div class="lrn-footer-wrapper mx-auto lrn-section-gapTop2">
                                            <img class="footer-bg" src="assets/images/shape/footer-4-bg.png" alt="Background">
                                            <div class="container">
                                                <div class="lrn-footer-newsletter">
                                                    <div class="row">
                                                        <div class="col-xl-6">
                                                            <span
                                                            class="lrn-badge-gradient-1 fw-500 text-capitalize rounded-pill d-inline-flex"
                                                            >
                                                            <span class="lrn-gradient-100 lrn-badge-gradient-text"
                                                            >Join Our Community</span
                                                            ></span>
                                                            <h2 class="pt--15 display--2 lh--2 mb-0 lrn-text-animation fw-600">
                                                            Subscribe Our Newsletter
                                                            </h2>
                                                        </div>
                                                        <div class="col-xl-6 d-xl-flex justify-content-xl-end mt_lg--30 mt_md--30 mt_sm--30">
                                                            <div>
                                                                <form action="#" class="newsletter-form-2 radius-round">
                                                                    <input type="email" placeholder="Email address">
                                                                    <div
                                                                        class="lrn-btn-wrap">
                                                                        <button class="lrn-btn-primary btn-rounded remove-drop">
                                                                            <div class="btn-text-wrap">
                                                                                <span class="btn-text">Subscribe <i class="fa-regular fa-arrow-right ml--5"></i></span>
                                                                                <span class="btn-text">Subscribe <i class="fa-regular fa-arrow-right ml--5"></i></span>
                                                                            </div>
                                                                        </button>
                                                                    </div>
                                                                </form>
                                                                <p class="fs--16 fw-500 lh--2 pt-4 mb-0 lrn-newsletter-layer-text color-secondary-700">No ads, No Trails, No commitments</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <div class="row justify-content-between gy-5 g-lg-0 mb--50">
                                                <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                                                    <div class="footer-widget">
                                                        ...
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6 col-md-6 col-lg-2">
                                                    <div class="footer-widget">
                                                        ...
                                                    </div>
                                                <div class="col-12 col-sm-6 col-md-6 col-lg-2">
                                                    <div class="footer-widget">
                                                        ...
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                                                    <div class="footer-widget">
                                                        ...
                                                    </div>
                                                </div>
                                            <!-- Start Copyright Area  -->
                                                <div class="copyright-area copyright-style-1 border-top-white pt--20 pb--20">
                                                    ...
                                                </div>
                                                <!-- End Copyright Area  -->
                                            </div>
                                        </div>
                                    </footer>

Support

Thank you for purchasing my template.
If you have any questions that are beyond the scope of this help file, please feel free to open a new ticket at our Support forum

If you need the template customization or custom development services please contact us.

Email Us