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 dreamit.websolution@gmail.com.

Features

  • 10+ Home Pages
  • Total 50+ 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=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Yantramanav:wght@100;300;400;500;700;900&display=swap');

05. Source File (CSS)

<!-- Favicon -->
<link rel="icon" type="image/png" sizes="56x56" href="assets/images/fav-icon/icon.png">
<!-- bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" media="all">
<!-- carousel CSS -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css" type="text/css" media="all">
<!-- animate CSS -->
<link rel="stylesheet" href="assets/css/animate.css" type="text/css" media="all">
<!-- animated-text CSS -->
<link rel="stylesheet" href="assets/css/animated-text.css" type="text/css" media="all">
<!-- font-awesome CSS -->
<link rel="stylesheet" href="assets/css/all.min.css" type="text/css" media="all">
<!-- font-flaticon CSS -->
<link rel="stylesheet" href="assets/css/flaticon.css" type="text/css" media="all">
<!-- theme-default CSS -->
<link rel="stylesheet" href="assets/css/theme-default.css" type="text/css" media="all">
<!-- meanmenu CSS -->
<link rel="stylesheet" href="assets/css/meanmenu.min.css" type="text/css" media="all">
<!-- transitions CSS -->
<link rel="stylesheet" href="assets/css/owl.transitions.css" type="text/css" media="all">
<!-- venobox CSS -->
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="all">
<!-- bootstrap icons -->
<link rel="stylesheet" href="assets/css/bootstrap-icons.css" type="text/css" media="all">
<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all">
<!-- responsive CSS -->
<link rel="stylesheet" href="assets/css/responsive.css" type="text/css" media="all">
<!-- modernizr js -->
<script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>

06. Source File (JS)

<!-- jquery js -->
<script src="assets/js/vendor/jquery-3.6.2.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<!-- bootstrap js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- carousel js -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- counterup js -->
<script src="assets/js/jquery.counterup.min.js"></script>
<!-- waypoints js -->
<script src="assets/js/waypoints.min.js"></script>
<!-- wow js -->
<script src="assets/js/wow.js"></script>
<!-- imagesloaded js -->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!-- venobox js -->
<script src="venobox/venobox.js"></script>
<!-- animated-text js -->
<script src="assets/js/animated-text.js"></script>
<!-- venobox min js -->
<script src="venobox/venobox.min.js"></script>
<!-- isotope js -->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!-- jquery meanmenu js -->
<script src="assets/js/jquery.meanmenu.js"></script>
<!-- jquery scrollup js -->
<script src="assets/js/jquery.scrollUp.js"></script>
<!-- jquery js -->
<script src="assets/js/jquery.barfiller.js"></script>
<!-- theme js -->
<script src="assets/js/theme.js"></script>

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.

  <ul class="nav_scroll">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="#">Company <span><i class="fas fa-angle-down"></i></span></a>
      <ul class="sub-menu">
        <li><a href="service.html">Our Service</a></li>
        <li><a href="service-details.html">Service Details</a></li>
        </ul>
      </li>
   <li><a href="#">Pages <span><i class="fas fa-chevron-down"></i></span></a>
      <ul class="sub-menu">
        <li><a href="about.html">About Us</a></li>
        <li><a href="service.html">Our Service</a></li>
        <li><a href="team.html">Our Team</a></li>
        <li><a href="portfolio.html">Project</a></li>
        <li><a href="portfolio-details.html">Project Details</a></li>
        <li><a href="pricing.html">Pricing</a></li>
        <li><a href="faq.html">Faq</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        </ul>
      </li>
    <li><a href="#">Shop <span><i class="fas fa-chevron-down"></i></span></a>
      <ul class="sub-menu">
        <li><a href="shop.html">Shop One</a></li>
        <li><a href="shop-2.html">Shop Two</a></li>
        <li><a href="shop-details.html">Shop Details</a></li>
        </ul>
      </li>
    <li><a href="#">Blog <span><i class="fas fa-chevron-down"></i></span></a>
      <ul class="sub-menu">
        <li><a href="blog-grid.html">Blog Gird</a></li>
        <li><a href="blog.html">Blog List</a></li>
        <li><a href="blog-2column.html">Blog-2Column</a></li>
        <li><a href="blog-details.html">Blog Details</a></li>
        </ul>
      </li>
    <li><a href="contact.html">Contact</a></li>
  </ul>

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="astute" />

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">Dreamit-Solution</a>
                    </p>
                </div>
            </div>

Support

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