Copyright © 2024. Poolwash All Rights Reserved.
Created: 12 August 2024
Latest Update: 12 August 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. Poolwash - Poolwash - Pool Cleaning & Renovation HTML5 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 "Poolwash" 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
| ├── 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
│ ├── 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
| ├── ripples.js
├── main.js
│
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── rtl.html
├── single-index1.html
├── single-index2.html
├── single-index3.html
├── single-index4.html
├── rtl-index1.html
├── about.html
├── blog.html
├── blog-sidebar.html
├── blog-left.html
├── blog-right.html
├── blog-single.html
├── contact.html
├── faq.html
├── pricing-plan.html
├── projects.html
├── projects-left.html
├── projects-right.html
├── projects-single.html
├── service.html
├── service-left.html
├── service-right.html
├── service-single.html
├── team.html
├── testimonial.html
├── 404.html
<!--===== HERO AREA STARTS =======--> <div class="hero1-section-area"> <div class="elements2"> <img src="assets/img/elements/elements2.png" alt=""> </div> <div class="elements4"> <img src="assets/img/elements/elements4.png" alt=""> </div> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="hero-header-area heading1"> <h5 data-aos="fade-right" data-aos-duration="800">#01. Pool Cleaning & Services </h5> <h1 class="text-anime-style-3">Enjoy A Clean & Safe Pool All Year Round</h1> <p data-aos="fade-right" data-aos-duration="1000">Dive into crystal clear waters with our expert pool services! At <br class="d-lg-block d-none"> Poolwash, we specialize in maintaining and transforming your <br class="d-lg-block d-none"> pool into a pristine oasis of relaxation and fun. </p> <div class="btn-area1" data-aos="fade-right" data-aos-duration="1200"> <a href="service.html" class="header-btn1"><img src="assets/img/icons/logo-icon1.svg" alt=""> Schedule A Service</a> <a href="contact.html" class="header-btn1 btn2"><img src="assets/img/icons/logo-icon1.svg" alt=""> Discover More</a> </div> <div class="space60"></div> <div class="header-auhtor-area" data-aos="zoom-in" data-aos-duration="800"> <h3>Our Team Always Ready For You</h3> <div class="auhtor-image"> <div class="img1"> <img src="assets/img/all-images/others/auhtor-img1.png" alt=""> </div> <div class="content"> <ul> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li>5.0</li> </ul> <h4>246k Reviews</h4> </div> </div> </div> </div> </div> <div class="col-lg-1"></div> <div class="col-lg-5"> <div class="images"> <div class="img2 keyframe5"> <img src="assets/img/elements/elements1.png" alt="" class="keyframe5"> </div> <div class="img1 reveal image-anime"> <img src="assets/img/all-images/hero/header-img1.png" alt=""> </div> <div class="elements3"> <img src="assets/img/elements/elements3.png" alt=""> </div> </div> </div> </div> </div> </div> <!--===== HERO AREA ENDS =======--> <!--===== ABOUT AREA STARTS =======--> <div class="about1-section-area sp1"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="about-auhtor-images"> <div class="img1"> <img src="assets/img/elements/elements6.png" alt=""> </div> <div class="row"> <div class="col-lg-6 col-md-6"> <div class="row"> <div class="col-lg-12 col-md-6" data-aos="zoom-in" data-aos-duration="800"> <div class="about-boxarea"> <div class="icons"> <img src="assets/img/icons/about-icon1.svg" alt=""> </div> <div class="space32"></div> <div class="text-area"> <a href="service-single.html">Choosing Quality Why We're Your Top Pick</a> </div> </div> </div> <div class="space30"></div> <div class="col-lg-12 col-md-6" data-aos="zoom-in" data-aos-duration="1000"> <div class="about-boxarea"> <div class="icons"> <img src="assets/img/icons/about-icon2.svg" alt=""> </div> <div class="space32"></div> <div class="text-area"> <a href="service-single.html">Your Pool, Our Promise Reasons to Choose Us</a> </div> </div> </div> </div> </div> <div class="col-lg-6 col-md-6"> <div class="row"> <div class="col-lg-12 col-md-6" data-aos="zoom-in" data-aos-duration="1200"> <div class="about-boxarea box2"> <div class="icons"> <img src="assets/img/icons/about-icon3.svg" alt=""> </div> <div class="space32"></div> <div class="text-area"> <a href="service-single.html">Beyond the Surface Why Choose Our Team</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="about-header-area heading2"> <h5 data-aos="fade-right" data-aos-duration="800">Why Choose Us Poolwash</h5> <h2 class="text-anime-style-3">Making Waves: Choose Us For Superior Service</h2> <p data-aos="fade-right" data-aos-duration="1000"> Whether you need regular maintenance, chemical balancing, or a complete pool overhaul, we are here to deliver reliable, efficient, and personalized solutions. At Poolwash, customer satisfaction is our top priority & we take pride in transforming</p> <div class="btn-area1" data-aos="fade-right" data-aos-duration="1200"> <a href="about.html" class="header-btn1"><img src="assets/img/icons/logo-icon1.svg" alt=""> About Us</a> <a href="https://www.youtube.com/watch?v=Y8XpQpW5OVY" class="play popup-youtube"> <span class="icon"><i class="fa-solid fa-play"></i></span> <span class="text">How We Work</span> </a> </div> </div> </div> </div> </div> </div> <!--===== ABOUT AREA ENDS =======-->
// HOMEPAGE1 HEADER STARTS // .homepage1-body,html { overflow-x: hidden !important; } .homepage1-body{ overflow-x: hidden; transition: all .4s; .header-area.homepage1 { position: absolute; width: 100%; z-index: 9; transition: all .4s; background: var(--ztc-text-text-1); box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; nav#navbar-example2 { display: block !important; padding: 0 !important; } .text { position: absolute; top: 0; left: 0; z-index: 1; top: 10px; left: 0px; &::after { position: absolute; content: ""; height: 100px; width: 100px; left: -60px; top: -60px; transition: all 0.4s; background: #FF6610; transform: rotate(-45deg); z-index: -1; } h2 { font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); font-family: var(--ztc-family-font1); transition: all .4s; line-height: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-1); transform: rotate(-45deg); position: relative; top: 0px; left: 5px; } } .header-elements { padding: 16px 0; .site-logo { width: 180px; } .main-menu{ ul { li { a.nav-link.active { color: var(--ztc-text-text-2); font-weight: var(--ztc-weight-bold) !important; } } } .tp-submenu { left: -370px; } } } .header-elements { display: flex; align-items: center; justify-content: space-between; position: relative; transition: all .4s; .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; } li { display: inline-block; position: relative; .tp-submenu { .all-images-menu { display: flex; align-items: center; } .homemenu-thumb { transition: all .4s; position: relative; z-index: 1; margin: 0 20px 0 0; overflow: hidden; &:hover { .img1 { transition: all .4s; &::after { transform: scale(1); transition: all .4s; visibility: visible; opacity: 0.4; } } .homemenu-btn { top: 35%; visibility: visible; opacity: 1; transition: all .6s; } } .img1 { position: relative; z-index: 1; overflow: hidden; transition: all .4s; &::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all .4s; background: var(--ztc-text-text-3); opacity: 0; border-radius: 4px; transform: scale(0.8); z-index: 1; visibility: hidden; } img { height: 100%; width: 100%; border-radius: 4px; transition: all .4s; border: 1px solid #E5E7EB; } } .homemenu-btn { position: absolute; top: 45%; z-index: 2; visibility: hidden; opacity: 0; text-align: center; transition: all .6s; margin: 0 auto; left: 20%; right: 20%; .header-btn1 { display: inline-block; font-family: var(--ztc-family-font2); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-bold); background: var(--ztc-bg-bg-2); color: var(--ztc-text-text-1); padding: 16px; transition: all .4s; border-radius: 100px; position: relative; width: 140px; z-index: 1; &:hover { color: var(--ztc-text-text-1); transition: all .4s; transform: translateY(-5px); background: var(--ztc-text-text-3); } } } } } &:hover { .tp-submenu { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 201.3%; position: absolute; transition: all .4s; transform: scale(1); } ul.dropdown-padding{ visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 201.3%; transform: scale(1); position: absolute; transition: all .4s; } } a { font-family: var(--ztc-family-font1) !important; font-size: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color:var(--ztc-text-text-3); display: block; transition: all .4s; padding: 0 20px; i.fa-solid.fa-angle-down { font-size: var(--ztc-font-size-font-s12) !important; } } &:hover > a{ transition: all .4s; color:var(--ztc-text-text-2)!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: 201.3%; transform: scale(1, 0); z-index: 0; transition: all .4s; border-radius: 5px; padding: 20px; left: -340px; width: 1300px; max-height: 600px; overflow: hidden; transform-origin: top; display: block; } 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: 201.3%; transform: scale(1, 0); width: 225px; z-index: 0; transition: all .4s; border-radius: 5px; padding: 15px; display: block; transform-origin: top; li.main-small-menu { position: relative; &:hover > a{ transition: all .4s; padding-left: 15px; color: var(--ztc-text-text-2); } &:hover > a::after{ background: var(--ztc-text-text-2); transition: all .4s; visibility: visible; opacity: 1; color: var(--ztc-text-text-2); } } li { display: block; a { font-family: var(--ztc-family-font2); font-weight: var(--ztc-weight-medium); transition: all .4s; font-size: var(--ztc-font-size-font-s16); padding: 8px; display:block; position: relative; z-index: 1; border-radius: 4px; color: var(--ztc-text-text-3); &::after{ position: absolute; content: ""; height: 16px; width: 16px; transition: all .4s; z-index: -1; left: -20px; top: 10px; border-radius: 4px; display: inline-block; visibility: hidden; opacity: 0; background-image: url(../img/icons/logo-icon1.svg); } &:hover{ padding-left: 15px; color: var(--ztc-text-text-2); transition: all .4s; &::after{ border-radius: 4px; visibility: visible; transition: all .4s; opacity: 1; left: -10px; top: 10px; } } } } } } } } } } .btn-area { display: flex; align-items: center; .search-icon { margin: 0 16px 0 0; } } } .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; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; background: var(--ztc-text-text-1); transition: all .4s; .header-top-section { visibility: hidden; opacity: 0; transition: all .4s; height: 0; padding: 0; } .header-elements { transition: all .4s; } } .header-top-section { background: var(--ztc-bg-bg-2); padding: 16px 0 20px; position: relative; transition: all .4s; visibility: visible; opacity: 1; .header-social-area { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; .social-area { ul { li { display: inline-block; a { height: 32px; width: 32px; text-align: center; line-height: 34px; border-radius: 50%; transition: all .4s; display: inline-block; color: var(--ztc-text-text-2); background: var(--ztc-bg-bg-1); margin: 0 8px 0 0; &:hover { background: var(--ztc-text-text-3); color: var(--ztc-text-text-1); transition: all .4s; } } } } } .top-author-area { ul { li { display: inline-block; a { color: var(--ztc-text-text-1); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 18px; display: inline-block; transition: all .4s; margin: 0 40px 0 0; i { font-size: var(--ztc-font-size-font-s16); margin: 0 8px 0 0; } img { margin: 0 8px 0 0; } } } } } } } // 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