Constx Documentation


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

Constx
Working with Doc

You can any work by following our docs

Constx
Formatting Content

Our content is more formating for your website

Constx
Perfect Responsive

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

Constx
Sass Available

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

Constx
Fast Loading Speed

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

Constx
24 Support System

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

Getting Started

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

About Constx – Next-gen All-in-one Construction & Industrial Bootstrap 5 Template Constx is a next-generation, all-in-one Construction & Industrial Bootstrap 5 Template, built with HTML5 and Bootstrap 5 using a clean, component-based, and developer-friendly modern architecture. It delivers a professional design, smooth performance, and a fast-loading experience tailored for construction-focused websites.

Constx comes packed with multiple industry-ready demos including Construction, Renovation, Architecture, Interior Design, Handyman Services, Engineering, Industrial Solutions, and additional essential inner pages to present your services, projects, pricing, company info, and business achievements effectively.

Whether you're building a website for a construction company, contractor, builder, architect studio, engineering firm, interior agency, or industrial service provider, Constx provides a fully responsive, SEO-friendly, and high-impact design solution to establish a strong online presence.

Constx is the perfect multipurpose construction and industrial template for businesses looking to launch a professional, modern, and performance-optimized website with ease.

Constx Core Features

  • HTML5 & CSS3
  • Responsive layout (desktops, tablets, mobile devices)
  • Built with Bootstrap v5.3.2
  • Well structured code
  • Contact Form Working
  • Hinted Typography
  • Sass Available
  • W3 Valid 100%
  • Fast Loading Speed
  • Cross Browser Support
  • Modern Modal Popup
  • Interactive Lightbox Gallery
  • Modern Blog Pages
  • SEO-Friendly Clean Code
  • Smooth Animations
  • Reusable UI Components
  • Retina Ready Design
  • Dedicated Support, Lifetime Updates
  • And much more …

What's Included

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

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

How to Install Constx Website Templates

Installing a Constx template is not like installing a WordPress or CMS theme. In fact, the word “installation” doesn’t really apply to Constx. Why? Because you don’t actually install anything. Constx, like any HTML template, is automatically rendered directly by the browser.

1. Editing Constx Template

Before all that you have to edit your template and place your own contents by replacing old demo contents, in this case, you will need a code editor such as – VScode, Sublime Text, etc. When template editing is done using editor, save the files and folder and go ahead to upload template files on live server.

2. Uploading to Live Server Using FTP:

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

Home Page

3. Package comes with documentation unzip the download package, you’ll found a folder with all template files, like above screenshot.

Home Page

4. Now, login to your hosting control panel or FTP client, such as: FileZilla, CyberDuck etc. and upload template files on your server root.

5. Once all files are uploaded, go to www.yoursite.com/index.html you can see your the homepage, make sure the initial page is named as index.html

Template Structures

Articles

HTML Structure

This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into differt section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.

Images 
                                            
                                                <!DOCTYPE html>
                                                <html lang="en">
                                                <head>
                                                    <meta charset="UTF-8">
                                                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                                                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                                    <title>Constx - Construction & Renovation Company HTML Template</title>
                                                    <!-- Favicon -->
                                                    <link rel="shortcut icon" type="image/x-icon" href="assets/images/fav.svg">

                                                    <!-- CSS
                                                    ============================================ -->
                                                    <link rel="stylesheet" href="assets/css/plugins/fontawesome.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/swiper.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/aos.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/unicons.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/metismenu.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/magnific-popup.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/hover-revel.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/timepickers.min.css">
                                                    <link rel="stylesheet" href="assets/css/plugins/odometer.css">
                                                    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
                                                    <link rel="stylesheet" href="assets/css/style.css">
                                                </head>

                                                <body>

                                                    <!-- JS
                                                    ============================================ -->
                                                    <!-- jQuery JS -->
                                                    <script src="assets/js/plugins/jquery.min.js"></script>
                                                    <!-- jQuery UI -->
                                                    <script src="assets/js/vendor/jqueryui.js"></script>
                                                    <!-- Swiper JS -->
                                                    <script src="assets/js/plugins/swiper.js"></script>
                                                    <!-- MetisMenu JS -->
                                                    <script src="assets/js/plugins/metismenu.js"></script>
                                                    <!-- Waypoint JS -->
                                                    <script src="assets/js/vendor/waypoint.js"></script>
                                                    <!-- Waw Animation -->
                                                    <script src="assets/js/vendor/waw.js"></script>
                                                    <!-- Magnific Popup JS -->
                                                    <script src="assets/js/plugins/magnific-popup.js"></script>
                                                    <!-- SAL Animation -->
                                                    <script src="assets/js/vendor/sal.min.js"></script>
                                                    <!-- Bootstrap JS -->
                                                    <script src="assets/js/plugins/bootstrap.min.js"></script>
                                                    <!-- Contact Form JS -->
                                                    <script src="assets/js/plugins/contact-form.js"></script>
                                                    <!-- Smooth Scroll JS -->
                                                    <script src="assets/js/plugins/smooth-scroll.js"></script>
                                                    <!-- Scroll Parallax JS -->
                                                    <script src="assets/js/plugins/scroll-paralax.js"></script>
                                                    <!-- Odometer JS -->
                                                    <script src="assets/js/plugins/odometer.js"></script>
                                                    <!-- Main JS -->
                                                    <script src="assets/js/main.js"></script>

                                                </body>
                                                </html>

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: Constx - Construction & Renovation Bootstrap5 Template
                                                  Description: Transform your business with expert consulting. Our team delivers strategic insights, innovative solutions, and professional guidance to help you achieve lasting success.
                                                  Note: This is style css.
                                                **********************************************************************************/
                                                /**************************************************************
                                                  STYLESHEET INDEXING
                                                  |
                                                  |
                                                  |___ Default Styles
                                                  | |
                                                  | |___ variables
                                                  | |___ mixins
                                                  | |___ reset
                                                  | |___ typography
                                                  | |___ extend
                                                  | |___ animations
                                                  | |___ shortcode
                                                  | |___ spacing
                                                  | |___ 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
                                                  | |___ 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 {Coming Soon}
                                                  | |___ 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
                                                ***************************************************************/

JavaScript Files

There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:

HTML Images

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.
  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 class="logo-area">
                                                            <a href="index.html">
                                                                <img src="assets/images/logo/02-main.svg" alt="ConstX Logo Images">
                                                            </a>
                                                        </div>
HTML Images

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

  1. Open the file called images.
  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. 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 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

Changing Email Settings of the Contact Form

  1. Go to main folder
  2. Open mail.php
  3. Go to line number 15
  4. Follow instructions in image below:
Images

Header Types

Welcome to ConstX Header Elements! You can choose 10 Types of header package for createing you website.

01. Header Default

To change any images of the website

Images 

                                                    
                                                        <!-- Start Header Area -->
                                                            <header class="header-one header-four header--sticky header-sticky-smooth">
                                                                <div class="header-top overflow-visible">
                                                                    <div class="container-header">
                                                                        <!-- Elements -->
                                                                    </div>
                                                                </div>
                                                            </header>
                                                            <!-- End Header Area -->

02. Header Center

To change any images of the website

  1. Add class="header-center-short header-seven header--sticky" class with header tag
Images 

                                                    
                                                        <!-- Start Header Area -->
                                                            <header class="header-center-short header-seven header--sticky">
                                                                <div class="container">
                                                                    <!-- Start Header Content  -->
                                                                </div>
                                                            </header>
                                                        <!-- End Header Area -->

03. Header With Topbar

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

Images 

                                                    
                                                        <!-- Start Header Area -->
                                                            <div class="header-top overflow-visible" >  
                                                                <div class="row" >  

                                                                </div>
                                                            </div>
                                                            <div class="header-main header-main-2">
                                                                <div class="row" >  
                                                                    <!-- header-elements -->
                                                                </div>
                                                            </div>
                                                        <!-- End Header Area -->

All Elemnts and Shortcode Types


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

Buttons

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

Images 

                                                    
                                                        <!-- Start Buttons -->

                                                        <a href="#" class="tmp-btn btn-primary hover-icon-reverse btn-sm">
                                                            <span class="icon-reverse-wrapper">
                                                                <span class="btn-text">Button Sm</span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                            </span>
                                                        </a>

                                                        <a href="#" class="tmp-btn btn-primary hover-icon-reverse btn-md">
                                                            <span class="icon-reverse-wrapper">
                                                                <span class="btn-text">Button Md</span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                            </span>
                                                        </a>

                                                        <a href="#" class="tmp-btn btn-primary hover-icon-reverse">
                                                            <span class="icon-reverse-wrapper">
                                                                <span class="btn-text">Button Default</span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                            </span>
                                                        </a>

                                                        <a href="#" class="tmp-btn btn-primary hover-icon-reverse btn-lg">
                                                            <span class="icon-reverse-wrapper">
                                                                <span class="btn-text">Button Lg</span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                            </span>
                                                        </a>

                                                        <a href="#" class="tmp-btn btn-primary hover-icon-reverse btn-xl">
                                                            <span class="icon-reverse-wrapper">
                                                                <span class="btn-text">Button Xl</span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                            </span>
                                                        </a>

                                                        <a href="#" class="tmp-btn btn-primary hover-icon-reverse btn-xxl">
                                                            <span class="icon-reverse-wrapper">
                                                                <span class="btn-text">Button XXl</span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                            </span>
                                                        </a>

                                                        <!-- End Buttons -->


Accordion

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

Images 

                                                    
                                                        <div class="faq-content-area with-box-shadow inner">
                                                            <div class="accordion-one" id="accordionExample">

                                                                <!-- FAQ 01 -->
                                                                <div class="accordion-item">
                                                                    <h2 class="accordion-header" id="headingOne">
                                                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                                            <img src="assets/images/faq-area/icon-01.svg" alt=""> What is included in project site preparation?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                                                        <div class="accordion-body">
                                                                            <p class="desc mb--15">Site preparation includes land clearing, grading, soil testing, utility planning, and setting up the initial project layout. Our team ensures your construction site is fully ready for structural work to begin smoothly and safely.</p>
                                                                            <a href="contact.html" class="tmp-btn btn-primary hover-icon-reverse btn-sm">
                                                                                <span class="icon-reverse-wrapper">
                                                                                    <span class="btn-text">Get A Quote</span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                </span>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <!-- FAQ 02 -->
                                                                <div class="accordion-item">
                                                                    <h2 class="accordion-header" id="headingTwo">
                                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                                            <img src="assets/images/faq-area/icon-01.svg" alt=""> How long does it take to complete a construction project?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                                                        <div class="accordion-body">
                                                                            <p class="desc mb--15">Project timelines depend on size, design complexity, materials, and approval procedures. On average, residential projects take 3–6 months, while commercial projects may require 6–12 months. We provide a detailed timeline after project evaluation.</p>
                                                                            <a href="contact.html" class="tmp-btn btn-primary hover-icon-reverse btn-sm">
                                                                                <span class="icon-reverse-wrapper">
                                                                                    <span class="btn-text">Get A Quote</span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                </span>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <!-- FAQ 03 -->
                                                                <div class="accordion-item">
                                                                    <h2 class="accordion-header" id="headingThree">
                                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                                            <img src="assets/images/faq-area/icon-01.svg" alt=""> Do I need permits for construction work?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                                                        <div class="accordion-body">
                                                                            <p class="desc mb--15">Yes, most construction projects require permits for safety and compliance. Our team assists you with all necessary documentation, including building permits, zoning approvals, and environmental clearances.</p>
                                                                            <a href="contact.html" class="tmp-btn btn-primary hover-icon-reverse btn-sm">
                                                                                <span class="icon-reverse-wrapper">
                                                                                    <span class="btn-text">Get A Quote</span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                </span>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <!-- FAQ 04 -->
                                                                <div class="accordion-item">
                                                                    <h2 class="accordion-header" id="headingFour">
                                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                                                            <img src="assets/images/faq-area/icon-01.svg" alt=""> Is maintenance required after construction?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                                                                        <div class="accordion-body">
                                                                            <p class="desc mb--15">Regular maintenance ensures long-term durability of your structure. We offer post-construction support such as inspections, repair services, and warranty coverage depending on the project type.</p>
                                                                            <a href="contact.html" class="tmp-btn btn-primary hover-icon-reverse btn-sm">
                                                                                <span class="icon-reverse-wrapper">
                                                                                    <span class="btn-text">Get A Quote</span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                </span>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <!-- FAQ 05 (NEW) -->
                                                                <div class="accordion-item">
                                                                    <h2 class="accordion-header" id="headingFive">
                                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                                                            <img src="assets/images/faq-area/icon-01.svg" alt=""> What materials do you use for construction projects?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
                                                                        <div class="accordion-body">
                                                                            <p class="desc mb--15">We work with premium-grade building materials including certified steel, concrete, HD tiles, insulation materials, and eco-friendly options. Material selection is based on your budget, design, and structural requirements.</p>
                                                                            <a href="contact.html" class="tmp-btn btn-primary hover-icon-reverse btn-sm">
                                                                                <span class="icon-reverse-wrapper">
                                                                                    <span class="btn-text">Get A Quote</span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                </span>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <!-- FAQ 06 (NEW) -->
                                                                <div class="accordion-item">
                                                                    <h2 class="accordion-header" id="headingSix">
                                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                                                            <img src="assets/images/faq-area/icon-01.svg" alt=""> Do you provide cost estimates before starting the project?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
                                                                        <div class="accordion-body">
                                                                            <p class="desc mb--15">Yes, we provide a detailed cost breakdown that covers materials, labor, design, permits, and additional expenses. Our transparent pricing helps you plan your budget confidently without hidden charges.</p>
                                                                            <a href="contact.html" class="tmp-btn btn-primary hover-icon-reverse btn-sm">
                                                                                <span class="icon-reverse-wrapper">
                                                                                    <span class="btn-text">Get A Quote</span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                </span>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <!-- FAQ 07 (NEW) -->
                                                                <div class="accordion-item">
                                                                    <h2 class="accordion-header" id="headingSeven">
                                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                                                                            <img src="assets/images/faq-area/icon-01.svg" alt=""> Do you offer design and 3D visualization services?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#accordionExample">
                                                                        <div class="accordion-body">
                                                                            <p class="desc mb--15">Absolutely! We provide architectural design, interior layouts, and full 3D visualization to help you understand how your project will look before construction begins. This ensures your vision aligns perfectly with the final outcome.</p>
                                                                            <a href="contact.html" class="tmp-btn btn-primary hover-icon-reverse btn-sm">
                                                                                <span class="icon-reverse-wrapper">
                                                                                    <span class="btn-text">Get A Quote</span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                </span>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>

Clients

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

Images 

                                                    


                                                        <!-- brand area start -->
                                                            <section class="brand-modern-area tmp-section-gap">
                                                                <div class="container-3">
                                                                    <div class="row g-5 mt--5">
                                                                        <div class="col-lg-12">
                                                                            <div class="title-border-center-sm">
                                                                                <h5 class="title">Join Over <span class="counter"><span class="odometer" data-count="3000">00</span></span> + Companies with <span class="color-light">Constx</span> Here</h5>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row g-5 mt--30">
                                                                        <div class="col-lg-12">
                                                                            <div class="brand-area-wrapper-modern">
                                                                                <div class="single-brand-modern">
                                                                                    <img src="assets/images/brand/partner-1.webp" alt="">
                                                                                </div>
                                                                                <div class="single-brand-modern">
                                                                                    <img src="assets/images/brand/partner-2.webp" alt="">
                                                                                </div>
                                                                                <div class="single-brand-modern">
                                                                                    <img src="assets/images/brand/partner-3.webp" alt="">
                                                                                </div>
                                                                                <div class="single-brand-modern">
                                                                                    <img src="assets/images/brand/partner-6.webp" alt="">
                                                                                </div>
                                                                                <div class="single-brand-modern">
                                                                                    <img src="assets/images/brand/partner-5.webp" alt="">
                                                                                </div>

                                                                                <div class="single-brand-modern">
                                                                                    <img src="assets/images/brand/partner-9.webp" alt="">
                                                                                </div>
                                                                                <div class="single-brand-modern">
                                                                                    <img src="assets/images/brand/partner-7.webp" alt="">
                                                                                </div>
                                                                                <div class="single-brand-modern">
                                                                                    <img src="assets/images/brand/partner-8.webp" alt="">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </section>
                                                            <!-- brand area end -->

Counters

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

Images 

                                                    
                                                        
                                                        <!-- cta area start -->
                                                        <div class="cta-area-start-1 bg_image">
                                                            <div class="container-3">
                                                                <div class="row">
                                                                    <div class="col-lg-12">
                                                                        <div class="cta-fluid-wrapper">
                                                                            <h2 class="title">
                                                                                Let’s discuss about how we can help <br>
                                                                                make your business better
                                                                            </h2>
                                                                            <a href="contact.html" class="tmp-btn btn-primary hover-white hover-icon-reverse btn-md">
                                                                                <span class="icon-reverse-wrapper">
                                                                                    <span class="btn-text">Lets Work Together</span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                    <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                                                                                </span>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- cta area end -->

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 

                                                    
                                                        <div class="social-share-wrapper-1 style-footer">
                                                            <ul class="social-stylle-one justify-content-start">
                                                                <li><a target="_blank" href="https://www.facebook.com/"><i class="fa-brands fa-facebook-f"></i></a></li>
                                                                <li><a target="_blank" href="https://x.com/"><i class="fa-brands fa-twitter"></i></a></li>
                                                                <li><a target="_blank" href="https://www.instagram.com/"><i class="fa-brands fa-instagram"></i></a></li>
                                                                <li><a target="_blank" href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin-in"></i></a></li>
                                                                <li><a target="_blank" href="https://www.tiktok.com/"><i class="fa-brands fa-tiktok"></i></a></li>
                                                            </ul>
                                                        </div>

Call To Action

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

Images 

                                                    
                                                         <div class="footer-cta-area cta-two">
                                                            <div class="cta-image-area">
                                                                <img src="assets/images/cta/02.webp" width="390" alt="">
                                                                <img src="assets/images/cta/cta-round2.svg" alt="">
                                                                <img src="assets/images/cta/constx1.webp" alt="">
                                                                <img src="assets/images/cta/constx2.webp" alt="">
                                                            </div>
                                                            <div class="cta-area-inner">
                                                                <h3 class="cta-title">Your Source for Fast and <br> Secure Energy</h3>
                                                                <div class="cta-button-area">
                                                                    <a href="contact.html" class="tmp-btn btn-primary bg-white button-flip btn-md">
                                                                        <span data-text="GET A QUOTE">GET A QUOTE</span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="shape-area">
                                                                <img src="assets/images/cta/cta-round.svg" alt="">
                                                                <img src="assets/images/cta/cta-round.svg" alt="">
                                                            </div>
                                                        </div>

Footer Style

Welcome to ConstX 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 

                                                    

                                                        <div class="tmp-footer-area footer-one footer-bg pt--200 mt--120">
                                                            <div class="container-3">
                                                                <div class="row">
                                                                    <div class="col-lg-12 p-0">
                                                                        <div class="main-footer-one-area six pt--80 pb--60">
                                                                            <div class="single-footer-inner company">
                                                                                <div class="body two">
                                                                                    <h6 class="footer-title">
                                                                                        Company
                                                                                        <img src="assets/images/footer/line-2.svg" alt="">
                                                                                    </h6>
                                                                                    <div class="use-full-link-wrapper">
                                                                                        <a href="about.html" class="single hover-moving-primary">About Us</a>
                                                                                        <a href="service.html" class="single hover-moving-primary">Services</a>
                                                                                        <a href="clients.html" class="single hover-moving-primary">Our Clients</a>
                                                                                        <a href="contact.html" class="single hover-moving-primary">Contact Us</a>
                                                                                        <a href="pricing.html" class="single hover-moving-primary">Pricing</a>
                                                                                        <a href="gallery.html" class="single hover-moving-primary">Gallery</a>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="single-footer-inner service">
                                                                                <div class="body three">
                                                                                    <h6 class="footer-title">
                                                                                        Services
                                                                                        <img src="assets/images/footer/line-2.svg" alt="">
                                                                                    </h6>
                                                                                    <div class="use-full-link-wrapper">
                                                                                        <a href="about.html" class="single hover-moving-primary">Site Assessment</a>
                                                                                        <a href="service-details.html" class="single hover-moving-primary">System Design</a>
                                                                                        <a href="service-details.html" class="single hover-moving-primary">Documentation</a>
                                                                                        <a href="service-details.html" class="single hover-moving-primary">Installation</a>
                                                                                        <a href="service-details.html" class="single hover-moving-primary">Warranty and Support</a>
                                                                                        <a href="service-details.html" class="single hover-moving-primary">Commissioning</a>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="single-footer-inner contact">
                                                                                <div class="body four">
                                                                                    <h6 class="footer-title">
                                                                                        Need Help?
                                                                                        <img src="assets/images/footer/line-2.svg" alt="">
                                                                                    </h6>
                                                                                    <div class="contactus-link-wrapper">
                                                                                        <div class="single d-block">
                                                                                            <p class="text">Call US Directly?</p>
                                                                                            <div class="phone">
                                                                                                <p>Phone:</p>
                                                                                                <a href="call-to:254982156213" class="number hover-moving-primary">+254 (98) 2156 213</a>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="single d-block">
                                                                                            <p class="text">For Support?</p>
                                                                                            <div class="phone">
                                                                                                <p>Email:</p>
                                                                                                <a href="mail-to:help@Constx.com" class="number hover-moving-primary">help@Constx.com</a>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="single-footer-inner newsletter">
                                                                                <div class="body five">
                                                                                    <h6 class="footer-title">
                                                                                        Subscribe Now
                                                                                        <img src="assets/images/footer/line-2.svg" alt="">
                                                                                    </h6>
                                                                                    <div class="newsletter-area">
                                                                                        <p class="desc mb--20">Subscribe our newsletter to get the latest news and updates!</p>
                                                                                        <form action="#" class="form">
                                                                                            <div class="single-input-wrapper">
                                                                                                <input type="email" name="email" placeholder="Enter your email" required="">
                                                                                                <button type="submit" class="form-btn tmp-btn btn-primary"><i class="fal fa-envelope"></i></button>
                                                                                            </div>
                                                                                        </form>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="single-footer-inner logo-area">
                                                                                <div class="body one">
                                                                                    <div class="logo mb--25">
                                                                                        <a href="index.html">
                                                                                            <img src="assets/images/logo/02-main.svg" alt="">
                                                                                        </a>
                                                                                    </div>
                                                                                    <p class="desc mb--10">We are providing high-quality construction for about ten years.</p>

                                                                                    <div class="social-share-wrapper-1 style-footer">
                                                                                        <ul class="social-stylle-one justify-content-start mt--20">
                                                                                            <li><a target="_blank" href="https://www.facebook.com/"><i class="fa-brands fa-facebook-f"></i></a></li>
                                                                                            <li><a target="_blank" href="https://x.com/"><i class="fa-brands fa-twitter"></i></a></li>
                                                                                            <li><a target="_blank" href="https://www.instagram.com/"><i class="fa-brands fa-instagram"></i></a></li>
                                                                                            <li><a target="_blank" href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin-in"></i></a></li>
                                                                                            <li><a target="_blank" href="https://www.tiktok.com/"><i class="fa-brands fa-tiktok"></i></a></li>
                                                                                        </ul>
                                                                                    </div>

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="copyright-area-one cg">
                                                                <div class="container-3">
                                                                    <div class="row justify-content-between">
                                                                        <div class="col-md-6">
                                                                            <div class="wrapper text-start">
                                                                                <p>© Copyright
                                                                                    <span id="year">2025</span>
                                                                                    by <a class="hover-moving-primary" target="_blank" href="https://themeforest.net/user/inversweb">InversWeb</a>
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <ul class="copyright-links">
                                                                                <li><a class="hover-moving-primary" href="privacy-policy.html">Privacy policy</a></li>
                                                                                <li><a class="hover-moving-primary" href="terms-condition.html">Terms and Condition</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

Footer Two

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

Images 

                                                    


                                                       <!-- tmp footer area start -->
                                                            <div class="tmp-footer-area footer-one footer-five footer-bg pt--200 mt--120">
                                                                <div class="container-3">
                                                                    <div class="footer-cta-area cta-two">
                                                                        <div class="cta-image-area">
                                                                            <img src="assets/images/cta/02.webp" width="390" alt="">
                                                                            <img src="assets/images/cta/cta-round2.svg" alt="">
                                                                            <img src="assets/images/cta/constx1.webp" alt="">
                                                                            <img src="assets/images/cta/constx2.webp" alt="">
                                                                        </div>
                                                                        <div class="cta-area-inner">
                                                                            <h3 class="cta-title">Your Source for Fast and <br> Secure Energy</h3>
                                                                            <div class="cta-button-area">
                                                                                <a href="contact.html" class="tmp-btn btn-primary bg-white button-flip btn-md">
                                                                                    <span data-text="GET A QUOTE">GET A QUOTE</span>
                                                                                </a>
                                                                            </div>
                                                                        </div>
                                                                        <div class="shape-area">
                                                                            <img src="assets/images/cta/cta-round.svg" alt="">
                                                                            <img src="assets/images/cta/cta-round.svg" alt="">
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col-lg-12 p-0">
                                                                            <div class="main-footer-one-area pt--80 pb--60">
                                                                                <div class="single-footer-inner logo-area">
                                                                                    <div class="body one">
                                                                                        <div class="logo mb--20">
                                                                                            <a href="index.html">
                                                                                                <img src="assets/images/logo/02-main.svg" alt="">
                                                                                            </a>
                                                                                        </div>
                                                                                        <p class="desc">
                                                                                            We are providing high-quality constx for about ten years.
                                                                                        </p>
                                                                                        <ul class="social-wrapper-1 hover-bg-white ml_-10">
                                                                                            <li class="single"><a target="_blank" href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
                                                                                            <li class="single"><a target="_blank" href="https://x.com/"><i class="fab fa-twitter"></i></a></li>
                                                                                            <li class="single"><a target="_blank" href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
                                                                                            <li class="single"><a target="_blank" href="https://dribbble.com/"><i class="fal fa-globe"></i></a></li>
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="single-footer-inner company">
                                                                                    <div class="body two">
                                                                                        <h6 class="footer-title">Company</h6>
                                                                                        <div class="use-full-link-wrapper">
                                                                                            <a href="about.html" class="single hover-moving-primary">About Us</a>
                                                                                            <a href="#" class="single hover-moving-primary">Services</a>
                                                                                            <a href="company-history.html" class="single hover-moving-primary">History</a>
                                                                                            <a href="service.html" class="single hover-moving-primary">Our Clients</a>
                                                                                            <a href="team.html" class="single hover-moving-primary">Contact Us</a>
                                                                                            <a href="gallery.html" class="single hover-moving-primary">Gallery</a>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="single-footer-inner service">
                                                                                    <div class="body three">
                                                                                        <h6 class="footer-title">Services</h6>
                                                                                        <div class="use-full-link-wrapper">
                                                                                            <a href="about.html" class="single hover-moving-primary">Site Assessment</a>
                                                                                            <a href="#" class="single hover-moving-primary">System Design</a>
                                                                                            <a href="service.html" class="single hover-moving-primary">Documentation</a>
                                                                                            <a href="team.html" class="single hover-moving-primary">Installation</a>
                                                                                            <a href="contact.html" class="single hover-moving-primary">Warranty and Support</a>
                                                                                            <a href="contact.html" class="single hover-moving-primary">Commissioning</a>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="single-footer-inner contact">
                                                                                    <div class="body four">
                                                                                        <h6 class="footer-title">Need Help?</h6>
                                                                                        <div class="contactus-link-wrapper">
                                                                                            <div class="single d-block">
                                                                                                <p class="text">Call US Directly?</p>
                                                                                                <div class="phone">
                                                                                                    <p>Phone:</p>
                                                                                                    <a href="call-to:254982156213" class="number hover-moving-primary">+254 (98) 2156 213</a>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="single d-block">
                                                                                                <p class="text">For Support?</p>
                                                                                                <div class="phone">
                                                                                                    <p>Email:</p>
                                                                                                    <a href="mail-to:help@constxio.com" class="number hover-moving-primary">help@constxio.com</a>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="single-footer-inner newsletter">
                                                                                    <div class="body five">
                                                                                        <h6 class="footer-title">Subscribe Now</h6>
                                                                                        <div class="newsletter-area">
                                                                                            <p class="desc mb--20">Subscribe our newsletter to get the latest news and updates!</p>
                                                                                            <form action="#" class="form">
                                                                                                <div class="single-input-wrapper">
                                                                                                    <input type="email" name="email" placeholder="Enter your email" required>
                                                                                                    <button type="submit" class="form-btn tmp-btn btn-primary"><i class="fal fa-envelope"></i></button>
                                                                                                </div>
                                                                                            </form>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="copyright-area-one">
                                                                        <div class="row justify-content-between">
                                                                            <div class="col-lg-6">
                                                                                <div class="wrapper text-start">
                                                                                    <p>© Copyright
                                                                                        <span id="year"></span>
                                                                                        by <a class="hover-moving-primary" target="_blank" href="https://themeforest.net/user/inversweb">InversWeb</a>
                                                                                    </p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-6">
                                                                                <ul class="copyright-links">
                                                                                    <li><a class="hover-moving-primary" href="privacy-policy.html">Privacy policy</a></li>
                                                                                    <li><a class="hover-moving-primary" href="terms-condition.html">Terms and Condition</a></li>
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            <!-- tmp footer area end -->

Footer Three

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

Images 

                                                    


                                                        <div class="tmp-footer-area footer-one footer-five footer-bg pt--80 pt_md--60 pt_sm--40">
                                                            <div class="container">
                                                                <div class="row">
                                                                    <div class="col-lg-12 p-0">
                                                                        <div class="main-footer-one-area border-0 pb--50 pb_md--40 pb_sm--40">
                                                                            <div class="single-footer-inner logo-area">
                                                                                <div class="body one">
                                                                                    <div class="logo mb--20">
                                                                                        <a href="index.html">
                                                                                            <img src="assets/images/logo/02-main.svg" alt="">
                                                                                        </a>
                                                                                    </div>
                                                                                    <p class="desc">
                                                                                        We are providing high-quality constx for about ten years.
                                                                                    </p>
                                                                                    <ul class="social-wrapper-1 hover-bg-white ml_-10">
                                                                                        <li class="single"><a target="_blank" href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
                                                                                        <li class="single"><a target="_blank" href="https://x.com/"><i class="fab fa-twitter"></i></a></li>
                                                                                        <li class="single"><a target="_blank" href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
                                                                                        <li class="single"><a target="_blank" href="https://dribbble.com/"><i class="fal fa-globe"></i></a></li>
                                                                                    </ul>
                                                                                </div>
                                                                            </div>
                                                                            <div class="single-footer-inner company">
                                                                                <div class="body two">
                                                                                    <h6 class="footer-title">Company</h6>
                                                                                    <div class="use-full-link-wrapper">
                                                                                        <a href="about.html" class="single hover-moving-primary">About Us</a>
                                                                                        <a href="service.html" class="single hover-moving-primary">Services</a>
                                                                                        <a href="clients.html" class="single hover-moving-primary">Our Clients</a>
                                                                                        <a href="contact.html" class="single hover-moving-primary">Contact Us</a>
                                                                                        <a href="pricing.html" class="single hover-moving-primary">Pricing</a>
                                                                                        <a href="gallery.html" class="single hover-moving-primary">Gallery</a>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="single-footer-inner service">
                                                                                <div class="body three">
                                                                                    <h6 class="footer-title">Services</h6>
                                                                                    <div class="use-full-link-wrapper">
                                                                                        <a href="about.html" class="single hover-moving-primary">Site Assessment</a>
                                                                                        <a href="#" class="single hover-moving-primary">System Design</a>
                                                                                        <a href="service.html" class="single hover-moving-primary">Documentation</a>
                                                                                        <a href="team.html" class="single hover-moving-primary">Installation</a>
                                                                                        <a href="contact.html" class="single hover-moving-primary">Warranty and Support</a>
                                                                                        <a href="contact.html" class="single hover-moving-primary">Commissioning</a>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="single-footer-inner contact">
                                                                                <div class="body four">
                                                                                    <h6 class="footer-title">Need Help?</h6>
                                                                                    <div class="contactus-link-wrapper">
                                                                                        <div class="single d-block">
                                                                                            <p class="text">Call US Directly?</p>
                                                                                            <div class="phone">
                                                                                                <p>Phone:</p>
                                                                                                <a href="call-to:254982156213" class="number hover-moving-primary">+254 (98) 2156 213</a>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="single d-block">
                                                                                            <p class="text">For Support?</p>
                                                                                            <div class="phone">
                                                                                                <p>Email:</p>
                                                                                                <a href="mail-to:help@constxix.com" class="number hover-moving-primary">help@constxio.com</a>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="single-footer-inner newsletter">
                                                                                <div class="body five">
                                                                                    <h6 class="footer-title">Subscribe Now</h6>
                                                                                    <div class="newsletter-area">
                                                                                        <p class="desc mb--20">Subscribe our newsletter to get the latest news and updates!</p>
                                                                                        <form action="#" class="form">
                                                                                            <div class="single-input-wrapper">
                                                                                                <input type="email" name="email" placeholder="Enter your email" required>
                                                                                                <button type="submit" class="form-btn tmp-btn btn-primary"><i class="fal fa-envelope"></i></button>
                                                                                            </div>
                                                                                        </form>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="copyright-area-one">
                                                                    <div class="row justify-content-between">
                                                                        <div class="col-md-6">
                                                                            <div class="wrapper text-start">
                                                                                <p>© Copyright
                                                                                    <span id="year"></span>
                                                                                    by <a class="hover-moving-primary" target="_blank" href="https://themeforest.net/user/inversweb">InversWeb</a>
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <ul class="copyright-links">
                                                                                <li><a class="hover-moving-primary" href="privacy-policy.html">Privacy policy</a></li>
                                                                                <li><a class="hover-moving-primary" href="terms-condition.html">Terms and Condition</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

Support

Thank you for choosing our template.
For any item-related support, customization requests, or questions not covered in this help file, feel free to reach out to us through our support system.

Leave a Review

We hope you’re loving your new template! ⭐⭐⭐⭐⭐
If this template exceeded your expectations, we’d be thrilled if you could leave a 5-star review.
Your support motivates us to keep creating amazing templates and helps others make the best choice. Submit your review here

If you need the template customization or custom development services please contact us.

Email Us