Copyright © 2024. REBUILDERS All Rights Reserved.
Created: 10 September 2024
Latest Update: 10 September 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. Rebuilders - REBUILDERS - Construction Company HTML Template. If you have any question, please feel free to contact us.
All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Rebuilders" folder.
You will find the
two folder one is for lite version and other is for dark version
file on the root that will be edited.
Also you will see 5 directories, css, js, fonts, logo, img and images.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.
appside/
├── assets/css/plugins/
| ├── bootstrap.min.css
| ├── aos.css
| ├── fontawesome.css
| ├── mobile.css
| ├── magnific-popup.css
| ├── swiper.bundle.css
| ├── owlcarousel.min.css
| ├── sidebar.css
| ├── slick-slider.css
| ├── nice-select.css
| ├── typhograpy.css
| ├── main.css
|
├── style.css
|
|
├── assets/fonts/
| ├── fa-brands-300
| ├── fa-brands-300.woff2
| ├── fa-brands-400
| ├── fa-brands-400.woff2
| ├── fa-regular-400
| ├── fa-regular-400.woff2
| ├── fa-solid-900
| ├── fa-solid-900.woff2
| ├── fa-v4compatibility
| ├── fa-v4compatibility.woff2
|
├── assets/js/plugins
│ ├── bootstrap.min.js
| ├── fontawesome.js
| ├── swiper.bundle.js
│ ├── aos.js
│ ├── counter.js
│ ├── sidebar.js
│ ├── magnific-popup.js
│ ├── mobilemenu.js
│ ├── owlcarousel.min.js
│ ├── nice-select.js
│ ├── waypoints.js
│ ├── gsap.min.js
| ├── ScrollTrigger.min.js
| ├── Splitetext.js
| ├── slick-slider.js
| ├── circle-progress.js
├── main.js
│
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── index6.html
├── single-index1.html
├── single-index2.html
├── single-index3.html
├── single-index4.html
├── single-index5.html
├── about.html
├── blog.html
├── blog2.html
├── blog-left.html
├── blog-right.html
├── blog-single.html
├── contact.html
├── faq.html
├── projects.html
├── projects-single.html
├── service1.html
├── service2.html
├── service3.html
├── service4.html
├── service5.html
├── service6.html
├── service7.html
├── team.html
├── team-single.html
├── 404.html
<!--===== HERO AREA STARTS =======--> <div class="hero-slider-author-area"> <div class="hero-slider-area"> <div class="hero-section-area"> <div class="container"> <div class="row"> <div class="col-lg-7"> <div class="hero-header heading1"> <h5 class="text-anime-style-3"><img src="assets/img/icons/sub-logo1.svg" alt=""> #1 Construction Company</h5> <div class="space20"></div> <h2 class="text-anime-style-3">Delivering Superior Construction Solutions</h2> <div class="space24"></div> <p class="text-anime-style-1">With Rebuilders Construction Company, your vision is our commitment. We provide superior construction solutions that cater to your specific ensuring a seamless stress-free experience.</p> <div class="space32"></div> <div class="btn-area"> <a href="contact.html" class="header-btn1">Discover More <i class="fa-solid fa-arrow-right"></i></a> <a href="contact.html" class="header-btn2">Get Started Now <i class="fa-solid fa-arrow-right"></i></a> </div> </div> <div class="space50"></div> <div class="hero-counter-area"> <div class="row"> <div class="col-md-3 col-6" data-aos="fade-up" data-aos-duration="800"> <div class="counter-box"> <h3><span class="counter">8</span>K+</h3> <div class="space16"></div> <p>Project Completed</p> </div> </div> <div class="col-md-3 col-6" data-aos="fade-up" data-aos-duration="1000"> <div class="counter-box"> <h3><span class="counter">7.8</span>K+</h3> <div class="space16"></div> <p>Customer Satisfied</p> </div> </div> <div class="col-md-3 col-6" data-aos="fade-up" data-aos-duration="1200"> <div class="counter-box"> <h3><span class="counter">450</span>+</h3> <div class="space16"></div> <p>Team Members</p> </div> </div> </div> </div> </div> </div> </div> </div> <div class="hero2-slide-section-area"> <div class="container"> <div class="row"> <div class="col-lg-7"> <div class="hero-header heading1"> <h5><img src="assets/img/icons/sub-logo1.svg" alt=""> #2 Commercial Construction</h5> <div class="space20"></div> <h2 >Delivering Superior Construction Solutions</h2> <div class="space24"></div> <p>With Rebuilders Construction Company, your vision is our commitment. We provide superior construction solutions that cater to your specific ensuring a seamless stress-free experience.</p> <div class="space32"></div> <div class="btn-area"> <a href="contact.html" class="header-btn1">Discover More <i class="fa-solid fa-arrow-right"></i></a> <a href="contact.html" class="header-btn2">Get Started Now <i class="fa-solid fa-arrow-right"></i></a> </div> </div> <div class="space50"></div> <div class="hero-counter-area"> <div class="row"> <div class="col-md-3 col-6"> <div class="counter-box"> <h3><span class="counter">8</span>K+</h3> <div class="space16"></div> <p>Project Completed</p> </div> </div> <div class="col-md-3 col-6"> <div class="counter-box"> <h3><span class="counter">7.8</span>K+</h3> <div class="space16"></div> <p>Customer Satisfied</p> </div> </div> <div class="col-md-3 col-6"> <div class="counter-box"> <h3><span class="counter">450</span>+</h3> <div class="space16"></div> <p>Team Members</p> </div> </div> </div> </div> </div> </div> </div> </div> <div class="hero3-slide-section-area"> <div class="container"> <div class="row"> <div class="col-lg-7"> <div class="hero-header heading1"> <h5><img src="assets/img/icons/sub-logo1.svg" alt=""> #3 Residential Construction</h5> <div class="space20"></div> <h2 >Delivering Superior Construction Solutions</h2> <div class="space24"></div> <p>With Rebuilders Construction Company, your vision is our commitment. We provide superior construction solutions that cater to your specific ensuring a seamless stress-free experience.</p> <div class="space32"></div> <div class="btn-area"> <a href="contact.html" class="header-btn1">Discover More <i class="fa-solid fa-arrow-right"></i></a> <a href="contact.html" class="header-btn2">Get Started Now <i class="fa-solid fa-arrow-right"></i></a> </div> </div> <div class="space50"></div> <div class="hero-counter-area"> <div class="row"> <div class="col-md-3 col-6"> <div class="counter-box"> <h3><span class="counter">8</span>K+</h3> <div class="space16"></div> <p>Project Completed</p> </div> </div> <div class="col-md-3 col-6"> <div class="counter-box"> <h3><span class="counter">7.8</span>K+</h3> <div class="space16"></div> <p>Customer Satisfied</p> </div> </div> <div class="col-md-3 col-6"> <div class="counter-box"> <h3><span class="counter">450</span>+</h3> <div class="space16"></div> <p>Team Members</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="slider-btn-area"> <div class="btn1"> <button>#1 Construction Company</button> </div> <div class="btn2"> <button>#2 Commercial Construction</button> </div> <div class="btn3"> <button>#3 Residential Construction</button> </div> </div> </div> <!--===== HERO AREA ENDS =======--> <!--===== ABOUT AREA STARTS =======--> <div class="about1-section-area sp10"> <div class="container"> <div class="row"> <div class="col-lg-5"> <div class="about-header heading2"> <h5 data-aos="fade-left" data-aos-duration="800"><img src="assets/img/icons/sub-logo1.svg" alt="">About Us</h5> <div class="space16"></div> <h2 class="text-anime-style-3">Trusted Rebuilders Construction Partner</h2> <div class="space70 d-lg-block d-none"></div> <div class="space30 d-lg-none d-block"></div> <div class="images-area text-center"> <div class="img1 reveal image-anime"> <img src="assets/img/all-images/about/about-img1.png" alt=""> </div> <div class="text"> <p>Engineer</p> </div> </div> </div> </div> <div class="col-lg-4"> <div class="sucess-text"> <div class="images-area2"> <div class="img2 reveal image-anime"> <img src="assets/img/all-images/about/about-img2.png" alt=""> </div> <div class="text"> <p>Engineer</p> </div> </div> <div class="counter-text"> <h2 class="text-anime-style-3"><span class="counter">100</span>%</h2> <div class="space16"></div> <p>Success Rate</p> </div> </div> </div> <div class="col-lg-3"> <div class="peragraph heading2"> <p data-aos="fade-left" data-aos-duration="1000">Welcome to Rebuilders Construction Company, where quality craftsmanship and unwavering integrity are the foundations of business. With over 12 years of experience in the construction industry, we have been dedicated to transforming vision.</p> <div class="space24"></div> <div class="btn-area1" data-aos="fade-left" data-aos-duration="1200"> <a href="contact.html" class="header-btn1">Learn More <i class="fa-solid fa-arrow-right"></i></a> </div> <div class="space80 d-lg-block d-none"></div> <div class="space30 d-lg-none d-block"></div> <div class="images-area text-center"> <div class="img1 reveal image-anime"> <img src="assets/img/all-images/about/about-img3.png" alt=""> </div> <div class="text"> <p>Best Workers</p> </div> </div> </div> </div> </div> </div> </div> <!--===== ABOUT AREA ENDS =======-->
// HOMEPAGE1 HEADER STARTS // .homepage1-body,html { overflow-x: hidden !important; } .homepage1-body{ overflow-x: hidden; .header-area.homepage1 { position: absolute; width: 100%; z-index:9999; padding: 16px 0; transition: all .4s; border-bottom: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.01); backdrop-filter: blur(30px); nav#navbar-example2 { display: block; padding: 0; ul { li { a.nav-link.active { color: var(--ztc-text-text-4); } } } } .header-elements { display: flex; align-items: center; justify-content: space-between; position: relative; transition: all .4s; .site-logo { height: 32px; width: 180px; object-fit: contain; } .all-images-menu { display: flex; align-items: center; } .main-menu{ position: relative; ul { li.menu-small { a { display: flex !important; align-items: center; justify-content: space-between; } &:hover { ul.small-menu { visibility: visible; opacity: 1; transition: all .4s; top: 10px; } } } ul.small-menu { position: absolute; background: #fff; width: 225px; left: 200px; border-radius: 4px; padding: 15px; top: 0; transition: all .4s; visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; } ul.small-menu.service-small { width: 280px !important; } li { a.plus { i { &::before { content: "+"; font-size: var(--ztc-font-size-font-s12); } } } } } ul { li { display: inline-block; position: relative; .tp-submenu { .homemenu-thumb { transition: all .4s; position: relative; z-index: 1; margin: 0 20px 20px 0; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); &:hover { .img1 { &::after { transform: scale(1); transition: all .4s; visibility: visible; opacity: 0.4; } } .homemenu-btn { top: 37%; visibility: visible; opacity: 1; transition: all .6s; } } .img1 { position: relative; z-index: 1; overflow: hidden; height: 100%; &::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all .4s; background: var(--ztc-bg-bg-2); opacity: 0; transform: scale(0.8); z-index: 1; visibility: hidden; } img { height: 100%; width: 100%; transition: all .4s; border: 1px solid #E5E7EB; } } .homemenu-btn { position: absolute; top: 20%; z-index: 2; visibility: hidden; opacity: 0; text-align: center; transition: all .6s; margin: 0 auto; left: 14%; right: 14%; .header-btn1 { color: var(--ztc-text-text-2); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 18px; display: inline-block; transition: all .4s; background: var(--ztc-bg-bg-3); padding: 16px 20px; position: relative; z-index: 1; width: 155px; i { margin-left: 4px; transform: rotate(-45deg); } &::after { position: absolute; content: ""; height: 100%; width: 10px; left: 50%; right: 50%; transition: all .4s; background: var(--ztc-bg-bg-2); z-index: -1; visibility: hidden; opacity: 0; top: 0; } &:hover { color: var(--ztc-text-text-1); transition: all .4s; transform: translateY(-5px); &::after { width: 100%; left: 0; top: 0; transition: all .4s; visibility: visible; opacity: 1; } } } } .text { position: absolute; top: 0; left: 0; z-index: 1; top: 10px; left: 0px; &::after { position: absolute; content: ""; height: 100px; width: 100px; left: -71px; top: -66px; transition: all 0.4s; background: #FF6610; transform: rotate(-45deg); z-index: -1; } h2 { font-size: var(--ztc-font-size-font-s12); font-weight: var(--ztc-weight-bold); font-family: var(--ztc-family-font1); transition: all .4s; line-height: var(--ztc-font-size-font-s12); color: var(--ztc-text-text-1); transform: rotate(-45deg); } } } .homemenu-content { a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-2); transition: all .4s; margin-top: 20px; text-align: center; } } } &:hover { .tp-submenu { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; position: absolute; transition: all .4s; transform: scale(1); top: 201.3%; } ul.dropdown-padding{ visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 50px; position: absolute; transition: all .4s; } .mega-menu-all { opacity: 1; visibility: visible; transform: scale(1); } } a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium); color:var(--ztc-text-text-2); display: inline-block; transition: all .4s; padding: 0 20px; color: var(--ztc-text-text-1); } &:hover > a{ transition: all .4s; color:var(--ztc-text-text-4)!important; } .tp-submenu { visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; position: absolute; background:var(--ztc-text-text-1); top: 100px; z-index: 1; transition: all .4s; padding: 20px 0 0 20px; left: 50%; width: 1300px; max-height: 600px; overflow: hidden; overflow-y: scroll; display: block; top: 201.3%; transform: scale(1, 0); transform-origin: top; margin-left: -350px; } ul.dropdown-padding { visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; position: absolute; background:var(--ztc-text-text-1); top: 100px; width: 225px; z-index: 1; transition: all .4s; padding: 15px; li.main-small-menu { position: relative; &:hover > a{ transition: all .4s; padding-left: 25px; color: var(--ztc-text-text-4); } &:hover > a::after{ background: var(--ztc-text-text-4); transition: all .4s; visibility: visible; opacity: 1; color: var(--ztc-text-text-4); } } li { display: block; a { font-family: var(--ztc-family-font1); font-weight: var(--ztc-weight-medium); transition: all .4s; padding: 8px; display: block; position: relative; z-index: 1; color: var(--ztc-text-text-2); &::after{ position: absolute; content: ""; height: 25px; width: 3px; transition: all .4s; z-index: -1; left: -10px; top: 20%; display: inline-block; visibility: hidden; opacity: 0; background: var(--ztc-text-text-4); } &:hover{ padding-left: 25px; color: var(--ztc-text-text-4); &::after{ visibility: visible; transition: all .4s; opacity: 1; left: 0; } } } } } .mega-menu-all { visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; position: absolute; background: #ffff; top: 201.3%; transform: scale(1 ,0); z-index: 0; transition: all .4s; padding: 36px 0; left: -740px; width: 1300px; min-height: 300px; overflow-x: hidden; overflow-y: hidden; transform-origin: top; display: flex; padding: 32px; justify-content: space-between; ul { li { display: block; a { display: block !important; padding: 12px 0 0 0 !important; font-size: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-2); &::after{ position: absolute; content: ""; height: 25px; width: 3px; transition: all .4s; z-index: -1; left: -10px; top: 25%; display: inline-block; visibility: hidden; opacity: 0; background: var(--ztc-text-text-4); } &:hover{ padding-left: 15px !important; color: var(--ztc-text-text-4); &::after{ visibility: visible; transition: all .4s; opacity: 1; left: 0; } } } } } .mega-menu-single { position: relative; width: 300px; h3 { font-size: var(--ztc-font-size-font-s20); line-height: 20px; font-weight: 600; color: var(--ztc-text-text-2); position: relative; margin-bottom: 10px; } } .images { position: relative; .img1 { position: relative; z-index: 1; &::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all .4s; background: var(--ztc-bg-bg-2); opacity: 0.6; } img { height: 342px; width: 500px; -o-object-fit: cover; object-fit: cover; } } .content { text-align: center; position: absolute; top: 50%; z-index: 1; padding: 40px; margin-top: -120px; h3 { font-size: var(--ztc-font-size-font-s24); font-family: var(--ztc-family-font1); font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-1); transition: all .4s; line-height: 34px; } .header-btn1 { color: var(--ztc-text-text-2); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 18px; display: inline-block; transition: all .4s; background: var(--ztc-bg-bg-3); padding: 16px 20px !important; position: relative; z-index: 1; i { margin-left: 4px; transform: rotate(-45deg); } &::after { position: absolute; content: ""; height: 100%; width: 10px; left: 50%; right: 50%; transition: all .4s; background: var(--ztc-bg-bg-2); z-index: -1; visibility: hidden; opacity: 0; top: 0; } &:hover { color: var(--ztc-text-text-1); transition: all .4s; &::after { width: 100%; left: 0; top: 0; transition: all .4s; visibility: visible; opacity: 1; } } } } } } } } } } } } .header-area.homepage1.sticky { position: fixed; top: 0; left: 0; width: 100%; transform: translate3d(0, 0, 0); z-index: 111; -webkit-animation-name: fade-in-down; animation-name: fade-in-down; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; border-bottom: 1px solid rgba(255, 255, 255, 0.35); background: var(--ztc-bg-bg-2); backdrop-filter: blur(50px); transition: all .4s; background-image: url(../img/all-images/bg/cta-bg1.png); } // HOMEPAGE1 HEADER ENDS //
Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.
Vikinglab