Copyright © 2024. Hosue All Rights Reserved.
Created: 1 September 2024
Latest Update: 1 September 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. Hosue - Single Property 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 "Hosue" 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
├── main.js
│
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── index5.html
├── index6.html
├── index7.html
├── index8.html
├── index9.html
├── index10.html
├── single-index1.html
├── single-index2.html
├── single-index3.html
├── single-index4.html
├── single-index5.html
├── single-index6.html
├── single-index7.html
├── single-index8.html
├── single-index9.html
├── single-index10.html
├── about.html
├── apartment-left.html
├── apartment-right.html
├── apartment-single.html
├── apartment-v1.html
├── apartment-v2.html
├── apartment-v3.html
├── apartment-v4.html
├── apartment-v5.html
├── apartment-v6.html
├── blog-left.html
├── blog-right.html
├── blog-single.html
├── blog.html
├── contact.html
├── gallery-v1.html
├── gallery-v2.html
├── testimonial.html
<!--===== HERO AREA STARTS =======--> <div class="header-carousel-area3 owl-carousel"> <div class="main-hero-area"> <div class="img1"> <img src="assets/img/all-images/hero/hero-img6.png" alt=""> </div> <div class="bg-elements"> <img src="assets/img/elements/elements7.png" alt="" class="elements2"> </div> <div class="container"> <div class="row"> <div class="col-lg-5 col-md-9"> <div class="header-content-area header-heading"> <div class="elements"> <img src="assets/img/elements/elements3.png" alt=""> </div> <div class="header-heading2"> <h5><i class="fa-solid fa-location-dot"></i>538 Joanie Fort Apt. 933 Louisiana</h5> <div class="space20"></div> <h2>Welcome to Your Luxurious Haven</h2> <div class="space20"></div> <p>Our exclusive property offers a seamless blend of luxury to and comfort, designed to meet your every need. From the</p> <div class="space32"></div> <div class="btn-area1"> <a href="contact.html" class="header-btn3">Schedule A Visit</a> <a href="https://www.youtube.com/watch?v=Y8XpQpW5OVY" class="popup-youtube"> <span class="play-btn"><i class="fa-solid fa-play"></i></span> <span class="text">Video</span> </a> </div> </div> </div> </div> <div class="col-lg-2"></div> <div class="col-lg-4"> <div class="auhtor-box"> <div class="others-box"> <div class="img3"> <img src="assets/img/all-images/others/others-img1.png" alt=""> </div> <div class="text"> <h3>Luxury Suite Villa</h3> <div class="space10"></div> <p>$1.800,000</p> </div> </div> </div> </div> </div> </div> </div> <div class="main-hero-area"> <div class="img1"> <img src="assets/img/all-images/hero/hero-img5.png" alt=""> </div> <div class="bg-elements"> <img src="assets/img/elements/elements7.png" alt="" class="elements2"> </div> <div class="container"> <div class="row"> <div class="col-lg-5 col-md-9"> <div class="header-content-area header-heading"> <div class="elements"> <img src="assets/img/elements/elements3.png" alt=""> </div> <div class="header-heading2"> <h5><i class="fa-solid fa-location-dot"></i>538 Joanie Fort Apt. 933 Louisiana</h5> <div class="space20"></div> <h2>Welcome to Your Luxurious Haven</h2> <div class="space20"></div> <p>Our exclusive property offers a seamless blend of luxury to and comfort, designed to meet your every need. From the</p> <div class="space32"></div> <div class="btn-area1"> <a href="contact.html" class="header-btn3">Schedule A Visit</a> <a href="https://www.youtube.com/watch?v=Y8XpQpW5OVY" class="popup-youtube"> <span class="play-btn"><i class="fa-solid fa-play"></i></span> <span class="text">Video</span> </a> </div> </div> </div> </div> <div class="col-lg-2"></div> <div class="col-lg-4"> <div class="auhtor-box"> <div class="others-box"> <div class="img3"> <img src="assets/img/all-images/others/others-img1.png" alt=""> </div> <div class="text"> <h3>Luxury Suite Villa</h3> <div class="space10"></div> <p>$1.800,000</p> </div> </div> </div> </div> </div> </div> </div> <div class="main-hero-area"> <div class="img1"> <img src="assets/img/all-images/hero/hero-img1.png" alt=""> </div> <div class="bg-elements"> <img src="assets/img/elements/elements7.png" alt="" class="elements2"> </div> <div class="container"> <div class="row"> <div class="col-lg-5 col-md-9"> <div class="header-content-area header-heading"> <div class="elements"> <img src="assets/img/elements/elements3.png" alt=""> </div> <div class="header-heading2"> <h5><i class="fa-solid fa-location-dot"></i>538 Joanie Fort Apt. 933 Louisiana</h5> <div class="space20"></div> <h2>Welcome to Your Luxurious Haven</h2> <div class="space20"></div> <p>Our exclusive property offers a seamless blend of luxury to and comfort, designed to meet your every need. From the</p> <div class="space32"></div> <div class="btn-area1"> <a href="contact.html" class="header-btn3">Schedule A Visit</a> <a href="https://www.youtube.com/watch?v=Y8XpQpW5OVY" class="popup-youtube"> <span class="play-btn"><i class="fa-solid fa-play"></i></span> <span class="text">Video</span> </a> </div> </div> </div> </div> <div class="col-lg-2"></div> <div class="col-lg-4"> <div class="auhtor-box"> <div class="others-box"> <div class="img3"> <img src="assets/img/all-images/others/others-img1.png" alt=""> </div> <div class="text"> <h3>Luxury Suite Villa</h3> <div class="space10"></div> <p>$1.800,000</p> </div> </div> </div> </div> </div> </div> </div> </div> <!--===== HERO AREA ENDS =======-->
// HOMEPAGE1 HEADER STARTS // .homepage3-body,html { overflow-x: hidden !important; } .homepage3-body{ overflow-x: hidden; .header-area.homepage3 { position: absolute; width: 100%; z-index:9999; padding: 16px 0; transition: all .4s; .site-logo { height: 48px; width: 180px; } nav#navbar-example2 { display: block; padding: 0; ul { li { a.nav-link.active { color: var(--ztc-text-text-11); } } } } .header-elements { display: flex; align-items: center; justify-content: space-between; position: relative; transition: all .4s; background: var(--ztc-bg-bg-1); border-radius: 80px; padding: 15px 24px; .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: var(--ztc-text-text-1); 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 { li { display: inline-block; position: relative; .tp-submenu { .homemenu-thumb { transition: all .4s; position: relative; z-index: 1; margin: 0 20px 0 0; overflow: hidden; border-radius: 4px; box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2); &:hover { .img1 { &::after { transform: scale(1); transition: all .4s; visibility: visible; opacity: 0.7; } } .homemenu-btn { top: 33%; visibility: visible; opacity: 1; transition: all .6s; } } .img1 { position: relative; z-index: 1; overflow: hidden; height: 300px; &::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all .4s; background: var(--ztc-text-text-5); 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: 20%; z-index: 2; visibility: hidden; opacity: 0; text-align: center; transition: all .6s; margin: 0 auto; left: 14%; right: 14%; .header-btn3 { color: var(--ztc-text-text-8); font-family: var(--ztc-family-font2); font-size: var(--ztc-font-size-font-s16); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; transition: all .4s; background: var(--ztc-bg-bg-9); border-radius: 80px; padding: 17px 24px; position: relative; z-index: 1; &:hover { transition: all .4s; color: var(--ztc-text-text-8); &:after { width: 92%; transition: all .4s; border-radius: 80px; } } &::after { position: absolute; content: ""; height: 40px; width: 40px; display: inline-block; border-radius: 50%; transition: all .4s; background: #EBDDB0; left: 5px; top: 5px; z-index: -1; } } } } } &: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; } } a { font-family: var(--ztc-family-font2); font-size: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color:var(--ztc-text-text-8); display: inline-block; transition: all .4s; padding: 0 20px; } &:hover > a{ transition: all .4s; color:var(--ztc-text-text-11)!important; } .tp-submenu { visibility: hidden; opacity: 0; box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2); position: absolute; background:var(--ztc-text-text-1); top: 100px; z-index: 1; transition: all .4s; border-radius: 5px; padding: 15px; left: -325px; width: 1300px; max-height: 600px; overflow: hidden; overflow-y: scroll; display: block; top: 201.3%; transform: scale(1, 0); transform-origin: top; } ul.dropdown-padding { visibility: hidden; opacity: 0; box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2); position: absolute; background:var(--ztc-text-text-1); top: 100px; width: 225px; z-index: 1; transition: all .4s; border-radius: 5px; padding: 15px; transform-origin: top; li.main-small-menu { position: relative; &:hover > a{ transition: all .4s; padding-left: 25px; color: var(--ztc-text-text-11); } &:hover > a::after{ background: var(--ztc-text-text-11); transition: all .4s; visibility: visible; opacity: 1; color: var(--ztc-text-text-11); } } li { display: block; a { font-family: var(--ztc-family-font2); font-weight: var(--ztc-weight-medium); transition: all .4s; padding: 8px; display: block; position: relative; z-index: 1; border-radius: 4px; color: var(--ztc-text-text-8); &::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-11); } &:hover{ padding-left: 25px; color: var(--ztc-text-text-11); &::after{ border-radius: 4px; visibility: visible; transition: all .4s; opacity: 1; left: 0; } } } } } } } } } } } .header-area.homepage3.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; background: var(--ztc-text-text-1); transition: all .4s; box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2); .header-elements { padding: 0; transition: all .4s; } } .btn-area-author { display: flex; align-items: center; .search-icon { a { right: 19px; position: relative; font-size: var(--ztc-font-size-font-s24); color: var(--ztc-text-text-2); font-weight: var(--ztc-weight-regular); top: -3px; span { background: #E6E8E7; height: 32px; display: inline-block; width: 2px; border: 4px; margin: 0 6px 0 16px; position: relative; top: 7px; } } } ul { li { display: inline-block; a { height: 40px; width: 40px; text-align: center; line-height: 40px; display: inline-block; transition: all .4s; border-radius: 50%; background: #E6E8E7; color: var(--ztc-text-text-8); margin: 0 10px 0 0; &:hover { background: var(--ztc-text-text-10); color: var(--ztc-text-text-1); transition: all .4s; } } } } } // 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