Copyright © 2024. HOMZ All Rights Reserved.
Created: 31 July 2024
Latest Update: 31 July 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. HOMZ - HOMZ Real State 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 "HOMZ" 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/
| ├── bootstrap.min.css
| ├── fontawesome.css
| ├── mobile.css
| ├── aos.css
| ├── sidebar.css
| ├── magnific-popup.css
| ├── owlcarousel.min.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/
│ ├── bootstrap.min.js
| ├── fontawesome.js
│ ├── mobilemenu.js
│ ├── counter.js
│ ├── magnific-popup.js
│ ├── aos.js
│ ├── sidebar.js
│ ├── jquery-3-6-0.min.js
│ ├── owlcarousel.min.js
│ ├── ScrollTrigger.min.js
│ ├── Splitetext.js
│ ├── Smooth-scroller.js
│ ├── gsap.min.js
│ ├── gsap-animation.js
│ ├── slick-slider.js
| ├── nice-select.js
| ├── circle-progress.js
| ├── waypoints.js
├── main.js
│
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── index5.html
├── single-index1.html
├── single-index2.html
├── single-index3.html
├── single-index4.html
├── single-index5.html
├── about.html
├── property.html
├── property-single.html
├── property-single.html
├── property-sell-rent.html
├── property-listing.html
├── property-listing-left.html
├── property-listing-right.html
├── agency.html
├── agency-details.html
├── agent.html
├── agent-details.html
├── blog.html
├── blog2.html
├── blog-left.html
├── blog-right.html
├── blog-single.html
├── faq.html
├── contact.html
├── 404.html
<!--===== HERO AREA STARTS =======--> <div class="hero1-section-area"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="header-main-content heading1"> <img src="assets/img/elements/star1.png" alt="" class="star1 keyframe5"> <img src="assets/img/elements/star1.png" alt="" class="star2 keyframe5"> <h1 class="text-anim">Stunning Homes Await In The <br class="d-lg-block d-none"> Best Neighborhoods</h1> </div> </div> <div class="space74 d-lg-block d-none"></div> <div class="space30 d-lg-none d-block"></div> <div class="col-lg-3"> <div class="header-pera heading1"> <img src="assets/img/elements/star2.png" alt="" class="star3 keyframe5"> <p class="text-anim">Discover a wide range of exclusive properties tailored to your unique lifestyle and preferences. Whether you’re looking for a cozy apartment in the heart of the.</p> <div class="video-btn-area"> <a href="https://www.youtube.com/watch?v=Y8XpQpW5OVY" class="popup-youtube"> <span class="video"><i class="fa-solid fa-play"></i></span> <span class="play">Play Videos</span> </a> </div> </div> </div> <div class="col-lg-7"></div> <div class="col-lg-2"> <div class="all-counter-area"> <div class="counter-area" data-aos="fade-left" data-aos-duration="800"> <h2><span class="counter">5.0</span></h2> <p> Home Rating Starts</p> </div> <div class="space60"></div> <div class="counter-area" data-aos="fade-left" data-aos-duration="1000"> <h2><span class="counter">89</span>k+</h2> <p>Asset Management</p> </div> <div class="space60"></div> <div class="counter-area" data-aos="fade-left" data-aos-duration="1100"> <h2>$<span class="counter">40</span>M+</h2> <p>Total Asset Sold</p> </div> <div class="space60"></div> <div class="counter-area" data-aos="fade-left" data-aos-duration="1200"> <img src="assets/img/all-images/others-img1.png" alt=""> <div class="space16"></div> <h2><span class="counter">12</span>K+</h2> <p>Satisfied Customers</p> </div> </div> </div> <div class="col-lg-10 m-auto"> <div class="header-images text-center"> <div class="img1" data-aos="fade-down" data-aos-duration="1200"> <img src="assets/img/all-images/header-img1.png" alt=""> </div> <p class="aniamtion-key-1"><img src="assets/img/icons/logo-icon.svg" alt="">100+ New Home Ready</p> <div class="circle-area"> <a href="#"> <img src="assets/img/elements/circle.png" alt="" class="keyframe5 circle"> <img src="assets/img/icons/arrow2.svg" alt="" class="arrow2"></a> </div> </div> </div> </div> </div> </div> <div class="tabs-section-area"> <div class="container"> <div class="row"> <div class="col-lg-10 m-auto"> <div class="tabs-area"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Rent</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Buy</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Sell</button> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0"> <div class="all-cities-area"> <div class="cities"> <p>City/State</p> <div class="input-place after"> <select name="country" class="nice-select"> <option value="1" data-display="New York City">New York City</option> <option value="">Belgium City</option> <option value="">Brezil City</option> <option value="">Argentina City</option> <option value="">Bangladesh City</option> <option value="">Germany City</option> </select> </div> </div> <div class="cities"> <p>Property </p> <div class="input-place after"> <select name="country" class="nice-select"> <option value="1" data-display="Duplex House">Duplex House</option> <option value="">Pine Valley Estates</option> <option value="">Sunset Ridge</option> <option value="">Oakwood Residences</option> <option value="">Riverfront Apartments</option> <option value="">Lakeview Heights</option> </select> </div> </div> <div class="cities"> <p>Price Range </p> <div class="input-place m-0"> <select name="country" class="nice-select"> <option value="1" data-display="$4,50,000">$4,50,000</option> <option value="">$5,50,000</option> <option value="">$6,50,000</option> <option value="">$7,50,000</option> <option value="">$8,50,000</option> <option value="">$9,50,000</option> </select> </div> </div> <div class="cities"> <div class="input-place"> <a href="#" class="header-btn1">Search <img src="assets/img/icons/search1.svg" alt=""></a> </div> </div> </div> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0"> <div class="all-cities-area"> <div class="cities"> <p>City/State</p> <div class="input-place after"> <select name="country" class="nice-select"> <option value="1" data-display="New York City">New York City</option> <option value="">Belgium City</option> <option value="">Brezil City</option> <option value="">Argentina City</option> <option value="">Bangladesh City</option> <option value="">Germany City</option> </select> </div> </div> <div class="cities"> <p>Property </p> <div class="input-place after"> <select name="country" class="nice-select"> <option value="1" data-display="Duplex House">Duplex House</option> <option value="">Pine Valley Estates</option> <option value="">Sunset Ridge</option> <option value="">Oakwood Residences</option> <option value="">Riverfront Apartments</option> <option value="">Lakeview Heights</option> </select> </div> </div> <div class="cities"> <p>Price Range </p> <div class="input-place m-0"> <select name="country" class="nice-select"> <option value="1" data-display="$4,50,000">$4,50,000</option> <option value="">$5,50,000</option> <option value="">$6,50,000</option> <option value="">$7,50,000</option> <option value="">$8,50,000</option> <option value="">$9,50,000</option> </select> </div> </div> <div class="cities"> <div class="input-place"> <a href="#" class="header-btn1">Search <img src="assets/img/icons/search1.svg" alt=""></a> </div> </div> </div> </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0"> <div class="all-cities-area"> <div class="cities"> <p>City/State</p> <div class="input-place after"> <select name="country" class="nice-select"> <option value="1" data-display="New York City">New York City</option> <option value="">Belgium City</option> <option value="">Brezil City</option> <option value="">Argentina City</option> <option value="">Bangladesh City</option> <option value="">Germany City</option> </select> </div> </div> <div class="cities"> <p>Property </p> <div class="input-place after"> <select name="country" class="nice-select"> <option value="1" data-display="Duplex House">Duplex House</option> <option value="">Pine Valley Estates</option> <option value="">Sunset Ridge</option> <option value="">Oakwood Residences</option> <option value="">Riverfront Apartments</option> <option value="">Lakeview Heights</option> </select> </div> </div> <div class="cities"> <p>Price Range </p> <div class="input-place m-0"> <select name="country" class="nice-select"> <option value="1" data-display="$4,50,000">$4,50,000</option> <option value="">$5,50,000</option> <option value="">$6,50,000</option> <option value="">$7,50,000</option> <option value="">$8,50,000</option> <option value="">$9,50,000</option> </select> </div> </div> <div class="cities"> <div class="input-place"> <a href="#" class="header-btn1">Search <img src="assets/img/icons/search1.svg" alt=""></a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--===== HERO 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: 9; padding: 16px 0; transition: all .4s; nav#navbar-example2 { display: block !important; padding: 0 !important; } .header-elements { .main-menu{ ul { li { a.nav-link.active { color: var(--ztc-text-text-2); font-weight: var(--ztc-weight-medium) !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 { 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; &:hover { .img1 { &::after { transform: scale(1); transition: all .4s; visibility: visible; opacity: 0.4; } } .homemenu-btn { top: 33%; visibility: visible; opacity: 1; transition: all .6s; } } .img1 { position: relative; z-index: 1; overflow: hidden; &::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: 8px; position: relative; width: 140px; z-index: 1; i { transform: rotate(-45deg); margin-left: 4px; transition: all .4s; } &:hover { color: var(--ztc-text-text-1); transition: all .4s; transform: translateY(-5px); background: var(--ztc-text-text-3); i { transform: rotate(0); transition: all .4s; } } } } } } &: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-font2) !important; font-size: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-regular); color:var(--ztc-text-text-2); 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-3)!important; font-weight: var(--ztc-weight-regular); } .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: -300px; 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-3); } &:hover > a::after{ background: var(--ztc-text-text-3); transition: all .4s; visibility: visible; opacity: 1; color: var(--ztc-text-text-3); } } li { display: block; a { font-family: var(--ztc-family-font2); font-weight: var(--ztc-weight-regular); 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-2); &::after{ position: absolute; content: ""; height: 25px; width: 3px; transition: all .4s; z-index: -1; left: -10px; top: 20%; border-radius: 4px; display: inline-block; visibility: hidden; opacity: 0; background: var(--ztc-text-text-3); } &:hover{ padding-left: 15px; color: var(--ztc-text-text-2); font-weight: var(--ztc-weight-regular); transition: all .4s; &::after{ border-radius: 4px; visibility: visible; transition: all .4s; opacity: 1; left: 0; } } } } } } } } } } .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; }
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