Documentation

Getting Started

Welcome

Thanks for purchasing our template :)

It is our great pleasure that you purchased our template. And we want to tell you that you don't need to write any codes for this template. Just follow some instructions for customizing the template.

If you have any questions, feel free to contact us at aonetheme@gmail.com.

Features

  • 2 Home Pages
  • Total 15+ HTML Files
  • Fully responsive
  • Clear & Neat design
  • Bootstrap Based
  • Smooth animation
  • Browser compatibility (IE10+, Chrome, Safari, Firefox, Opera)
  • Well documented

Folder Arrange

Unzip the archive and find out the folder "buyer-file". There are all the template files in this folder. You can open the following files for viewing in browser.

  1. style.css — folder with css files.
  2. assets/fonts — folder with icon fonts.
  3. assets/images — folder with image files.
  4. assets/js — folder with Javascript files.

  5. index.html — Home Page.
  6. about.html — About us Page.

  7. and Some other HTML Files
    8. .

Installation

01. FTP Upload

  • Open Your FTP manager and connect to your hosting
  • Browse to required directory(Normally public_html)
  • Upload the files inside buyer-file folder

03. Fonts

            
				@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

				@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

05. Source File (CSS)

<!-- BOOTSTRAP STYLE SHEET -->

<link  href="assets/css/bootstrap.min.css" rel="stylesheet">

<!-- FLATICON STYLE SHEET -->

<link href="assets/css/bootstrap-icons.css" rel="stylesheet">

<!-- FONTAWESOME STYLE SHEET -->

<link  href="assets/css/font-awesome.min.css" rel="stylesheet">

<!-- Feather STYLE SHEET -->

<link href="assets/css/feather.css" rel="stylesheet">

<!-- WOW ANIMATE STYLE SHEET -->

<link href="assets/css/animate.css" rel="stylesheet">

<!-- FONTS CSS STYLE SHEET -->

<link href="assets/css/font.css" rel="stylesheet">

<!-- OWL CAROUSEL STYLE SHEET -->

<link href="assets/css/owl.carousel.min.css" rel="stylesheet">

<!-- MAGNIFIC POPUP STYLE SHEET -->

<link href="assets/css/magnific-popup.min.css" rel="stylesheet">
     
<!-- MAIN STYLE SHEET -->

<link href="assets/css/style.css" rel="stylesheet">

06. Source File (JS)

<!-- JAVASCRIPT  FILES --> 

<script  src="assets/js/jquery-3.6.1.min.js"></script><!-- JQUERY.MIN JS -->

<script  src="assets/js/popper.min.js"></script><!-- POPPER.MIN JS -->

<script  src="assets/js/bootstrap.min.js"></script><!-- BOOTSTRAP.MIN JS -->

<script  src="assets/js/wow.js"></script><!-- WOW JS -->

<script  src="assets/js/magnific-popup.min.js"></script><!-- MAGNIFIC-POPUP JS -->

<script  src="assets/js/waypoints.min.js"></script><!-- WAYPOINTS JS -->

<script  src="assets/js/counterup.min.js"></script><!-- COUNTERUP JS -->

<script  src="assets/js/waypoints-sticky.min.js"></script><!-- STICKY HEADER -->

<script  src="assets/js/owl.carousel.min.js"></script><!-- OWL  SLIDER  -->

<script  src="assets/js/theia-sticky-sidebar.js"></script><!-- STICKY SIDEBAR  -->

<script  src="assets/js/gsap.min.js"></script><!-- cursor -->

<script  src="assets/js/custom.js"></script><!-- CUSTOM FUCTIONS  -->

Logo Type

To change logotype in the navigation panel, find image images/logo/logo.png and replace it with your logo.

Note: Keep your logo inside the assets/imaegs/logo folder. The logo size should be minimum 200x60 pixel.

This is logo and navigation codes.


<!-- HEADER START -->
<header class="site-header header-style-1 mobile-sider-drawer-menu header-full-width"> 
  <!--Top bar section End-->
  <div class="sticky-header main-bar-wraper  navbar-expand-lg">
    <div class="main-bar">
      <div class="container"> 
        
        <!-- Mobile Logo -->
        <div class="mobile-logo-left">
          <div class="logo-header">
            <div class="logo-header-inner logo-header-one"> <a href="index.html"> <img src="assets/images/home1/logo.png" alt=""> </a> </div>
          </div>
        </div>
        
        <!-- NAV Toggle Button -->
        <button id="mobile-side-drawer" data-target=".header-nav" data-toggle="collapse" type="button" class="navbar-toggler collapsed"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar icon-bar-first"></span> <span class="icon-bar icon-bar-two"></span> <span class="icon-bar icon-bar-three"></span> </button>
        
        <!-- MAIN Vav -->
        <div class="nav-animation header-nav header-nav2 navbar-collapse collapse d-flex">
          <ul class=" nav navbar-nav">
            <li class="has-child current-menu-item"> <a href="javascript:;">Home</a>
              <ul class="sub-menu">
                <li><a href="index.html">Home 1</a></li>
                <li><a href="index-2.html">Home 2</a></li>
              </ul>
            </li>
            <li class="has-child"> <a href="javascript:;">Services</a>
              <ul class="sub-menu">
                <li><a class="cursor-scale small" href="services.html">Services</a></li>
                <li><a href="service-detail.html">Services Detail</a></li>
              </ul>
            </li>
            <li class="has-child"> <a href="javascript:;">Pages</a>
              <ul class="sub-menu">
                <li><a href="about-us.html">About Us</a></li>
                <li><a href="pricing.html">Pricing</a></li>
                <li><a href="team.html">Team</a></li>
                <li><a href="team-detail.html">Team Detail</a></li>
                <li><a href="testimonial.html">Testimonials</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li><a class="cursor-scale small" href="add-to-cart.html">Add to Cart</a></li>
              </ul>
            </li>
            <li class="has-child"> <a href="javascript:;">Blog</a>
              <ul class="sub-menu">
                <li><a href="blog.html">Blog Grid</a></li>
                <li><a href="blog-detail.html">Blog Detail</a></li>
              </ul>
            </li>
            <li> <a href="event.html">Event</a> </li>
            <li><a href="contact.html">Contact Us </a></li>
          </ul>
        </div>
        
        <!-- Header Right Section-->
        <div class="extra-nav header-2-nav">
          <div class="extra-cell"> <a href="event.html" class="site-button cursor-scale small">Book Class <i class="bi bi-arrow-right"></i></a> </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- HEADER END -->

Here is your main logo code. To add your logo, replace logo.png from images/logo/ directory with your logo in PNG format.

<img src="assets/images/logo.png" alt="yogar" />

Tab Customization

To change the tab heading you will need to edit in the tag <li>Here is your heading</li> and add your text in the middle of the tag.

To change the tab tagline you will need to edit in the tag <p>Here is your tagline</p> and add your text in the middle of the tag.

Which tab item you want to take as active you have to add active class to that "tab-item" class and li tag.



Section Styles

Here is your section structure.

  <section class="section-name">
    <div class="container">                  
     
    </div>
  </section>

If you need another style of section header - just you add "left style"class

In the class="section-class" you can replace with your desired class.

You can add your content on the 2nd row div.



Section With Background

            <section class="section-name">
              <div class="container">
                ...
              </div>
            </section>

you can select background color between light and dark color. To add cloud color, just simply add the class body-bg, section-bg to the section class. 



            <div class="footer-bottom">
                <div class="container">
                    <p>
                        &copy; 2024 All Right Reserved. Designed and Developed by <a href="#0">Aonetheme</a>
                    </p>
                </div>
            </div>

Support

If you have any questions, feel free to contact us at aonetheme@gmail.com.