Constol — 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.

### Features

- Five Home Pages
- Total 22+ HTML Files
- Fully responsive
- Clear & Neat design
- Bootstrap Based
- Fontawesome Icon
- Nice portfolio and Blog
- 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 your customization.

1. assets/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. assets/sass — folder with SASS/SCSS files.
6. index.html — Home Page.
7. about.html — About us Page.
8. blog.html — Blog Page.
9. blog-single.html — Blog Single Page.
10. and Some other HTML Files
.

### 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
- That's all !

#### 02. All HTML Pages

#### 03. Fonts

Go to Google Fonts and select your favorite fonts and then just replace the code.

    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

#### 05. Source File (CSS)

All required css files have been linked like below-

    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/all.min.css">
    <link rel="stylesheet" href="assets/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/odometer.css">
    <link rel="stylesheet" href="assets/css/lightcase.css">
    <link rel="stylesheet" href="assets/css/style.css">

###

#### 06. Source File (JS)

All required css files have been linked like below. if you need any customization in JAVASCRIPT you have to edit the function.js file.

    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/waypoints.min.js"></script>
    <script src="assets/js/swiper.min.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/circularProgressBar.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/viewport.jquery.js"></script>
    <script src="assets/js/odometer.min.js"></script>
    <script src="assets/js/lightcase.js"></script>
    <script src="assets/js/functions.js"></script>

### Menu Bar with logo

This is logo and navigation codes.

    <div class="menu">
        <ul>
            <li>
                <a href="#0">Home</a>
                <ul>
                    <li><a href="index.html">Home One</a></li>
                    <li><a href="index-2.html">Home Two</a></li>
                    <li><a href="index-3.html">Home Three</a></li>
                    <li><a href="index-4.html">Home Four</a></li>
                    <li><a href="index-5.html">Home Five</a></li>
                </ul>
            </li>
            <li>
                <a href="#0" class="active">Pages</a>
                <ul>
                    <li>
                        <a href="#0">About</a>
                        <ul>
                            <li><a href="about.html">About One</a></li>
                            <li><a href="about-2.html">About Two</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#0" class="active">adviser</a>
                        <ul>
                            <li><a href="adviser.html">adviser</a></li>
                            <li><a href="adviser-single.html" class="active">adviser single</a></li>
                        </ul>
                    </li>
                    <li><a href="jobs.html">Job</a></li>
                    <li><a href="faq.html">FAQ</a></li>
                    <li><a href="history.html">History</a></li>
                    <li><a href="404.html">404 Page</a></li>
                </ul>
            </li>
            <li>
                <a href="#0">Services</a>
                <ul>
                    <li><a href="service.html">Service</a></li>
                    <li><a href="service-single.html">Service Single</a></li>
                </ul>
            </li>
            <li>
                <a href="#0">Projects</a>
                <ul>
                    <li><a href="project.html">Project</a></li>
                    <li><a href="project-single.html">Service Single</a></li>
                </ul>
            </li>
            <li>
                <a href="#0">blog</a>
                <ul>
                    <li><a href="blog.html">Blog Grid View</a></li>
                    <li><a href="blog-2.html">Blog Grid View Two</a></li>
                    <li><a href="blog-3.html">Blog Classic View</a></li>
                    <li><a href="blog-single.html">Blog Single</a></li>
                </ul>
            </li>
            <li><a href="contact.html">contact</a></li>
        </ul>
        <a href="appointment.html" class="lab-btn">make appointment</a>
    </div>

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

        <div class="logo">
            <a href="index.html">
                <img src="assets/images/logo/01.png" alt="logo">
            </a>
        </div>

##### Note: Keep your logo inside the ./assets/images/logo folder. The logo size should be maximum 168x21 pixel.

To change the menu name you will need to edit in the tag <li><a href="#">menu name </a> </li> and add your text in the middle of the tag.

### Section Styles

Here is your section structure.

    <section class="xyz padding-tb">
        <div class="container">
            <div class="section__header">
              ....
            </div>
            <div class="section__wrapper">
                <div class="row">
                  ....
                </div>
            </div>
        </div>
    </section>

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

the class padding-tb is the space between each sections.

And in the section__header div you can add your heading of sections and tagline of sections.

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

#### 08. Change Copyright

You Can Change Your Copyright text by changing footer sections copyright part like below-

    	<p>© 2022 Constol. All Rights Reserved.</p>

#### 09. Change Contact form mail

You Can Change Contact form mail address with your desire one with by changing the email address in contact.php file -

        // FIXME: Update this to your desired email address.
        $recipient = "yourgmail@gmail.com";