3689 lines
196 KiB
HTML
3689 lines
196 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AM družstvo</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/style.css">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- header area start -->
|
||
<header>
|
||
<div class="bg-section-bg-6">
|
||
<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:riso.sala@gmail.com?Subject=Dopyt%20z%20webovej%20stranky"><i
|
||
class="icon-mail text-secondary-color font-bold mr-0.5"></i>
|
||
riso.sala@gmail.com</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">
|
||
<li>
|
||
<a href="https://www.facebook.com" title="Facebook"><i class="fab fa-facebook-f font-bold"></i></a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.x.com" title="Twitter"><i class="fab fa-twitter font-bold"></i></a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://www.instagram.com" title="Instagram"><i class="fab fa-instagram font-bold"></i></a>
|
||
</li>
|
||
<li>
|
||
<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 z-xl bg-white transition-all duration-700">
|
||
<div class="container flex flex-row justify-between items-center relative 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.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-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px">Domov
|
||
</span></a>
|
||
</li>
|
||
<!-- item 2 -->
|
||
<li class="relative group">
|
||
<a href="about.html"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px">O
|
||
nás</a>
|
||
</li>
|
||
|
||
<!-- item 3 -->
|
||
<li class="relative group">
|
||
<a href="portfolio.html"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px">Ponuka</a>
|
||
<!-- dropdown -->
|
||
</li>
|
||
|
||
<!-- item 4 -->
|
||
<li class="relative group">
|
||
<a href="service.html"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px">Iné
|
||
služby</a>
|
||
</li>
|
||
<li>
|
||
<a href="contact.html"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px">Kontakty
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</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 -left-[300px] xs:-left-[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="pr-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 pl-5 pr-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 right-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 pl-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 -left-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 -left-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 pl-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">
|
||
Property
|
||
<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 pl-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 pl-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 pl-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 mr-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 mr-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 mr-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-10">
|
||
<!-- Swiper -->
|
||
<div class="hero-slider-container swiper-container relative">
|
||
<div class="swiper hero-slider2">
|
||
<div class="swiper-wrapper items-stretch">
|
||
<!-- Hero 1 -->
|
||
<div
|
||
class="swiper-slide relative z-0 pb-[104px] py-100px lg:pb-100px 4xl:min-h-[780px] overflow-hidden flex items-center bg-section-bg-1">
|
||
<div class="container w-full">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 items-center gap-25px">
|
||
<!-- banner Left -->
|
||
|
||
<div class="slide-animation">
|
||
<p class="text-sm md:text-15px lg:text-base text-heading-color font-bold mb-5 animated">
|
||
<i class="fas fa-home text-secondary-color"></i>
|
||
Real Estate Agency
|
||
</p>
|
||
<h1 class="text-3xl md:text-40px lg:text-50px 4xl:text-65px leading-1 font-bold mb-5 animated">
|
||
<span class="leading-1 block"> Search and Find </span>
|
||
|
||
<span class="text-secondary-color leading-1">
|
||
Luxury
|
||
</span>
|
||
<span class="leading-1"> House</span>
|
||
</h1>
|
||
<p
|
||
class="text-sm lg:text-base mb-5 max-w-450px pl-15px xl:pl-30px border-l border-border-color-14 animated">
|
||
<span class="leading-25px lg:leading-1.8">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||
elit, sed do eiusmod tempor incididunt ut labore.
|
||
</span>
|
||
</p>
|
||
<div class="mt-5 lg:mt-10 animated">
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block mr-15px mb-0">
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-primary-color z-1 group-hover:w-0 transition-all duration-300"></span>
|
||
<a href="about.html"
|
||
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-heading-color leading-23px">Make
|
||
An Enquiry</a>
|
||
</h5>
|
||
<div class="inline-block">
|
||
<div>
|
||
<a class="glightbox w-60px h-60px text-center text-sm lg:text-base text-secondary-color shadow-box-shadow-2 rounded-full bg-white flex items-center justify-center"
|
||
href="https://www.youtube.com/embed/HnbMYzdjuBs?autoplay=1&showinfo=0&controls=1"
|
||
data-glightbox="type: video;">
|
||
<i class="icon-play ltn__secondary-color"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- banner right -->
|
||
<div class="lg:absolute right-0 top-0 lg:w-[45%] h-full">
|
||
<img class="lg:w-full lg:h-full 4xl:ml-auto" src="./assets/img/slider/61.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Hero 2 -->
|
||
<div
|
||
class="swiper-slide relative z-0 py-100px pb-110px lg:pb-100px 4xl:min-h-[780px] overflow-hidden flex items-center bg-section-bg-1">
|
||
<div class="container w-full">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 items-center gap-30px">
|
||
<!-- banner Left -->
|
||
|
||
<div class="slide-animation">
|
||
<p class="text-sm md:text-15px lg:text-base text-heading-color font-bold mb-5 animated">
|
||
<i class="fas fa-home text-secondary-color"></i>
|
||
Real Estate Agency
|
||
</p>
|
||
<h1 class="text-3xl md:text-40px lg:text-50px 4xl:text-65px leading-1 font-bold mb-5 animated">
|
||
<span class="leading-1">
|
||
Find Your Dream <br>
|
||
House By Us
|
||
</span>
|
||
</h1>
|
||
<p
|
||
class="text-sm lg:text-base mb-5 max-w-450px pl-15px xl:pl-30px border-l border-border-color-14 animated">
|
||
<span class="leading-25px lg:leading-1.8">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||
elit, sed do eiusmod tempor incididunt ut labore.
|
||
</span>
|
||
</p>
|
||
<div class="mt-5 lg:mt-10 animated">
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block mr-15px mb-0">
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-primary-color z-1 group-hover:w-0 transition-all duration-300"></span>
|
||
<a href="service.html"
|
||
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-heading-color leading-23px">OUR
|
||
SERVICES</a>
|
||
</h5>
|
||
<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="about.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">LEARN
|
||
MORE</a>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- banner right -->
|
||
<div class="lg:absolute right-0 top-0 lg:w-[45%] h-full">
|
||
<img class="lg:w-full lg:h-full 4xl:ml-auto" src="./assets/img/slider/62.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Hero 3 -->
|
||
<div
|
||
class="swiper-slide relative z-0 py-100px pb-110px lg:pb-100px 4xl:min-h-[780px] overflow-hidden flex items-center bg-section-bg-1">
|
||
<div class="container w-full">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 items-center gap-30px">
|
||
<!-- banner Left -->
|
||
|
||
<div class="slide-animation">
|
||
<p class="text-sm md:text-15px lg:text-base text-heading-color font-bold mb-5 animated">
|
||
<i class="fas fa-home text-secondary-color"></i>
|
||
Real Estate Agency
|
||
</p>
|
||
<h1 class="text-3xl md:text-40px lg:text-50px 4xl:text-65px leading-1 font-bold mb-5 animated">
|
||
<span class="leading-1">
|
||
Find Your Dream <br>
|
||
House By Us
|
||
</span>
|
||
</h1>
|
||
<p
|
||
class="text-sm lg:text-base mb-5 max-w-450px pl-15px xl:pl-30px border-l border-border-color-14 animated">
|
||
<span class="leading-25px lg:leading-1.8">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||
elit, sed do eiusmod tempor incididunt ut labore.
|
||
</span>
|
||
</p>
|
||
<div class="mt-5 lg:mt-10 animated">
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block mr-15px mb-0">
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-primary-color z-1 group-hover:w-0 transition-all duration-300"></span>
|
||
<a href="service.html"
|
||
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-heading-color leading-23px">OUR
|
||
SERVICES</a>
|
||
</h5>
|
||
<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="about.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">LEARN
|
||
MORE</a>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- banner right -->
|
||
<div class="lg:absolute right-0 top-0 lg:w-[45%] h-full">
|
||
<img class="lg:w-full lg:h-full 4xl:ml-auto" src="./assets/img/slider/63.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Hero 4 -->
|
||
<div
|
||
class="swiper-slide relative z-0 py-100px pb-110px lg:pb-100px 4xl:min-h-[780px] overflow-hidden flex items-center bg-section-bg-1">
|
||
<div class="container w-full">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 items-center gap-30px">
|
||
<!-- banner Left -->
|
||
|
||
<div class="slide-animation">
|
||
<p class="text-sm md:text-15px lg:text-base text-heading-color font-bold mb-5 animated">
|
||
<i class="fas fa-home text-secondary-color"></i>
|
||
Real Estate Agency
|
||
</p>
|
||
<h1 class="text-3xl md:text-40px lg:text-50px 4xl:text-65px leading-1 font-bold mb-5 animated">
|
||
<span class="leading-1">
|
||
Find Your Dream <br>
|
||
House By Us
|
||
</span>
|
||
</h1>
|
||
<p
|
||
class="text-sm lg:text-base mb-5 max-w-450px pl-15px xl:pl-30px border-l border-border-color-14 animated">
|
||
<span class="leading-25px lg:leading-1.8">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing
|
||
elit, sed do eiusmod tempor incididunt ut labore.
|
||
</span>
|
||
</p>
|
||
<div class="mt-5 lg:mt-10 animated">
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block mr-15px mb-0">
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-primary-color z-1 group-hover:w-0 transition-all duration-300"></span>
|
||
<a href="service.html"
|
||
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-heading-color leading-23px">OUR
|
||
SERVICES</a>
|
||
</h5>
|
||
<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="about.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">LEARN
|
||
MORE</a>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- banner right -->
|
||
<div class="lg:absolute right-0 top-0 lg:w-[45%] h-full">
|
||
<img class="lg:w-full lg:h-full 4xl:ml-auto" src="./assets/img/slider/64.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--navigation & thumbs slider -->
|
||
<div class="absolute bottom-[30px] right-1/2 lg:right-[10%] translate-x-1/2 lg:translate-x-0 z-xl flex">
|
||
<!-- navigation -->
|
||
<div class="flex flex-row-reverse xl:hidden justify-center pr-8 pt-4 gap-x-2">
|
||
<div class="swiper-button-next relative ml-2">
|
||
<i class="fas fa-arrow-right"></i>
|
||
</div>
|
||
<div class="swiper-button-prev relative">
|
||
<i class="fas fa-arrow-left"></i>
|
||
</div>
|
||
</div>
|
||
<!--thumbs slider -->
|
||
<div class="w-250px 4xl:w-100 4xl:px-10px">
|
||
<div class="swiper hero-slider2-tumbs_slider">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide cursor-pointer">
|
||
<img src="./assets/img/slider/61.jpg"
|
||
class="w-full border-2 4xl:border-[5px] border-section-bg-1 box-border" alt="">
|
||
</div>
|
||
<div class="swiper-slide cursor-pointer">
|
||
<img src="./assets/img/slider/62.jpg"
|
||
class="w-full border-2 4xl:border-[5px] border-section-bg-1 box-border" alt="">
|
||
</div>
|
||
<div class="swiper-slide cursor-pointer">
|
||
<img src="./assets/img/slider/63.jpg"
|
||
class="w-full border-2 4xl:border-[5px] border-section-bg-1 box-border" alt="">
|
||
</div>
|
||
<div class="swiper-slide cursor-pointer">
|
||
<img src="./assets/img/slider/64.jpg"
|
||
class="w-full border-2 4xl:border-[5px] border-section-bg-1 box-border" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- social -->
|
||
<div class="text-sm lg:text-base hidden 4xl:block absolute bottom-20 left-[50px] z-xxl">
|
||
<ul class="leading-1.8">
|
||
<li class="mt-4 mb-3">
|
||
<a href="https://www.facebook.com" title="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||
</li>
|
||
<li class="mt-4 mb-3">
|
||
<a href="https://x.com" title="Twitter"><i class="fab fa-twitter"></i></a>
|
||
</li>
|
||
<li class="mt-4 mb-3">
|
||
<a href="https://www.linkedin.com" title="Linkedin"><i class="fab fa-linkedin"></i></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- about section -->
|
||
<section>
|
||
<div class="container pt-115px pb-100px">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 lg:gap-30px items-center">
|
||
<!-- about left -->
|
||
<div class="lg:mr-30px relative mb-10 lg:mb-0">
|
||
<img src="./assets/img/others/11.png" alt="" class="max-w-full">
|
||
</div>
|
||
<!-- about right -->
|
||
<div>
|
||
<div>
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color capitalize mb-2 inline-block font-semibold">
|
||
<span class="leading-1.3">about us</span>
|
||
</p>
|
||
<h2
|
||
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold mb-15px">
|
||
<span class="leading-1.3">
|
||
Dream Living Spaces Setting New Build
|
||
</span>
|
||
</h2>
|
||
<p class="text-sm lg:text-base max-w-500px">
|
||
<span class="leading-1.8 lg:leading-1.8">Over 39,000 people work for us in more than 70 countries
|
||
all over the This breadth of global coverage, combined with
|
||
specialist services</span>
|
||
</p>
|
||
</div>
|
||
<ul class="space-y-5 pt-30px">
|
||
<li
|
||
class="text-sm lg:text-base flex px-22px pt-25px pb-21px lg:pb-25px border-2 border-border-color-15 before:w-1 before:h-0 before:bg-secondary-color relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:opacity-0 before:transition-all before:duration-300 transition-all duration-300 hover:shadow-box-shadow-1 hover:before:h-4/5 hover:before:opacity-100">
|
||
<i class="flaticon-house-4 text-50px text-secondary-color mr-5"></i>
|
||
<div>
|
||
<h5 class="text-17px md:text-lg lg:text-xl font-bold text-heading-color mb-5px">
|
||
<a href="service-details.html" class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
The Perfect Residency</a>
|
||
</h5>
|
||
<p class="text-sm lg:text-base">
|
||
Lorem ipsum dolor sit amet, consectetur adipisic do
|
||
eiusmod tempor incididunt ut labore et
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li
|
||
class="text-sm lg:text-base flex px-22px pt-25px pb-21px lg:pb-25px border-2 border-border-color-15 before:w-1 before:h-0 before:bg-secondary-color relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:opacity-0 before:transition-all before:duration-300 transition-all duration-300 hover:shadow-box-shadow-1 hover:before:h-4/5 hover:before:opacity-100">
|
||
<i class="flaticon-call-center-agent text-50px text-secondary-color mr-5"></i>
|
||
<div>
|
||
<h5 class="text-17px md:text-lg lg:text-xl font-bold text-heading-color mb-5px">
|
||
<a href="service-details.html" class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Global Architect Experts</a>
|
||
</h5>
|
||
<p class="text-sm lg:text-base">
|
||
Lorem ipsum dolor sit amet, consectetur adipisic do
|
||
eiusmod tempor incididunt ut labore et
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li
|
||
class="text-sm lg:text-base flex px-22px pt-25px pb-21px lg:pb-25px border-2 border-border-color-15 before:w-1 before:h-0 before:bg-secondary-color relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:opacity-0 before:transition-all before:duration-300 transition-all duration-300 hover:shadow-box-shadow-1 hover:before:h-4/5 hover:before:opacity-100">
|
||
<i class="flaticon-maps-and-location text-50px text-secondary-color mr-5"></i>
|
||
<div>
|
||
<h5 class="text-17px md:text-lg lg:text-xl font-bold text-heading-color mb-5px">
|
||
<a href="service-details.html" class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Built-in Storage Cupboards</a>
|
||
</h5>
|
||
<p class="text-sm lg:text-base">
|
||
Lorem ipsum dolor sit amet, consectetur adipisic do
|
||
eiusmod tempor incididunt ut labore et
|
||
</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Facilities section -->
|
||
<section class="bg-section-bg-1 relative">
|
||
<div class="container pt-30 pb-90px">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-30px">
|
||
<!-- Building Facilities left -->
|
||
<div>
|
||
<div class="mb-5">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color capitalize mb-2 inline-block font-semibold">
|
||
<span class="leading-1.3">Building Facilities</span>
|
||
</p>
|
||
<h2
|
||
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold mb-15px">
|
||
<span class="leading-1.3">
|
||
Making living spaces More Beautiful
|
||
</span>
|
||
</h2>
|
||
<p class="text-sm lg:text-base max-w-500px">
|
||
<span class="leading-1.8 lg:leading-1.8">Over 39,000 people work for us in more than 70 countries
|
||
all over the This breadth of global coverage, combined with
|
||
specialist services</span>
|
||
</p>
|
||
</div>
|
||
<ul class="grid grid-cols-1 md:grid-cols-2 gap-x-5 gap-y-30px pt-4">
|
||
<li class="text-sm lg:text-base flex items-center">
|
||
<i
|
||
class="icon-done text-sm text-secondary-color bg-color-6 w-8 h-8 flex items-center justify-center mr-15px rounded-100% flex-shrink-0"></i>
|
||
<span class="leading-1.8">Living rooms are pre-wired for Surround</span>
|
||
</li>
|
||
|
||
<li class="text-sm lg:text-base flex items-center">
|
||
<i
|
||
class="icon-done text-sm text-secondary-color bg-color-6 w-8 h-8 flex items-center justify-center mr-15px rounded-100% flex-shrink-0"></i>
|
||
<span class="leading-1.8">Luxurious interior design and amenities</span>
|
||
</li>
|
||
|
||
<li class="text-sm lg:text-base flex items-center">
|
||
<i
|
||
class="icon-done text-sm text-secondary-color bg-color-6 w-8 h-8 flex items-center justify-center mr-15px rounded-100% flex-shrink-0"></i>
|
||
<span class="leading-1.8">Nestled in the Buckhead Vinings communities</span>
|
||
</li>
|
||
|
||
<li class="text-sm lg:text-base flex items-center">
|
||
<i
|
||
class="icon-done text-sm text-secondary-color bg-color-6 w-8 h-8 flex items-center justify-center mr-15px rounded-100% flex-shrink-0"></i>
|
||
<span class="leading-1.8">Private balconies with stunning views</span>
|
||
</li>
|
||
|
||
<li class="text-sm lg:text-base flex items-center">
|
||
<i
|
||
class="icon-done text-sm text-secondary-color bg-color-6 w-8 h-8 flex items-center justify-center mr-15px rounded-100% flex-shrink-0"></i>
|
||
<span class="leading-1.8">A rare combination of inspired architecture</span>
|
||
</li>
|
||
|
||
<li class="text-sm lg:text-base flex items-center">
|
||
<i
|
||
class="icon-done text-sm text-secondary-color bg-color-6 w-8 h-8 flex items-center justify-center mr-15px rounded-100% flex-shrink-0"></i>
|
||
<span class="leading-1.8">Outdoor grilling with dining court</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Building Facilities right -->
|
||
<div class="h-full">
|
||
<div class="absolute right-0 top-0 w-[48%] h-full">
|
||
<img src="./assets/img/bg/21.jpg" alt="" class="w-full h-full hidden lg:block">
|
||
</div>
|
||
|
||
<div class="flex h-full w-full justify-center lg:justify-start lg:items-center">
|
||
<div class="-translate-x-3">
|
||
<a class="glightbox2 w-20 h-20 text-center text-lg text-white bg-secondary-color shadow-box-shadow-2 rounded-full flex items-center justify-center animate-pulse2 hover:text-white"
|
||
href="https://www.youtube.com/embed/tlThdr3O5Qo" data-glightbox="type: video;">
|
||
<i class="icon-play"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- services 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 capitalize mb-2 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>
|
||
<!-- upcoming projects section -->
|
||
<section>
|
||
<div class="bg-[url('../img/bg/22.jpg')] bg-top bg-no-repeat">
|
||
<div class="container pt-115px pb-65px">
|
||
<!-- section heading -->
|
||
<div class="mb-50px">
|
||
<p class="text-sm md:text-15px lg:text-base text-white capitalize mb-2 inline-block font-semibold">
|
||
<span class="leading-1.3">Upcoming Projects</span>
|
||
</p>
|
||
<h2 class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-white font-bold">
|
||
<span class="leading-1.3">Dream Living Space <br>
|
||
Setting New Standards
|
||
</span>
|
||
</h2>
|
||
</div>
|
||
<!-- upcoming project slider -->
|
||
|
||
<div class="swiper-container upcoming-project-slider-container -mx-15px relative">
|
||
<div class="swiper project-slider-container static">
|
||
<div class="swiper-wrapper items-stretch">
|
||
<!-- slide 1 -->
|
||
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
|
||
<div
|
||
class="grid grid-cols-1 lg:grid-cols-12 gap-y-30px py-30px px-15px lg:pr-30px mt-10px shadow-box-shadow-4 bg-white">
|
||
<!-- banner area -->
|
||
<div class="lg:col-start-1 lg:col-span-7 px-15px">
|
||
<img src="./assets/img/product-3/2.jpg" alt="" class="w-full">
|
||
</div>
|
||
<!-- content area -->
|
||
<div class="lg:col-start-8 lg:col-span-5 px-15px bg-section-bg-1">
|
||
<div class="md:px-5 py-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color capitalize inline-block font-semibold">
|
||
<span class="leading-1">About Projects</span>
|
||
</p>
|
||
<h2 class="text-2xl md:text-26px lg:text-3xl xl:text-4xl text-heading-color font-bold mb-30px">
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3 xl:leading-1.3">Upcoming Projects
|
||
</span>
|
||
</h2>
|
||
<ul class="flex flex-col gap-y-15px">
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">1. Project Name: </span>
|
||
<span class="leading-1.8">Quarter </span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">2. Project Type: </span>
|
||
<span class="leading-1.8">Apartment / Home</span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">3. Building Location:
|
||
</span>
|
||
<span class="leading-1.8">New York, USA</span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">4. No. Of Apartments:
|
||
</span>
|
||
<span class="leading-1.8">568 </span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">5. Total Investment:
|
||
</span>
|
||
<span class="leading-1.8">$14,500,00 </span>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="mt-30px">
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block mr-15px mb-0">
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-primary-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-heading-color leading-23px">Download
|
||
Brochure</a>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- slide 2 -->
|
||
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
|
||
<div
|
||
class="grid grid-cols-1 lg:grid-cols-12 gap-y-30px py-30px px-15px lg:pr-30px mt-10px shadow-box-shadow-4 bg-white">
|
||
<!-- banner area -->
|
||
<div class="lg:col-start-1 lg:col-span-7 px-15px">
|
||
<img src="./assets/img/product-3/2.jpg" alt="" class="w-full">
|
||
</div>
|
||
<!-- content area -->
|
||
<div class="lg:col-start-8 lg:col-span-5 px-15px bg-section-bg-1">
|
||
<div class="md:px-5 py-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color capitalize inline-block font-semibold">
|
||
<span class="leading-1">About Projects</span>
|
||
</p>
|
||
<h2 class="text-2xl md:text-26px lg:text-3xl xl:text-4xl text-heading-color font-bold mb-30px">
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3 xl:leading-1.3">Upcoming Projects
|
||
</span>
|
||
</h2>
|
||
<ul class="flex flex-col gap-y-15px">
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">1. Project Name: </span>
|
||
<span class="leading-1.8">Quarter </span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">2. Project Type: </span>
|
||
<span class="leading-1.8">Apartment / Home</span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">3. Building Location:
|
||
</span>
|
||
<span class="leading-1.8">New York, USA</span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">4. No. Of Apartments:
|
||
</span>
|
||
<span class="leading-1.8">568 </span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">5. Total Investment:
|
||
</span>
|
||
<span class="leading-1.8">$14,500,00 </span>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="mt-30px">
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block mr-15px mb-0">
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-primary-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-heading-color leading-23px">Download
|
||
Brochure</a>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- slide 3 -->
|
||
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
|
||
<div
|
||
class="grid grid-cols-1 lg:grid-cols-12 gap-y-30px py-30px px-15px lg:pr-30px mt-10px shadow-box-shadow-4 bg-white">
|
||
<!-- banner area -->
|
||
<div class="lg:col-start-1 lg:col-span-7 px-15px">
|
||
<img src="./assets/img/product-3/2.jpg" alt="" class="w-full">
|
||
</div>
|
||
<!-- content area -->
|
||
<div class="lg:col-start-8 lg:col-span-5 px-15px bg-section-bg-1">
|
||
<div class="md:px-5 py-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color capitalize inline-block font-semibold">
|
||
<span class="leading-1">About Projects</span>
|
||
</p>
|
||
<h2 class="text-2xl md:text-26px lg:text-3xl xl:text-4xl text-heading-color font-bold mb-30px">
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3 xl:leading-1.3">Upcoming Projects
|
||
</span>
|
||
</h2>
|
||
<ul class="flex flex-col gap-y-15px">
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">1. Project Name: </span>
|
||
<span class="leading-1.8">Quarter </span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">2. Project Type: </span>
|
||
<span class="leading-1.8">Apartment / Home</span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">3. Building Location:
|
||
</span>
|
||
<span class="leading-1.8">New York, USA</span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">4. No. Of Apartments:
|
||
</span>
|
||
<span class="leading-1.8">568 </span>
|
||
</li>
|
||
<li class="text-sm font-bold flex justify-between items-center">
|
||
<span class="leading-1.8">5. Total Investment:
|
||
</span>
|
||
<span class="leading-1.8">$14,500,00 </span>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="mt-30px">
|
||
<h5
|
||
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block mr-15px mb-0">
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-primary-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-heading-color leading-23px">Download
|
||
Brochure</a>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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-right"></i>
|
||
</div>
|
||
<div class="swiper-button-prev bg-white z-1">
|
||
<i class="fas fa-arrow-left"></i>
|
||
</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 capitalize rounded-full inline-block font-semibold mb-2">
|
||
<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-section-bg-1">
|
||
<h6
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl font-bold text-heading-color mb-15px leading-1.3">
|
||
<span class="leading-1.3"> The Studio </span>
|
||
</h6>
|
||
<p class="text-sm lg:text-base 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 font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Total Area
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
2800 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Bedroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
150 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Bathroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
45 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Belcony/Pets
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
Allowed
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Lounge
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
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-section-bg-1">
|
||
<h6
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl font-bold text-heading-color mb-15px leading-1.3">
|
||
<span class="leading-1.3"> Deluxe Portion </span>
|
||
</h6>
|
||
<p class="text-sm lg:text-base 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 font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Total Area
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
2800 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Bedroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
150 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Bathroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
45 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Belcony/Pets
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
Allowed
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Lounge
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
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-section-bg-1">
|
||
<h6
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl font-bold text-heading-color mb-15px leading-1.3">
|
||
<span class="leading-1.3"> Penthouse </span>
|
||
</h6>
|
||
<p class="text-sm lg:text-base 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 font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Total Area
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
2800 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Bedroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
150 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Bathroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
45 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Belcony/Pets
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
Allowed
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Lounge
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
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-section-bg-1">
|
||
<h6
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl font-bold text-heading-color mb-15px leading-1.3">
|
||
<span class="leading-1.3"> Top Garden </span>
|
||
</h6>
|
||
<p class="text-sm lg:text-base 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 font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Total Area
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
2800 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Bedroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
150 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Bathroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
45 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Belcony/Pets
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
Allowed
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Lounge
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
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-section-bg-1">
|
||
<h6
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl font-bold text-heading-color mb-15px leading-1.3">
|
||
<span class="leading-1.3"> Double Height </span>
|
||
</h6>
|
||
<p class="text-sm lg:text-base 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 font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Total Area
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
2800 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Bedroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
150 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Bathroom
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
45 Sq. Ft
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Belcony/Pets
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
Allowed
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li
|
||
class="text-sm md:text-base font-semibold relative z-0 before:w-full before:h-1 before:border-b before:border-dashed before:border-color-1 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-section-bg-1">
|
||
Lounge
|
||
</li>
|
||
|
||
<li class="leading-1.8 pl-10px bg-section-bg-1">
|
||
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>
|
||
|
||
<!-- area properties section -->
|
||
<section>
|
||
<div
|
||
class="relative z-0 before:w-full before:h-[72%] before:bg-section-bg-1 before:absolute before:left-0 before:top-0 before:-z-1">
|
||
<div>
|
||
<div class="container pt-115px pb-65px">
|
||
<!-- section heading -->
|
||
<div class="mb-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color capitalize inline-block font-semibold mb-1.5">
|
||
<span class="leading-1.3">Area 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">Find Your Dream House <br>
|
||
Search By Area
|
||
</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="properties-slider-container swiper-container relative -mx-15px">
|
||
<!-- apartment cards -->
|
||
<div class="swiper properties-slider static">
|
||
<div class="swiper-wrapper">
|
||
<!-- card 1 -->
|
||
<div class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default">
|
||
<div class="group p-15px shadow-box-shadow-4 bg-white">
|
||
<!-- 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="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full">
|
||
2 properties
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="pt-25px px-5px pb-10px">
|
||
<ul class="mb-3">
|
||
<li class="text-sm lg:text-base">
|
||
<a href="locations.html"
|
||
class="leading-1.8 lg:leading-1.8 hover:text-secondary-color flex gap-5px items-center">
|
||
San Francisco</a>
|
||
</li>
|
||
</ul>
|
||
<h4 class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3">
|
||
<a href="product-details.html" class="hover:text-secondary-color leading-1.3">Mission District
|
||
Area</a>
|
||
</h4>
|
||
<a href="product-details.html" class="text-sm lg:text-base text-secondary-color">
|
||
<span class="leading-1.8">View Property <i class="flaticon-right-arrow"></i></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- card 2 -->
|
||
<div class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default">
|
||
<div class="group p-15px shadow-box-shadow-4 bg-white">
|
||
<!-- 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="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full">
|
||
5 Properties
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="pt-25px px-5px pb-10px">
|
||
<ul class="mb-3">
|
||
<li class="text-sm lg:text-base">
|
||
<a href="locations.html"
|
||
class="leading-1.8 lg:leading-1.8 hover:text-secondary-color flex gap-5px items-center">
|
||
New York</a>
|
||
</li>
|
||
</ul>
|
||
<h4 class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3">
|
||
<a href="product-details.html" class="hover:text-secondary-color leading-1.3">Pacific Heights
|
||
Area</a>
|
||
</h4>
|
||
<a href="product-details.html" class="text-sm lg:text-base text-secondary-color">
|
||
<span class="leading-1.8">View Property <i class="flaticon-right-arrow"></i></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- card 3 -->
|
||
<div class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default">
|
||
<div class="group p-15px shadow-box-shadow-4 bg-white">
|
||
<!-- 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="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full">
|
||
9 Properties
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="pt-25px px-5px pb-10px">
|
||
<ul class="mb-3">
|
||
<li class="text-sm lg:text-base">
|
||
<a href="locations.html"
|
||
class="leading-1.8 lg:leading-1.8 hover:text-secondary-color flex gap-5px items-center">
|
||
Sedona, Arizona</a>
|
||
</li>
|
||
</ul>
|
||
<h4 class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3">
|
||
<a href="product-details.html" class="hover:text-secondary-color leading-1.3">Noe Valley
|
||
Zones</a>
|
||
</h4>
|
||
<a href="product-details.html" class="text-sm lg:text-base text-secondary-color">
|
||
<span class="leading-1.8">View Property <i class="flaticon-right-arrow"></i></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- card 4 -->
|
||
<div class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default">
|
||
<div class="group p-15px shadow-box-shadow-4 bg-white">
|
||
<!-- 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="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full">
|
||
5 Properties
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="pt-25px px-5px pb-10px">
|
||
<ul class="mb-3">
|
||
<li class="text-sm lg:text-base">
|
||
<a href="locations.html"
|
||
class="leading-1.8 lg:leading-1.8 hover:text-secondary-color flex gap-5px items-center">
|
||
New York</a>
|
||
</li>
|
||
</ul>
|
||
<h4 class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3">
|
||
<a href="product-details.html" class="hover:text-secondary-color leading-1.3">Pacific Heights
|
||
Area</a>
|
||
</h4>
|
||
<a href="product-details.html" class="text-sm lg:text-base text-secondary-color">
|
||
<span class="leading-1.8">View Property <i class="flaticon-right-arrow"></i></span>
|
||
</a>
|
||
</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-right"></i>
|
||
</div>
|
||
<div class="swiper-button-prev bg-white z-1">
|
||
<i class="fas fa-arrow-left"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- availabel spaces section -->
|
||
<section>
|
||
<div>
|
||
<div>
|
||
<div class="container pb-30">
|
||
<!-- section heading -->
|
||
<div class="mb-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color capitalize inline-block font-semibold mb-1.5">
|
||
<span class="leading-1.3">Avialable Spaces</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">Select Availability </span>
|
||
</h2>
|
||
</div>
|
||
|
||
<!-- table -->
|
||
<div>
|
||
<!-- table lg-->
|
||
<div class="hidden md:block">
|
||
<table class="table-fixed text-sm lg:text-base capitalize text-center w-full">
|
||
<tr class="border-b-2 border-border-color-1 leading-1.8">
|
||
<td class="pt-4 pb-15px">Residence</td>
|
||
<td class="pt-4 pb-15px">Bedrooms</td>
|
||
<td class="pt-4 pb-15px">Bathroom</td>
|
||
<td class="pt-4 pb-15px">SQ.FT</td>
|
||
<td class="pt-4 pb-15px">Rent Price</td>
|
||
<td class="pt-4 pb-15px">Details</td>
|
||
</tr>
|
||
<tr class="leading-1.8">
|
||
<td class="pt-4 pb-15px uppercase">TOWER NAME</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">1,200</td>
|
||
<td class="pt-4 pb-15px">$3,500</td>
|
||
<td class="pt-4 pb-15px">
|
||
<a href="product-details.html">+ Available</a>
|
||
</td>
|
||
</tr>
|
||
<tr class="leading-1.8 bg-section-bg-1">
|
||
<td class="pt-4 pb-15px uppercase">TOWER NAME</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">1,200</td>
|
||
<td class="pt-4 pb-15px">$3,500</td>
|
||
<td class="pt-4 pb-15px">
|
||
<a href="product-details.html">+ Available</a>
|
||
</td>
|
||
</tr>
|
||
<tr class="leading-1.8">
|
||
<td class="pt-4 pb-15px uppercase">TOWER NAME</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">1,200</td>
|
||
<td class="pt-4 pb-15px">$3,500</td>
|
||
<td class="pt-4 pb-15px">
|
||
<a href="product-details.html">+ Available</a>
|
||
</td>
|
||
</tr>
|
||
<tr class="leading-1.8 bg-section-bg-1">
|
||
<td class="pt-4 pb-15px uppercase">TOWER NAME</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">1,200</td>
|
||
<td class="pt-4 pb-15px">$3,500</td>
|
||
<td class="pt-4 pb-15px">
|
||
<a href="product-details.html">+ Available</a>
|
||
</td>
|
||
</tr>
|
||
<tr class="leading-1.8">
|
||
<td class="pt-4 pb-15px uppercase">TOWER NAME</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">1,200</td>
|
||
<td class="pt-4 pb-15px">$3,500</td>
|
||
<td class="pt-4 pb-15px">
|
||
<a href="product-details.html">+ Available</a>
|
||
</td>
|
||
</tr>
|
||
<tr class="leading-1.8 bg-section-bg-1">
|
||
<td class="pt-4 pb-15px uppercase">TOWER NAME</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">3</td>
|
||
<td class="pt-4 pb-15px">1,200</td>
|
||
<td class="pt-4 pb-15px">$3,500</td>
|
||
<td class="pt-4 pb-15px">
|
||
<a href="product-details.html">+ Available</a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<!-- table sm-->
|
||
<div class="block md:hidden">
|
||
<ul class="text-sm lg:text-base capitalize text-center pt-10px pb-25px bg-section-bg-1">
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Residence</span>
|
||
<span class="uppercase">TOWER NAME</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Bedrooms</span> <span>3</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Bathroom</span> <span>3</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>SQ.FT</span> <span>1,200</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Rent Price</span> <span>$3,500</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Details</span>
|
||
<a href="product-details.html">+ Available</a>
|
||
</li>
|
||
</ul>
|
||
<ul class="text-sm lg:text-base capitalize text-center pt-10px pb-25px">
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Residence</span>
|
||
<span class="uppercase">TOWER NAME</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Bedrooms</span> <span>3</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Bathroom</span> <span>3</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>SQ.FT</span> <span>1,200</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Rent Price</span> <span>$3,500</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Details</span>
|
||
<a href="product-details.html">+ Available</a>
|
||
</li>
|
||
</ul>
|
||
<ul class="text-sm lg:text-base capitalize text-center pt-10px pb-25px bg-section-bg-1">
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Residence</span>
|
||
<span class="uppercase">TOWER NAME</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Bedrooms</span> <span>3</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Bathroom</span> <span>3</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>SQ.FT</span> <span>1,200</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Rent Price</span> <span>$3,500</span>
|
||
</li>
|
||
<li class="mt-4 grid grid-cols-2 leading-1.8">
|
||
<span>Details</span>
|
||
<a href="product-details.html">+ Available</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- neighbour section -->
|
||
<section>
|
||
<div class="bg-section-bg-1">
|
||
<div>
|
||
<div class="container py-30">
|
||
<!-- section heading -->
|
||
<div class="mb-50px">
|
||
<p
|
||
class="text-sm md:text-15px lg:text-base text-secondary-color capitalize inline-block font-semibold mb-1.5">
|
||
<span class="leading-1.3">Explore Neighbour</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">What’s In Neighbour <br>
|
||
Explore Below
|
||
</span>
|
||
</h2>
|
||
</div>
|
||
<!-- neighbour slider -->
|
||
<div class="neighbour-slider-container swiper-container relative -mx-15px">
|
||
<div class="flex justify-center lg:block mb-10 lg:mb-10 lg:absolute lg:left-[35px] lg:bottom-10 lg:z-xl">
|
||
<div class="w-[270px] lg:w-[420px]">
|
||
<div class="swiper neighbour-slider-tumbs_slider">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide cursor-pointer">
|
||
<img src="./assets/img/neighbour/1.jpg" class="w-full border-[7px] border-white" alt="">
|
||
</div>
|
||
<div class="swiper-slide cursor-pointer">
|
||
<img src="./assets/img/neighbour/2.jpg" class="w-full border-[7px] border-white" alt="">
|
||
</div>
|
||
<div class="swiper-slide cursor-pointer">
|
||
<img src="./assets/img/neighbour/3.jpg" class="w-full border-[7px] border-white" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper neighbour-slider">
|
||
<div class="swiper-wrapper">
|
||
<!-- slide 1 -->
|
||
<div class="swiper-slide px-15px">
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-30px">
|
||
<div class="lg:col-start-1 lg:col-span-8">
|
||
<img src="./assets/img/neighbour/1.jpg" class="w-full" alt="">
|
||
</div>
|
||
<div class="lg:col-start-9 lg:col-span-4 mb-50px">
|
||
<div class="group p-15px shadow-box-shadow-4 bg-white">
|
||
<!-- 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 transition-all duration-700" alt="">
|
||
</a>
|
||
<div
|
||
class="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full">
|
||
9 properties
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="pt-25px px-5px pb-10px">
|
||
<h4 class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3">
|
||
<a href="product-details.html" class="hover:text-secondary-color leading-1.3">Shopping
|
||
Center</a>
|
||
</h4>
|
||
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8 text-secondary-color">
|
||
1,500m /
|
||
</span>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
21 min. walk
|
||
</span>
|
||
</p>
|
||
<p class="text-sm lg:text-base pt-10px mb-5">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Lorem ipsum dolor sit amet, consectetur
|
||
adipisicing elit, sed do eiusmod tempor
|
||
incididunt ut labore Enim ullamco laboris.
|
||
</span>
|
||
</p>
|
||
<a href="product-details.html" class="text-sm lg:text-base text-secondary-color">
|
||
<span class="leading-1.8">View Property
|
||
<i class="flaticon-right-arrow"></i></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- slide 2-->
|
||
<div class="swiper-slide px-15px">
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-30px">
|
||
<div class="lg:col-start-1 lg:col-span-8">
|
||
<img src="./assets/img/neighbour/2.jpg" class="w-full" alt="">
|
||
</div>
|
||
<div class="lg:col-start-9 lg:col-span-4 mb-50px">
|
||
<div class="group p-15px shadow-box-shadow-4 bg-white">
|
||
<!-- 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 transition-all duration-700" alt="">
|
||
</a>
|
||
<div
|
||
class="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full">
|
||
9 properties
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="pt-25px px-5px pb-10px">
|
||
<h4 class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3">
|
||
<a href="product-details.html" class="hover:text-secondary-color leading-1.3">Medical
|
||
Hospital</a>
|
||
</h4>
|
||
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8 text-secondary-color">
|
||
1,500m /
|
||
</span>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
21 min. walk
|
||
</span>
|
||
</p>
|
||
<p class="text-sm lg:text-base pt-10px mb-5">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Lorem ipsum dolor sit amet, consectetur
|
||
adipisicing elit, sed do eiusmod tempor
|
||
incididunt ut labore Enim ullamco laboris.
|
||
</span>
|
||
</p>
|
||
<a href="product-details.html" class="text-sm lg:text-base text-secondary-color">
|
||
<span class="leading-1.8">View Property
|
||
<i class="flaticon-right-arrow"></i></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- slide 3-->
|
||
<div class="swiper-slide px-15px">
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-30px">
|
||
<div class="lg:col-start-1 lg:col-span-8">
|
||
<img src="./assets/img/neighbour/3.jpg" class="w-full" alt="">
|
||
</div>
|
||
<div class="lg:col-start-9 lg:col-span-4 mb-50px">
|
||
<div class="group p-15px shadow-box-shadow-4 bg-white">
|
||
<!-- 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 transition-all duration-700" alt="">
|
||
</a>
|
||
<div
|
||
class="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full">
|
||
9 properties
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div class="pt-25px px-5px pb-10px">
|
||
<h4 class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3">
|
||
<a href="product-details.html" class="hover:text-secondary-color leading-1.3">Children
|
||
Playland</a>
|
||
</h4>
|
||
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8 text-secondary-color">
|
||
1,500m /
|
||
</span>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
21 min. walk
|
||
</span>
|
||
</p>
|
||
<p class="text-sm lg:text-base pt-10px mb-5">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Lorem ipsum dolor sit amet, consectetur
|
||
adipisicing elit, sed do eiusmod tempor
|
||
incididunt ut labore Enim ullamco laboris.
|
||
</span>
|
||
</p>
|
||
<a href="product-details.html" class="text-sm lg:text-base text-secondary-color">
|
||
<span class="leading-1.8">View Property
|
||
<i class="flaticon-right-arrow"></i></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- neighbour accordion -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-30px">
|
||
<ul class="accordion-container neighbour-accordion">
|
||
<li class="accordion border-b-2 border-border-color-10">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer text-sm lg:text-base py-5 pl-5px pr-4 md:pb-5">
|
||
<div class="flex gap-3 items-center font-semibold font-poppins">
|
||
<i
|
||
class="flaticon-mortarboard text-xl md:text-26px text-white w-10 h-10 md:w-50px md:h-50px bg-secondary-color leading-10 md:leading-50px text-center inline-block"></i>
|
||
<p class="text-primary-color text-sm md:text-lg">
|
||
University / College
|
||
</p>
|
||
</div>
|
||
<button class="px-3 h-full">
|
||
<span class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor"></span><span
|
||
class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor rotate-90 -mt-[2px]"></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div class="accordion-content h-0 overflow-hidden transition-all duration-500">
|
||
<div class="content-wrapper px-5 md:px-10 pt-15px pb-25px text-sm lg:text-base">
|
||
<p class="leading-1.8 lg:leading-1.8 mb-5">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing
|
||
elit, sed do eiusmod tempor incididunt ut labore et
|
||
dolore magna aliqua. Scelerisque eleifend donec
|
||
pretium vulputate sapien nec sagittis.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion border-b-2 border-border-color-10">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer text-sm lg:text-base py-5 pl-5px pr-4 md:pb-5">
|
||
<div class="flex gap-3 items-center font-semibold font-poppins">
|
||
<i
|
||
class="flaticon-hospital text-xl md:text-26px text-white w-10 h-10 md:w-50px md:h-50px bg-secondary-color leading-10 md:leading-50px text-center inline-block"></i>
|
||
<p class="text-primary-color text-sm md:text-lg">
|
||
Medical Hospital
|
||
</p>
|
||
</div>
|
||
<button class="px-3 h-full">
|
||
<span class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor"></span><span
|
||
class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor rotate-90 -mt-[2px]"></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div class="accordion-content h-0 overflow-hidden transition-all duration-500">
|
||
<div class="content-wrapper px-5 md:px-10 pt-15px pb-25px text-sm lg:text-base">
|
||
<div>
|
||
<div
|
||
class="float-left clear-both inline-block mr-5 relative z-0 after:w-full after:h-full after:absolute after:left-0 after:top-0 after:bg-primary-color after:opacity-30 after:z-1">
|
||
<img src="./assets/img/bg/17.jpg" class="inline-block" alt="">
|
||
<div class="absolute left-0 top-0 flex justify-center items-center h-full w-full z-10">
|
||
<a class="glightbox3 hidden w-60px h-60px text-center text-sm lg:text-base text-secondary-color shadow-box-shadow-2 rounded-full bg-white items-center justify-center"
|
||
href="https://www.youtube.com/embed/tlThdr3O5Qo" data-glightbox="type: video;">
|
||
<i class="icon-play ltn__secondary-color"></i>
|
||
</a>
|
||
|
||
<a class="glightbox3 hidden w-60px h-60px text-center text-sm lg:text-base text-secondary-color shadow-box-shadow-2 rounded-full bg-white items-center justify-center"
|
||
href="https://www.youtube.com/embed/tlThdr3O5Qo" data-glightbox="type: video;">
|
||
<i class="icon-play ltn__secondary-color"></i>
|
||
</a>
|
||
|
||
<a class="glightbox3 hidden w-60px h-60px text-center text-sm lg:text-base text-secondary-color shadow-box-shadow-2 rounded-full bg-white items-center justify-center"
|
||
href="https://www.youtube.com/embed/tlThdr3O5Qo" data-glightbox="type: video;">
|
||
<i class="icon-play ltn__secondary-color"></i>
|
||
</a>
|
||
|
||
<a class="glightbox3 hidden w-60px h-60px text-center text-sm lg:text-base text-secondary-color shadow-box-shadow-2 rounded-full bg-white items-center justify-center"
|
||
href="https://www.youtube.com/embed/tlThdr3O5Qo" data-glightbox="type: video;">
|
||
<i class="icon-play ltn__secondary-color"></i>
|
||
</a>
|
||
|
||
<a class="glightbox3 hidden w-60px h-60px text-center text-sm lg:text-base text-secondary-color shadow-box-shadow-2 rounded-full bg-white items-center justify-center"
|
||
href="https://www.youtube.com/embed/tlThdr3O5Qo" data-glightbox="type: video;">
|
||
<i class="icon-play ltn__secondary-color"></i>
|
||
</a>
|
||
|
||
<a class="glightbox3 hidden w-60px h-60px text-center text-sm lg:text-base text-secondary-color shadow-box-shadow-2 rounded-full bg-white items-center justify-center"
|
||
href="https://www.youtube.com/embed/tlThdr3O5Qo" data-glightbox="type: video;">
|
||
<i class="icon-play ltn__secondary-color"></i>
|
||
</a>
|
||
|
||
<a class="glightbox3 hidden w-60px h-60px text-center text-sm lg:text-base text-secondary-color shadow-box-shadow-2 rounded-full bg-white items-center justify-center"
|
||
href="https://www.youtube.com/embed/X7R-q9rsrtU?autoplay=1&showinfo=0"
|
||
data-glightbox="type: video;">
|
||
<i class="icon-play ltn__secondary-color"></i>
|
||
</a>
|
||
|
||
<a class="glightbox3 w-60px h-60px text-center text-sm lg:text-base text-secondary-color shadow-box-shadow-2 rounded-full bg-white flex items-center justify-center"
|
||
href="https://www.youtube.com/embed/LjCzPp-MK48?autoplay=1&showinfo=0"
|
||
data-glightbox="type: video;">
|
||
<i class="icon-play ltn__secondary-color"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<p class="leading-1.8 lg:leading-1.8 mb-5">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing
|
||
elit, sed do eiusmod tempor incididunt ut labore et
|
||
dolore magna aliqua. Scelerisque eleifend donec
|
||
pretium vulputate sapien nec sagittis.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion border-b-2 border-border-color-10">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer text-sm lg:text-base py-5 pl-5px pr-4 md:pb-5">
|
||
<div class="flex gap-3 items-center font-semibold font-poppins">
|
||
<i
|
||
class="flaticon-metro text-xl md:text-26px text-white w-10 h-10 md:w-50px md:h-50px bg-secondary-color leading-10 md:leading-50px text-center inline-block"></i>
|
||
<p class="text-primary-color text-sm md:text-lg">
|
||
Railway Station
|
||
</p>
|
||
</div>
|
||
<button class="px-3 h-full">
|
||
<span class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor"></span><span
|
||
class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor rotate-90 -mt-[2px]"></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div class="accordion-content h-0 overflow-hidden transition-all duration-500">
|
||
<div class="content-wrapper px-5 md:px-10 pt-15px pb-25px text-sm lg:text-base">
|
||
<p class="leading-1.8 lg:leading-1.8 mb-5">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing
|
||
elit, sed do eiusmod tempor incididunt ut labore et
|
||
dolore magna aliqua. Scelerisque eleifend donec
|
||
pretium vulputate sapien nec sagittis.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<ul class="accordion-container neighbour-accordion">
|
||
<li class="accordion border-b-2 border-border-color-10">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer text-sm lg:text-base py-5 pl-5px pr-4 md:pb-5">
|
||
<div class="flex gap-3 items-center font-semibold font-poppins">
|
||
<i
|
||
class="flaticon-building text-xl md:text-26px text-white w-10 h-10 md:w-50px md:h-50px bg-secondary-color leading-10 md:leading-50px text-center inline-block"></i>
|
||
<p class="text-primary-color text-sm md:text-lg">
|
||
Shopping Mall
|
||
</p>
|
||
</div>
|
||
<button class="px-3 h-full">
|
||
<span class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor"></span><span
|
||
class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor rotate-90 -mt-[2px]"></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div class="accordion-content h-0 overflow-hidden transition-all duration-500">
|
||
<div class="content-wrapper px-5 md:px-10 pt-15px pb-25px text-sm lg:text-base">
|
||
<p class="leading-1.8 lg:leading-1.8 mb-5">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing
|
||
elit, sed do eiusmod tempor incididunt ut labore et
|
||
dolore magna aliqua. Scelerisque eleifend donec
|
||
pretium vulputate sapien nec sagittis.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion border-b-2 border-border-color-10">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer text-sm lg:text-base py-5 pl-5px pr-4 md:pb-5">
|
||
<div class="flex gap-3 items-center font-semibold font-poppins">
|
||
<i
|
||
class="flaticon-airplane text-xl md:text-26px text-white w-10 h-10 md:w-50px md:h-50px bg-secondary-color leading-10 md:leading-50px text-center inline-block"></i>
|
||
<p class="text-primary-color text-sm md:text-lg">
|
||
Airport/Biman
|
||
</p>
|
||
</div>
|
||
<button class="px-3 h-full">
|
||
<span class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor"></span><span
|
||
class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor rotate-90 -mt-[2px]"></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div class="accordion-content h-0 overflow-hidden transition-all duration-500">
|
||
<div class="content-wrapper px-5 md:px-10 pt-15px pb-25px text-sm lg:text-base">
|
||
<p class="leading-1.8 lg:leading-1.8 mb-5">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing
|
||
elit, sed do eiusmod tempor incididunt ut labore et
|
||
dolore magna aliqua. Scelerisque eleifend donec
|
||
pretium vulputate sapien nec sagittis.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="accordion border-b-2 border-border-color-10">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer text-sm lg:text-base py-5 pl-5px pr-4 md:pb-5">
|
||
<div class="flex gap-3 items-center font-semibold font-poppins">
|
||
<i
|
||
class="flaticon-slider text-xl md:text-26px text-white w-10 h-10 md:w-50px md:h-50px bg-secondary-color leading-10 md:leading-50px text-center inline-block"></i>
|
||
<p class="text-primary-color text-sm md:text-lg">
|
||
Children Playland
|
||
</p>
|
||
</div>
|
||
<button class="px-3 h-full">
|
||
<span class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor"></span><span
|
||
class="w-4 h-0.5 bg-primary-color block dark:bg-whiteColor rotate-90 -mt-[2px]"></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div class="accordion-content h-0 overflow-hidden transition-all duration-500">
|
||
<div class="content-wrapper px-5 md:px-10 pt-15px pb-25px text-sm lg:text-base">
|
||
<p class="leading-1.8 lg:leading-1.8 mb-5">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing
|
||
elit, sed do eiusmod tempor incididunt ut labore et
|
||
dolore magna aliqua. Scelerisque eleifend donec
|
||
pretium vulputate sapien nec sagittis.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- features section -->
|
||
<section>
|
||
<div class="container pt-115px pb-70px">
|
||
<!-- section heading -->
|
||
<div class="text-center mb-50px">
|
||
<p class="text-sm md:text-15px lg:text-base text-secondary-color capitalize inline-block font-semibold mb-2">
|
||
<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="text-sm lg:text-base 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-end 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-xl transition-all duration-300 text-secondary-color group-hover:text-white font-semibold leading-1.8 w-full text-start">
|
||
01
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-10px font-poppins font-semibold leading-1.8 capitalize w-full text-start">
|
||
Parking Space
|
||
</span>
|
||
|
||
<span class="leading-1.8 group-hover:text-white">
|
||
Enimad minim veniam quis no exercitation ullamco lab
|
||
</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="text-sm lg:text-base 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-end 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-xl transition-all duration-300 text-secondary-color group-hover:text-white font-semibold leading-1.8 w-full text-start">
|
||
02
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-10px font-poppins font-semibold leading-1.8 capitalize w-full text-start">
|
||
Swimming Pool
|
||
</span>
|
||
|
||
<span class="leading-1.8 group-hover:text-white">
|
||
Enimad minim veniam quis no exercitation ullamco lab
|
||
</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="text-sm lg:text-base 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-end 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-xl transition-all duration-300 text-secondary-color group-hover:text-white font-semibold leading-1.8 w-full text-start">
|
||
03
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-10px font-poppins font-semibold leading-1.8 capitalize w-full text-start">
|
||
Private Security
|
||
</span>
|
||
|
||
<span class="leading-1.8 group-hover:text-white">
|
||
Enimad minim veniam quis no exercitation ullamco lab
|
||
</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="text-sm lg:text-base 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-end 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-xl transition-all duration-300 text-secondary-color group-hover:text-white font-semibold leading-1.8 w-full text-start">
|
||
04
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-10px font-poppins font-semibold leading-1.8 capitalize w-full text-start">
|
||
Medical Center
|
||
</span>
|
||
|
||
<span class="leading-1.8 group-hover:text-white">
|
||
Enimad minim veniam quis no exercitation ullamco lab
|
||
</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="text-sm lg:text-base 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-end 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-xl transition-all duration-300 text-secondary-color group-hover:text-white font-semibold leading-1.8 w-full text-start">
|
||
05
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-10px font-poppins font-semibold leading-1.8 capitalize w-full text-start">
|
||
Library Area
|
||
</span>
|
||
|
||
<span class="leading-1.8 group-hover:text-white">
|
||
Enimad minim veniam quis no exercitation ullamco lab
|
||
</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="text-sm lg:text-base 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-end 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-xl transition-all duration-300 text-secondary-color group-hover:text-white font-semibold leading-1.8 w-full text-start">
|
||
06
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-10px font-poppins font-semibold leading-1.8 capitalize w-full text-start">
|
||
King Size Beds
|
||
</span>
|
||
|
||
<span class="leading-1.8 group-hover:text-white">
|
||
Enimad minim veniam quis no exercitation ullamco lab
|
||
</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="text-sm lg:text-base 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-end 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-xl transition-all duration-300 text-secondary-color group-hover:text-white font-semibold leading-1.8 w-full text-start">
|
||
07
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-10px font-poppins font-semibold leading-1.8 capitalize w-full text-start">
|
||
Smart Homes
|
||
</span>
|
||
|
||
<span class="leading-1.8 group-hover:text-white">
|
||
Enimad minim veniam quis no exercitation ullamco lab
|
||
</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="text-sm lg:text-base 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-end 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-xl transition-all duration-300 text-secondary-color group-hover:text-white font-semibold leading-1.8 w-full text-start">
|
||
08
|
||
</span>
|
||
<span
|
||
class="block text-13px md:text-lg xl:text-22px transition-all duration-300 text-heading-color group-hover:text-white mb-10px font-poppins font-semibold leading-1.8 capitalize w-full text-start">
|
||
Kid’s Playland
|
||
</span>
|
||
|
||
<span class="leading-1.8 group-hover:text-white">
|
||
Enimad minim veniam quis no exercitation ullamco lab
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- testimonials section -->
|
||
<section>
|
||
<div class="bg-[url('../img/bg/23.jpg')] bg-top bg-no-repeat">
|
||
<div class="container pt-115px pb-65px">
|
||
<!-- section heading -->
|
||
<div class="mb-50px">
|
||
<p class="text-sm md:text-15px lg:text-base text-white capitalize mb-2 inline-block font-semibold">
|
||
<span class="leading-1.3">Client,s Testimonial</span>
|
||
</p>
|
||
<h2 class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-white font-bold">
|
||
<span class="leading-1.3">See What,s Our Client <br>
|
||
|
||
Says About Us
|
||
</span>
|
||
</h2>
|
||
</div>
|
||
<!-- testimonial slider -->
|
||
|
||
<div class="swiper-container upcoming-project-slider-container -mx-15px relative">
|
||
<div class="swiper testimonials-slider2 static">
|
||
<div class="swiper-wrapper items-stretch">
|
||
<!-- slide 1 -->
|
||
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
|
||
<div
|
||
class="p-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative">
|
||
<!-- card header -->
|
||
<div class="flex flex-col-reverse lg:flex-row lg:justify-between items-center mb-5">
|
||
<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>
|
||
<ul class="flex text-xs text-ratings mb-1 lg:mb-0">
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div>
|
||
<p class="text-sm md:text-base lg:text-lg">
|
||
<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>
|
||
|
||
<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>
|
||
<!-- slide 1 -->
|
||
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
|
||
<div
|
||
class="p-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative">
|
||
<!-- card header -->
|
||
<div class="flex flex-col-reverse lg:flex-row lg:justify-between items-center mb-5">
|
||
<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>
|
||
<ul class="flex text-xs text-ratings mb-1 lg:mb-0">
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div>
|
||
<p class="text-sm md:text-base lg:text-lg">
|
||
<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>
|
||
|
||
<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>
|
||
<!-- slide 1 -->
|
||
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
|
||
<div
|
||
class="p-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative">
|
||
<!-- card header -->
|
||
<div class="flex flex-col-reverse lg:flex-row lg:justify-between items-center mb-5">
|
||
<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>
|
||
<ul class="flex text-xs text-ratings mb-1 lg:mb-0">
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div>
|
||
<p class="text-sm md:text-base lg:text-lg">
|
||
<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>
|
||
|
||
<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>
|
||
<!-- slide 1 -->
|
||
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
|
||
<div
|
||
class="p-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative">
|
||
<!-- card header -->
|
||
<div class="flex flex-col-reverse lg:flex-row lg:justify-between items-center mb-5">
|
||
<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>
|
||
<ul class="flex text-xs text-ratings mb-1 lg:mb-0">
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="leading-1.8">
|
||
<a href="#" tabindex="0"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- card body -->
|
||
<div>
|
||
<p class="text-sm md:text-base lg:text-lg">
|
||
<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>
|
||
|
||
<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-right"></i>
|
||
</div>
|
||
<div class="swiper-button-prev bg-white z-1">
|
||
<i class="fas fa-arrow-left"></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 capitalize inline-block font-semibold mb-2">
|
||
<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-right"></i>
|
||
</div>
|
||
<div class="swiper-button-prev bg-white z-1">
|
||
<i class="fas fa-arrow-left"></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:pr-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 mr-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 mr-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 mr-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 pl-5 pr-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 right-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] right-[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/main.js"></script>
|
||
</body>
|
||
|
||
</html> |