Histudy Documentation


Welcome to Histudy ! Get familiar with the Stripe products and explore their features:

histudy
Working with Doc

You can any work by following our docs

histudy
Formatting Content

Our content is more formating for your website

histudy
Perfect Responsive

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

histudy
Sass Available

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

histudy
Fast Loading Speed

Histudy is faster loading speed. Histudy create your template so much faster

histudy
24 Support System

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

Getting Started

Welcome to Histudy ! Get familiar with the Stripe products and explore their features:

To use Histudy For Next-gen all-in-one Online Courses & Education NEXTJS14 Template. It comes with NEXTJS14 and NEXTJS14 We created with component-based and developer-friendly modern. It comes with modern design and a faster loading NEXTJS template. It has available Home Default, Course School, Online School, Kindergarten, Classic LMS, University Status, Instructor Portfolio, Language Academy, Gym Coaching, Online Course, Single Course, marketplace, University Classic, Home Elegant, Home technology, and other needed inner or details pages availability.

Histudy Core Features

  • NEXTJS14
  • Develop using App & Page Router
  • Responsive layout (desktops, tablets, mobile devices)
  • Built with Bootstrap v5.0.2
  • Well structured code
  • Contact Form Working
  • Hinted Typography
  • Sass Available
  • W3 Valid 100%
  • Fast Loading Speed
  • Cross Browser Support
  • Dedicated Support, Lifetime Updates
  • And much more …

What's Included

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

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

How to Install Histudy Website Templates

Installing a nuron template is not like WordPress or CMS theme installation, actually, installation keyword does not go with nuron template. Why? because you don’t install anything, yes nuron or HTML templates are automatically rendered by the browser.

  1. Uploading to Live Server Using FTP:

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

Home Page

  2. Requirements

To install and set up the HiStudy nextjs template and its components correctly, your computer must have Node.js 18.17 or newer. This is a necessary requirement for the installation process

Recommended NODE

                                                    
                                        node install

  3. Installation

To add the necessary tools and features to your project, just go to the main folder of your project and type npm install. This will automatically download and set up all the required components.

Recommended NODE

                                                    
                                                    npm install

If you're having trouble using 'npm install', there's an easy fix. This can happen due to different versions of Node and NPM. In that case, just use npm install --force instead. This command often solves the issue and gets your installation back on track.

                                                    
                                                        npm install --force

Run the Development Server

To start a development server, type npm run dev. Now, open your web browser and go to http://localhost:3000/. The app will refresh on its own whenever you make changes to the source files. 

                                                
                                                    npm run dev

  4. Deploying to Vercel

How to Convert Histudy Default Templates into Dark mode

  1. Need to add SCSS

To enable dark mode for the histudy interface, you will need to include the specified SCSS file into the styles.scss file.

Home Page

Then you need to add another scss file for the switcher style _switcher.scss

Home Page

  2. Customize Folder

Add an additional subfolder named dark within the existing images folder to organize the new images.

Home Page

  3. Customize Code

You need to add this file to switch between ligh theme and dark theme

Home Page 
                                            
                                                <div id="my_switcher" className="my_switcher">
                                                    <ul onClick={switchTheme}>
                                                        {isLight ? (
                                                            <li>
                                                               <button data-theme="light" className="setColor light">
                                                                   <Image src={dark} alt="Sun images" />
                                                               </button>
                                                            </li>
                                                        ): (
                                                            <li>
                                                                <button data-theme="dark" className="setColor dark">
                                                                    <Image src={light} alt="Vector images" />
                                                                </button>
                                                            </li>
                                                        )}
                                                    </ul>
                                                </div>

You need to do some changes into Context > context.js file

Home Page

To access the switcher button into all pages. Then you need to import DarkSwitch in all HeaderStyle file.

Note: add this rbt-dark-header-8 class name only in HeaderStyle-Eight.

Home Page

To switch logo between light theme and dark theme.

Home Page

To change Breadcrumb background you need to add "breadcrumb-dark" class name into course-head.js || EventBreadCrumb.js || Blog-BreadCrumb.js || PrivacyPolicy.js

Home Page

Template Structures

Articles

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: Histudy - Online Courses & Education NEXTJS14 Template
                                                  Description: A perfect Template For Education. It comes with nice and clean design.
                                                  Note: This is style css.
                                                **********************************************************************************/
                                                /**************************************************************
                                                  STYLESHEET INDEXING
                                                  |
                                                  |
                                                  |___ Default Styles
                                                  | |
                                                  | |___ variables
                                                  | |___ mixins
                                                  | |___ reset
                                                  | |___ typography
                                                  | |___ extend
                                                  | |___ animations
                                                  | |___ shortcode
                                                  | |___ spacing
                                                  | |___ edu-common
                                                  | |___ forms
                                                  | |___ text-animation
                                                  |
                                                  |
                                                  |___Header Styles
                                                  | |___ header-common
                                                  | |___ headertop
                                                  | |___ offertopbar
                                                  | |___ headermid
                                                  | |___ social-share
                                                  | |___ header
                                                  | |___ nav
                                                  | |___ mega-menu
                                                  | |___ mobilemenu
                                                  | |___ offcanvas
                                                  | |___ one-page-navigation
                                                  |
                                                  |
                                                  |___Elements Styles
                                                  | |___ button
                                                  | |___ section-title
                                                  | |___ breadcrumb
                                                  | |___ card
                                                  | |___ course-meta
                                                  | |___ service
                                                  | |___ feature
                                                  | |___ about
                                                  | |___ callto-action
                                                  | |___ accordion
                                                  | |___ image-gallery
                                                  | |___ counterup
                                                  | |___ pricingtable
                                                  | |___ badge
                                                  | |___ team
                                                  | |___ social
                                                  | |___ pagination
                                                  | |___ backtotop
                                                  | |___ newsletterform
                                                  | |___ brand
                                                  | |___ portfolio
                                                  | |___ contact
                                                  | |___ testimonial
                                                  | |___ advance-tab
                                                  | |___ category
                                                  | |___ instagram
                                                  | |___ split
                                                  | |___ countdown
                                                  | |___ progressbar
                                                  | |___ category-box
                                                  | |___ course-filter
                                                  | |___ modal
                                                  | |___ list
                                                  | |___ search
                                                  | |___ video
                                                  | |___ 404
                                                  |___Blog Styles
                                                  | |___ blog
                                                  | |___ post-default
                                                  | |___ sidebar
                                                  | |___ blog-details
                                                  | |___ unit-test
                                                  |___Shop Styles
                                                  | |___ shop
                                                  | |___ product-details
                                                  | |___ my-account
                                                  | |___ cart
                                                  | |___ checkout
                                                  | |___ minicart
                                                  |___Template Styles
                                                  | |___ banner
                                                  | |___ course-details
                                                  | |___ course-sidebar
                                                  | |___ contact
                                                  | |___ sidebar
                                                  | |___ course-action-bottom
                                                  |___Footer Styles
                                                  | |___ footer
                                                  | |___ copyright
                                                  | |___ back-to-top
                                                  | |___ dark
                                                  |
                                                  |
                                                  |___ END STYLESHEET INDEXING
                                                ***************************************************************/

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 inside public folder.
  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:

                                                    
                                                        <div className="logo">
                                                            <Link href="/">
                                                                <Image src={logo} width={152} height={50} priority={true} alt="Education Logo Images" />
                                                            </Link>
                                                        </div>
HTML Images

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

  1. Open the file called images inside public folder.
  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 inside public folder. 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 > defaults > _variables 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 Histudy Header Elements! You can choose 04 Types of header package for createing you website.

01. Header Default

To change any images of the website

Images 

                                                    
                                                        <!-- Start Header Area -->
                                                            <header className="rbt-header rbt-header-1">
                                                                <div className="rbt-sticky-placeholder"></div>
                                                                <div className="rbt-header-wrapper header-space-betwween header-sticky">
                                                                    <div className="container-fluid">
                                                                        <div className="mainbar-row rbt-navigation-center align-items-center">
                                                                            <div className="header-left rbt-header-content">
                                                                                <div className="header-info">
                                                                                    <div className="logo">
                                                                                        <!-- Logo Here  -->
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div className="rbt-main-navigation d-none d-xl-block">
                                                                                <nav className="mainmenu-nav">
                                                                                    <!-- Start Navigation Here  -->
                                                                                    <ul className="mainmenu">
                                                                                        ...
                                                                                    </ul>
                                                                                    <!-- End Navigation Here  -->
                                                                                </nav>
                                                                            </div>
                                                                            <div className="header-right">
                                                                                <ul className="quick-access">
                                                                                    <!-- Start Navbar Icons -->
                                                                                    ...
                                                                                    <!-- End Navbar Icons -->
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </header>
                                                            <!-- End Header Area -->

03. Header With Topbar

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

Images 

                                                    
                                                        <!-- Start Header Area -->
                                                            <header className="rbt-header rbt-header-1">
                                                                <div className="rbt-sticky-placeholder"></div>
                                                                <!-- Start Header Top  -->
                                                                <div className="rbt-header-top rbt-header-top-1 variation-height-50 header-space-betwween bg-color-darker d-none d-xl-block">
                                                                    <div className="container-fluid">
                                                                        <div className="rbt-header-sec align-items-center ">
                                                                            <div className="rbt-header-sec-col rbt-header-left">
                                                                                <div className="rbt-header-content">
                                                                                    <!-- Start Header Information List  -->
                                                                                    ...
                                                                                    <!-- End Header Information List  -->
                                                                                </div>
                                                                            </div>
                                                                            <div className="rbt-header-sec-col rbt-header-center">
                                                                                <div className="rbt-header-content">
                                                                                   ...
                                                                                </div>
                                                                            </div>
                                                                            <div className="rbt-header-sec-col rbt-header-right">
                                                                                <div className="rbt-header-content">
                                                                                    ...
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!-- End Header Top  -->
                                                                <div className="rbt-header-wrapper header-space-betwween header-sticky">
                                                                    <div className="container-fluid">
                                                                        <!-- Start Header Content  -->
                                                                        ...
                                                                        <!-- End Header Content  -->
                                                                    </div>
                                                                </div>
                                                            </header>
                                                            <!-- End Header Area -->

04. Header With Center Navigation

Header with ceneter navigation menu to change your header area.

Images 

                                                    
                                                        <header className="rbt-header rbt-header-1">
                                                                <div className="rbt-sticky-placeholder"></div>
                                                                <div className="rrbt-header-wrapper  header-sticky">
                                                                    <div className="container">
                                                                        <div className="mainbar-row rbt-navigation-center align-items-center">
                                                                            <div className="header-left"></div>
                                                                            <div className="rbt-main-navigation d-none d-xl-block">
                                                                                <!-- Start Header Content  -->
                                                                                    ...
                                                                                <!-- End Header Content  -->
                                                                            </div>
                                                                            <div className="header-right"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </header>

All Elemnts and Shortcode Types


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

Buttons

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

Images 

                                                    
                                                        <!-- Start Buttons  -->
                                                        <Link className="rbt-btn btn-sm" href="#">Button SM</Link>
                                                        <Link className="rbt-btn btn-md" href="#">Button MD</Link>
                                                        <Link className="rbt-btn" href="#">Button MD</Link>
                                                        <Link className="rbt-btn btn-lg" href="#">Button LG</Link>
                                                        <Link className="rbt-btn btn-xl" href="#">Button XL</Link>
                                                        <Link className="rbt-btn btn-xxl" href="#">Button XXL</a>
                                                        <!-- End Buttons  -->


Images 

                                                    
                                                        <Link className="rbt-btn" href="#">Histudy Button</Link>
                                                        <Link className="rbt-btn btn-secondary" href="#">Histudy Button</Link>
                                                        <Link className="rbt-btn btn-coral" href="#">Histudy Button</Link>
                                                        <Link className="rbt-btn btn-violet" href="#">Histudy Button</Link>
                                                        <Link className="rbt-btn btn-white" href="#">Histudy Button</Link>
                                                        <Link className="rbt-btn btn-pink" href="#">Histudy Button</a>


Badge

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

Images 

                                                    
                                                        <!-- Start Badge  -->
                                                        <span className="rbt-default-badge position-static">Histudy Badge</span>
                                                        <span className="rbt-badge">Histudy Badge</span>
                                                        <span className="rbt-badge-4">Histudy Badge</span>
                                                        <span className="rbt-badge-5">Histudy Badge</span>
                                                        <span className="rbt-badge variation-02 bg-primary-opacity">Histudy Badge</span>
                                                        <span className="rbt-badge-6 bg-primary-opacity">Histudy Badge</span>
                                                        <span className="rbt-badge-6 bg-secondary-opacity">Histudy Badge</span>
                                                        <Link href="#" className="rbt-badge-2">
                                                            <div className="image"><Image src="assets/images/testimonial/client-02.png" alt="Education Images"></div> Learn with <strong>Fatima Asrafy</strong>
                                                        </Link>
                                                        <!-- End Badge  -->

Accordion

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

Images 

                                                    
                                                        <!-- Start Accordion  -->
                                                        <div className="rbt-accordion-style rbt-accordion-01  accordion">
                                                            <div className="accordion" id="accordionExamplea1">
                                                                <div className="accordion-item card">
                                                                    <h2 className="accordion-header card-header" id="headingOne">
                                                                        <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                                            What is Histudy ? How does it work?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseOne" className="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExamplea1">
                                                                        <div className="accordion-body card-body">
                                                                            You can run Histudy easily. Any School, University, College can be use this
                                                                            histudy education template for their educational purpose. A university can be
                                                                            run their online leaning management system by histudy education template.
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div className="accordion-item card">
                                                                    <h2 className="accordion-header card-header" id="headingTwo">
                                                                        <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                                            How can I get the customer support?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseTwo" className="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExamplea1">
                                                                        <div className="accordion-body card-body">
                                                                            After purchasing the product need you any support you can be share with
                                                                            us with sending mail to rainbowit10@gmail.com.
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End Badge  -->

Clients

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

Images 

                                                    
                                                        <!-- Start Clients  -->
                                                        <ul className="brand-list brand-style-3 justify-content-center justify-content-lg-between">
                                                            <li><Link href="#"><Image src="assets/images/brand/brand-01.png" alt="Brand Image"></Link></li>
                                                            <li><Link href="#"><Image src="assets/images/brand/brand-02.png" alt="Brand Image"></Link></li>
                                                            <li><Link href="#"><Image src="assets/images/brand/brand-03.png" alt="Brand Image"></Link></li>
                                                            <li><Link href="#"><Image src="assets/images/brand/brand-05.png" alt="Brand Image"></Link></li>
                                                            <li><Link href="#"><Image src="assets/images/brand/brand-06.png" alt="Brand Image"></a></li>
                                                        </ul>
                                                        <!-- End Clients  -->

Counters

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

Images 

                                                    
                                                        <div className="row g-5 hanger-line">
                                                            <!-- Start Single Counter  -->
                                                            <div className="col-lg-3 col-md-6 col-sm-6 col-12">
                                                                <div className="rbt-counterup rbt-hover-03 border-bottom-gradient">
                                                                    <div className="top-circle-shape"></div>
                                                                    <div className="inner">
                                                                        <div className="rbt-round-icon">
                                                                            <Image src="assets/images/icons/counter-01.png" alt="Icons Images">
                                                                        </div>
                                                                        <div className="content">
                                                                            <h3 className="counter"><span className="odometer" data-count="500">00</span>
                                                                            </h3>
                                                                            <span className="subtitle">Learners &amp; counting</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- End Single Counter  -->
                                                            <!-- Start Single Counter  -->
                                                            <div className="col-lg-3 col-md-6 col-sm-6 col-12 mt--60 mt_md--30 mt_sm--30 mt_mobile--60">
                                                                <div className="rbt-counterup rbt-hover-03 border-bottom-gradient">
                                                                    <div className="top-circle-shape"></div>
                                                                    <div className="inner">
                                                                        <div className="rbt-round-icon">
                                                                            <Image src="assets/images/icons/counter-02.png" alt="Icons Images">
                                                                        </div>
                                                                        <div className="content">
                                                                            <h3 className="counter"><span className="odometer" data-count="800">00</span>
                                                                            </h3>
                                                                            <span className="subtitle">Courses & Video</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- End Single Counter  -->
                                                            <!-- Start Single Counter  -->
                                                            <div className="col-lg-3 col-md-6 col-sm-6 col-12 mt_md--60 mt_sm--60">
                                                                <div className="rbt-counterup rbt-hover-03 border-bottom-gradient">
                                                                    <div className="top-circle-shape"></div>
                                                                    <div className="inner">
                                                                        <div className="rbt-round-icon">
                                                                            <Image src="assets/images/icons/counter-03.png" alt="Icons Images">
                                                                        </div>
                                                                        <div className="content">
                                                                            <h3 className="counter"><span className="odometer" data-count="1000">00</span>
                                                                            </h3>
                                                                            <span className="subtitle">Certified Students</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- End Single Counter  -->
                                                            <!-- Start Single Counter  -->
                                                            <div className="col-lg-3 col-md-6 col-sm-6 col-12 mt--60 mt_md--30 mt_sm--30 mt_mobile--60">
                                                                <div className="rbt-counterup rbt-hover-03 border-bottom-gradient">
                                                                    <div className="top-circle-shape"></div>
                                                                    <div className="inner">
                                                                        <div className="rbt-round-icon">
                                                                            <Image src="assets/images/icons/counter-04.png" alt="Icons Images">
                                                                        </div>
                                                                        <div className="content">
                                                                            <h3 className="counter"><span className="odometer" data-count="100">00</span>
                                                                            </h3>
                                                                            <span className="subtitle">Registered Enrolls</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- End Single Counter  -->
                                                        </div>

Social Share

Showcase of Social share. See below image and code for more information.

  • Add .transparent-with-border class For Transparent with border style.
  • Add .with-gradient class For Hover gradient style.
  • Add .with-bg-primary class For With Bg Primary Color style.
  • Add .icon-naked class For naked style.
Images 

                                                    
                                                        <ul className="social-icon social-default">
                                                            <li><Link href="https://www.facebook.com/">
                                                                    <i className="feather-facebook"></i>
                                                                </Link>
                                                            </li>
                                                            <li><Link href="https://www.twitter.com">
                                                                    <i className="feather-twitter"></i>
                                                                </Link>
                                                            </li>
                                                            <li><Link href="https://www.instagram.com/">
                                                                    <i className="feather-instagram"></i>
                                                                </Link>
                                                            </li>
                                                            <li><Link href="https://www.linkdin.com/">
                                                                    <i className="feather-linkedin"></i>
                                                                </Link>
                                                            </li>
                                                        </ul>

Progressbar

Different types of progressbar are styled in our template. See below image and code for more information.

  • Add .large-size class for large size style.
  • Add .no-radius class for square style.
Images 

                                                    
                                                        <div className="rbt-progress-style-1">
                                                            <div className="single-progress">
                                                                <h6 className="title">Web Development</h6>
                                                                <div className="progress">
                                                                    <div className="progress-bar wow fadeInLeft" data-wow-duration="0.5s"
                                                                        data-wow-delay=".3s" role="progressbar" style="width: 90%"
                                                                        aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                                                                    </div>
                                                                    <span className="progress-number">90%</span>
                                                                </div>
                                                            </div>
                                                        </div>

Call To Action

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

Images 

                                                    
                                                        <div className="rbt-callto-action-area">
                                                            <div className="rbt-callto-action rbt-cta-default style-4 bg-gradient-6 mt--75">
                                                                <div className="container">
                                                                    <div className="row align-items-center content-wrapper row--30 mt_dec--30 position-relative">
                                                                        <div className="col-lg-8 mt--30 offset-lg-3">
                                                                            <div className="inner">
                                                                                <div className="content text-left">
                                                                                    <h2 className="title sal-animate" data-sal="slide-up">Ready to start creating a Educational Website?</h2>
                                                                                    <div className="call-to-btn text-start mt--30">
                                                                                        <Link className="rbt-btn btn-gradient hover-icon-reverse" href="#">
                                                                                            <span className="icon-reverse-wrapper">
                                                                                        <span className="btn-text">Purchase Histudy</span>
                                                                                            <span className="btn-icon"><i className="feather-arrow-right"></i></span>
                                                                                            <span className="btn-icon"><i className="feather-arrow-right"></i></span>
                                                                                            </span>
                                                                                        </Link>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div className="thumbnail">
                                                                            <Image className="w-100" src="assets/images/shape/cta.png" alt="Shape Images">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

Instagram

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

Images 

                                                    
                                                        <div className="instagram-grid">
                                                            <Link href="#">
                                                                <Image src="assets/images/instagram/instagram-03.jpg" alt="instagram">
                                                                <span className="user-info">
                                                            <span className="icon"><i className="icon-instagram"></i></span>
                                                                <span className="user-name">@Histudy</span>
                                                                </span>
                                                            </Link>
                                                        </div>

Footer Style

Welcome to Histudy 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 className="rbt-footer footer-style-1">
                                                            <div className="footer-top">
                                                                <div className="container">
                                                                    <div className="row row--15 mt_dec--30">
                                                                        <div className="col-lg-4 col-md-6 col-sm-6 col-12 mt--30">
                                                                            <div className="footer-widget">
                                                        
                                                                            </div>
                                                                        </div>
                                                                        <div className="offset-lg-1 col-lg-2 col-md-6 col-sm-6 col-12 mt--30">
                                                                            <div className="footer-widget">
                                                        
                                                                            </div>
                                                                        </div>
                                                                        <div className="col-lg-2 col-md-6 col-sm-6 col-12 mt--30">
                                                                            <div className="footer-widget">
                                                        
                                                                            </div>
                                                                        </div>
                                                                        <div className="col-lg-3 col-md-6 col-sm-6 col-12 mt--30">
                                                                            <div className="footer-widget">
                                                        
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </footer>

Footer Two

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

Images 

                                                    
                                                                <footer className="rbt-footer footer-style-1 bg-color-white overflow-hidden">
                                                                    <div className="footer-top">
                                                                        <div className="container">
                                                                            <div className="row g-5">
                                                                                <div className="col-lg-4 col-md-6 col-sm-6 col-12">
                                                                                    <div className="footer-widget">
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-lg-2 col-md-6 col-sm-6 col-12">
                                                                                    <div className="footer-widget">
                                                                
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-lg-2 col-md-6 col-sm-6 col-12">
                                                                                    <div className="footer-widget">
                                                                
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-lg-4 col-md-6 col-sm-6 col-12">
                                                                                    <div className="footer-widget">
                                                                
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div className="rbt-separator-mid">
                                                                        <div className="container">
                                                                            <hr className="rbt-separator m-0"/>
                                                                        </div>
                                                                    </div>
                                                                    <!-- Start Copyright Area  -->
                                                                    <div className="copyright-area copyright-style-1 ptb--20">
                                                                        <div className="container">
                                                                            <div className="row align-items-center">
                                                                                <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-12">
                                                                                    <p className="rbt-link-hover text-center text-lg-start">Copyright © 2024 <Link href="https://themeforest.net/user/rbt-themes">Rainbow-Themes.</Link> All Rights Reserved</p>
                                                                                </div>
                                                                                <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-12">
                                                                                    <ul className="copyright-link rbt-link-hover justify-content-center justify-content-lg-end mt_sm--10 mt_md--10">
                                                                                        <li><Link href="#">Terms of service</Link></li>
                                                                                        <li><Link href="#">Privacy policy</Link></li>
                                                                                        <li><Link href="#">Payment</Link></li>
                                                                                        <li><Link href="#">Security</Link></li>
                                                                                    </ul>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!-- End Copyright Area  -->
                                                                </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