6085 lines
277 KiB
HTML
6085 lines
277 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8" >
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
|
||
<title>Quarter - Real Estate HTML Template</title>
|
||
<link
|
||
rel="shortcut icon"
|
||
href="assets/img/favicon.png"
|
||
type="image/x-icon"
|
||
>
|
||
<link rel="stylesheet" href="assets/css/font-icons.css" >
|
||
<link rel="stylesheet" href="assets/css/nice-select2.css" >
|
||
<link rel="stylesheet" href="assets/css/animate.css" >
|
||
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" >
|
||
<link rel="stylesheet" href="assets/css/glightbox.css" >
|
||
<link rel="stylesheet" href="assets/css/ui-widget.css" >
|
||
<link rel="stylesheet" href="assets/css/style.css" >
|
||
</head>
|
||
<body>
|
||
<!-- header area start -->
|
||
<header class="absolute top-0 left-0 w-full z-xxl">
|
||
<!-- header top -->
|
||
<div class="bg-transparent border-b border-border-color-3">
|
||
<div class="container text-white text-13px md:text-sm font-bold">
|
||
<div
|
||
class="flex justify-center md:justify-between items-center flex-wrap md:flex-nowrap"
|
||
>
|
||
<div class="flex justify-center md:block pt-2 md:pt-0">
|
||
<ul
|
||
class="basis-full md:basis-auto flex gap-6 lg:gap-9 items-center"
|
||
>
|
||
<li>
|
||
<a
|
||
class="hover:text-secondary-color"
|
||
href="mailto:info@webmail.com?Subject=Flower%20greetings%20to%20you"
|
||
><i
|
||
class="icon-mail text-secondary-color font-bold mr-0.5"
|
||
></i>
|
||
info@webmail.com</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="hover:text-secondary-color" href="locations.html"
|
||
><i
|
||
class="icon-placeholder text-secondary-color font-bold mr-0.5"
|
||
></i>
|
||
15/A, Nest Tower, NYC</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div
|
||
class="basis-full md:basis-auto flex justify-center md:block py-5px md:py-0"
|
||
>
|
||
<ul class="text flex items-center gap-15px pt-10px">
|
||
<li class="pl-7 relative group pb-10px">
|
||
<a href="#" class="language relative"> English </a>
|
||
|
||
<ul
|
||
class="py-7px bg-white w-50 shadow-box-shadow-4 absolute right-5 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl text-paragraph-color text-sm lg:text-base font-normal"
|
||
>
|
||
<li>
|
||
<a class="whitespace-nowra px-15px py-2" href="#"
|
||
>Arabic</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="whitespace-nowra px-15px py-2" href="#"
|
||
>Bengali</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="whitespace-nowra px-15px py-2" href="#"
|
||
>Chinese</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="whitespace-nowra px-15px py-2" href="#"
|
||
>English</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="whitespace-nowra px-15px py-2" href="#"
|
||
>French</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="whitespace-nowra px-15px py-2" href="#"
|
||
>Hindi</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="pb-10px">
|
||
<a href="https://www.facebook.com" title="Facebook"
|
||
><i class="fab fa-facebook-f font-bold"></i
|
||
></a>
|
||
</li>
|
||
|
||
<li class="pb-10px">
|
||
<a href="https://www.x.com" title="Twitter"
|
||
><i class="fab fa-twitter font-bold"></i
|
||
></a>
|
||
</li>
|
||
|
||
<li class="pb-10px">
|
||
<a href="https://www.instagram.com" title="Instagram"
|
||
><i class="fab fa-instagram font-bold"></i
|
||
></a>
|
||
</li>
|
||
<li class="pb-10px">
|
||
<a href="https://www.dribbble.com" title="Dribbble"
|
||
><i class="fab fa-dribbble font-bold"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- navbar main -->
|
||
<div
|
||
class="sticky-header sticky-secondary z-xl bg-transparent transition-all duration-700"
|
||
>
|
||
<div
|
||
class="container flex flex-row justify-between items-center relative py-7 xl:py-21px"
|
||
>
|
||
<!-- logo area -->
|
||
<div class="mt-10px mb-22px md:mt-0 md:mb-0 leading-1">
|
||
<a href="index.html">
|
||
<img src="./assets/img/logo-2.png" alt="" >
|
||
</a>
|
||
</div>
|
||
<nav class="flex-grow hidden xl:block">
|
||
<ul class="flex items-center justify-end gap-15px xl:gap-5">
|
||
<!-- item 1 -->
|
||
<li class="relative group">
|
||
<a
|
||
href="#"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>Home <span class="text-sm font-extrabold -ml-0.5">+</span></a
|
||
>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
|
||
>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index.html"
|
||
>Home Style 01</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-1.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-2.html"
|
||
>Home Style 02</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-2.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-3.html"
|
||
>Home Style 03</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-3.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-4.html"
|
||
>Home Style 04</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-4.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2 relative"
|
||
href="index-5.html"
|
||
><span
|
||
class="text-10px uppercase text-white bg-secondary-color px-3px absolute left-5 -top-1 rounded-sm"
|
||
>video</span
|
||
>
|
||
Home Style 05</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-5.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-6.html"
|
||
>Home Style 06</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-6.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-7.html"
|
||
>Home Style 07</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-7.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-8.html"
|
||
>Home Style 08</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-8.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-9.html"
|
||
>Home Style 09</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-9.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2 relative"
|
||
href="index-10.html"
|
||
><span
|
||
class="text-10px uppercase text-white bg-secondary-color px-3px absolute left-5 -top-1 rounded-sm"
|
||
>map</span
|
||
>
|
||
Home Style 10</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-10.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-11.html"
|
||
>Home Style 11</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-11.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!-- item 2 -->
|
||
<li class="relative group">
|
||
<a
|
||
href="#"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>About
|
||
<span class="text-sm font-extrabold -ml-0.5">+</span></a
|
||
>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
|
||
>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="about.html"
|
||
>About</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="service.html"
|
||
>Services</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="service-details.html"
|
||
>Service Details</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="portfolio.html"
|
||
>Portfolio</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="portfolio-2.html"
|
||
>Portfolio - 02</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="portfolio-details.html"
|
||
>Portfolio Details</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="whitespace-nowrap px-30px py-2" href="team.html"
|
||
>Team</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="team-details.html"
|
||
>Team Details</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="whitespace-nowrap px-30px py-2" href="faq.html"
|
||
>FAQ</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="locations.html"
|
||
>Google Map Locations</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- item 3 -->
|
||
<li class="relative group">
|
||
<a
|
||
href="#"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>Shop
|
||
<span class="text-sm font-extrabold -ml-0.5">+</span></a
|
||
>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
|
||
>
|
||
<li>
|
||
<a class="whitespace-nowrap px-30px py-2" href="shop.html"
|
||
>Property Grid</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="shop-list.html"
|
||
>Property List</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="shop-grid.html"
|
||
>Property No Sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="shop-left-sidebar.html"
|
||
>Property Left sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="shop-right-sidebar.html"
|
||
>Property right sidebar</a
|
||
>
|
||
</li>
|
||
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="product-details.html"
|
||
>Property details
|
||
</a>
|
||
</li>
|
||
<li class="relative group/nested">
|
||
<a class="whitespace-nowrap px-30px py-2" href="#"
|
||
>Other Pages
|
||
<span
|
||
class="absolute top-1/2 -translate-y-1/2 left-3 group-hover/nested:text-secondary-color"
|
||
>>></span
|
||
>
|
||
</a>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-15px border-t-[5px] border-secondary-color w-dropdown shadow-box-shadow-4 absolute right-full top-0 opacity-0 invisible translate-y-[5px] transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0 bg-white"
|
||
>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="cart.html"
|
||
>Cart</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="wishlist.html"
|
||
>Wishlist</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="checkout.html"
|
||
>Checkout</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="order-tracking.html"
|
||
>Order Tracking</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="account.html"
|
||
>My Account</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="login.html"
|
||
>Sign in</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="register.html"
|
||
>Register</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- item 4 -->
|
||
<li class="relative group">
|
||
<a
|
||
href="#"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>News <span class="text-sm font-extrabold -ml-0.5">+</span></a
|
||
>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
|
||
>
|
||
<li>
|
||
<a class="whitespace-nowrap px-30px py-2" href="blog.html"
|
||
>News</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="blog-grid.html"
|
||
>News Grid</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="blog-left-sidebar.html"
|
||
>News Left sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="blog-right-sidebar.html"
|
||
>News Right sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="blog-details.html"
|
||
>News details</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!-- item 5 -->
|
||
<li class="group">
|
||
<a
|
||
href="#"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>Pages
|
||
<span class="text-sm font-extrabold -ml-0.5">+</span></a
|
||
>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="container w-full px-0 py-15px border-t-[5px] border-secondary-color bg-white shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:-translate-y-4 grid grid-cols-4 z-xl"
|
||
>
|
||
<li class="pr-3 pt-3 pl-30px">
|
||
<ul>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-6px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
|
||
href="#"
|
||
>Inner Pages</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<ul class="py-15px">
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="portfolio.html"
|
||
>Portfolio</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="portfolio-2.html"
|
||
>Portfolio - 02</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="portfolio-details.html"
|
||
>Portfolio Details</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="team.html"
|
||
>Team</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="team-details.html"
|
||
>Team Details</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="faq.html"
|
||
>FAQ</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="pr-3 pt-3 pl-30px">
|
||
<ul>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-6px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
|
||
href="#"
|
||
>Inner Pages</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<ul class="py-15px">
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="history.html"
|
||
>History</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="add-listing.html"
|
||
>Add Listing</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="locations.html"
|
||
>Google Map Locations</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="404.html"
|
||
>404</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="contact.html"
|
||
>Contact</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="coming-soon.html"
|
||
>Coming Soon</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="pr-3 pt-3 pl-30px">
|
||
<ul>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-6px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
|
||
href="#"
|
||
>Shop Pages</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<ul class="py-15px">
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="shop.html"
|
||
>Shop</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="shop-left-sidebar.html"
|
||
>Shop Left sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="shop-right-sidebar.html"
|
||
>Shop right sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="shop-grid.html"
|
||
>Shop Grid</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="product-details.html"
|
||
>Shop details
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="cart.html"
|
||
>Cart</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="pr-3 pt-3 pl-30px">
|
||
<a
|
||
class="whitespace-nowrap p-10px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
|
||
href="shop.html"
|
||
><img
|
||
src="./assets/img/banner/menu-banner-1.jpg"
|
||
alt=""
|
||
class="w-full inline-block"
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!-- item 6 -->
|
||
<li>
|
||
<a
|
||
href="contact.html"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>Contact
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<!-- header right -->
|
||
<div>
|
||
<ul class="flex items-center gap-10px">
|
||
<li class="hidden xl:block">
|
||
<a
|
||
href="add-listing.html"
|
||
class="px-30px py-14px mr-43px text-lg xl:text-15px 2xl:text-lg bg-secondary-color hover:bg-section-bg-1 font-semibold text-white hover:text-primary-color inline-block"
|
||
>Add Listing</a
|
||
>
|
||
</li>
|
||
<li class="block xl:hidden">
|
||
<div
|
||
class="show-drawer d-xl-none h-50px w-50px text-heading-color shadow-box-shadow-1 flex justify-center items-center transition-all duration-300 relative bg-white"
|
||
>
|
||
<a href="#ltn__utilize-drawer " class="utilize-toggle">
|
||
<svg viewBox="0 0 800 600">
|
||
<path
|
||
d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200"
|
||
id="top"
|
||
></path>
|
||
<path d="M300,320 L540,320" id="middle"></path>
|
||
<path
|
||
d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190"
|
||
id="bottom"
|
||
transform="translate(480, 320) scale(1, -1) translate(-480, -318) "
|
||
></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- mobile menu -->
|
||
<div class="drawer-container mobile-menu-container">
|
||
<div
|
||
class="drawer-overlay fixed top-0 left-0 w-full h-full bg-black -z-1 close-drawer opacity-0 transition-all duration-300 invisible cursor-zoom-out block xl:hidden"
|
||
></div>
|
||
<div
|
||
class="drawer mobile-menu fixed top-0 ltr:-left-[300px] ltr:xs:-left-[400px] rtl:-right-[300px] rtl:xs:-right-[400px] px-5 xs:px-10 py-50px w-300px xs:w-100 h-full transition-all duration-500 shadow-dropdown-secodary bg-whiteColor z-high block xl:hidden bg-white"
|
||
>
|
||
<div class="pl-15px overflow-auto h-full">
|
||
<!-- mobile menu wrapper -->
|
||
<div>
|
||
<!-- mobile logo area -->
|
||
<div
|
||
class="flex justify-between items-center border-b border-border-primary pt-3px pb-10px mb-25px"
|
||
>
|
||
<div>
|
||
<a href="index.html">
|
||
<img src="./assets/img/logo.png" alt="" >
|
||
</a>
|
||
</div>
|
||
<div>
|
||
<button class="close-drawer text-black text-3xl px-15px py-2">
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- search input -->
|
||
<div class="mb-50px">
|
||
<form class="w-full relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Search..."
|
||
class="text-sm text-paragraph-color pr-5 pl-50px placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none"
|
||
>
|
||
<button
|
||
type="submit"
|
||
class="absolute top-1/2 -translate-y-1/2 left-7 text-heading-color"
|
||
>
|
||
<i class="icon-search text-lg font-bold"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- mobile menu accordions -->
|
||
<div
|
||
class="border-b border-border-primary dark:border-borderColor-dark pb-8"
|
||
>
|
||
<ul class="accordion-container ">
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
Home
|
||
<button class="px-3 h-full">
|
||
<span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
|
||
></span
|
||
><span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div class="content-wrapper pr-15px">
|
||
<ul>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 01</a
|
||
>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-2.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 02</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-3.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 03</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-4.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 04</a
|
||
>
|
||
</li>
|
||
<li class="mt-4 relative">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-5.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
><span
|
||
class="text-10px uppercase text-white bg-secondary-color px-3px absolute rtl:-right-2 -top-3 rounded-sm"
|
||
>video</span
|
||
>
|
||
Home Style 05</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-6.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 06</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-7.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 07</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-8.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 08</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-9.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 09</a
|
||
>
|
||
</li>
|
||
<li class="mt-4 relative">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-10.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
><span
|
||
class="text-10px uppercase text-white bg-secondary-color px-3px absolute rtl:-right-2 -top-3 rounded-sm"
|
||
>map</span
|
||
>
|
||
Home Style 10</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-11.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 11</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
About
|
||
<button class="px-3 h-full">
|
||
<span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
|
||
></span
|
||
><span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div class="content-wrapper pr-15px">
|
||
<ul>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="about.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>About1</a
|
||
>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="service.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Services</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="service-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Service Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Portfolio</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio-2.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
Portfolio - 02</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Portfolio Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="team.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Team</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="team-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Team Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="faq.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>FAQ</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="locations.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Google Map Locations</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
Shop
|
||
<button class="px-3 h-full">
|
||
<span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
|
||
></span
|
||
><span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div class="content-wrapper pr-15px">
|
||
<ul>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="shop.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Property Grid</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="shop-list.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Property List</a
|
||
>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="shop-grid.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Property No Sidebar</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="shop-left-sidebar.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Property Left sidebar</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="shop-right-sidebar.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Property right sidebar</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="product-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
Property details
|
||
</a>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="cart.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Cart</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="wishlist.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Wishlist</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="checkout.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Checkout</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="order-tracking.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Order Tracking</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="account.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>My Account</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="login.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Sign in</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="register.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Register</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
News
|
||
<button class="px-3 h-full">
|
||
<span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
|
||
></span
|
||
><span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div class="content-wrapper pr-15px">
|
||
<ul>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="blog.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>News</a
|
||
>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="blog-grid.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>News Grid</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="blog-left-sidebar.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>News Left sidebar</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="blog-right-sidebar.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>News Right sidebar</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="blog-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
News details</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
Pages
|
||
<button class="px-3 h-full">
|
||
<span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
|
||
></span
|
||
><span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div class="content-wrapper pr-15px">
|
||
<ul>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="about.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>About</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="service.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Services</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="service-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Service Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Portfolio</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio-2.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
Portfolio - 02</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Portfolio Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="team.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Team</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="team-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Team Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="faq.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>FAQ</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="history.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>History</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="add-listing.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Add Listing</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="locations.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Google Map Locations</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="404.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>404</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="contact.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Contact</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="coming-soon.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Coming Soon</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
<a
|
||
href="contact.html"
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
CONTACT</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- my account -->
|
||
<div>
|
||
<ul class="mb-30px pb-5 pt-5px border-b border-border-primary">
|
||
<li class="group mt-4">
|
||
<!-- accordion header -->
|
||
<a href="account.html" class="text-sm lg:text-base">
|
||
<span
|
||
class="inline-block h-50px w-50px border-2 border-border-color-1 text-center leading-50px rtl:ml-3"
|
||
>
|
||
<i class="far fa-user"></i>
|
||
</span>
|
||
My Account
|
||
</a>
|
||
</li>
|
||
<li class="group mt-4">
|
||
<!-- accordion header -->
|
||
<a
|
||
href="wishlist.html#"
|
||
class="text-sm lg:text-base"
|
||
>
|
||
<span
|
||
class="inline-block h-50px w-50px border-2 border-border-color-1 text-center leading-50px rtl:ml-3"
|
||
>
|
||
<i class="far fa-heart"></i><sup class="pl-0.5">3</sup>
|
||
</span>
|
||
Wishlist
|
||
</a>
|
||
</li>
|
||
<li class="group mt-4">
|
||
<!-- accordion header -->
|
||
<a href="cart.html" class="text-sm lg:text-base">
|
||
<span
|
||
class="inline-block h-50px w-50px border-2 border-border-color-1 text-center leading-50px rtl:ml-3"
|
||
>
|
||
<i class="fas fa-shopping-cart"></i>
|
||
<sup>5</sup>
|
||
</span>
|
||
Shoping Cart
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Mobile menu social area -->
|
||
<div>
|
||
<ul class="flex gap-3 items-center pt-4">
|
||
<li>
|
||
<a
|
||
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
|
||
href="https://www.facebook.com"
|
||
><i class="fab fa-facebook-f leading-10"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
|
||
href="https://www.twiter.com"
|
||
><i class="fab fab fa-twitter leading-10"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
|
||
href="https://www.linkedin.com"
|
||
><i class="fab fa-linkedin leading-10"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
|
||
href="https://www.instagram.com"
|
||
><i class="fab fa-instagram leading-10"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- header area start -->
|
||
<!-- main body start -->
|
||
<main>
|
||
<!-- banner section -->
|
||
<section>
|
||
<!-- banner section -->
|
||
<div class="hero hero-primary overflow-hidden relative z-0">
|
||
<!-- Swiper -->
|
||
<div class="hero-slider-container swiper-container relative">
|
||
<div class="home-3">
|
||
<div>
|
||
<!-- Hero 1 -->
|
||
<div
|
||
class="relative z-0 pt-300px md:pt-50 pb-50px 4xl:h-screen 4xl:min-h-[800px] overflow-hidden flex flex-col justify-center bg-cover bg-center bg-no-repeat bg-[url('../img/slider/11.jpg')]"
|
||
>
|
||
<!-- overlay -->
|
||
<div
|
||
class="absolute top-0 left-0 w-full h-full bg-overlay z-20"
|
||
></div>
|
||
<div class="container w-full relative z-xl tab hero-tab">
|
||
<!-- action -->
|
||
<div class="tab-links flex gap-x-10px items-center mb-10px">
|
||
<div
|
||
class="active text-sm lg:text-base text-heading-color relative group whitespace-nowrap transition-all duration-300 bg-section-bg-1 inline-block font-bold"
|
||
>
|
||
<button
|
||
class="relative z-10 px-25px lg:px-10 py-15px whitespace-normal leading-1.8 lg:leading-1.8 uppercase"
|
||
>
|
||
<i class="fas fa-home ml-10px"></i> Rent Home
|
||
</button>
|
||
</div>
|
||
<div
|
||
class="text-sm lg:text-base text-heading-color relative group whitespace-nowrap transition-all duration-300 bg-section-bg-1 inline-block font-bold"
|
||
>
|
||
<button
|
||
class="relative z-10 px-25px lg:px-10 py-15px whitespace-normal leading-1.8 lg:leading-1.8 uppercase"
|
||
>
|
||
<i class="fas fa-home ml-10px"></i> Sale Home
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="tab-contents py-10 px-25px md:p-10 shadow-box-shadow-1 border border-border-color-1 bg-section-bg-1"
|
||
>
|
||
<!-- inputs -->
|
||
<div class="transition-all duration-200">
|
||
<form class="hero-form">
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-30px"
|
||
>
|
||
<div>
|
||
<select class="selectize apartment-select">
|
||
<option value="Apartment" data-display="Select">
|
||
Apartment
|
||
</option>
|
||
<option value="Property Type">
|
||
Property Type
|
||
</option>
|
||
<option value="Co-op">Co-op</option>
|
||
<option value="Condo">Condo</option>
|
||
<option value="Single Family Home">
|
||
Single Family Home
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<select class="selectize location-select">
|
||
<option data-display="Select">Location</option>
|
||
<option>chicago</option>
|
||
<option>London</option>
|
||
<option>Los Angeles</option>
|
||
<option>New York</option>
|
||
<option>New Jersey</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<select class="selectize sub-location-select">
|
||
<option data-display="Select">
|
||
Sub Location
|
||
</option>
|
||
<option>Bayonne</option>
|
||
<option>Greenville</option>
|
||
<option>Manhattan</option>
|
||
<option>Queens</option>
|
||
<option>The Heights</option>
|
||
<option>Upper East Side</option>
|
||
<option>West Side</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<select class="selectize bedrooms-select">
|
||
<option data-display="Select">Bedrooms</option>
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
</select>
|
||
</div>
|
||
<!-- min size -->
|
||
<div>
|
||
<input
|
||
type="text"
|
||
placeholder="Min size (in sqft)"
|
||
class="text-paragraph-color pl-5 pr-10 placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:opacity-50"
|
||
>
|
||
</div>
|
||
<!-- max size -->
|
||
<div>
|
||
<input
|
||
type="text"
|
||
placeholder="max size (in sqft)"
|
||
class="text-paragraph-color pl-5 pr-10 placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:opacity-50"
|
||
>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<!-- .range -->
|
||
<div
|
||
class="car-price-filter-range mt-30px mb-5 lg:mb-10"
|
||
>
|
||
<div class="price_filter">
|
||
<div class="price_slider_amount">
|
||
<input type="submit" value="Your range:" >
|
||
<input
|
||
type="text"
|
||
class="amount"
|
||
name="price"
|
||
placeholder="Add Your Price"
|
||
>
|
||
</div>
|
||
<div class="slider-range"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="text-center md:col-start-1 md:col-span-2 lg:col-span-3 flex justify-center items-center"
|
||
>
|
||
<h5
|
||
class="uppercase text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black hover:bg-primary-cogroup-lor z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<a
|
||
href="shop-right-sidebar.html"
|
||
class="relative z-1 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-heading-color leading-23px"
|
||
>Search Inventory</a
|
||
>
|
||
</h5>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="hidden transition-all duration-200">
|
||
<form class="hero-form">
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-30px"
|
||
>
|
||
<div>
|
||
<select class="selectize apartment-select">
|
||
<option
|
||
value="Property Type"
|
||
data-display="Select"
|
||
>
|
||
Property Type
|
||
</option>
|
||
<option value="Apartment">Apartment</option>
|
||
<option value="Co-op">Co-op</option>
|
||
<option value="Condo">Condo</option>
|
||
<option value="Single Family Home">
|
||
Single Family Home
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<select class="selectize location-select">
|
||
<option data-display="Select">Location</option>
|
||
<option>chicago</option>
|
||
<option>London</option>
|
||
<option>Los Angeles</option>
|
||
<option>New York</option>
|
||
<option>New Jersey</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<select class="selectize sub-location-select">
|
||
<option data-display="Select">
|
||
Sub Location
|
||
</option>
|
||
<option>Bayonne</option>
|
||
<option>Greenville</option>
|
||
<option>Manhattan</option>
|
||
<option>Queens</option>
|
||
<option>The Heights</option>
|
||
<option>Upper East Side</option>
|
||
<option>West Side</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<select class="selectize bedrooms-select">
|
||
<option data-display="Select">Bedrooms</option>
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
</select>
|
||
</div>
|
||
<!-- min size -->
|
||
<div>
|
||
<input
|
||
type="text"
|
||
placeholder="Min size (in sqft)"
|
||
class="text-paragraph-color pl-5 pr-10 placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:opacity-50"
|
||
>
|
||
</div>
|
||
<!-- max size -->
|
||
<div>
|
||
<input
|
||
type="text"
|
||
placeholder="max size (in sqft)"
|
||
class="text-paragraph-color pl-5 pr-10 placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:opacity-50"
|
||
>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<!-- .range -->
|
||
<div
|
||
class="car-price-filter-range mt-30px mb-5 lg:mb-10"
|
||
>
|
||
<div class="price_filter">
|
||
<div class="price_slider_amount">
|
||
<input type="submit" value="Your range:" >
|
||
<input
|
||
type="text"
|
||
class="amount"
|
||
name="price"
|
||
placeholder="Add Your Price"
|
||
>
|
||
</div>
|
||
<div class="slider-range"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="text-center md:col-start-1 md:col-span-2 lg:col-span-3 flex justify-center items-center"
|
||
>
|
||
<h5
|
||
class="uppercase text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black hover:bg-primary-cogroup-lor z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<a
|
||
href="shop-right-sidebar.html"
|
||
class="relative z-1 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-heading-color leading-23px"
|
||
>Search Inventory</a
|
||
>
|
||
</h5>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hidden">
|
||
<div class="swiper-button-next !text-white">
|
||
<i class="fas fa-arrow-left " ></i>
|
||
</div>
|
||
<div class="swiper-button-prev !text-white">
|
||
<i class="fas fa-arrow-right " ></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- latest appartments section -->
|
||
|
||
<section>
|
||
<div class="container pt-115px pb-70px modal-container">
|
||
<!-- section heading -->
|
||
<div class="text-center mb-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize 1b-15px py-0.5 px-5 mb-15px rounded-full inline-block font-semibold"
|
||
>
|
||
<span class="leading-1.3">Properties</span>
|
||
</p>
|
||
<h2
|
||
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
|
||
>
|
||
<span class="leading-1.3">Latest Listings </span>
|
||
</h2>
|
||
</div>
|
||
<div>
|
||
<!-- apartment cards -->
|
||
<div class="-mx-15px">
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
|
||
<!-- card 1 -->
|
||
<div class="apart-card mb-50px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/1.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
|
||
<div class="absolute top-10 lg:top-5 left-[30px]">
|
||
<a href="team-details.html" class="w-50px h-50px"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100% group-hover:scale-110 border-3px border-border-color-1 transition-all duration-300"
|
||
></a>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-30px lg:px-30px">
|
||
<p
|
||
class="text-secondary-color font-semibold mb-15px uppercase"
|
||
>
|
||
<span class="leading-25px">For Rent</span>
|
||
</p>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>New Apartment Nice View</a
|
||
>
|
||
</h4>
|
||
|
||
<div class="text-sm">
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i
|
||
class="flaticon-pin text-secondary-color mr-0.5"
|
||
></i>
|
||
Belmont Gardens, Chicago</a
|
||
>
|
||
</div>
|
||
|
||
<ul class="flex flex-wrap gap-15px pt-4 pb-5">
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3 <span class="font-normal">Bed</span>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
2 <span class="font-normal">Bath</span>
|
||
</p>
|
||
</li>
|
||
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3450 <span class="font-normal">Square Ft</span>
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
<div
|
||
class="card-quick-area flex gap-x-2 pb-30px leading-1 transition-all duration-300"
|
||
>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div class="p-5 lg:px-30px border-t border-border-color-1">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 2 -->
|
||
<div class="apart-card mb-50px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/2.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
|
||
<div class="absolute top-10 lg:top-5 left-[30px]">
|
||
<a href="team-details.html" class="w-50px h-50px"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100% group-hover:scale-110 border-3px border-border-color-1 transition-all duration-300"
|
||
></a>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-30px lg:px-30px">
|
||
<p
|
||
class="text-secondary-color font-semibold mb-15px uppercase"
|
||
>
|
||
<span class="leading-25px">For Sale</span>
|
||
</p>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>New Apartment Nice View</a
|
||
>
|
||
</h4>
|
||
|
||
<div class="text-sm">
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i
|
||
class="flaticon-pin text-secondary-color mr-0.5"
|
||
></i>
|
||
Belmont Gardens, Chicago</a
|
||
>
|
||
</div>
|
||
|
||
<ul class="flex flex-wrap gap-15px pt-4 pb-5">
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3 <span class="font-normal">Bed</span>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
2 <span class="font-normal">Bath</span>
|
||
</p>
|
||
</li>
|
||
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3450 <span class="font-normal">Square Ft</span>
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
<div
|
||
class="card-quick-area flex gap-x-2 pb-30px leading-1 transition-all duration-300"
|
||
>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div class="p-5 lg:px-30px border-t border-border-color-1">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 3 -->
|
||
<div class="apart-card mb-50px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/3.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
|
||
<div class="absolute top-10 lg:top-5 left-[30px]">
|
||
<a href="team-details.html" class="w-50px h-50px"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100% group-hover:scale-110 border-3px border-border-color-1 transition-all duration-300"
|
||
></a>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-30px lg:px-30px">
|
||
<p
|
||
class="text-secondary-color font-semibold mb-15px uppercase"
|
||
>
|
||
<span class="leading-25px">For Rent</span>
|
||
</p>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>New Apartment Nice View</a
|
||
>
|
||
</h4>
|
||
|
||
<div class="text-sm">
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i
|
||
class="flaticon-pin text-secondary-color mr-0.5"
|
||
></i>
|
||
Belmont Gardens, Chicago</a
|
||
>
|
||
</div>
|
||
|
||
<ul class="flex flex-wrap gap-15px pt-4 pb-5">
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3 <span class="font-normal">Bed</span>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
2 <span class="font-normal">Bath</span>
|
||
</p>
|
||
</li>
|
||
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3450 <span class="font-normal">Square Ft</span>
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
<div
|
||
class="card-quick-area flex gap-x-2 pb-30px leading-1 transition-all duration-300"
|
||
>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div class="p-5 lg:px-30px border-t border-border-color-1">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 4 -->
|
||
<div class="apart-card mb-50px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/4.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
|
||
<div class="absolute top-10 lg:top-5 left-[30px]">
|
||
<a href="team-details.html" class="w-50px h-50px"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100% group-hover:scale-110 border-3px border-border-color-1 transition-all duration-300"
|
||
></a>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-30px lg:px-30px">
|
||
<p
|
||
class="text-secondary-color font-semibold mb-15px uppercase"
|
||
>
|
||
<span class="leading-25px">For Rent</span>
|
||
</p>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>New Apartment Nice View</a
|
||
>
|
||
</h4>
|
||
|
||
<div class="text-sm">
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i
|
||
class="flaticon-pin text-secondary-color mr-0.5"
|
||
></i>
|
||
Belmont Gardens, Chicago</a
|
||
>
|
||
</div>
|
||
|
||
<ul class="flex flex-wrap gap-15px pt-4 pb-5">
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3 <span class="font-normal">Bed</span>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
2 <span class="font-normal">Bath</span>
|
||
</p>
|
||
</li>
|
||
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3450 <span class="font-normal">Square Ft</span>
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
<div
|
||
class="card-quick-area flex gap-x-2 pb-30px leading-1 transition-all duration-300"
|
||
>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div class="p-5 lg:px-30px border-t border-border-color-1">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 5 -->
|
||
<div class="apart-card mb-50px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/5.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
|
||
<div class="absolute top-10 lg:top-5 left-[30px]">
|
||
<a href="team-details.html" class="w-50px h-50px"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100% group-hover:scale-110 border-3px border-border-color-1 transition-all duration-300"
|
||
></a>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-30px lg:px-30px">
|
||
<p
|
||
class="text-secondary-color font-semibold mb-15px uppercase"
|
||
>
|
||
<span class="leading-25px">For Rent</span>
|
||
</p>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>New Apartment Nice View</a
|
||
>
|
||
</h4>
|
||
|
||
<div class="text-sm">
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i
|
||
class="flaticon-pin text-secondary-color mr-0.5"
|
||
></i>
|
||
Belmont Gardens, Chicago</a
|
||
>
|
||
</div>
|
||
|
||
<ul class="flex flex-wrap gap-15px pt-4 pb-5">
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3 <span class="font-normal">Bed</span>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
2 <span class="font-normal">Bath</span>
|
||
</p>
|
||
</li>
|
||
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3450 <span class="font-normal">Square Ft</span>
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
<div
|
||
class="card-quick-area flex gap-x-2 pb-30px leading-1 transition-all duration-300"
|
||
>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div class="p-5 lg:px-30px border-t border-border-color-1">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 6 -->
|
||
<div class="apart-card mb-50px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/6.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
|
||
<div class="absolute top-10 lg:top-5 left-[30px]">
|
||
<a href="team-details.html" class="w-50px h-50px"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100% group-hover:scale-110 border-3px border-border-color-1 transition-all duration-300"
|
||
></a>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-30px lg:px-30px">
|
||
<p
|
||
class="text-secondary-color font-semibold mb-15px uppercase"
|
||
>
|
||
<span class="leading-25px">For Rent</span>
|
||
</p>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>New Apartment Nice View</a
|
||
>
|
||
</h4>
|
||
|
||
<div class="text-sm">
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i
|
||
class="flaticon-pin text-secondary-color mr-0.5"
|
||
></i>
|
||
Belmont Gardens, Chicago</a
|
||
>
|
||
</div>
|
||
|
||
<ul class="flex flex-wrap gap-15px pt-4 pb-5">
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3 <span class="font-normal">Bed</span>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
2 <span class="font-normal">Bath</span>
|
||
</p>
|
||
</li>
|
||
|
||
<li>
|
||
<p class="leading-1.8 font-bold text-sm">
|
||
3450 <span class="font-normal">Square Ft</span>
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
<div
|
||
class="card-quick-area flex gap-x-2 pb-30px leading-1 transition-all duration-300"
|
||
>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div class="p-5 lg:px-30px border-t border-border-color-1">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- modals -->
|
||
<!-- modal apartment details-->
|
||
<div
|
||
class="modal hidden fixed top-0 left-0 w-full h-full z-xxl transition-all duration-500 bg-lightBlack opacity-0 overflow-y-auto"
|
||
>
|
||
<div
|
||
class="modal-close fixed md:absolute top-0 left-0 w-full h-full z-xsmall cursor-zoom-out"
|
||
></div>
|
||
<div
|
||
class="modal-content transition-all duration-500 -translate-y-20 sm:max-w-500px lg:max-w-980px m-2 mt-150px sm:mx-auto relative z-small rounded-lg"
|
||
>
|
||
<div
|
||
class="grid grid-cols-1 lg:grid-cols-2 gap-x-30px p-30px bg-white relative"
|
||
>
|
||
<div>
|
||
<img
|
||
src="./assets/img/product/4.png"
|
||
class="w-full"
|
||
alt=""
|
||
>
|
||
</div>
|
||
|
||
<!-- card body -->
|
||
<div class="pl-25px">
|
||
<div class="absolute left-4 top-4">
|
||
<button
|
||
class="modal-close w-10 h-10 leading-10 text-center bg-section-bg-1 text-black text-25px inline-block"
|
||
>
|
||
<span>×</span>
|
||
</button>
|
||
</div>
|
||
<ul class="flex items-center mb-5px">
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
><i class="fas fa-star leading-1.8"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
><i class="fas fa-star leading-1.8"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
><i class="fas fa-star leading-1.8"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
><i class="fas fa-star-half-alt leading-1.8"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
><i class="far fa-star leading-1.8"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
>
|
||
( 95 Reviews )</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
|
||
<h4
|
||
class="text-22px md:text-2xl font-bold text-heading-color mb-0"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
>3 Rooms Manhattan</a
|
||
>
|
||
</h4>
|
||
<p
|
||
class="text-34px md:text-50px text-secondary-color font-semibold mb-5 pb-0 border-b border-border-color-12 border-opacity-25 leading-1.2"
|
||
>
|
||
<span>$34,900</span>
|
||
<del
|
||
class="text-26px md:text-40px leading-1.2 opacity-60 pl-1"
|
||
>$36,500</del
|
||
>
|
||
</p>
|
||
<p class="text-sm lg:text-base mb-9 md:mb-10">
|
||
<span class="leading-1.8"
|
||
>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||
Dignissimos repellendus repudiandae incidunt quidem
|
||
pariatur expedita, quo quis modi tempore non.</span
|
||
>
|
||
</p>
|
||
|
||
<ul
|
||
class="flex flex-wrap gap-5 pb-5 mb-5 border-b border-border-color-12 border-opacity-25"
|
||
>
|
||
<li class="text-sm">
|
||
<button
|
||
class="modal-open leading-1.8 font-semibold hover:text-secondary-color transition-all duration-300"
|
||
data-modal-index="3"
|
||
>
|
||
<i class="far fa-heart px-0.5"></i> Add to Wishlist
|
||
</button>
|
||
</li>
|
||
|
||
<li class="text-sm">
|
||
<button
|
||
class="leading-1.8 font-semibold hover:text-secondary-color transition-all duration-300"
|
||
>
|
||
<i class="fas fa-exchange-alt px-0.5"></i> Compare
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
<!-- social area -->
|
||
<ul class="flex gap-x-[18px] items-center">
|
||
<li>
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8">Share: </span>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.facebook.com/"
|
||
class="text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
<i class="fab fa-facebook-f leading-1.8"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://x.com/"
|
||
class="text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
<i class="fab fa-twitter leading-1.8"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.linkedin.com/"
|
||
class="text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
<i class="fab fa-linkedin leading-1.8"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.instagram.com/"
|
||
class="text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
<i class="fab fa-instagram leading-1.8"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- action -->
|
||
<div class="text-end">
|
||
<a
|
||
href="product-details.html"
|
||
class="text-xs hover:text-secondary-color underline hover:underline"
|
||
>
|
||
<span class="leading-1.8">View Details</span></a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- modal wishlist 1-->
|
||
<div
|
||
class="modal hidden fixed top-0 left-0 w-full h-full z-xxl transition-all duration-500 bg-lightBlack opacity-0 overflow-y-auto"
|
||
>
|
||
<div
|
||
class="modal-close fixed md:absolute top-0 left-0 w-full h-full z-xsmall cursor-zoom-out"
|
||
></div>
|
||
|
||
<div
|
||
class="modal-content transition-all duration-500 -translate-y-20 max-w-500px m-2 mt-150px sm:mx-auto relative z-small p-30px bg-white"
|
||
>
|
||
<div class="flex">
|
||
<div class="w-125px ml-5 flex-shrink-0">
|
||
<img src="./assets/img/product/4.png" class="w-full" alt="" >
|
||
</div>
|
||
|
||
<!-- card body -->
|
||
<div class="pl-25px">
|
||
<div class="absolute left-4 top-4">
|
||
<button
|
||
class="modal-close w-10 h-10 leading-10 text-center bg-black bg-opacity-5 text-black text-25px inline-block"
|
||
>
|
||
<span>×</span>
|
||
</button>
|
||
</div>
|
||
|
||
<h4
|
||
class="text-base lg:text-lg font-bold text-heading-color mb-10px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
>3 Rooms Manhattan</a
|
||
>
|
||
</h4>
|
||
|
||
<p
|
||
class="text-sm lg:text-base mb-5 md:mb-6 "
|
||
>
|
||
<i class="fa fa-check-circle leading-1 text-green float-right clear-both pl-1.5 mt-1.5"></i>
|
||
Successfully added to your Wishlist
|
||
</p>
|
||
<!-- action -->
|
||
<div>
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black hover:bg-primary-cogroup-lor z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<a
|
||
href="wishlist.html"
|
||
class="relative z-10 px-5 py-5px group-hover:text-heading-color leading-23px"
|
||
>View Wishlist</a
|
||
>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- modal wishlist 2-->
|
||
<div
|
||
class="modal hidden fixed top-0 left-0 w-full h-full z-xxl transition-all duration-500 bg-lightBlack opacity-0 overflow-y-auto"
|
||
>
|
||
<div
|
||
class="modal-close fixed md:absolute top-0 left-0 w-full h-full z-xsmall cursor-zoom-out"
|
||
></div>
|
||
|
||
<div
|
||
class="modal-content transition-all duration-500 -translate-y-20 max-w-500px m-2 mt-150px sm:mx-auto relative z-small p-30px bg-white"
|
||
>
|
||
<div class="flex">
|
||
<div class="w-125px ml-5 flex-shrink-0">
|
||
<img src="./assets/img/product/4.png" class="w-full" alt="" >
|
||
</div>
|
||
|
||
<!-- card body -->
|
||
<div class="pl-25px">
|
||
<div class="absolute left-4 top-4">
|
||
<button
|
||
class="modal-close w-10 h-10 leading-10 text-center bg-black bg-opacity-5 text-black text-25px inline-block"
|
||
>
|
||
<span>×</span>
|
||
</button>
|
||
</div>
|
||
|
||
<h4
|
||
class="text-base lg:text-lg font-bold text-heading-color mb-10px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
>3 Rooms Manhattan</a
|
||
>
|
||
</h4>
|
||
|
||
<p
|
||
class="text-sm lg:text-base mb-5 md:mb-6 "
|
||
>
|
||
<i class="fa fa-check-circle leading-1 text-green float-right clear-both pl-1.5 mt-1.5"></i>
|
||
Successfully added to your Wishlist
|
||
</p>
|
||
<!-- action -->
|
||
<div>
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black hover:bg-primary-cogroup-lor z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<a
|
||
href="wishlist.html"
|
||
class="relative z-10 px-5 py-5px group-hover:text-heading-color leading-23px"
|
||
>View Wishlist</a
|
||
>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- services section -->
|
||
<section class="bg-section-bg-1">
|
||
<div class="container pt-30 pb-90px">
|
||
<!-- section heading -->
|
||
<div class="text-center mb-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize 1b-15px py-0.5 px-5 mb-15px rounded-full inline-block font-semibold"
|
||
>
|
||
<span class="leading-1.3">Our Services</span>
|
||
</p>
|
||
<h2
|
||
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
|
||
>
|
||
<span class="leading-1.3"> Our Main Focus </span>
|
||
</h2>
|
||
</div>
|
||
<!-- services cards -->
|
||
|
||
<div
|
||
class="service-cards flex flex-wrap justify-center items-center text-center -mx-15px"
|
||
>
|
||
<!-- card 1 -->
|
||
<div
|
||
class="service-card basis-full sm:basis-1/2 lg:basis-1/3 px-15px mb-30px"
|
||
>
|
||
<div
|
||
class="border border-border-color-1 shadow-box-shadow-1 bg-white relative py-10 pb-35px px-30px transition-all duration-300"
|
||
>
|
||
<div class="text-center mb-5">
|
||
<img
|
||
src="./assets/img/icons/icon-img/21.png"
|
||
alt=""
|
||
class="inline-block"
|
||
>
|
||
</div>
|
||
<h6
|
||
class="text-lg md:text-xl lg:text-22px xl:text-2xl text-heading-color font-bold"
|
||
>
|
||
<a
|
||
class="hover:text-secondary-color leading-1.3 mb-1"
|
||
href="service-details.html"
|
||
>Buy a home</a
|
||
>
|
||
</h6>
|
||
<p class="text-sm mb-25px">
|
||
<span class="leading-1.8"
|
||
>over 1 million+ homes for sale available on the website, we
|
||
can match you with a house you will want to call home.</span
|
||
>
|
||
</p>
|
||
<div class="text-sm text-color-1 font-bold">
|
||
<a
|
||
class="find-service hover:text-secondary-color flex items-center justify-center"
|
||
href="service-details.html"
|
||
>Find A Home
|
||
<i class="flaticon-right-arrow inline-block leading-1"></i
|
||
></a>
|
||
</div>
|
||
<span
|
||
class="hover-line absolute bottom-0 left-0 w-0 h-1 bg-secondary-color transition-all duration-300 block"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<!-- card 2 -->
|
||
<div
|
||
class="service-card active basis-full sm:basis-1/2 lg:basis-1/3 px-15px mb-30px"
|
||
>
|
||
<div
|
||
class="border border-border-color-1 shadow-box-shadow-1 bg-white relative py-10 pb-35px px-30px transition-all duration-300"
|
||
>
|
||
<div class="text-center mb-5">
|
||
<img
|
||
src="./assets/img/icons/icon-img/22.png"
|
||
alt=""
|
||
class="inline-block"
|
||
>
|
||
</div>
|
||
<h6
|
||
class="text-lg md:text-xl lg:text-22px xl:text-2xl text-heading-color font-bold"
|
||
>
|
||
<a
|
||
class="hover:text-secondary-color leading-1.3 mb-1"
|
||
href="service-details.html"
|
||
>Rent a home</a
|
||
>
|
||
</h6>
|
||
<p class="text-sm mb-25px">
|
||
<span class="leading-1.8"
|
||
>over 1 million+ homes for sale available on the website, we
|
||
can match you with a house you will want to call home.</span
|
||
>
|
||
</p>
|
||
<div class="text-sm text-color-1 font-bold">
|
||
<a
|
||
class="find-service hover:text-secondary-color flex items-center justify-center"
|
||
href="service-details.html"
|
||
>Find A Home
|
||
<i class="flaticon-right-arrow inline-block leading-1"></i
|
||
></a>
|
||
</div>
|
||
<span
|
||
class="hover-line absolute bottom-0 left-0 w-0 h-1 bg-secondary-color transition-all duration-300 block"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<!-- card 3 -->
|
||
<div
|
||
class="service-card basis-full sm:basis-1/2 lg:basis-1/3 px-15px mb-30px"
|
||
>
|
||
<div
|
||
class="border border-border-color-1 shadow-box-shadow-1 bg-white relative py-10 pb-35px px-30px transition-all duration-300"
|
||
>
|
||
<div class="text-center mb-5">
|
||
<img
|
||
src="./assets/img/icons/icon-img/23.png"
|
||
alt=""
|
||
class="inline-block"
|
||
>
|
||
</div>
|
||
<h6
|
||
class="text-lg md:text-xl lg:text-22px xl:text-2xl text-heading-color font-bold"
|
||
>
|
||
<a
|
||
class="hover:text-secondary-color leading-1.3 mb-1"
|
||
href="service-details.html"
|
||
>Sell a home</a
|
||
>
|
||
</h6>
|
||
<p class="text-sm mb-25px">
|
||
<span class="leading-1.8"
|
||
>over 1 million+ homes for sale available on the website, we
|
||
can match you with a house you will want to call home.</span
|
||
>
|
||
</p>
|
||
<div class="text-sm text-color-1 font-bold">
|
||
<a
|
||
class="find-service hover:text-secondary-color flex items-center justify-center"
|
||
href="service-details.html"
|
||
>Find A Home
|
||
<i class="flaticon-right-arrow inline-block leading-1"></i
|
||
></a>
|
||
</div>
|
||
<span
|
||
class="hover-line absolute bottom-0 left-0 w-0 h-1 bg-secondary-color transition-all duration-300 block"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- featured appartments section -->
|
||
<section>
|
||
<div class="container-3 pt-115px pb-[75px] modal-container">
|
||
<!-- section heading -->
|
||
<div class="text-center mb-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize 1b-15px py-0.5 px-5 mb-15px rounded-full inline-block font-semibold"
|
||
>
|
||
<span class="leading-1.3">Properties</span>
|
||
</p>
|
||
<h2
|
||
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
|
||
>
|
||
<span class="leading-1.3">Featured Listings </span>
|
||
</h2>
|
||
</div>
|
||
<div class="featured-apartments swiper-container relative">
|
||
<!-- apartment cards -->
|
||
<div class="swiper featured-apartments-slider static">
|
||
<div class="swiper-wrapper">
|
||
<!-- card 1 -->
|
||
<div class="swiper-slide mb-65px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/1.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
<div
|
||
class="absolute w-full left-0 bottom-0 px-15px pb-15px lg:px-30px bg-transparent bg-gradient-color-5"
|
||
>
|
||
<div
|
||
class="text-sm text-white flex justify-between items-center"
|
||
>
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i class="flaticon-pin"></i> Belmont Gardens,
|
||
Chicago</a
|
||
>
|
||
<ul class="flex gap-10px">
|
||
<li>
|
||
<a
|
||
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
|
||
href="product-details.html"
|
||
><i class="fas fa-camera pr-1 leading-1"></i>
|
||
4</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
|
||
href="product-details.html"
|
||
><i class="fas fa-film pr-1 leading-1"></i> 2</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="text-xs sm:text-13px text-white px-10px py-1 sm:px-15px sm:pt-3px sm:pb-0 bg-green uppercase font-semibold absolute top-[15px] left-[18px]"
|
||
>
|
||
<span class="leading-5 sm:leading-25px block"
|
||
>for rent</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-4 lg:px-30px lg:pt-5">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>New Apartment Nice View</a
|
||
>
|
||
</h4>
|
||
<p class="text-sm mb-15px">
|
||
<span class="leading-1.8"
|
||
>Beautiful Huge 1 Family House In Heart Of
|
||
<br >Westbury. Newly Renovated With New Wood</span
|
||
>
|
||
</p>
|
||
|
||
<ul class="flex flex-wrap gap-15px py-4">
|
||
<li
|
||
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
|
||
>
|
||
<p class="leading-1.8 font-bold">
|
||
3<i class="flaticon-bed ml-1"></i>
|
||
</p>
|
||
<p class="leading-1.8">Bedrooms</p>
|
||
</li>
|
||
<li
|
||
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
|
||
>
|
||
<p class="leading-1.8 font-bold">
|
||
2<i class="flaticon-clean ml-1"></i>
|
||
</p>
|
||
<p class="leading-1.8">Bedrooms</p>
|
||
</li>
|
||
|
||
<li class="text-sm">
|
||
<p class="leading-1.8 font-bold">
|
||
3450<i
|
||
class="flaticon-square-shape-design-interface-tool-symbol ml-1"
|
||
></i>
|
||
</p>
|
||
<p class="leading-1.8">square Ft</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div
|
||
class="p-5 lg:p-30px lg:pt-5 border-t border-border-color-1"
|
||
>
|
||
<div
|
||
class="flex flex-wrap-reverse items-center justify-between gap-y-5"
|
||
>
|
||
<div class="flex gap-x-3">
|
||
<a href="team-details.html" class="w-10 h-10"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100%"
|
||
></a>
|
||
<div>
|
||
<h4
|
||
class="text-sm font-semibold text-heading-color mb-0"
|
||
>
|
||
<a
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
href="team-details.html"
|
||
>William Seklo</a
|
||
>
|
||
</h4>
|
||
<span class="text-xs"> Estate Agents </span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 2 -->
|
||
<div class="swiper-slide mb-65px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/2.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
<div
|
||
class="absolute w-full left-0 bottom-0 px-15px pb-15px lg:px-30px bg-transparent bg-gradient-color-5"
|
||
>
|
||
<div
|
||
class="text-sm text-white flex justify-between items-center"
|
||
>
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i class="flaticon-pin"></i> Belmont Gardens,
|
||
Chicago</a
|
||
>
|
||
<ul class="flex gap-10px">
|
||
<li>
|
||
<a
|
||
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
|
||
href="product-details.html"
|
||
><i class="fas fa-camera pr-1 leading-1"></i>
|
||
4</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
|
||
href="product-details.html"
|
||
><i class="fas fa-film pr-1 leading-1"></i> 2</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="text-xs sm:text-13px text-white px-10px py-1 sm:px-15px sm:pt-3px sm:pb-0 bg-secondary-color uppercase font-semibold absolute top-[15px] left-[18px]"
|
||
>
|
||
<span class="leading-5 sm:leading-25px block"
|
||
>for rent</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-4 lg:px-30px lg:pt-5">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>Modern Apartments</a
|
||
>
|
||
</h4>
|
||
<p class="text-sm mb-15px">
|
||
<span class="leading-1.8"
|
||
>Beautiful Huge 1 Family House In Heart Of
|
||
<br >Westbury. Newly Renovated With New Wood</span
|
||
>
|
||
</p>
|
||
|
||
<ul class="flex flex-wrap gap-15px py-4">
|
||
<li
|
||
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
|
||
>
|
||
<p class="leading-1.8 font-bold">
|
||
3<i class="flaticon-bed ml-1"></i>
|
||
</p>
|
||
<p class="leading-1.8">Bedrooms</p>
|
||
</li>
|
||
<li
|
||
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
|
||
>
|
||
<p class="leading-1.8 font-bold">
|
||
2<i class="flaticon-clean ml-1"></i>
|
||
</p>
|
||
<p class="leading-1.8">Bedrooms</p>
|
||
</li>
|
||
|
||
<li class="text-sm">
|
||
<p class="leading-1.8 font-bold">
|
||
3450<i
|
||
class="flaticon-square-shape-design-interface-tool-symbol ml-1"
|
||
></i>
|
||
</p>
|
||
<p class="leading-1.8">square Ft</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div
|
||
class="p-5 lg:p-30px lg:pt-5 border-t border-border-color-1"
|
||
>
|
||
<div
|
||
class="flex flex-wrap-reverse items-center justify-between gap-y-5"
|
||
>
|
||
<div class="flex gap-x-3">
|
||
<a href="team-details.html" class="w-10 h-10"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100%"
|
||
></a>
|
||
<div>
|
||
<h4
|
||
class="text-sm font-semibold text-heading-color mb-0"
|
||
>
|
||
<a
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
href="team-details.html"
|
||
>William Seklo</a
|
||
>
|
||
</h4>
|
||
<span class="text-xs"> Estate Agents </span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 3 -->
|
||
<div class="swiper-slide mb-65px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/3.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
<div
|
||
class="absolute w-full left-0 bottom-0 px-15px pb-15px lg:px-30px bg-transparent bg-gradient-color-5"
|
||
>
|
||
<div
|
||
class="text-sm text-white flex justify-between items-center"
|
||
>
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i class="flaticon-pin"></i> Belmont Gardens,
|
||
Chicago</a
|
||
>
|
||
<ul class="flex gap-10px">
|
||
<li>
|
||
<a
|
||
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
|
||
href="product-details.html"
|
||
><i class="fas fa-camera pr-1 leading-1"></i>
|
||
4</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
|
||
href="product-details.html"
|
||
><i class="fas fa-film pr-1 leading-1"></i> 2</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="text-xs sm:text-13px text-white px-10px py-1 sm:px-15px sm:pt-3px sm:pb-0 bg-green uppercase font-semibold absolute top-[15px] left-[18px]"
|
||
>
|
||
<span class="leading-5 sm:leading-25px block"
|
||
>for rent</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-4 lg:px-30px lg:pt-5">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>Comfortable Apartment</a
|
||
>
|
||
</h4>
|
||
<p class="text-sm mb-15px">
|
||
<span class="leading-1.8"
|
||
>Beautiful Huge 1 Family House In Heart Of
|
||
<br >Westbury. Newly Renovated With New Wood</span
|
||
>
|
||
</p>
|
||
|
||
<ul class="flex flex-wrap gap-15px py-4">
|
||
<li
|
||
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
|
||
>
|
||
<p class="leading-1.8 font-bold">
|
||
3<i class="flaticon-bed ml-1"></i>
|
||
</p>
|
||
<p class="leading-1.8">Bedrooms</p>
|
||
</li>
|
||
<li
|
||
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
|
||
>
|
||
<p class="leading-1.8 font-bold">
|
||
2<i class="flaticon-clean ml-1"></i>
|
||
</p>
|
||
<p class="leading-1.8">Bedrooms</p>
|
||
</li>
|
||
|
||
<li class="text-sm">
|
||
<p class="leading-1.8 font-bold">
|
||
3450<i
|
||
class="flaticon-square-shape-design-interface-tool-symbol ml-1"
|
||
></i>
|
||
</p>
|
||
<p class="leading-1.8">square Ft</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div
|
||
class="p-5 lg:p-30px lg:pt-5 border-t border-border-color-1"
|
||
>
|
||
<div
|
||
class="flex flex-wrap-reverse items-center justify-between gap-y-5"
|
||
>
|
||
<div class="flex gap-x-3">
|
||
<a href="team-details.html" class="w-10 h-10"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100%"
|
||
></a>
|
||
<div>
|
||
<h4
|
||
class="text-sm font-semibold text-heading-color mb-0"
|
||
>
|
||
<a
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
href="team-details.html"
|
||
>William Seklo</a
|
||
>
|
||
</h4>
|
||
<span class="text-xs"> Estate Agents </span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 4 -->
|
||
<div class="swiper-slide mb-65px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/4.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
<div
|
||
class="absolute w-full left-0 bottom-0 px-15px pb-15px lg:px-30px bg-transparent bg-gradient-color-5"
|
||
>
|
||
<div
|
||
class="text-sm text-white flex justify-between items-center"
|
||
>
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i class="flaticon-pin"></i> Belmont Gardens,
|
||
Chicago</a
|
||
>
|
||
<ul class="flex gap-10px">
|
||
<li>
|
||
<a
|
||
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
|
||
href="product-details.html"
|
||
><i class="fas fa-camera pr-1 leading-1"></i>
|
||
4</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
|
||
href="product-details.html"
|
||
><i class="fas fa-film pr-1 leading-1"></i> 2</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="text-xs sm:text-13px text-white px-10px py-1 sm:px-15px sm:pt-3px sm:pb-0 bg-green uppercase font-semibold absolute top-[15px] left-[18px]"
|
||
>
|
||
<span class="leading-5 sm:leading-25px block"
|
||
>for rent</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-4 lg:px-30px lg:pt-5">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>Luxury villa in Rego Park</a
|
||
>
|
||
</h4>
|
||
<p class="text-sm mb-15px">
|
||
<span class="leading-1.8"
|
||
>Beautiful Huge 1 Family House In Heart Of
|
||
<br >Westbury. Newly Renovated With New Wood</span
|
||
>
|
||
</p>
|
||
|
||
<ul class="flex flex-wrap gap-15px py-4">
|
||
<li
|
||
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
|
||
>
|
||
<p class="leading-1.8 font-bold">
|
||
3<i class="flaticon-bed ml-1"></i>
|
||
</p>
|
||
<p class="leading-1.8">Bedrooms</p>
|
||
</li>
|
||
<li
|
||
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
|
||
>
|
||
<p class="leading-1.8 font-bold">
|
||
2<i class="flaticon-clean ml-1"></i>
|
||
</p>
|
||
<p class="leading-1.8">Bedrooms</p>
|
||
</li>
|
||
|
||
<li class="text-sm">
|
||
<p class="leading-1.8 font-bold">
|
||
3450<i
|
||
class="flaticon-square-shape-design-interface-tool-symbol ml-1"
|
||
></i>
|
||
</p>
|
||
<p class="leading-1.8">square Ft</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div
|
||
class="p-5 lg:p-30px lg:pt-5 border-t border-border-color-1"
|
||
>
|
||
<div
|
||
class="flex flex-wrap-reverse items-center justify-between gap-y-5"
|
||
>
|
||
<div class="flex gap-x-3">
|
||
<a href="team-details.html" class="w-10 h-10"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100%"
|
||
></a>
|
||
<div>
|
||
<h4
|
||
class="text-sm font-semibold text-heading-color mb-0"
|
||
>
|
||
<a
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
href="team-details.html"
|
||
>William Seklo</a
|
||
>
|
||
</h4>
|
||
<span class="text-xs"> Estate Agents </span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 5 -->
|
||
<div class="swiper-slide mb-65px px-15px">
|
||
<div
|
||
class="group border border-border-color-13 shadow-box-shadow-4"
|
||
>
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a
|
||
href="product-details.html"
|
||
class="overflow-hidden"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/5.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
<div
|
||
class="absolute w-full left-0 bottom-0 px-15px pb-15px lg:px-30px bg-transparent bg-gradient-color-5"
|
||
>
|
||
<div
|
||
class="text-sm text-white flex justify-between items-center"
|
||
>
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color"
|
||
><i class="flaticon-pin"></i> Belmont Gardens,
|
||
Chicago</a
|
||
>
|
||
<ul class="flex gap-10px">
|
||
<li>
|
||
<a
|
||
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
|
||
href="product-details.html"
|
||
><i class="fas fa-camera pr-1 leading-1"></i>
|
||
4</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
|
||
href="product-details.html"
|
||
><i class="fas fa-film pr-1 leading-1"></i> 2</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="text-xs sm:text-13px text-white px-10px py-1 sm:px-15px sm:pt-3px sm:pb-0 bg-green uppercase font-semibold absolute top-[15px] left-[18px]"
|
||
>
|
||
<span class="leading-5 sm:leading-25px block"
|
||
>for rent</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="px-5 pt-4 lg:px-30px lg:pt-5">
|
||
<h5
|
||
class="text-lg text-secondary-color font-semibold mb-5px"
|
||
>
|
||
<span class="leading-1.8">$34,900</span>
|
||
<label class="text-sm font-normal">/Month</label>
|
||
</h5>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>Beautiful Flat in Manhattan</a
|
||
>
|
||
</h4>
|
||
<p class="text-sm mb-15px">
|
||
<span class="leading-1.8"
|
||
>Beautiful Huge 1 Family House In Heart Of
|
||
<br >Westbury. Newly Renovated With New Wood</span
|
||
>
|
||
</p>
|
||
|
||
<ul class="flex flex-wrap gap-15px py-4">
|
||
<li
|
||
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
|
||
>
|
||
<p class="leading-1.8 font-bold">
|
||
3<i class="flaticon-bed ml-1"></i>
|
||
</p>
|
||
<p class="leading-1.8">Bedrooms</p>
|
||
</li>
|
||
<li
|
||
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
|
||
>
|
||
<p class="leading-1.8 font-bold">
|
||
2<i class="flaticon-clean ml-1"></i>
|
||
</p>
|
||
<p class="leading-1.8">Bedrooms</p>
|
||
</li>
|
||
|
||
<li class="text-sm">
|
||
<p class="leading-1.8 font-bold">
|
||
3450<i
|
||
class="flaticon-square-shape-design-interface-tool-symbol ml-1"
|
||
></i>
|
||
</p>
|
||
<p class="leading-1.8">square Ft</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div
|
||
class="p-5 lg:p-30px lg:pt-5 border-t border-border-color-1"
|
||
>
|
||
<div
|
||
class="flex flex-wrap-reverse items-center justify-between gap-y-5"
|
||
>
|
||
<div class="flex gap-x-3">
|
||
<a href="team-details.html" class="w-10 h-10"
|
||
><img
|
||
src="./assets/img/blog/author.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100%"
|
||
></a>
|
||
<div>
|
||
<h4
|
||
class="text-sm font-semibold text-heading-color mb-0"
|
||
>
|
||
<a
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
href="team-details.html"
|
||
>William Seklo</a
|
||
>
|
||
</h4>
|
||
<span class="text-xs"> Estate Agents </span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex gap-x-2">
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="1"
|
||
>
|
||
<i class="flaticon-expand leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
data-modal-index="2"
|
||
>
|
||
<i class="flaticon-heart-1 leading-1"></i>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
|
||
><i class="flaticon-add leading-1"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- pagination -->
|
||
<div
|
||
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal !-bottom-[6px]"
|
||
>
|
||
<span
|
||
class="swiper-pagination-bullet"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-label="Go to slide 1"
|
||
></span
|
||
><span
|
||
class="swiper-pagination-bullet swiper-pagination-bullet-active"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-label="Go to slide 2"
|
||
aria-current="true"
|
||
></span
|
||
><span
|
||
class="swiper-pagination-bullet"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-label="Go to slide 3"
|
||
></span>
|
||
</div>
|
||
<!-- navigation -->
|
||
<div class="hidden 3xl:block">
|
||
<div class="swiper-button-next z-1">
|
||
<i class="fas fa-arrow-left " ></i>
|
||
</div>
|
||
<div class="swiper-button-prev z-1">
|
||
<i class="fas fa-arrow-right " ></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- modals -->
|
||
<!-- modal apartment details-->
|
||
<div
|
||
class="modal hidden fixed top-0 left-0 w-full h-full z-xxl transition-all duration-500 bg-lightBlack opacity-0 overflow-y-auto"
|
||
>
|
||
<div
|
||
class="modal-close fixed md:absolute top-0 left-0 w-full h-full z-xsmall cursor-zoom-out"
|
||
></div>
|
||
<div
|
||
class="modal-content transition-all duration-500 -translate-y-20 sm:max-w-500px lg:max-w-980px m-2 mt-150px sm:mx-auto relative z-small rounded-lg"
|
||
>
|
||
<div
|
||
class="grid grid-cols-1 lg:grid-cols-2 gap-x-30px p-30px bg-white relative"
|
||
>
|
||
<div>
|
||
<img
|
||
src="./assets/img/product/4.png"
|
||
class="w-full"
|
||
alt=""
|
||
>
|
||
</div>
|
||
|
||
<!-- card body -->
|
||
<div class="pl-25px">
|
||
<div class="absolute left-4 top-4">
|
||
<button
|
||
class="modal-close w-10 h-10 leading-10 text-center bg-section-bg-1 text-black text-25px inline-block"
|
||
>
|
||
<span>×</span>
|
||
</button>
|
||
</div>
|
||
<ul class="flex items-center mb-5px">
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
><i class="fas fa-star leading-1.8"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
><i class="fas fa-star leading-1.8"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
><i class="fas fa-star leading-1.8"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
><i class="fas fa-star-half-alt leading-1.8"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
><i class="far fa-star leading-1.8"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-xs text-ratings hover:text-secondary-color"
|
||
>
|
||
( 95 Reviews )</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
|
||
<h4
|
||
class="text-22px md:text-2xl font-bold text-heading-color mb-0"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
>3 Rooms Manhattan</a
|
||
>
|
||
</h4>
|
||
<p
|
||
class="text-34px md:text-50px text-secondary-color font-semibold mb-5 pb-0 border-b border-border-color-12 border-opacity-25 leading-1.2"
|
||
>
|
||
<span>$34,900</span>
|
||
<del
|
||
class="text-26px md:text-40px leading-1.2 opacity-60 pl-1"
|
||
>$36,500</del
|
||
>
|
||
</p>
|
||
<p class="text-sm lg:text-base mb-9 md:mb-10">
|
||
<span class="leading-1.8"
|
||
>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||
Dignissimos repellendus repudiandae incidunt quidem
|
||
pariatur expedita, quo quis modi tempore non.</span
|
||
>
|
||
</p>
|
||
|
||
<ul
|
||
class="flex flex-wrap gap-5 pb-5 mb-5 border-b border-border-color-12 border-opacity-25"
|
||
>
|
||
<li class="text-sm">
|
||
<button
|
||
class="modal-open leading-1.8 font-semibold hover:text-secondary-color transition-all duration-300"
|
||
data-modal-index="3"
|
||
>
|
||
<i class="far fa-heart px-0.5"></i> Add to Wishlist
|
||
</button>
|
||
</li>
|
||
|
||
<li class="text-sm">
|
||
<button
|
||
class="leading-1.8 font-semibold hover:text-secondary-color transition-all duration-300"
|
||
>
|
||
<i class="fas fa-exchange-alt px-0.5"></i> Compare
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
<!-- social area -->
|
||
<ul class="flex gap-x-[18px] items-center">
|
||
<li>
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8">Share: </span>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.facebook.com/"
|
||
class="text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
<i class="fab fa-facebook-f leading-1.8"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://x.com/"
|
||
class="text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
<i class="fab fa-twitter leading-1.8"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.linkedin.com/"
|
||
class="text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
<i class="fab fa-linkedin leading-1.8"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.instagram.com/"
|
||
class="text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
<i class="fab fa-instagram leading-1.8"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- action -->
|
||
<div class="text-end">
|
||
<a
|
||
href="product-details.html"
|
||
class="text-xs hover:text-secondary-color underline hover:underline"
|
||
>
|
||
<span class="leading-1.8">View Details</span></a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- modal wishlist 1-->
|
||
<div
|
||
class="modal hidden fixed top-0 left-0 w-full h-full z-xxl transition-all duration-500 bg-lightBlack opacity-0 overflow-y-auto"
|
||
>
|
||
<div
|
||
class="modal-close fixed md:absolute top-0 left-0 w-full h-full z-xsmall cursor-zoom-out"
|
||
></div>
|
||
|
||
<div
|
||
class="modal-content transition-all duration-500 -translate-y-20 max-w-500px m-2 mt-150px sm:mx-auto relative z-small p-30px bg-white"
|
||
>
|
||
<div class="flex">
|
||
<div class="w-125px ml-5 flex-shrink-0">
|
||
<img src="./assets/img/product/4.png" class="w-full" alt="" >
|
||
</div>
|
||
|
||
<!-- card body -->
|
||
<div class="pl-25px">
|
||
<div class="absolute left-4 top-4">
|
||
<button
|
||
class="modal-close w-10 h-10 leading-10 text-center bg-black bg-opacity-5 text-black text-25px inline-block"
|
||
>
|
||
<span>×</span>
|
||
</button>
|
||
</div>
|
||
|
||
<h4
|
||
class="text-base lg:text-lg font-bold text-heading-color mb-10px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
>3 Rooms Manhattan</a
|
||
>
|
||
</h4>
|
||
|
||
<p
|
||
class="text-sm lg:text-base mb-5 md:mb-6 "
|
||
>
|
||
<i class="fa fa-check-circle leading-1 text-green float-right clear-both pl-1.5 mt-1.5"></i>
|
||
Successfully added to your Wishlist
|
||
</p>
|
||
<!-- action -->
|
||
<div>
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black hover:bg-primary-cogroup-lor z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<a
|
||
href="wishlist.html"
|
||
class="relative z-10 px-5 py-5px group-hover:text-heading-color leading-23px"
|
||
>View Wishlist</a
|
||
>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- modal wishlist 2-->
|
||
<div
|
||
class="modal hidden fixed top-0 left-0 w-full h-full z-xxl transition-all duration-500 bg-lightBlack opacity-0 overflow-y-auto"
|
||
>
|
||
<div
|
||
class="modal-close fixed md:absolute top-0 left-0 w-full h-full z-xsmall cursor-zoom-out"
|
||
></div>
|
||
|
||
<div
|
||
class="modal-content transition-all duration-500 -translate-y-20 max-w-500px m-2 mt-150px sm:mx-auto relative z-small p-30px bg-white"
|
||
>
|
||
<div class="flex">
|
||
<div class="w-125px ml-5 flex-shrink-0">
|
||
<img src="./assets/img/product/4.png" class="w-full" alt="" >
|
||
</div>
|
||
|
||
<!-- card body -->
|
||
<div class="pl-25px">
|
||
<div class="absolute left-4 top-4">
|
||
<button
|
||
class="modal-close w-10 h-10 leading-10 text-center bg-black bg-opacity-5 text-black text-25px inline-block"
|
||
>
|
||
<span>×</span>
|
||
</button>
|
||
</div>
|
||
|
||
<h4
|
||
class="text-base lg:text-lg font-bold text-heading-color mb-10px"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
>3 Rooms Manhattan</a
|
||
>
|
||
</h4>
|
||
|
||
<p
|
||
class="text-sm lg:text-base mb-5 md:mb-6 "
|
||
>
|
||
<i class="fa fa-check-circle leading-1 text-green float-right clear-both pl-1.5 mt-1.5"></i>
|
||
Successfully added to your Wishlist
|
||
</p>
|
||
<!-- action -->
|
||
<div>
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black hover:bg-primary-cogroup-lor z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<a
|
||
href="wishlist.html"
|
||
class="relative z-10 px-5 py-5px group-hover:text-heading-color leading-23px"
|
||
>View Wishlist</a
|
||
>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- appartments plan section -->
|
||
<section>
|
||
<div class="container pb-30">
|
||
<!-- section heading -->
|
||
<div class="text-center mb-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize 1b-15px py-0.5 px-5 mb-15px rounded-full inline-block font-semibold"
|
||
>
|
||
<span class="leading-1.3">Apartment Sketch</span>
|
||
</p>
|
||
<h2
|
||
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
|
||
>
|
||
<span class="leading-1.3">Apartments Plan </span>
|
||
</h2>
|
||
</div>
|
||
<!-- plan tab -->
|
||
<div class="tab plan-tab">
|
||
<div
|
||
class="tab-links flex flex-wrap items-center justify-center gap-x-5 lg:gap-x-30px xl:gap-x-50px gap-y-10px text-sm lg:text-lg xl:text-xl text-heading-color mb-50px"
|
||
>
|
||
<button
|
||
class="p-1px border-b-2 border-transparent font-semibold relative leading-1.2 after:w-10px after:h-10px after:border-3px after:border-white after:bg-transparent after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:translate-y-1/2 after:z-10 after:rounded-100%"
|
||
>
|
||
The Studio
|
||
</button>
|
||
|
||
<button
|
||
class="active p-1px border-b-2 border-transparent font-semibold relative leading-1.2 after:w-10px after:h-10px after:border-3px after:border-white after:bg-transparent after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:translate-y-1/2 after:z-10 after:rounded-100%"
|
||
>
|
||
Deluxe Portion
|
||
</button>
|
||
|
||
<button
|
||
class="p-1px border-b-2 border-transparent font-semibold relative leading-1.2 after:w-10px after:h-10px after:border-3px after:border-white after:bg-transparent after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:translate-y-1/2 after:z-10 after:rounded-100%"
|
||
>
|
||
Penthouse
|
||
</button>
|
||
|
||
<button
|
||
class="p-1px border-b-2 border-transparent font-semibold relative leading-1.2 after:w-10px after:h-10px after:border-3px after:border-white after:bg-transparent after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:translate-y-1/2 after:z-10 after:rounded-100%"
|
||
>
|
||
Top Garden
|
||
</button>
|
||
|
||
<button
|
||
class="p-1px border-b-2 border-transparent font-semibold relative leading-1.2 after:w-10px after:h-10px after:border-3px after:border-white after:bg-transparent after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:translate-y-1/2 after:z-10 after:rounded-100%"
|
||
>
|
||
Double Height
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tab-contents">
|
||
<!-- content 1 -->
|
||
<div class="hidden opacity-0">
|
||
<div
|
||
class="grid grid-cols-1 lg:grid-cols-2 gap-x-30px gap-y-50px"
|
||
>
|
||
<div class="p-30px md:p-70px bg-secondary-color">
|
||
<h6
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl font-bold text-white mb-15px leading-1.3"
|
||
>
|
||
<span class="leading-1.3"> The Studio </span>
|
||
</h6>
|
||
<p class="text-sm lg:text-base text-white mb-10">
|
||
<span class="leading-1.8"
|
||
>Enimad minim veniam quis nostrud exercitation ullamco
|
||
laboris. Lorem ipsum dolor sit amet cons aetetur
|
||
adipisicing elit sedo eiusmod tempor.Incididunt labore
|
||
et dolore magna aliqua. sed ayd minim veniam.</span
|
||
>
|
||
</p>
|
||
<ul class="flex flex-col gap-y-10px items-stretch">
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Total Area
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
2800 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Bedroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
150 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Bathroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
45 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Belcony/Pets
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
Allowed
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Lounge
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
650 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<img
|
||
src="./assets/img/others/10.png"
|
||
class="w-full"
|
||
alt="#"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- content 2 -->
|
||
<div class="opacity-100">
|
||
<div
|
||
class="grid grid-cols-1 lg:grid-cols-2 gap-x-30px gap-y-50px"
|
||
>
|
||
<div class="p-30px md:p-70px bg-secondary-color">
|
||
<h6
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl font-bold text-white mb-15px leading-1.3"
|
||
>
|
||
<span class="leading-1.3"> Deluxe Portion </span>
|
||
</h6>
|
||
<p class="text-sm lg:text-base text-white mb-10">
|
||
<span class="leading-1.8"
|
||
>Enimad minim veniam quis nostrud exercitation ullamco
|
||
laboris. Lorem ipsum dolor sit amet cons aetetur
|
||
adipisicing elit sedo eiusmod tempor.Incididunt labore
|
||
et dolore magna aliqua. sed ayd minim veniam.</span
|
||
>
|
||
</p>
|
||
<ul class="flex flex-col gap-y-10px items-stretch">
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Total Area
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
2800 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Bedroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
150 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Bathroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
45 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Belcony/Pets
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
Allowed
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Lounge
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
650 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<img
|
||
src="./assets/img/others/10.png"
|
||
class="w-full"
|
||
alt="#"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- content 3 -->
|
||
<div class="hidden opacity-0">
|
||
<div
|
||
class="grid grid-cols-1 lg:grid-cols-2 gap-x-30px gap-y-50px"
|
||
>
|
||
<div class="p-30px md:p-70px bg-secondary-color">
|
||
<h6
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl font-bold text-white mb-15px leading-1.3"
|
||
>
|
||
<span class="leading-1.3"> Penthouse </span>
|
||
</h6>
|
||
<p class="text-sm lg:text-base text-white mb-10">
|
||
<span class="leading-1.8"
|
||
>Enimad minim veniam quis nostrud exercitation ullamco
|
||
laboris. Lorem ipsum dolor sit amet cons aetetur
|
||
adipisicing elit sedo eiusmod tempor.Incididunt labore
|
||
et dolore magna aliqua. sed ayd minim veniam.</span
|
||
>
|
||
</p>
|
||
<ul class="flex flex-col gap-y-10px items-stretch">
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Total Area
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
2800 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Bedroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
150 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Bathroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
45 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Belcony/Pets
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
Allowed
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Lounge
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
650 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<img
|
||
src="./assets/img/others/10.png"
|
||
class="w-full"
|
||
alt="#"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- content 4 -->
|
||
<div class="hidden opacity-0">
|
||
<div
|
||
class="grid grid-cols-1 lg:grid-cols-2 gap-x-30px gap-y-50px"
|
||
>
|
||
<div class="p-30px md:p-70px bg-secondary-color">
|
||
<h6
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl font-bold text-white mb-15px leading-1.3"
|
||
>
|
||
<span class="leading-1.3"> Top Garden </span>
|
||
</h6>
|
||
<p class="text-sm lg:text-base text-white mb-10">
|
||
<span class="leading-1.8"
|
||
>Enimad minim veniam quis nostrud exercitation ullamco
|
||
laboris. Lorem ipsum dolor sit amet cons aetetur
|
||
adipisicing elit sedo eiusmod tempor.Incididunt labore
|
||
et dolore magna aliqua. sed ayd minim veniam.</span
|
||
>
|
||
</p>
|
||
<ul class="flex flex-col gap-y-10px items-stretch">
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Total Area
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
2800 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Bedroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
150 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Bathroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
45 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Belcony/Pets
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
Allowed
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Lounge
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
650 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<img
|
||
src="./assets/img/others/10.png"
|
||
class="w-full"
|
||
alt="#"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- content 5 -->
|
||
<div class="hidden opacity-0">
|
||
<div
|
||
class="grid grid-cols-1 lg:grid-cols-2 gap-x-30px gap-y-50px"
|
||
>
|
||
<div class="p-30px md:p-70px bg-secondary-color">
|
||
<h6
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl font-bold text-white mb-15px leading-1.3"
|
||
>
|
||
<span class="leading-1.3"> Double Height </span>
|
||
</h6>
|
||
<p class="text-sm lg:text-base text-white mb-10">
|
||
<span class="leading-1.8"
|
||
>Enimad minim veniam quis nostrud exercitation ullamco
|
||
laboris. Lorem ipsum dolor sit amet cons aetetur
|
||
adipisicing elit sedo eiusmod tempor.Incididunt labore
|
||
et dolore magna aliqua. sed ayd minim veniam.</span
|
||
>
|
||
</p>
|
||
<ul class="flex flex-col gap-y-10px items-stretch">
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Total Area
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
2800 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Bedroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
150 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Bathroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
45 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Belcony/Pets
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
Allowed
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base text-white font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-white before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0 before:-z-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="leading-1.8 pr-10px bg-secondary-color">
|
||
Lounge
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-secondary-color">
|
||
650 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<img
|
||
src="./assets/img/others/10.png"
|
||
class="w-full"
|
||
alt="#"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- fixed popup-->
|
||
<div
|
||
class="w-full min-h-80 md:min-h-350px flex items-center justify-center bg-[url('../img/bg/19.jpg')] bg-cover bg-center bg-no-repeat bg-fixed relative z-0"
|
||
>
|
||
<div
|
||
class="w-full h-full bg-black bg-opacity-30 absolute top-0 left-0 -z-1"
|
||
></div>
|
||
<a
|
||
class="glightbox2 w-50px h-50px lg:w-20 lg:h-20 text-center lg:text-lg text-secondary-color shadow-box-shadow-2 rounded-full bg-white flex items-center justify-center animate-pulse1"
|
||
href="https://www.youtube.com/embed/X7R-q9rsrtU?autoplay=1&showinfo=0"
|
||
data-glightbox="type: video;"
|
||
>
|
||
<i class="icon-play"></i>
|
||
</a>
|
||
</div>
|
||
<!-- features section -->
|
||
<section>
|
||
<div class="container pt-115px pb-90px">
|
||
<!-- section heading -->
|
||
<div class="text-center mb-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize 1b-15px py-0.5 px-5 mb-15px rounded-full inline-block font-semibold"
|
||
>
|
||
<span class="leading-1.3">Our Aminities</span>
|
||
</p>
|
||
<h2
|
||
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
|
||
>
|
||
<span class="leading-1.3">Building Aminities </span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div
|
||
class="flex flex-wrap items-center justify-center -mx-15px px-7px md:px-0"
|
||
>
|
||
<!-- card 1 -->
|
||
<div
|
||
class="basis-1/2 md:basis-1/3 lg:basis-1/4 px-2 md:px-15px mb-50px"
|
||
>
|
||
<a
|
||
href="shop.html"
|
||
class="pt-10 pb-35px px-15px md:px-5 xl:px-30px bg-white hover:bg-secondary-color transition-all duration-300 shadow-box-shadow-4 rounded-10px flex flex-col items-center group relative"
|
||
>
|
||
<span
|
||
class="block w-60px md:w-20 xl:w-100px h-60px md:h-20 xl:h-100px text-25px md:text-3xl xl:text-45px bg-section-bg-5 rounded-100% transition-all duration-300 group-hover:bg-white text-secondary-color mb-5 text-center leading-1"
|
||
>
|
||
<i
|
||
class="flaticon-car leading-65px md:leading-90px xl:leading-110px"
|
||
></i>
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-5 font-poppins font-semibold leading-1.8 capitalize"
|
||
>
|
||
Parking Space
|
||
</span>
|
||
|
||
<span
|
||
class="text-lg w-45px h-45px border border-border-color-8 shadow-box-shadow-2 rounded-100% bg-white group-hover:text-secondary-color transition-all duration-300 text-center block absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2"
|
||
>
|
||
<i class="flaticon-right-arrow leading-12"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<!-- card 2 -->
|
||
<div
|
||
class="basis-1/2 md:basis-1/3 lg:basis-1/4 px-2 md:px-15px mb-50px"
|
||
>
|
||
<a
|
||
href="shop.html"
|
||
class="pt-10 pb-35px px-15px md:px-5 xl:px-30px bg-white hover:bg-secondary-color transition-all duration-300 shadow-box-shadow-4 rounded-10px flex flex-col items-center group relative"
|
||
>
|
||
<span
|
||
class="block w-60px md:w-20 xl:w-100px h-60px md:h-20 xl:h-100px text-25px md:text-3xl xl:text-45px bg-section-bg-5 rounded-100% transition-all duration-300 group-hover:bg-white text-secondary-color mb-5 text-center leading-1"
|
||
>
|
||
<i
|
||
class="flaticon-swimming leading-65px md:leading-90px xl:leading-110px"
|
||
></i>
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-5 font-poppins font-semibold leading-1.8 capitalize"
|
||
>
|
||
Swimming Pool
|
||
</span>
|
||
|
||
<span
|
||
class="text-lg w-45px h-45px border border-border-color-8 shadow-box-shadow-2 rounded-100% bg-white group-hover:text-secondary-color transition-all duration-300 text-center block absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2"
|
||
>
|
||
<i class="flaticon-right-arrow leading-12"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<!-- card 3 -->
|
||
<div
|
||
class="basis-1/2 md:basis-1/3 lg:basis-1/4 px-2 md:px-15px mb-50px"
|
||
>
|
||
<a
|
||
href="shop.html"
|
||
class="pt-10 pb-35px px-15px md:px-5 xl:px-30px bg-white hover:bg-secondary-color transition-all duration-300 shadow-box-shadow-4 rounded-10px flex flex-col items-center group relative"
|
||
>
|
||
<span
|
||
class="block w-60px md:w-20 xl:w-100px h-60px md:h-20 xl:h-100px text-25px md:text-3xl xl:text-45px bg-section-bg-5 rounded-100% transition-all duration-300 group-hover:bg-white text-secondary-color mb-5 text-center leading-1"
|
||
>
|
||
<i
|
||
class="flaticon-secure-shield leading-65px md:leading-90px xl:leading-110px"
|
||
></i>
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-5 font-poppins font-semibold leading-1.8 capitalize"
|
||
>
|
||
Private Security
|
||
</span>
|
||
|
||
<span
|
||
class="text-lg w-45px h-45px border border-border-color-8 shadow-box-shadow-2 rounded-100% bg-white group-hover:text-secondary-color transition-all duration-300 text-center block absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2"
|
||
>
|
||
<i class="flaticon-right-arrow leading-12"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<!-- card 4 -->
|
||
<div
|
||
class="basis-1/2 md:basis-1/3 lg:basis-1/4 px-2 md:px-15px mb-50px"
|
||
>
|
||
<a
|
||
href="shop.html"
|
||
class="pt-10 pb-35px px-15px md:px-5 xl:px-30px bg-white hover:bg-secondary-color transition-all duration-300 shadow-box-shadow-4 rounded-10px flex flex-col items-center group relative"
|
||
>
|
||
<span
|
||
class="block w-60px md:w-20 xl:w-100px h-60px md:h-20 xl:h-100px text-25px md:text-3xl xl:text-45px bg-section-bg-5 rounded-100% transition-all duration-300 group-hover:bg-white text-secondary-color mb-5 text-center leading-1"
|
||
>
|
||
<i
|
||
class="flaticon-stethoscope leading-65px md:leading-90px xl:leading-110px"
|
||
></i>
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-5 font-poppins font-semibold leading-1.8 capitalize"
|
||
>
|
||
Medical Center
|
||
</span>
|
||
|
||
<span
|
||
class="text-lg w-45px h-45px border border-border-color-8 shadow-box-shadow-2 rounded-100% bg-white group-hover:text-secondary-color transition-all duration-300 text-center block absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2"
|
||
>
|
||
<i class="flaticon-right-arrow leading-12"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<!-- card 5 -->
|
||
<div
|
||
class="basis-1/2 md:basis-1/3 lg:basis-1/4 px-2 md:px-15px mb-50px"
|
||
>
|
||
<a
|
||
href="shop.html"
|
||
class="pt-10 pb-35px px-15px md:px-5 xl:px-30px bg-white hover:bg-secondary-color transition-all duration-300 shadow-box-shadow-4 rounded-10px flex flex-col items-center group relative"
|
||
>
|
||
<span
|
||
class="block w-60px md:w-20 xl:w-100px h-60px md:h-20 xl:h-100px text-25px md:text-3xl xl:text-45px bg-section-bg-5 rounded-100% transition-all duration-300 group-hover:bg-white text-secondary-color mb-5 text-center leading-1"
|
||
>
|
||
<i
|
||
class="flaticon-book leading-65px md:leading-90px xl:leading-110px"
|
||
></i>
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-5 font-poppins font-semibold leading-1.8 capitalize"
|
||
>
|
||
Library Area
|
||
</span>
|
||
|
||
<span
|
||
class="text-lg w-45px h-45px border border-border-color-8 shadow-box-shadow-2 rounded-100% bg-white group-hover:text-secondary-color transition-all duration-300 text-center block absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2"
|
||
>
|
||
<i class="flaticon-right-arrow leading-12"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<!-- card 6 -->
|
||
<div
|
||
class="basis-1/2 md:basis-1/3 lg:basis-1/4 px-2 md:px-15px mb-50px"
|
||
>
|
||
<a
|
||
href="shop.html"
|
||
class="pt-10 pb-35px px-15px md:px-5 xl:px-30px bg-white hover:bg-secondary-color transition-all duration-300 shadow-box-shadow-4 rounded-10px flex flex-col items-center group relative"
|
||
>
|
||
<span
|
||
class="block w-60px md:w-20 xl:w-100px h-60px md:h-20 xl:h-100px text-25px md:text-3xl xl:text-45px bg-section-bg-5 rounded-100% transition-all duration-300 group-hover:bg-white text-secondary-color mb-5 text-center leading-1"
|
||
>
|
||
<i
|
||
class="flaticon-bed-1 leading-65px md:leading-90px xl:leading-110px"
|
||
></i>
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-5 font-poppins font-semibold leading-1.8 capitalize"
|
||
>
|
||
King Size Beds
|
||
</span>
|
||
|
||
<span
|
||
class="text-lg w-45px h-45px border border-border-color-8 shadow-box-shadow-2 rounded-100% bg-white group-hover:text-secondary-color transition-all duration-300 text-center block absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2"
|
||
>
|
||
<i class="flaticon-right-arrow leading-12"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<!-- card 7 -->
|
||
<div
|
||
class="basis-1/2 md:basis-1/3 lg:basis-1/4 px-2 md:px-15px mb-50px"
|
||
>
|
||
<a
|
||
href="shop.html"
|
||
class="pt-10 pb-35px px-15px md:px-5 xl:px-30px bg-white hover:bg-secondary-color transition-all duration-300 shadow-box-shadow-4 rounded-10px flex flex-col items-center group relative"
|
||
>
|
||
<span
|
||
class="block w-60px md:w-20 xl:w-100px h-60px md:h-20 xl:h-100px text-25px md:text-3xl xl:text-45px bg-section-bg-5 rounded-100% transition-all duration-300 group-hover:bg-white text-secondary-color mb-5 text-center leading-1"
|
||
>
|
||
<i
|
||
class="flaticon-home-2 leading-65px md:leading-90px xl:leading-110px"
|
||
></i>
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-5 font-poppins font-semibold leading-1.8 capitalize"
|
||
>
|
||
Smart Homes
|
||
</span>
|
||
|
||
<span
|
||
class="text-lg w-45px h-45px border border-border-color-8 shadow-box-shadow-2 rounded-100% bg-white group-hover:text-secondary-color transition-all duration-300 text-center block absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2"
|
||
>
|
||
<i class="flaticon-right-arrow leading-12"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<!-- card 8 -->
|
||
<div
|
||
class="basis-1/2 md:basis-1/3 lg:basis-1/4 px-2 md:px-15px mb-50px"
|
||
>
|
||
<a
|
||
href="shop.html"
|
||
class="pt-10 pb-35px px-15px md:px-5 xl:px-30px bg-white hover:bg-secondary-color transition-all duration-300 shadow-box-shadow-4 rounded-10px flex flex-col items-center group relative"
|
||
>
|
||
<span
|
||
class="block w-60px md:w-20 xl:w-100px h-60px md:h-20 xl:h-100px text-25px md:text-3xl xl:text-45px bg-section-bg-5 rounded-100% transition-all duration-300 group-hover:bg-white text-secondary-color mb-5 text-center leading-1"
|
||
>
|
||
<i
|
||
class="flaticon-slider leading-65px md:leading-90px xl:leading-110px"
|
||
></i>
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-5 font-poppins font-semibold leading-1.8 capitalize"
|
||
>
|
||
Kid’s Playland
|
||
</span>
|
||
|
||
<span
|
||
class="text-lg w-45px h-45px border border-border-color-8 shadow-box-shadow-2 rounded-100% bg-white group-hover:text-secondary-color transition-all duration-300 text-center block absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2"
|
||
>
|
||
<i class="flaticon-right-arrow leading-12"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- testimonials section -->
|
||
<section>
|
||
<div class="bg-[url('../img/bg/20.jpg')] bg-top bg-no-repeat">
|
||
<div class="container pt-115px pb-55px">
|
||
<!-- section heading -->
|
||
<div class="text-center mb-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize 1b-15px py-0.5 px-5 mb-15px rounded-full inline-block font-semibold"
|
||
>
|
||
<span class="leading-1.3">Our Testimonial</span>
|
||
</p>
|
||
<h2
|
||
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
|
||
>
|
||
<span class="leading-1.3">Clients Feedback </span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div
|
||
class="testimonials-slider-container swiper-container relative -mx-15px"
|
||
>
|
||
<!-- apartment cards -->
|
||
<div class="swiper testimonials-slider static">
|
||
<div class="swiper-wrapper">
|
||
<!-- card 1 -->
|
||
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
|
||
<div
|
||
class="pt-25px pb-10 px-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative"
|
||
>
|
||
<!-- card body -->
|
||
<div>
|
||
<p class="text-sm md:text-base mb-5 md:mb-6 xl:mb-27px">
|
||
<span
|
||
class="text-3xl mr-0.5 translate-y-2 inline-block"
|
||
><i
|
||
class="flaticon-left-quote-1 group-hover:text-secondary-color transition-all duration-300"
|
||
></i
|
||
></span>
|
||
<span class="leading-1.8">
|
||
Precious ipsum dolor sit amet consectetur
|
||
adipisicing elit, sed dos mod tempor incididunt ut
|
||
labore et dolore magna aliqua. Ut enim ad min
|
||
veniam, quis nostrud Precious ips um dolor sit amet,
|
||
consecte</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div>
|
||
<div>
|
||
<div
|
||
class="flex flex-wrap md:flex-nowrap gap-x-15px gap-y-10px items-center"
|
||
>
|
||
<div class="w-60px h-60px flex-shrink-0">
|
||
<img
|
||
src="./assets/img/testimonial/1.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100%"
|
||
>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
class="text-base lg:text-lg font-semibold text-heading-color mb-0"
|
||
>
|
||
<span
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
>Jacob William</span
|
||
>
|
||
</h4>
|
||
|
||
<span class="text-sm uppercase">
|
||
Selling Agents
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
class="hover-line absolute bottom-0 left-0 w-0 group-hover:w-full h-1 bg-secondary-color transition-all duration-300 block"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<!-- card 2 -->
|
||
<div class="swiper-slide mb-65px px-15px">
|
||
<div
|
||
class="pt-25px pb-10 px-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative"
|
||
>
|
||
<!-- card body -->
|
||
<div>
|
||
<p class="text-sm md:text-base mb-5 md:mb-6 xl:mb-27px">
|
||
<span
|
||
class="text-3xl mr-0.5 translate-y-2 inline-block"
|
||
><i
|
||
class="flaticon-left-quote-1 group-hover:text-secondary-color transition-all duration-300"
|
||
></i
|
||
></span>
|
||
<span class="leading-1.8">
|
||
Precious ipsum dolor sit amet consectetur
|
||
adipisicing elit, sed dos mod tempor incididunt ut
|
||
labore et dolore magna aliqua. Ut enim ad min
|
||
veniam, quis nostrud Precious ips um dolor sit amet,
|
||
consecte</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div>
|
||
<div>
|
||
<div class="flex gap-x-15px gap-y-10px items-center">
|
||
<div class="w-60px h-60px flex-shrink-0">
|
||
<img
|
||
src="./assets/img/testimonial/2.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100%"
|
||
>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
class="text-base lg:text-lg font-semibold text-heading-color mb-0"
|
||
>
|
||
<span
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
>Kelian Anderson</span
|
||
>
|
||
</h4>
|
||
|
||
<span class="text-sm uppercase">
|
||
Selling Agents
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
class="hover-line absolute bottom-0 left-0 w-0 group-hover:w-full h-1 bg-secondary-color transition-all duration-300 block"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<!-- card 3 -->
|
||
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
|
||
<div
|
||
class="pt-25px pb-10 px-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative"
|
||
>
|
||
<!-- card body -->
|
||
<div>
|
||
<p class="text-sm md:text-base mb-5 md:mb-6 xl:mb-27px">
|
||
<span
|
||
class="text-3xl mr-0.5 translate-y-2 inline-block"
|
||
><i
|
||
class="flaticon-left-quote-1 group-hover:text-secondary-color transition-all duration-300"
|
||
></i
|
||
></span>
|
||
<span class="leading-1.8">
|
||
Precious ipsum dolor sit amet consectetur
|
||
adipisicing elit, sed dos mod tempor incididunt ut
|
||
labore et dolore magna aliqua. Ut enim ad min
|
||
veniam, quis nostrud Precious ips um dolor sit amet,
|
||
consecte</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div>
|
||
<div>
|
||
<div class="flex gap-x-15px gap-y-10px items-center">
|
||
<div class="w-60px h-60px flex-shrink-0">
|
||
<img
|
||
src="./assets/img/testimonial/3.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100%"
|
||
>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
class="text-base lg:text-lg font-semibold text-heading-color mb-0"
|
||
>
|
||
<span
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
>Adam Joseph</span
|
||
>
|
||
</h4>
|
||
|
||
<span class="text-sm uppercase">
|
||
Selling Agents
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
class="hover-line absolute bottom-0 left-0 w-0 group-hover:w-full h-1 bg-secondary-color transition-all duration-300 block"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
<!-- card 4 -->
|
||
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
|
||
<div
|
||
class="pt-25px pb-10 px-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative"
|
||
>
|
||
<!-- card body -->
|
||
<div>
|
||
<p class="text-sm md:text-base mb-5 md:mb-6 xl:mb-27px">
|
||
<span
|
||
class="text-3xl mr-0.5 translate-y-2 inline-block"
|
||
><i
|
||
class="flaticon-left-quote-1 group-hover:text-secondary-color transition-all duration-300"
|
||
></i
|
||
></span>
|
||
<span class="leading-1.8">
|
||
Precious ipsum dolor sit amet consectetur
|
||
adipisicing elit, sed dos mod tempor incididunt ut
|
||
labore et dolore magna aliqua. Ut enim ad min
|
||
veniam, quis nostrud Precious ips um dolor sit amet,
|
||
consecte</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<!-- cart footer -->
|
||
<div>
|
||
<div>
|
||
<div class="flex gap-x-15px gap-y-10px items-center">
|
||
<div class="w-60px h-60px flex-shrink-0">
|
||
<img
|
||
src="./assets/img/testimonial/4.jpg"
|
||
alt=""
|
||
class="w-full h-full rounded-100%"
|
||
>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
class="text-base lg:text-lg font-semibold text-heading-color mb-0"
|
||
>
|
||
<span
|
||
class="leading-1.3 hover:text-secondary-color"
|
||
>James Carter</span
|
||
>
|
||
</h4>
|
||
|
||
<span class="text-sm uppercase">
|
||
Selling Agents
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
class="hover-line absolute bottom-0 left-0 w-0 group-hover:w-full h-1 bg-secondary-color transition-all duration-300 block"
|
||
></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- pagination -->
|
||
<div
|
||
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal !-bottom-[6px] block lg:hidden"
|
||
>
|
||
<span
|
||
class="swiper-pagination-bullet"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-label="Go to slide 1"
|
||
></span
|
||
><span
|
||
class="swiper-pagination-bullet swiper-pagination-bullet-active"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-label="Go to slide 2"
|
||
aria-current="true"
|
||
></span
|
||
><span
|
||
class="swiper-pagination-bullet"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-label="Go to slide 3"
|
||
></span>
|
||
</div>
|
||
<!-- navigation -->
|
||
<div class="hidden lg:block">
|
||
<div class="swiper-button-next bg-white z-1">
|
||
<i class="fas fa-arrow-left " ></i>
|
||
</div>
|
||
<div class="swiper-button-prev bg-white z-1">
|
||
<i class="fas fa-arrow-right " ></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- news section -->
|
||
<section>
|
||
<div>
|
||
<div class="container pb-70px">
|
||
<!-- section heading -->
|
||
<div class="text-center mb-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize 1b-15px py-0.5 px-5 mb-15px rounded-full inline-block font-semibold"
|
||
>
|
||
<span class="leading-1.3">News & Blogs</span>
|
||
</p>
|
||
<h2
|
||
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
|
||
>
|
||
<span class="leading-1.3">Leatest News Feeds </span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div
|
||
class="news-slider-container swiper-container relative -mx-15px"
|
||
>
|
||
<!-- apartment cards -->
|
||
<div class="swiper news-slider static">
|
||
<div class="swiper-wrapper">
|
||
<!-- card 1 -->
|
||
<div
|
||
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
|
||
>
|
||
<div class="group">
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a href="blog-details.html" class="overflow-hidden">
|
||
<img
|
||
src="./assets/img/blog/1.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="p-30px shadow-box-shadow-4">
|
||
<ul class="mb-15px flex gap-x-25px items-center">
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="#"
|
||
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
|
||
><i class="far fa-user text-secondary-color"></i>
|
||
by: Admin</a
|
||
>
|
||
</li>
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="#"
|
||
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
|
||
><i class="fas fa-tags text-secondary-color"></i>
|
||
Room</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color"
|
||
>
|
||
<a
|
||
href="blog-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>10 Brilliant Ways To Decorate Your Home</a
|
||
>
|
||
</h4>
|
||
<div
|
||
class="pt-5 mt-5 lg:pt-5 border-t border-border-color-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<p class="leading-1.8 flex gap-5px items-center">
|
||
<i
|
||
class="far fa-calendar-alt text-secondary-color"
|
||
></i>
|
||
June 24, 2024
|
||
</p>
|
||
</li>
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="blog-details.html"
|
||
class="leading-1.8 text-secondary-color uppercase"
|
||
>
|
||
Read more</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 2 -->
|
||
<div
|
||
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
|
||
>
|
||
<div class="group">
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a href="blog-details.html" class="overflow-hidden">
|
||
<img
|
||
src="./assets/img/blog/2.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="p-30px shadow-box-shadow-4">
|
||
<ul class="mb-15px flex gap-x-25px items-center">
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="#"
|
||
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
|
||
><i class="far fa-user text-secondary-color"></i>
|
||
by: Admin</a
|
||
>
|
||
</li>
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="#"
|
||
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
|
||
><i class="fas fa-tags text-secondary-color"></i>
|
||
Interior</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color"
|
||
>
|
||
<a
|
||
href="blog-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>The Most Inspiring Interior Design Of 2024</a
|
||
>
|
||
</h4>
|
||
<div
|
||
class="pt-5 mt-5 lg:pt-5 border-t border-border-color-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<p class="leading-1.8 flex gap-5px items-center">
|
||
<i
|
||
class="far fa-calendar-alt text-secondary-color"
|
||
></i>
|
||
June 21, 2024
|
||
</p>
|
||
</li>
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="blog-details.html"
|
||
class="leading-1.8 text-secondary-color uppercase"
|
||
>
|
||
Read more</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 3 -->
|
||
<div
|
||
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
|
||
>
|
||
<div class="group">
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a href="blog-details.html" class="overflow-hidden">
|
||
<img
|
||
src="./assets/img/blog/3.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="p-30px shadow-box-shadow-4">
|
||
<ul class="mb-15px flex gap-x-25px items-center">
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="#"
|
||
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
|
||
><i class="far fa-user text-secondary-color"></i>
|
||
by: Admin</a
|
||
>
|
||
</li>
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="#"
|
||
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
|
||
><i class="fas fa-tags text-secondary-color"></i>
|
||
Estate</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color"
|
||
>
|
||
<a
|
||
href="blog-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>Recent Commercial Real Estate Transactions</a
|
||
>
|
||
</h4>
|
||
<div
|
||
class="pt-5 mt-5 lg:pt-5 border-t border-border-color-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<p class="leading-1.8 flex gap-5px items-center">
|
||
<i
|
||
class="far fa-calendar-alt text-secondary-color"
|
||
></i>
|
||
June 22, 2024
|
||
</p>
|
||
</li>
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="blog-details.html"
|
||
class="leading-1.8 text-secondary-color uppercase"
|
||
>
|
||
Read more</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 4 -->
|
||
<div
|
||
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
|
||
>
|
||
<div class="group">
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a href="blog-details.html" class="overflow-hidden">
|
||
<img
|
||
src="./assets/img/blog/4.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="p-30px shadow-box-shadow-4">
|
||
<ul class="mb-15px flex gap-x-25px items-center">
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="#"
|
||
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
|
||
><i class="far fa-user text-secondary-color"></i>
|
||
by: Admin</a
|
||
>
|
||
</li>
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="#"
|
||
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
|
||
><i class="fas fa-tags text-secondary-color"></i>
|
||
Room</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color"
|
||
>
|
||
<a
|
||
href="blog-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>Renovating a Living Room? Experts Share Their
|
||
Secrets</a
|
||
>
|
||
</h4>
|
||
<div
|
||
class="pt-5 mt-5 lg:pt-5 border-t border-border-color-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<p class="leading-1.8 flex gap-5px items-center">
|
||
<i
|
||
class="far fa-calendar-alt text-secondary-color"
|
||
></i>
|
||
June 24, 2024
|
||
</p>
|
||
</li>
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="blog-details.html"
|
||
class="leading-1.8 text-secondary-color uppercase"
|
||
>
|
||
Read more</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- card 5 -->
|
||
<div
|
||
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
|
||
>
|
||
<div class="group">
|
||
<!-- card thumbs -->
|
||
<div class="relative leading-1">
|
||
<a href="blog-details.html" class="overflow-hidden">
|
||
<img
|
||
src="./assets/img/blog/5.jpg"
|
||
class="w-full group-hover:scale-110 transition-all duration-700"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="p-30px shadow-box-shadow-4">
|
||
<ul class="mb-15px flex gap-x-25px items-center">
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="#"
|
||
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
|
||
><i class="far fa-user text-secondary-color"></i>
|
||
by: Admin</a
|
||
>
|
||
</li>
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="#"
|
||
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
|
||
><i class="fas fa-tags text-secondary-color"></i>
|
||
Trends</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
<h4
|
||
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color"
|
||
>
|
||
<a
|
||
href="blog-details.html"
|
||
class="hover:text-secondary-color leading-1.3"
|
||
>7 home trends that will shape your house in 2024</a
|
||
>
|
||
</h4>
|
||
<div
|
||
class="pt-5 mt-5 lg:pt-5 border-t border-border-color-1"
|
||
>
|
||
<ul class="flex justify-between items-center">
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<p class="leading-1.8 flex gap-5px items-center">
|
||
<i
|
||
class="far fa-calendar-alt text-secondary-color"
|
||
></i>
|
||
June 24, 2024
|
||
</p>
|
||
</li>
|
||
<li class="text-xs md:text-sm font-semibold">
|
||
<a
|
||
href="blog-details.html"
|
||
class="leading-1.8 text-secondary-color uppercase"
|
||
>
|
||
Read more</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- pagination -->
|
||
<div
|
||
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal !-bottom-[6px] block xl:hidden"
|
||
>
|
||
<span
|
||
class="swiper-pagination-bullet"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-label="Go to slide 1"
|
||
></span
|
||
><span
|
||
class="swiper-pagination-bullet swiper-pagination-bullet-active"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-label="Go to slide 2"
|
||
aria-current="true"
|
||
></span
|
||
><span
|
||
class="swiper-pagination-bullet"
|
||
tabindex="0"
|
||
role="button"
|
||
aria-label="Go to slide 3"
|
||
></span>
|
||
</div>
|
||
<!-- navigation -->
|
||
<div class="hidden xl:block">
|
||
<div class="swiper-button-next bg-white z-1">
|
||
<i class="fas fa-arrow-left " ></i>
|
||
</div>
|
||
<div class="swiper-button-prev bg-white z-1">
|
||
<i class="fas fa-arrow-right " ></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- footer start -->
|
||
<footer>
|
||
<div
|
||
class="pt-187px pb-5 px-15px 3xl:px-[2%] 4xl:px-[5%] mt-95px bg-section-bg-2 text-sm lg:text-base text-white relative"
|
||
>
|
||
<div class="px-15px">
|
||
<!-- footer top -->
|
||
<div
|
||
class="container w-full absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||
>
|
||
<div
|
||
class="px-25px lg:px-60px py-50px bg-secondary-color text-white flex justify-center lg:justify-between items-center flex-col lg:flex-row gap-y-30px lg:gap-0 sm:whitespace-nowrap"
|
||
>
|
||
<div>
|
||
<h5
|
||
class="text-xl md:text-26px lg:text-3xl xl:text-4xl text-white font-bold mb-15px"
|
||
>
|
||
<span class="leading-1.3">Looking for a dream home?</span>
|
||
</h5>
|
||
<p class="text-white leading-1.8">
|
||
We can help you realize your dream of a new home
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h5
|
||
class="capitalize inline-block text-sm md:text-base text-primary-color hover:text-white hover:bg-primary-color relative group whitespace-nowrap font-normal transition-all duration-300 shadow-box-shadow-3 mb-0"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-white group-hover:bg-secondary-color z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<a
|
||
href="contact.html"
|
||
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-white leading-23px"
|
||
>Explore Properties <i class="icon-next"></i
|
||
></a>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- footer main -->
|
||
<div
|
||
class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-12 gap-x-30px text-sm lg:text-base text-white"
|
||
>
|
||
<!-- footer about-->
|
||
<div class="xl:col-start-1 xl:col-span-3 mb-60px lg:pl-35px">
|
||
<div class="mb-15px">
|
||
<a href="index.html">
|
||
<img src="./assets/img/logo-2.png" alt="" >
|
||
</a>
|
||
<p class="leading-1.8 mb-5 lg:mb-25px text-white">
|
||
Lorem Ipsum is simply dummy text of the and typesetting
|
||
industry. Lorem Ipsum is dummy text of the printing.
|
||
</p>
|
||
<ul class="space-y-2">
|
||
<li>
|
||
<p class="leading-1.8 text-white flex">
|
||
<i class="icon-placeholder ml-15px mt-1"></i>
|
||
<span>Brooklyn, New York, United States</span>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<a href="tel:+0123-456789" class="leading-1.8 flex">
|
||
<i class="icon-call ml-15px mt-1"></i>
|
||
<span>+0123-456789</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="mailto:example@example.com"
|
||
class="leading-1.8 flex"
|
||
>
|
||
<i class="icon-mail ml-15px mt-1"></i>
|
||
<span>example@example.com</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<ul class="flex items-center gap-x-5 mt-5">
|
||
<li>
|
||
<a href="https://www.facebook.com" class="leading-1.8">
|
||
<i class="fab fa-facebook-f"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://x.com" class="leading-1.8">
|
||
<i class="fab fa-twitter"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.linkedin.com" class="leading-1.8">
|
||
<i class="fab fa-linkedin"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.youtube.com" class="leading-1.8">
|
||
<i class="fab fa-youtube"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- footer company-->
|
||
<div class="xl:col-start-4 xl:col-span-2 mb-60px">
|
||
<h3 class="text-22px font-bold mb-25px text-white">
|
||
<span class="leading-1.3"> Company </span>
|
||
</h3>
|
||
<ul class="space-y-[15px]">
|
||
<li>
|
||
<a
|
||
href="about.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
About</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="blog.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Blog</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="shop.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
All Products</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Locations Map</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="faq.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
FAQ</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="contact.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Contact us</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- footer services-->
|
||
<div class="xl:col-start-6 xl:col-span-2 mb-60px">
|
||
<h3 class="text-22px font-bold mb-25px text-white">
|
||
<span class="leading-1.3"> Services </span>
|
||
</h3>
|
||
<ul class="space-y-[15px]">
|
||
<li>
|
||
<a
|
||
href="order-tracking.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Order tracking</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="wishlist.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Wish List</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="login.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Login</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="account.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
My account</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="about.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Terms & Conditions</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="about.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Promotional Offers</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- footer customer care-->
|
||
<div class="xl:col-start-8 xl:col-span-2 mb-60px">
|
||
<h3 class="text-22px font-bold mb-25px text-white">
|
||
<span class="leading-1.3"> Customer Care </span>
|
||
</h3>
|
||
<ul class="space-y-[15px]">
|
||
<li>
|
||
<a
|
||
href="login.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Login</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="account.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
My account</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="wishlist.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Wish List</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="order-tracking.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Order tracking</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="faq.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
FAQ</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="contact.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Contact us</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- footer newsletter-->
|
||
<div class="xl:col-start-10 xl:col-span-3 mb-60px">
|
||
<h3 class="text-22px font-bold mb-25px text-white">
|
||
<span class="leading-1.3"> Newsletter </span>
|
||
</h3>
|
||
<p class="leading-1.8 mb-5 lg:mb-25px text-white">
|
||
Subscribe to our weekly Newsletter and receive updates via
|
||
email.
|
||
</p>
|
||
|
||
<!-- subscription input -->
|
||
<div>
|
||
<form class="w-full relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Email*"
|
||
class="w-full text-sm text-paragraph-color pr-5 pl-50px placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block rounded-none"
|
||
>
|
||
<button
|
||
type="submit"
|
||
class="absolute top-0 left-0 h-full px-18px text-white bg-secondary-color hover:bg-primary-color"
|
||
>
|
||
<i class="fas fa-location-arrow text-lg font-bold"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
<!-- payment methods -->
|
||
<div>
|
||
<h3
|
||
class="text-base lg:text-lg font-bold mt-30px mb-15px text-white"
|
||
>
|
||
<span class="leading-1.3"> We Accept </span>
|
||
</h3>
|
||
<img
|
||
src="./assets/img/icons/payment-4.png"
|
||
alt="Payment Image"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- footer copyright -->
|
||
<div
|
||
class="py-25px px-15px 3xl:px-[2%] 4xl:px-[5%] bg-section-bg-7 text-sm lg:text-base text-white"
|
||
>
|
||
<div class="px-15px">
|
||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||
<div>
|
||
<p class="leading-1.8 text-center lg:text-start text-white">
|
||
All Rights Reserved @ Company 2024
|
||
</p>
|
||
</div>
|
||
|
||
<ul
|
||
class="flex gap-x-25px items-center justify-center lg:justify-end capitalize font-semibold font-poppins text-sm"
|
||
>
|
||
<li>
|
||
<a href="#" class="leading-1.8">Terms & Conditions</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="leading-1.8"> Claim</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="leading-1.8"> Privacy & Policy</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- scroll top -->
|
||
<button
|
||
class="scroll-up w-30px h-30px lg:w-10 lg:h-10 lg:text-xl bg-section-bg-1 text-heading-color hover:bg-secondary-color hover:text-white rotate-[45deg] shadow-box-shadow-3 fixed bottom-[50px] lg:bottom-[70px] left-[3%] flex justify-center items-center z-xl"
|
||
>
|
||
<i class="fa fa-angle-up leading-1 -rotate-[45deg] inline-block"></i>
|
||
</button>
|
||
<script src="./assets/js/stickyHeader.js"></script>
|
||
<script src="./assets/js/accordion.js"></script>
|
||
<script src="./assets/js/service.js"></script>
|
||
<script src="./assets/js/nice-select2.js"></script>
|
||
<script src="./assets/js/search.js"></script>
|
||
<script src="./assets/js/drawer.js"></script>
|
||
<script src="./assets/js/swiper-bundle.min.js"></script>
|
||
<script src="./assets/js/silder.js"></script>
|
||
<script src="./assets/js/counterup.js"></script>
|
||
<script src="./assets/js/modal.js"></script>
|
||
<script src="./assets/js/tabs.js"></script>
|
||
|
||
<script src="./assets/js/glightbox.min.js"></script>
|
||
<script src="./assets/js/scrollUp.js"></script>
|
||
<script src="./assets/js/smoothScroll.js"></script>
|
||
<script src="./assets/js/isotope.pkgd.min.js"></script>
|
||
<script src="./assets/js/filter.js"></script>
|
||
<script src="./assets/js/nice_checkbox.js"></script>
|
||
<script src="./assets/js/count.js"></script>
|
||
<script src="./assets/js/maplace.js"></script>
|
||
|
||
<script src="./assets/js/ui-widget.js"></script>
|
||
<script src="./assets/js/main.js"></script>
|
||
</body>
|
||
</html>
|