Consulter Business Consulting HTML Template Documentation

By rrdevs March 23, 2023 Documentation HTML

Consulter Business Consulting HTML Template Documentation

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email us.

FTP Upload:
- Open up your FTP manager and connect to your hosting
- Browse to required directory (Normally public_html)
- Upload the files inside consulter-html folder.

Pages

- index.html 1st Home Page
- index-2.html 2nd Home Page
- index-3.html 3rd Home Page
- about.html About Page
- team.html Team Page
- team-details.html Team Details Page
- contact.html Contact Page
- our-project.html Our Project Page
- our-project-details.html Our Project Details Page
- services.html Services Page
- services-2.html Services Two Page
- services-details.html Single services Details Page
- blog.html Blog Page
- blog-standard.html Blog Standard Page
- blog-details.html Blog Details Page
- table.html Pricing Table Page
- 404.html Error Page
- mail.php mail.php file

        <!-- Google Fonts
        ============================================ -->
        Pathway, Lato, Poppins - <link href='https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Pathway+Gothic+One&family=Poppins:wght@100;300;400;500;600;700&display=swap' rel='stylesheet' type='text/css'>

	
    <!-- ===========  All Stylesheet  ================= -->

    <!-- fontawesome CSS plugins 
    ============================================ -->
    <link rel="stylesheet" href="assets/css/icons.css">

    <!-- slick slider CSS
    ============================================ -->
    <link rel="stylesheet" href="assets/css/slick.min.css">
    
    !-- animate CSS
    ============================================ -->
    <link rel="stylesheet" href="assets/css/animate.min.css">

    <!-- magnific-popup CSS
    ============================================ -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">

    <!-- Bootstrap CSS
    ============================================ -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
 
    <!-- Style CSS
    ============================================ -->
    <link rel="stylesheet" href="style.css">

    <!-- All JS Plugins -->

    <!-- jQuery
    ============================================ -->
    <script src="assets/js/jquery.min.js"></script>

    <!-- Modernizr
    ============================================ -->
    <script src="assets/js/modernizr.min.js"></script>

    <!-- Bootstrap
    ============================================ -->
    <script src="assets/js/bootstrap.min.js"></script>

    <!-- Others jQuery Plugins
    ============================================ -->
    <script src="assets/js/jquery.easing.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/scrollUp.min.js"></script>
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/magnific-popup.min.js"></script>
    <script src="assets/js/counterup.min.js"></script>
    <script src="assets/js/jquery.sticky-kit.js"></script>
    <script src="assets/js/jquery.easypiechart.min.js"></script>
    <!-- Main JS
    ============================================ -->
    <script src="assets/js/active.js"></script>

How to Change Logo

How to Change Title

How to Change Favicon

How to Change Page Banner

How to Change Serivce

How to Change Single-skill Item

How to Change Single Pricing Plane Item

How to Change Blog Section Item

How to Change Mail Address with Your's - Open mail.php file and edit.

How to Change Social Links

How to Change Copyright

SCSS Structure

CSS Structure

I'm using One SCSS files in this template. You change the SCSS Code of style.scss file

=================================
|***    Table of contents:   ***|
=================================
1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Hero Section
8. About us
9. Causes
10. Fun facts
11. Events
12. Blog

*Note: Responsive css in style.css file bottom.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. Home Page Hero Sliders section CSS - find and change it on _hero.scss from "assets/scss" folder

	
  /* ----------------------------------
  Hero Section - Styles
------------------------------------ */

 .hero-1 {
    .single-slide {
        padding: 330px 0px 225px;
        z-index: 1;
        position: relative;
        overflow: hidden;

        @media (max-width: 1199px) {
            padding: 230px 0px 175px;
        }

        @media (max-width: 991px) {
            padding: 180px 0px 120px;
        }

        @media (max-width: 767px) {
            padding: 150px 0px 100px;
        }

        &::before {
            position: absolute;
            left: 0;
            top: 0;
            background-image: url('../img/slide_bg_circle.png');
            width: 60%;
            height: 100%;
            content: "";
            z-index: -1;
            opacity: .5;
            background-repeat: no-repeat;

            @media (max-width: 1600px) {
                width: 100%;
            }
        }

        .hero-contents {
            position: relative;
            z-index: 2;

            h1 {
                font-weight: 900;

                @media (max-width: 1199px) {
                    font-size: 100px;
                }

                @media (max-width: 991px) {
                    font-size: 80px;
                }

                @media (max-width: 767px) {
                    font-size: 60px;
                }
            }

            h2 {
                font-size: 100px;
                line-height: 1;
                font-weight: 900;
                margin-bottom: 20px;

                @media (max-width: 1199px) {
                    font-size: 80px;
                }

                @media (max-width: 991px) {
                    font-size: 70px;
                }

                @media (max-width: 767px) {
                    font-size: 50px;
                }
            }

            p {
                color: #211e3b;
                font-weight: 500;
                font-size: 24px;
                margin-top: 20px;

                @media (max-width: 767px) {
                    font-size: 20px;
                }
            }

            a {
                margin-top: 35px;
                margin-right: 20px;
                
                @media (max-width: 767px) {
                    margin-top: 20px;
                }
            }
        }

        .slide-top-img {
            width: 771px;
            height: 788px;
            position: absolute;
            z-index: -1;
            background-color: #eee;
            right: 0;
            top: 0;
            content: "";
            // clip-path: polygon(26% 0, 100% 0%, 100% 75%, 78% 81%, 11% 14%);
            clip-path: polygon(25% 0, 100% 0%, 101% 70%, 66% 80%, 0% 17%);
            background-position: -125px;

            @media (max-width: 1400px) {
                width: 634px;
                height: 652px;
                right: -83px;
                background-position: -90px;
            }
        }

        .slide-bottom-img {
            width: 972px;
            height: 486px;
            position: absolute;
            z-index: -1;
            background-color: #eee;
            right: 30px;
            bottom: 0;
            content: "";
            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

            @media (max-width: 1400px) {
                width: 672px;
                height: 386px;
                right: 0;
            }
        }

        .bg-overlay {
            &::before {
                background: $second-color;
                opacity: .1;
            }
        }
    }
 }

Change section padding CSS - find and change it on style.css or _section.scss file from scss folder

.section-padding {
    padding: 130px 0px;
}

JavaScript Customization

Change The Carosuels & Others with your's choice

	
 
  $(window).on('load', function() {
            // Animate loader off screen
            $(".preloader").delay(500).fadeOut();                        
        });
        
        $(".hero-slider-active").owlCarousel({        
            items: 1,     
            dots: false,
            loop: true,
            autoplayTimeout: 8000,
            autoplay:true,
            nav: true,          
            navText: ['', ''],
        });

Credits And Sources

Once again thank you for purchasing one of our Templates

Best Regards RRDevs

Table of Contents