5228 lines
251 KiB
HTML
5228 lines
251 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8" >
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
|
||
<title>Quarter - Real Estate HTML Template</title>
|
||
<link
|
||
rel="shortcut icon"
|
||
href="assets/img/favicon.png"
|
||
type="image/x-icon"
|
||
>
|
||
<link rel="stylesheet" href="assets/css/font-icons.css" >
|
||
<link rel="stylesheet" href="assets/css/nice-select2.css" >
|
||
<link rel="stylesheet" href="assets/css/animate.css" >
|
||
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" >
|
||
<link rel="stylesheet" href="assets/css/glightbox.css" >
|
||
<link rel="stylesheet" href="assets/css/style.css" >
|
||
</head>
|
||
<body>
|
||
<!-- header area start -->
|
||
<header>
|
||
<!-- header top -->
|
||
<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:info@webmail.com?Subject=Flower%20greetings%20to%20you"
|
||
><i
|
||
class="icon-mail text-secondary-color font-bold mr-0.5"
|
||
></i>
|
||
info@webmail.com</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="hover:text-secondary-color" href="locations.html"
|
||
><i
|
||
class="icon-placeholder text-secondary-color font-bold mr-0.5"
|
||
></i>
|
||
15/A, Nest Tower, NYC</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div
|
||
class="basis-full md:basis-auto flex justify-center md:block py-5px md:py-0"
|
||
>
|
||
<ul class="text flex items-center gap-15px">
|
||
<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>
|
||
<li>
|
||
<a
|
||
href="add-listing.html"
|
||
class="px-4 md:px-5 py-0.5 md:py-10px mr-2 lg:mr-5 bg-secondary-color inline-block bg-opacity-100 hover:bg-opacity-60 hover:text-white"
|
||
>Add Listing</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-col md:flex-row justify-center md: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-center 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"
|
||
>Home <span class="text-sm font-extrabold -ml-0.5">+</span></a
|
||
>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
|
||
>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index.html"
|
||
>Home Style 01</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-1.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-2.html"
|
||
>Home Style 02</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-2.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-3.html"
|
||
>Home Style 03</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-3.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-4.html"
|
||
>Home Style 04</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-4.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2 relative"
|
||
href="index-5.html"
|
||
><span
|
||
class="text-10px uppercase text-white bg-secondary-color px-3px absolute left-5 -top-1 rounded-sm"
|
||
>video</span
|
||
>
|
||
Home Style 05</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-5.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-6.html"
|
||
>Home Style 06</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-6.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-7.html"
|
||
>Home Style 07</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-7.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-8.html"
|
||
>Home Style 08</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-8.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-9.html"
|
||
>Home Style 09</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-9.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2 relative"
|
||
href="index-10.html"
|
||
><span
|
||
class="text-10px uppercase text-white bg-secondary-color px-3px absolute left-5 -top-1 rounded-sm"
|
||
>map</span
|
||
>
|
||
Home Style 10</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-10.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
<li class="group/nested relative">
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="index-11.html"
|
||
>Home Style 11</a
|
||
>
|
||
<img
|
||
src="./assets/img/home-demos/home-11.jpg"
|
||
alt="#"
|
||
class="w-130px absolute -bottom-2 -left-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!-- item 2 -->
|
||
<li class="relative group">
|
||
<a
|
||
href="#"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>About
|
||
<span class="text-sm font-extrabold -ml-0.5">+</span></a
|
||
>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
|
||
>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="about.html"
|
||
>About</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="service.html"
|
||
>Services</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="service-details.html"
|
||
>Service Details</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="portfolio.html"
|
||
>Portfolio</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="portfolio-2.html"
|
||
>Portfolio - 02</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="portfolio-details.html"
|
||
>Portfolio Details</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="whitespace-nowrap px-30px py-2" href="team.html"
|
||
>Team</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="team-details.html"
|
||
>Team Details</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="whitespace-nowrap px-30px py-2" href="faq.html"
|
||
>FAQ</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="locations.html"
|
||
>Google Map Locations</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- item 3 -->
|
||
<li class="relative group">
|
||
<a
|
||
href="#"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>Shop
|
||
<span class="text-sm font-extrabold -ml-0.5">+</span></a
|
||
>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
|
||
>
|
||
<li>
|
||
<a class="whitespace-nowrap px-30px py-2" href="shop.html"
|
||
>Property Grid</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="shop-list.html"
|
||
>Property List</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="shop-grid.html"
|
||
>Property No Sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="shop-left-sidebar.html"
|
||
>Property Left sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="shop-right-sidebar.html"
|
||
>Property right sidebar</a
|
||
>
|
||
</li>
|
||
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="product-details.html"
|
||
>Property details
|
||
</a>
|
||
</li>
|
||
<li class="relative group/nested">
|
||
<a class="whitespace-nowrap px-30px py-2" href="#"
|
||
>Other Pages
|
||
<span
|
||
class="absolute top-1/2 -translate-y-1/2 left-3 group-hover/nested:text-secondary-color"
|
||
>>></span
|
||
>
|
||
</a>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-15px border-t-[5px] border-secondary-color w-dropdown shadow-box-shadow-4 absolute right-full top-0 opacity-0 invisible translate-y-[5px] transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0 bg-white"
|
||
>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="cart.html"
|
||
>Cart</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="wishlist.html"
|
||
>Wishlist</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="checkout.html"
|
||
>Checkout</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="order-tracking.html"
|
||
>Order Tracking</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="account.html"
|
||
>My Account</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="login.html"
|
||
>Sign in</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="register.html"
|
||
>Register</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- item 4 -->
|
||
<li class="relative group">
|
||
<a
|
||
href="#"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>News <span class="text-sm font-extrabold -ml-0.5">+</span></a
|
||
>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
|
||
>
|
||
<li>
|
||
<a class="whitespace-nowrap px-30px py-2" href="blog.html"
|
||
>News</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="blog-grid.html"
|
||
>News Grid</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="blog-left-sidebar.html"
|
||
>News Left sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="blog-right-sidebar.html"
|
||
>News Right sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-30px py-2"
|
||
href="blog-details.html"
|
||
>News details</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!-- item 5 -->
|
||
<li class="group">
|
||
<a
|
||
href="#"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>Pages
|
||
<span class="text-sm font-extrabold -ml-0.5">+</span></a
|
||
>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="container w-full px-0 py-15px border-t-[5px] border-secondary-color bg-white shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:-translate-y-4 grid grid-cols-4 z-xl"
|
||
>
|
||
<li class="pr-3 pt-3 pl-30px">
|
||
<ul>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-6px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
|
||
href="#"
|
||
>Inner Pages</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<ul class="py-15px">
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="portfolio.html"
|
||
>Portfolio</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="portfolio-2.html"
|
||
>Portfolio - 02</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="portfolio-details.html"
|
||
>Portfolio Details</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="team.html"
|
||
>Team</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="team-details.html"
|
||
>Team Details</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="faq.html"
|
||
>FAQ</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="pr-3 pt-3 pl-30px">
|
||
<ul>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-6px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
|
||
href="#"
|
||
>Inner Pages</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<ul class="py-15px">
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="history.html"
|
||
>History</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="add-listing.html"
|
||
>Add Listing</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="locations.html"
|
||
>Google Map Locations</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="404.html"
|
||
>404</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="contact.html"
|
||
>Contact</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="coming-soon.html"
|
||
>Coming Soon</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="pr-3 pt-3 pl-30px">
|
||
<ul>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-6px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
|
||
href="#"
|
||
>Shop Pages</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<ul class="py-15px">
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="shop.html"
|
||
>Shop</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="shop-left-sidebar.html"
|
||
>Shop Left sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="shop-right-sidebar.html"
|
||
>Shop right sidebar</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="shop-grid.html"
|
||
>Shop Grid</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="product-details.html"
|
||
>Shop details
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-10px py-2"
|
||
href="cart.html"
|
||
>Cart</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="pr-3 pt-3 pl-30px">
|
||
<a
|
||
class="whitespace-nowrap p-10px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
|
||
href="shop.html"
|
||
><img
|
||
src="./assets/img/banner/menu-banner-1.jpg"
|
||
alt=""
|
||
class="w-full inline-block"
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<!-- item 6 -->
|
||
<li>
|
||
<a
|
||
href="contact.html"
|
||
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
|
||
>Contact
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<!-- header right -->
|
||
<div>
|
||
<ul class="flex items-center gap-10px">
|
||
<li class="relative search-form-container">
|
||
<button
|
||
class="search-toggle h-50px w-50px text-heading-color shadow-box-shadow-1 flex justify-center items-center hover:bg-secondary-color hover:text-white transition-all duration-300"
|
||
>
|
||
<i class="icon-search for-search-show font-bold"></i>
|
||
<i class="icon-cancel for-search-close font-bold hidden"></i>
|
||
</button>
|
||
<div
|
||
class="search-form h-0 overflow-hidden absolute left-0 top-full mt-15px transition-all duration-300 shadow-box-shadow-3 z-xl bg-white"
|
||
>
|
||
<form class="w-80 p-15px relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Search here..."
|
||
class="text-sm text-paragraph-color pr-5 pl-50px placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-60px block w-full rounded-none"
|
||
>
|
||
<button
|
||
type="submit"
|
||
class="absolute top-1/2 -translate-y-1/2 left-7 text-heading-color"
|
||
>
|
||
<i class="icon-search text-lg font-bold"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</li>
|
||
<li class="group relative">
|
||
<a
|
||
href="#"
|
||
class="h-50px w-50px text-heading-color shadow-box-shadow-1 flex justify-center items-center hover:bg-secondary-color hover:text-white transition-all duration-300"
|
||
>
|
||
<i class="icon-user font-bold text-lg"></i>
|
||
</a>
|
||
<!-- dropdown -->
|
||
<ul
|
||
class="py-10px w-150px shadow-box-shadow-4 absolute right-0 top-full opacity-0 invisible translate-y-4 bg-white transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
|
||
>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-15px py-5px"
|
||
href="login.html"
|
||
>Sign in</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-15px py-5px"
|
||
href="register.html"
|
||
>Register</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-15px py-5px"
|
||
href="account.html"
|
||
>My Account</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="whitespace-nowrap px-15px py-5px"
|
||
href="wishlist.html"
|
||
>Wishlist</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<button
|
||
class="show-drawer h-50px w-50px text-heading-color shadow-box-shadow-1 flex justify-center items-center hover:bg-secondary-color hover:text-white transition-all duration-300"
|
||
>
|
||
<i class="icon-shopping-cart font-bold text-lg"></i>
|
||
<sup class="ml-1 text-sm font-semibold">2</sup>
|
||
</button>
|
||
</li>
|
||
<li class="block xl:hidden">
|
||
<div
|
||
class="show-drawer d-xl-none h-50px w-50px text-heading-color shadow-box-shadow-1 flex justify-center items-center transition-all duration-300 relative"
|
||
>
|
||
<a href="#ltn__utilize-drawer " class="utilize-toggle">
|
||
<svg viewBox="0 0 800 600">
|
||
<path
|
||
d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200"
|
||
id="top"
|
||
></path>
|
||
<path d="M300,320 L540,320" id="middle"></path>
|
||
<path
|
||
d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190"
|
||
id="bottom"
|
||
transform="translate(480, 320) scale(1, -1) translate(-480, -318) "
|
||
></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- cart sidebar -->
|
||
<div class="drawer-container cart-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"
|
||
></div>
|
||
<div
|
||
class="drawer cart fixed top-0 ltr:-right-[300px] rtl:-left-[300px] ltr:xs:-right-[400px] rtl:xs:-left-[400px] pl-30px pr-10px py-5 w-300px xs:w-100 h-full transition-all duration-500 shadow-dropdown-secodary bg-whiteColor z-high bg-white"
|
||
>
|
||
<div class="h-full">
|
||
<!-- cart wrapper -->
|
||
<div class="h-full overflow-y-auto pr-5">
|
||
<!-- cart top -->
|
||
<div
|
||
class="flex justify-between items-center border-b border-border-primary pt-3px pb-3 mb-25px"
|
||
>
|
||
<div>
|
||
<span class="text-sm md:text-base font-bold">Cart</span>
|
||
</div>
|
||
<div>
|
||
<button class="close-drawer text-black text-3xl px-15px py-2">
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- cart items -->
|
||
<div
|
||
class="max-h-[calc(100%-(360px))] cart-items overflow-y-auto"
|
||
>
|
||
<ul>
|
||
<li class=" pl-10px pt-5 rtl:pr-10px mb-5 flex gap-15px">
|
||
<div class="relative">
|
||
<a href="product-details.html">
|
||
<img
|
||
src="./assets/img/product/1.png"
|
||
alt=""
|
||
class="w-20 inline-block"
|
||
>
|
||
|
||
</a>
|
||
<button
|
||
class="w-5 h-5 shadow-box-shadow-3 text-center text-10px bg-white hover:bg-secondary-color hover:text-white rounded-full absolute top-0 ltr:left-0 rtl:right-0 ltr:-translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 transition-all duration-300 cursor-pointer"
|
||
>
|
||
<i class="icon-cancel leading-5"></i>
|
||
</button>
|
||
</div>
|
||
<div>
|
||
<h6 class="text-sm md:text-15px lg:text-base mb-5px">
|
||
<a
|
||
href="product-details.html"
|
||
class="leading-23px text-heading-color hover:text-secondary-color font-medium"
|
||
>
|
||
Wheel Bearing Retainer
|
||
</a>
|
||
</h6>
|
||
<div class="text-sm lg:text-base">
|
||
<span class="leading-22px">1 x $65.00</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li
|
||
class="border-t border-border-color-1 pl-10px rtl:pr-10px pt-5 mb-5 flex gap-15px"
|
||
>
|
||
<div class="relative">
|
||
<a href="product-details.html">
|
||
<img
|
||
src="./assets/img/product/2.png"
|
||
alt=""
|
||
class="w-20 inline-block"
|
||
>
|
||
|
||
</a>
|
||
<button
|
||
class="w-5 h-5 shadow-box-shadow-3 text-center text-10px bg-white hover:bg-secondary-color hover:text-white rounded-full absolute top-0 rtl:right-0 rtl:translate-x-1/2 -translate-y-1/2 transition-all duration-300 cursor-pointer"
|
||
>
|
||
<i class="icon-cancel leading-5"></i>
|
||
</button>
|
||
</div>
|
||
<div>
|
||
<h6 class="text-sm md:text-15px lg:text-base mb-5px">
|
||
<a
|
||
href="product-details.html"
|
||
class="leading-23px text-heading-color hover:text-secondary-color font-medium"
|
||
>
|
||
3 Rooms Manhattan
|
||
</a>
|
||
</h6>
|
||
<div class="text-sm lg:text-base">
|
||
<span class="leading-22px">1 x $85.00</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li
|
||
class="border-t border-border-color-1 pl-10px rtl:pr-10px pt-5 mb-5 flex gap-15px"
|
||
>
|
||
<div class="relative">
|
||
<a href="product-details.html" >
|
||
<img
|
||
src="./assets/img/product/3.png"
|
||
alt=""
|
||
class="w-20 inline-block"
|
||
>
|
||
|
||
</a>
|
||
<button
|
||
class="w-5 h-5 shadow-box-shadow-3 text-center text-10px bg-white hover:bg-secondary-color hover:text-white rounded-full absolute top-0 rtl:right-0 rtl:translate-x-1/2 -translate-y-1/2 transition-all duration-300 cursor-pointer"
|
||
>
|
||
<i class="icon-cancel leading-5"></i>
|
||
</button>
|
||
</div>
|
||
<div>
|
||
<h6 class="text-sm md:text-15px lg:text-base mb-5px">
|
||
<a
|
||
href="product-details.html"
|
||
class="leading-23px text-heading-color hover:text-secondary-color font-medium"
|
||
>
|
||
OE Replica Wheels
|
||
</a>
|
||
</h6>
|
||
<div class="text-sm lg:text-base">
|
||
<span class="leading-22px">1 x $92.00</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li
|
||
class="border-t border-border-color-1 pl-10px rtl:pr-10px pt-5 mb-5 flex gap-15px"
|
||
>
|
||
<div class="relative">
|
||
<a href="product-details.html" >
|
||
<img
|
||
src="./assets/img/product/4.png"
|
||
alt=""
|
||
class="w-20 inline-block"
|
||
>
|
||
|
||
</a>
|
||
<button
|
||
class="w-5 h-5 shadow-box-shadow-3 text-center text-10px bg-white hover:bg-secondary-color hover:text-white rounded-full absolute top-0 rtl:right-0 rtl:translate-x-1/2 -translate-y-1/2 transition-all duration-300 cursor-pointer"
|
||
>
|
||
<i class="icon-cancel leading-5"></i>
|
||
</button>
|
||
</div>
|
||
<div>
|
||
<h6 class="text-sm md:text-15px lg:text-base mb-5px">
|
||
<a
|
||
href="product-details.html"
|
||
class="leading-23px text-heading-color hover:text-secondary-color font-medium"
|
||
>
|
||
Shock Mount Insulator
|
||
</a>
|
||
</h6>
|
||
<div class="text-sm lg:text-base">
|
||
<span class="leading-22px">1 x $68.00</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Total price -->
|
||
<div class="py-5 mt-25px border-y border-border-color-1">
|
||
<h6
|
||
class="lg:text-lg text-heading-color font-bold flex justify-between items-center mb-0"
|
||
>
|
||
<span>Subtotal: </span>
|
||
<span class="text-secondary-color">$310.00</span>
|
||
</h6>
|
||
</div>
|
||
|
||
<!-- action area -->
|
||
<div class="pt-25px pb-15px flex justify-between">
|
||
<h5
|
||
class="uppercase text-sm text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color hover:border-heading-color"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black hover:bg-primary-cogroup-lor z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<a
|
||
href="cart.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"
|
||
>view cart</a
|
||
>
|
||
</h5>
|
||
<h5
|
||
class="uppercase text-sm text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-black hover:border-secondary-color"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 left-0 w-full h-full bg-black group-hover:bg-secondary-color z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<a
|
||
href="checkout.html"
|
||
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-secondary-color leading-23px"
|
||
>checkout</a
|
||
>
|
||
</h5>
|
||
</div>
|
||
|
||
<div class="text-sm">
|
||
<p class="leading-15px mb-0">
|
||
Free Shipping on All Orders Over $100!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- mobile menu -->
|
||
<div class="drawer-container mobile-menu-container">
|
||
<div
|
||
class="drawer-overlay fixed top-0 left-0 w-full h-full bg-black -z-1 close-drawer opacity-0 transition-all duration-300 invisible cursor-zoom-out block xl:hidden"
|
||
></div>
|
||
<div
|
||
class="drawer mobile-menu fixed top-0 ltr:-left-[300px] ltr:xs:-left-[400px] rtl:-right-[300px] rtl:xs:-right-[400px] px-5 xs:px-10 py-50px w-300px xs:w-100 h-full transition-all duration-500 shadow-dropdown-secodary bg-whiteColor z-high block xl:hidden bg-white"
|
||
>
|
||
<div class="pl-15px overflow-auto h-full">
|
||
<!-- mobile menu wrapper -->
|
||
<div>
|
||
<!-- mobile logo area -->
|
||
<div
|
||
class="flex justify-between items-center border-b border-border-primary pt-3px pb-10px mb-25px"
|
||
>
|
||
<div>
|
||
<a href="index.html">
|
||
<img src="./assets/img/logo.png" alt="" >
|
||
</a>
|
||
</div>
|
||
<div>
|
||
<button class="close-drawer text-black text-3xl px-15px py-2">
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- search input -->
|
||
<div class="mb-50px">
|
||
<form class="w-full relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Search..."
|
||
class="text-sm text-paragraph-color pr-5 pl-50px placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none"
|
||
>
|
||
<button
|
||
type="submit"
|
||
class="absolute top-1/2 -translate-y-1/2 left-7 text-heading-color"
|
||
>
|
||
<i class="icon-search text-lg font-bold"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- mobile menu accordions -->
|
||
<div
|
||
class="border-b border-border-primary dark:border-borderColor-dark pb-8"
|
||
>
|
||
<ul class="accordion-container">
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
Home
|
||
<button class="px-3 h-full">
|
||
<span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
|
||
></span
|
||
><span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div class="content-wrapper pr-15px">
|
||
<ul>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 01</a
|
||
>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-2.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 02</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-3.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 03</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-4.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 04</a
|
||
>
|
||
</li>
|
||
<li class="mt-4 relative">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-5.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
><span
|
||
class="text-10px uppercase text-white bg-secondary-color px-3px absolute rtl:-right-2 -top-3 rounded-sm"
|
||
>video</span
|
||
>
|
||
Home Style 05</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-6.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 06</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-7.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 07</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-8.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 08</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-9.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 09</a
|
||
>
|
||
</li>
|
||
<li class="mt-4 relative">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-10.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
><span
|
||
class="text-10px uppercase text-white bg-secondary-color px-3px absolute rtl:-right-2 -top-3 rounded-sm"
|
||
>map</span
|
||
>
|
||
Home Style 10</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="index-11.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Home Style 11</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
About
|
||
<button class="px-3 h-full">
|
||
<span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
|
||
></span
|
||
><span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div class="content-wrapper pr-15px">
|
||
<ul>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="about.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>About1</a
|
||
>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="service.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Services</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="service-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Service Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Portfolio</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio-2.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
Portfolio - 02</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Portfolio Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="team.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Team</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="team-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Team Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="faq.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>FAQ</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="locations.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Google Map Locations</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
Shop
|
||
<button class="px-3 h-full">
|
||
<span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
|
||
></span
|
||
><span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div class="content-wrapper pr-15px">
|
||
<ul>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="shop.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Property Grid</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="shop-list.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Property List</a
|
||
>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="shop-grid.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Property No Sidebar</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="shop-left-sidebar.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Property Left sidebar</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="shop-right-sidebar.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Property right sidebar</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="product-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
Property details
|
||
</a>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="cart.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Cart</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="wishlist.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Wishlist</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="checkout.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Checkout</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="order-tracking.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Order Tracking</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="account.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>My Account</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="login.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Sign in</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="register.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Register</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
News
|
||
<button class="px-3 h-full">
|
||
<span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
|
||
></span
|
||
><span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div class="content-wrapper pr-15px">
|
||
<ul>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="blog.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>News</a
|
||
>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="blog-grid.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>News Grid</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="blog-left-sidebar.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>News Left sidebar</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="blog-right-sidebar.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>News Right sidebar</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="blog-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
News details</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="accordion mt-4">
|
||
<!-- accordion header -->
|
||
<div
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
Pages
|
||
<button class="px-3 h-full">
|
||
<span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
|
||
></span
|
||
><span
|
||
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
|
||
></span>
|
||
</button>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div class="content-wrapper pr-15px">
|
||
<ul>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="about.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>About</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="service.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Services</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="service-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Service Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Portfolio</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio-2.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>
|
||
Portfolio - 02</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="portfolio-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Portfolio Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="team.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Team</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="team-details.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Team Details</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="faq.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>FAQ</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="history.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>History</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="add-listing.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Add Listing</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="locations.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Google Map Locations</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="404.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>404</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="contact.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Contact</a
|
||
>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
|
||
<a
|
||
href="coming-soon.html"
|
||
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
|
||
>Coming Soon</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="mt-4">
|
||
<!-- accordion header -->
|
||
<a
|
||
href="contact.html"
|
||
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
|
||
>
|
||
CONTACT</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- my account -->
|
||
<div>
|
||
<ul class="mb-30px pb-5 pt-5px border-b border-border-primary">
|
||
<li class="group mt-4">
|
||
<!-- accordion header -->
|
||
<a href="account.html" class="text-sm lg:text-base">
|
||
<span
|
||
class="inline-block h-50px w-50px border-2 border-border-color-1 text-center leading-50px rtl:ml-3"
|
||
>
|
||
<i class="far fa-user"></i>
|
||
</span>
|
||
My Account
|
||
</a>
|
||
</li>
|
||
<li class="group mt-4">
|
||
<!-- accordion header -->
|
||
<a
|
||
href="wishlist.html#"
|
||
class="text-sm lg:text-base"
|
||
>
|
||
<span
|
||
class="inline-block h-50px w-50px border-2 border-border-color-1 text-center leading-50px rtl:ml-3"
|
||
>
|
||
<i class="far fa-heart"></i><sup class="pl-0.5">3</sup>
|
||
</span>
|
||
Wishlist
|
||
</a>
|
||
</li>
|
||
<li class="group mt-4">
|
||
<!-- accordion header -->
|
||
<a href="cart.html" class="text-sm lg:text-base">
|
||
<span
|
||
class="inline-block h-50px w-50px border-2 border-border-color-1 text-center leading-50px rtl:ml-3"
|
||
>
|
||
<i class="fas fa-shopping-cart"></i>
|
||
<sup>5</sup>
|
||
</span>
|
||
Shoping Cart
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Mobile menu social area -->
|
||
<div>
|
||
<ul class="flex gap-3 items-center pt-4">
|
||
<li>
|
||
<a
|
||
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
|
||
href="https://www.facebook.com"
|
||
><i class="fab fa-facebook-f leading-10"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
|
||
href="https://www.twiter.com"
|
||
><i class="fab fab fa-twitter leading-10"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
|
||
href="https://www.linkedin.com"
|
||
><i class="fab fa-linkedin leading-10"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
|
||
href="https://www.instagram.com"
|
||
><i class="fab fa-instagram leading-10"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- header area start -->
|
||
<!-- main body start -->
|
||
<main>
|
||
<!-- banner section -->
|
||
<section>
|
||
<!-- banner section -->
|
||
<div
|
||
class="w-full bg-[url('../img/bg/14.jpg')] bg-no-repeat bg-cover bg-center relative z-0 after:w-full after:h-full after:absolute after:top-0 after:left-0 after:bg-white after:bg-opacity-30 after:-z-1"
|
||
>
|
||
<div class="container py-110px">
|
||
<h1
|
||
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-4xl font-bold text-heading-color mb-15px"
|
||
>
|
||
<span
|
||
class="leading-1.3 md:leading-1.3 lg:leading-1.3 xl:leading-1.3"
|
||
>My Account</span
|
||
>
|
||
</h1>
|
||
<ul
|
||
class="breadcrumb flex gap-30px items-center text-sm lg:text-base font-bold pt-4"
|
||
>
|
||
<li class="home relative leading-1.8 lg:leading-1.8">
|
||
<a href="index.html"
|
||
><i class="fas fa-home text-secondary-color pr-1.5"></i> Home</a>
|
||
|
||
</li>
|
||
<li class="leading-1.8 lg:leading-1.8 text-heading-color">
|
||
My Account
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- track order section section -->
|
||
<section>
|
||
<div class="container pt-30 pb-90px lg:pb-30">
|
||
<div
|
||
class="tab account-tab grid grid-cols-1 lg:grid-cols-12 gap-x-30px gap-y-50px"
|
||
>
|
||
<!-- sidebar navigation -->
|
||
<div class="lg:col-start-1 lg:col-span-4">
|
||
<ul
|
||
class="tab-links lg:mr-30px border border-b-0 border-border-color-1"
|
||
>
|
||
<li class="border-b border-border-color-1 active">
|
||
<button
|
||
class="flex justify-between items-center px-5 py-15px w-full text-sm lg:text-base hover:text-secondary-color transition-all duration-300 capitalize"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8"> Dashboard </span>
|
||
<i class="fas fa-home text-sm"></i>
|
||
</button>
|
||
</li>
|
||
<li class="border-b border-border-color-1">
|
||
<button
|
||
class="flex justify-between items-center px-5 py-15px w-full text-sm lg:text-base hover:text-secondary-color transition-all duration-300 capitalize"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">Profiles</span>
|
||
<i class="fas fa-user text-sm"></i>
|
||
</button>
|
||
</li>
|
||
<li class="border-b border-border-color-1">
|
||
<button
|
||
class="flex justify-between items-center px-5 py-15px w-full text-sm lg:text-base hover:text-secondary-color transition-all duration-300 capitalize"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8"> address </span>
|
||
<i class="fas fa-map-marker-alt text-sm"></i>
|
||
</button>
|
||
</li>
|
||
<li class="border-b border-border-color-1">
|
||
<button
|
||
class="flex justify-between items-center px-5 py-15px w-full text-sm lg:text-base hover:text-secondary-color transition-all duration-300 capitalize"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Account Details
|
||
</span>
|
||
<i class="fas fa-map-marker-alt text-sm"></i>
|
||
</button>
|
||
</li>
|
||
<li class="border-b border-border-color-1">
|
||
<button
|
||
class="flex justify-between items-center px-5 py-15px w-full text-sm lg:text-base hover:text-secondary-color transition-all duration-300 capitalize"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
My Properties
|
||
</span>
|
||
<i class="fa-solid fa-list text-sm"></i>
|
||
</button>
|
||
</li>
|
||
<li class="border-b border-border-color-1">
|
||
<button
|
||
class="flex justify-between items-center px-5 py-15px w-full text-sm lg:text-base hover:text-secondary-color transition-all duration-300 capitalize"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Favorited Properties
|
||
</span>
|
||
<i class="fa-solid fa-heart text-sm"></i>
|
||
</button>
|
||
</li>
|
||
<li class="border-b border-border-color-1">
|
||
<button
|
||
class="flex justify-between items-center px-5 py-15px w-full text-sm lg:text-base hover:text-secondary-color transition-all duration-300 capitalize"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>Add Property
|
||
</span>
|
||
<i class="fa-solid fa-map-location-dot text-sm"></i>
|
||
</button>
|
||
</li>
|
||
<li class="border-b border-border-color-1">
|
||
<button
|
||
class="flex justify-between items-center px-5 py-15px w-full text-sm lg:text-base hover:text-secondary-color transition-all duration-300 capitalize"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8"> Payments </span>
|
||
<i class="fa-solid fa-money-check-dollar text-sm"></i>
|
||
</button>
|
||
</li>
|
||
<li class="border-b border-border-color-1">
|
||
<button
|
||
class="flex justify-between items-center px-5 py-15px w-full text-sm lg:text-base hover:text-secondary-color transition-all duration-300 capitalize"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Change Password
|
||
</span>
|
||
<i class="fa-solid fa-lock text-sm"></i>
|
||
</button>
|
||
</li>
|
||
<li class="border-b border-border-color-1">
|
||
<a
|
||
href="login.html"
|
||
class="flex justify-between items-center px-5 py-15px w-full text-sm lg:text-base hover:text-secondary-color transition-all duration-300 capitalize"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">Logout </span>
|
||
<i class="fas fa-sign-out-alt text-sm"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- main content -->
|
||
<div class="tab-contents lg:col-start-5 lg:col-span-8">
|
||
<!-- content 1 -->
|
||
<div class="transition-all duration-300">
|
||
<div
|
||
class="p-5 bg-section-bg-1 mb-5 lg:mb-6 text-sm lg:text-base"
|
||
>
|
||
<div class="leading-1.8 lg:leading-1.8">
|
||
Hello <strong>UserName</strong> (not
|
||
<strong>UserName</strong> ?
|
||
<a href="login.html"><small>Log out</small></a> )
|
||
</div>
|
||
</div>
|
||
<p
|
||
class="p-5 bg-section-bg-1 mb-5 lg:mb-6 text-sm lg:text-base"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>From your account dashboard you can view your recent
|
||
orders, manage your shipping and billing addresses, and edit
|
||
your password and account details.</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<!-- content 2 -->
|
||
<div class="transition-all duration-300 opacity-0 hidden">
|
||
<!-- details -->
|
||
<div
|
||
class="flex flex-col md:flex-row p-10 px-5 md:px-10 shadow-box-shadow-2"
|
||
>
|
||
<div
|
||
class="ml-0 md:ml-10 lg:ml-30px xl:ml-10 mb-30px md:mb-0"
|
||
>
|
||
<img
|
||
src="./assets/img/blog/author.jpg"
|
||
class="max-full w-100px md:w-[180px] lg:w-[120px] xl:w-[180px]"
|
||
alt=""
|
||
>
|
||
</div>
|
||
<div>
|
||
<h6 class="text-sm text-secondary-color font-bold mb-0">
|
||
<span class="leading-1.3">Agent of Property</span>
|
||
</h6>
|
||
<h2
|
||
class="text-xl md:text-22px lg:text-26px xl:text-3xl text-heading-color font-bold mb-10px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 xl:leading-1.3"
|
||
>Rosalina D. William
|
||
</span>
|
||
</h2>
|
||
<ul>
|
||
<li>
|
||
<p class="text-sm flex items-center gap-4 mt-2">
|
||
<i class="icon-placeholder"></i>
|
||
<span class="leading-1.8"
|
||
>Brooklyn, New York, United States</span
|
||
>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="text-sm flex items-center gap-4 mt-2"
|
||
href="tel:+0123-456789"
|
||
>
|
||
<i class="icon-call"></i>
|
||
<span class="leading-1.8">+0123-456789</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="text-sm flex items-center gap-4 mt-2"
|
||
href="mailto:example@example.com"
|
||
>
|
||
<i class="icon-mail"></i>
|
||
<span class="leading-1.8"> example@example.com</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- form -->
|
||
<form
|
||
class="form-primary bg-white shadow-box-shadow-2 px-25px pt-10 pb-50px md:p-50px md:pt-10 mt-50px"
|
||
>
|
||
<h4
|
||
class="text-22px font-semibold leading-1.3 pr-10px border-r-2 border-secondary-color text-heading-color mb-30px"
|
||
>
|
||
Get A Quote
|
||
</h4>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-30px">
|
||
<!-- name -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Enter your name"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-60"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-user text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<!-- email -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Enter email address"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-60"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-envelope text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<!-- type select -->
|
||
<div class="relative">
|
||
<select
|
||
class="selectize boerder-2 border-border-color-9 text-[14px] leading-60px h-65px"
|
||
|
||
>
|
||
<option
|
||
value="Select Service Type"
|
||
data-display="Select"
|
||
>
|
||
Select Service Type
|
||
</option>
|
||
<option value="Property Management ">
|
||
Property Management
|
||
</option>
|
||
<option value="Mortgage Service ">
|
||
Mortgage Service
|
||
</option>
|
||
<option value="Consulting Service">
|
||
Consulting Service
|
||
</option>
|
||
<option value="Home Buying">Home Buying</option>
|
||
<option value="Home Selling">Home Selling</option>
|
||
<option value="Escrow Services">Escrow Services</option>
|
||
</select>
|
||
</div>
|
||
<!-- number -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Enter phone number"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-60"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-phone text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<!-- message -->
|
||
<div class="relative md:col-start-1 md:col-span-2 mb-30px">
|
||
<textarea
|
||
|
||
placeholder="Enter message"
|
||
class="min-h-[150px] text-paragraph-color pr-5 pl-50px py-15px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-60"
|
||
></textarea>
|
||
<span
|
||
class="absolute top-[30px] -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<!-- agree -->
|
||
<div class="text-sm flex items-center mb-25px">
|
||
<input type="checkbox" id="agree" >
|
||
<label for="agree" class="text-sm mr-1">
|
||
Save my name, email, and website in this browser for the
|
||
next time I comment.
|
||
</label>
|
||
</div>
|
||
|
||
<!-- submit button -->
|
||
|
||
<div>
|
||
<h5
|
||
class="uppercase text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block z-0"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black -z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<button
|
||
type="submit"
|
||
class="relative z-1 px-30px lg:px-10 py-3 md:py-15px lg:py-17px group-hover:text-heading-color leading-1.5 uppercase"
|
||
>
|
||
get an free service
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- content 3 -->
|
||
<div class="transition-all duration-300 opacity-0 hidden">
|
||
<p
|
||
class="p-5 bg-section-bg-1 mb-5 lg:mb-6 text-sm lg:text-base"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>The following addresses will be used on the checkout page
|
||
by default.</span
|
||
>
|
||
</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||
<div>
|
||
<h2
|
||
class="text-17px md:text-lg lg:text-xl text-heading-color font-bold mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>Billing Address edit
|
||
</span>
|
||
</h2>
|
||
<p class="mb-5 lg:mb-6 text-sm lg:text-base font-bold">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>Alex Tuntuni</span
|
||
>
|
||
</p>
|
||
<p class="mb-5 lg:mb-6 text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>1355 Market St, Suite 900 <br >
|
||
San Francisco, CA 94103</span
|
||
>
|
||
</p>
|
||
<p class="mb-5 lg:mb-6 text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>Mobile: (123) 456-7890</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h2
|
||
class="text-17px md:text-lg lg:text-xl text-heading-color font-bold mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>Shipping Address edit
|
||
</span>
|
||
</h2>
|
||
<p class="mb-5 lg:mb-6 text-sm lg:text-base font-bold">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>Alex Tuntuni</span
|
||
>
|
||
</p>
|
||
<p class="mb-5 lg:mb-6 text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>1355 Market St, Suite 900 <br >
|
||
San Francisco, CA 94103</span
|
||
>
|
||
</p>
|
||
<p class="mb-5 lg:mb-6 text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>Mobile: (123) 456-7890</span
|
||
>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- content 4 -->
|
||
<div class="transition-all duration-300 opacity-0 hidden">
|
||
<p
|
||
class="p-5 bg-section-bg-1 mb-5 lg:mb-6 text-sm lg:text-base"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>The following addresses will be used on the checkout page
|
||
by default.</span
|
||
>
|
||
</p>
|
||
<!-- form -->
|
||
<form class="form-primary bg-white">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-30px mb-20">
|
||
<!-- 1st name -->
|
||
<div class="relative">
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>First name:</span
|
||
>
|
||
</p>
|
||
<input
|
||
type="text"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-85"
|
||
>
|
||
</div>
|
||
<!-- last name -->
|
||
<div class="relative">
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Last name:</span
|
||
>
|
||
</p>
|
||
<input
|
||
type="text"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-85"
|
||
>
|
||
</div>
|
||
|
||
<!-- display name -->
|
||
<div class="relative">
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>Display Name:</span
|
||
>
|
||
</p>
|
||
<input
|
||
type="text"
|
||
placeholder="Ethan"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-85"
|
||
>
|
||
</div>
|
||
<!-- Display Email -->
|
||
<div class="relative">
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Display Email:</span
|
||
>
|
||
</p>
|
||
<input
|
||
type="email"
|
||
placeholder="example@example.com"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-85"
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- passwords -->
|
||
<div
|
||
class="px-10 py-30px border border-border-color-1 mb-30px"
|
||
>
|
||
<p class="text-lg px-15px mb-1 text-heading-color">
|
||
<span class="leading-1.8">PASSWORD CHANGE </span>
|
||
</p>
|
||
<div class="grid grid-cols-1 gap-30px pb-30px">
|
||
<!-- Current password -->
|
||
<div class="relative">
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>Current password (leave blank to leave
|
||
unchanged):</span
|
||
>
|
||
</p>
|
||
<input
|
||
type="password"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-85"
|
||
>
|
||
</div>
|
||
<!-- New password-->
|
||
<div class="relative">
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
New password (leave blank to leave unchanged):</span
|
||
>
|
||
</p>
|
||
<input
|
||
type="password"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-85"
|
||
>
|
||
</div>
|
||
|
||
<!-- Confirm new password -->
|
||
<div class="relative">
|
||
<p class="text-sm lg:text-base">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
>Confirm new password:</span
|
||
>
|
||
</p>
|
||
<input
|
||
type="password"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-85"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- submit button -->
|
||
|
||
<div>
|
||
<h5
|
||
class="uppercase text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block z-0"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black -z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<button
|
||
type="submit"
|
||
class="relative z-1 px-5 md:px-25px lg:px-10 py-10px md:py-15px lg:py-17px group-hover:text-heading-color leading-23px uppercase"
|
||
>
|
||
Save Changes
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- content 5 -->
|
||
<div class="transition-all duration-300 opacity-0 hidden">
|
||
<table
|
||
class="text-sm lg:text-base text-heading-color w-full mb-35px"
|
||
>
|
||
<thead>
|
||
<tr class="leading-1.8 lg:leading-1.8 font-bold">
|
||
<td
|
||
class="p-2 border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
My Properties
|
||
</td>
|
||
<td
|
||
class="p-2 border-b border-border-color-17 block md:table-cell"
|
||
></td>
|
||
<td
|
||
class="p-2 border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Date Added
|
||
</td>
|
||
<td
|
||
class="p-2 border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Actions
|
||
</td>
|
||
<td
|
||
class="p-2 border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Delete
|
||
</td>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr class="leading-1.8 lg:leading-1.8">
|
||
<td
|
||
class="px-2 pt-10px pb-1 md:pt-30px md:pb-22px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-full md:w-auto"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/2.jpg"
|
||
class="max-w-full w-full md:w-[164px]"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-10px"
|
||
>
|
||
<span
|
||
class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>
|
||
3 Rooms Manhattan</span
|
||
>
|
||
</h5>
|
||
<div class="text-13px lg:text-sm">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
><i class="icon-placeholder pr-0.5"></i> Brooklyn,
|
||
New York, United States
|
||
</span>
|
||
</div>
|
||
|
||
<ul class="text-xs text-ratings flex items-center">
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star-half-alt"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="far fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2"><a href="#"> ( 95 Reviews )</a></li>
|
||
</ul>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Feb 22, 2024
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#">Edit</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#"><i class="fa-solid fa-trash-can"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr class="leading-1.8 lg:leading-1.8">
|
||
<td
|
||
class="px-2 pt-10px pb-1 md:pt-30px md:pb-22px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-full md:w-auto"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/3.jpg"
|
||
class="max-w-full w-full md:w-[164px]"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-10px"
|
||
>
|
||
<span
|
||
class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>
|
||
OE Replica Wheels</span
|
||
>
|
||
</h5>
|
||
<div class="text-13px lg:text-sm">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
><i class="icon-placeholder pr-0.5"></i> Brooklyn,
|
||
New York, United States
|
||
</span>
|
||
</div>
|
||
|
||
<ul class="text-xs text-ratings flex items-center">
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star-half-alt"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="far fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2"><a href="#"> ( 95 Reviews )</a></li>
|
||
</ul>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Feb 22, 2024
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#">Edit</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#"><i class="fa-solid fa-trash-can"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr class="leading-1.8 lg:leading-1.8">
|
||
<td
|
||
class="px-2 pt-10px pb-1 md:pt-30px md:pb-22px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-full md:w-auto"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/7.jpg"
|
||
class="max-w-full w-full md:w-[164px]"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-10px"
|
||
>
|
||
<span
|
||
class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>
|
||
Wheel Bearing Retainer</span
|
||
>
|
||
</h5>
|
||
<div class="text-13px lg:text-sm">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
><i class="icon-placeholder pr-0.5"></i> Brooklyn,
|
||
New York, United States
|
||
</span>
|
||
</div>
|
||
|
||
<ul class="text-xs text-ratings flex items-center">
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star-half-alt"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="far fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2"><a href="#"> ( 95 Reviews )</a></li>
|
||
</ul>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Feb 22, 2024
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#">Edit</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#"><i class="fa-solid fa-trash-can"></i></a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<!-- paginations -->
|
||
<div class="flex justify-center mt-4">
|
||
<ul
|
||
class="flex flex-wrap items-center gap-x-10px gap-y-4 justify-center"
|
||
>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
><i class="fas fa-angle-double-left"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
>1</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-white bg-secondary-color w-10 h-10 md:w-50px md:h-50px border-2 border-secondary-color transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
>2</a
|
||
>
|
||
</li>
|
||
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
>3</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
>...</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
>10</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
><i class="fas fa-angle-double-right"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- content 6 -->
|
||
<div class="transition-all duration-300 opacity-0 hidden">
|
||
<table
|
||
class="text-sm lg:text-base text-heading-color w-full mb-35px"
|
||
>
|
||
<thead>
|
||
<tr class="leading-1.8 lg:leading-1.8 font-bold">
|
||
<td
|
||
class="p-2 border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
My Properties
|
||
</td>
|
||
<td
|
||
class="p-2 border-b border-border-color-17 block md:table-cell"
|
||
></td>
|
||
<td
|
||
class="p-2 border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Date Added
|
||
</td>
|
||
<td
|
||
class="p-2 border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Actions
|
||
</td>
|
||
<td
|
||
class="p-2 border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Delete
|
||
</td>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr class="leading-1.8 lg:leading-1.8">
|
||
<td
|
||
class="px-2 pt-10px pb-1 md:pt-30px md:pb-22px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-full md:w-auto"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/2.jpg"
|
||
class="max-w-full w-full md:w-[164px]"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-10px"
|
||
>
|
||
<span
|
||
class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>
|
||
3 Rooms Manhattan</span
|
||
>
|
||
</h5>
|
||
<div class="text-13px lg:text-sm">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
><i class="icon-placeholder pr-0.5"></i> Brooklyn,
|
||
New York, United States
|
||
</span>
|
||
</div>
|
||
|
||
<ul class="text-xs text-ratings flex items-center">
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star-half-alt"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="far fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2"><a href="#"> ( 95 Reviews )</a></li>
|
||
</ul>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Feb 22, 2024
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#">Edit</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#"><i class="fa-solid fa-trash-can"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr class="leading-1.8 lg:leading-1.8">
|
||
<td
|
||
class="px-2 pt-10px pb-1 md:pt-30px md:pb-22px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-full md:w-auto"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/3.jpg"
|
||
class="max-w-full w-full md:w-[164px]"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-10px"
|
||
>
|
||
<span
|
||
class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>
|
||
OE Replica Wheels</span
|
||
>
|
||
</h5>
|
||
<div class="text-13px lg:text-sm">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
><i class="icon-placeholder pr-0.5"></i> Brooklyn,
|
||
New York, United States
|
||
</span>
|
||
</div>
|
||
|
||
<ul class="text-xs text-ratings flex items-center">
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star-half-alt"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="far fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2"><a href="#"> ( 95 Reviews )</a></li>
|
||
</ul>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Feb 22, 2024
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#">Edit</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#"><i class="fa-solid fa-trash-can"></i></a>
|
||
</td>
|
||
</tr>
|
||
<tr class="leading-1.8 lg:leading-1.8">
|
||
<td
|
||
class="px-2 pt-10px pb-1 md:pt-30px md:pb-22px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a
|
||
href="product-details.html"
|
||
class="w-full md:w-auto"
|
||
>
|
||
<img
|
||
src="./assets/img/product-3/7.jpg"
|
||
class="max-w-full w-full md:w-[164px]"
|
||
alt=""
|
||
>
|
||
</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-10px"
|
||
>
|
||
<span
|
||
class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>
|
||
Wheel Bearing Retainer</span
|
||
>
|
||
</h5>
|
||
<div class="text-13px lg:text-sm">
|
||
<span class="leading-1.8 lg:leading-1.8"
|
||
><i class="icon-placeholder pr-0.5"></i> Brooklyn,
|
||
New York, United States
|
||
</span>
|
||
</div>
|
||
|
||
<ul class="text-xs text-ratings flex items-center">
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="fas fa-star-half-alt"></i></a>
|
||
</li>
|
||
<li class="pt-2">
|
||
<a href="#"><i class="far fa-star"></i></a>
|
||
</li>
|
||
<li class="pt-2"><a href="#"> ( 95 Reviews )</a></li>
|
||
</ul>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
Feb 22, 2024
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#">Edit</a>
|
||
</td>
|
||
|
||
<td
|
||
class="px-2 py-10px md:py-30px border-b border-border-color-17 block md:table-cell"
|
||
>
|
||
<a href="#"><i class="fa-solid fa-trash-can"></i></a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<!-- paginations -->
|
||
<div class="flex justify-center mt-4">
|
||
<ul
|
||
class="flex flex-wrap items-center gap-x-10px gap-y-4 justify-center"
|
||
>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
><i class="fas fa-angle-double-left"></i
|
||
></a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
>1</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-white bg-secondary-color w-10 h-10 md:w-50px md:h-50px border-2 border-secondary-color transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
>2</a
|
||
>
|
||
</li>
|
||
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
>3</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
>...</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
>10</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="flex items-center justify-center flex-shrink-0 text-sm lg:text-base text-paragraph-color bg-white w-10 h-10 md:w-50px md:h-50px border-2 border-border-color-11 transition-all duration-300 hover:bg-secondary-color hover:text-white hover:border-secondary-color rounded-100% font-bold"
|
||
><i class="fas fa-angle-double-right"></i
|
||
></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- content 7 -->
|
||
<div class="transition-all duration-300 opacity-0 hidden">
|
||
<!-- form -->
|
||
<form
|
||
class="form-primary add-property-form bg-white text-sm lg:text-base"
|
||
>
|
||
<!-- Property Description -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Property Description</span
|
||
>
|
||
</h5>
|
||
|
||
<div class="grid grid-cols-1 gap-30px mb-35px">
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="*Title (mandatory)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<!-- message -->
|
||
<div class="relative">
|
||
<textarea
|
||
|
||
placeholder="Description"
|
||
class="min-h-[150px] text-paragraph-color pr-5 pl-50px py-15px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
></textarea>
|
||
<span
|
||
class="absolute top-[30px] -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Property Price -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Property Price</span
|
||
>
|
||
</h5>
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-30px mb-35px"
|
||
>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Price in $ (only numbers)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="After Price Label (ex: /month)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Before Price Label (ex: from)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Yearly Tax Rate"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="*Homeowners Association Fee(monthly)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Select Categories -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Select Categories</span
|
||
>
|
||
</h5>
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-30px mb-35px"
|
||
>
|
||
<div class="relative block">
|
||
<select class="selectize">
|
||
<option>None</option>
|
||
<option>Apartments</option>
|
||
<option>Condos</option>
|
||
<option>Duplexes</option>
|
||
<option>Houses</option>
|
||
<option>Industrial</option>
|
||
<option>Land</option>
|
||
<option>Offices</option>
|
||
<option>Retail</option>
|
||
<option>Villas</option>
|
||
</select>
|
||
</div>
|
||
<div class="relative block">
|
||
<select class="selectize">
|
||
<option>None</option>
|
||
<option>Rentals</option>
|
||
<option>Sales</option>
|
||
</select>
|
||
</div>
|
||
<div class="relative block">
|
||
<select class="selectize">
|
||
<option>no status</option>
|
||
<option>Active</option>
|
||
<option>hot offer</option>
|
||
<option>new offer</option>
|
||
<option>open house</option>
|
||
<option>sold</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Listing Media -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Listing Media</span
|
||
>
|
||
</h5>
|
||
<div class="mb-30px">
|
||
<div class="mb-10px">
|
||
<input
|
||
type="file"
|
||
class="w-[426px] max-w-full border-2 border-border-color-9 px-5 md:px-25px lg:px-10 py-2 md:py-10px lg:py-15px transition-all duration-300 hover:bg-secondary-color hover:border-secondary-color hover:text-white cursor-pointer"
|
||
>
|
||
</div>
|
||
<p
|
||
class="p-5 bg-section-bg-1 mb-5 lg:mb-6 text-sm space-y-1"
|
||
>
|
||
<span class="block leading-1.8 lg:leading-1.8"
|
||
>* At least 1 image is required for a valid
|
||
submission.Minimum size is 500/500px.
|
||
</span>
|
||
<span class="block leading-1.8 lg:leading-1.8">
|
||
* PDF files upload supported as well.
|
||
</span>
|
||
<span class="block leading-1.8 lg:leading-1.8">
|
||
* Images might take longer to be processed.
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Video Option -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Video Option</span
|
||
>
|
||
</h5>
|
||
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-30px mb-35px"
|
||
>
|
||
<div class="relative block">
|
||
<select class="selectize">
|
||
<option>Video from</option>
|
||
<option>vimeo</option>
|
||
<option>youtube</option>
|
||
</select>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Embed Video ID"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Virtual Tour -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Virtual Tour</span
|
||
>
|
||
</h5>
|
||
|
||
<div class="grid grid-cols-1 gap-30px mb-35px">
|
||
<!-- message -->
|
||
<div class="relative">
|
||
<textarea
|
||
|
||
placeholder="Virtual Tour:"
|
||
class="min-h-[150px] text-paragraph-color pr-5 pl-50px py-15px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
></textarea>
|
||
<span
|
||
class="absolute top-[30px] -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Listing Location -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Listing Location</span
|
||
>
|
||
</h5>
|
||
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-30px mb-30px"
|
||
>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="*Address"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Country"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="County / State"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="City"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Neighborhood"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Zip"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- map -->
|
||
<div>
|
||
<div class="mb-60px h-360px">
|
||
<iframe
|
||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9334.271551495209!2d-73.97198251485975!3d40.668170674982946!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25b0456b5a2e7%3A0x68bdf865dda0b669!2sBrooklyn%20Botanic%20Garden%20Shop!5e0!3m2!1sen!2sbd!4v1590597267201!5m2!1sen!2sbd"
|
||
|
||
style="height:100%;width:100%;border:0px;"
|
||
|
||
allowfullscreen=""
|
||
aria-hidden="false"
|
||
tabindex="0"
|
||
></iframe>
|
||
</div>
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-30px mb-35px"
|
||
>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Latitude (for Google Maps)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Longitude (for Google Maps)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<label
|
||
for="dishwasher-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="dishwasher-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Enable Google Street View
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Google Street View - Camera Angle (value from 0 to 360)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Listing Details -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Listing Details</span
|
||
>
|
||
</h5>
|
||
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-30px mb-30px"
|
||
>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Size in ft2 (*only numbers)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Lot Size in ft2 (*only numbers)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Rooms (*only numbers)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Bedrooms (*only numbers)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Bathrooms (*only numbers)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Custom ID (*text)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Garages (*text)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Year Built (*numeric)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Garage Size (*text)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Available from (*date)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Basement (*text)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Extra Details (*text)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Roofing (*text)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Exterior Material (*text)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<select class="selectize">
|
||
<option>Structure Type</option>
|
||
<option>Not Available</option>
|
||
<option>Brick</option>
|
||
<option>Wood</option>
|
||
<option>Cement</option>
|
||
</select>
|
||
</div>
|
||
<div class="relative">
|
||
<select class="selectize">
|
||
<option>Floors No</option>
|
||
<option>Not Available</option>
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="md:col-start-1 md:col-span-2">
|
||
<div class="relative">
|
||
<textarea
|
||
|
||
placeholder="Owner/Agent notes (*not visible on front end)"
|
||
class="min-h-[150px] text-paragraph-color pr-5 pl-50px py-15px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
></textarea>
|
||
<span
|
||
class="absolute top-[30px] -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Select Energy Class -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Select Energy Class</span
|
||
>
|
||
</h5>
|
||
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-30px mb-35px"
|
||
>
|
||
<div class="relative">
|
||
<select class="selectize">
|
||
<option>Select Energy Class (EU regulation)</option>
|
||
<option>A+</option>
|
||
<option>A</option>
|
||
<option>B</option>
|
||
<option>C</option>
|
||
<option>D</option>
|
||
<option>E</option>
|
||
</select>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Energy Index in kWh/m2a"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span class="absolute top-1/2 -translate-y-1/2 left-4">
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Amenities and Features -->
|
||
<div>
|
||
<h4
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Amenities and Features</span
|
||
>
|
||
</h4>
|
||
<!-- Interior Details -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Interior Details</span
|
||
>
|
||
</h5>
|
||
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-30px gap-y-1 mb-35px"
|
||
>
|
||
<div class="relative">
|
||
<label
|
||
for="equipped-kitchen-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="equipped-kitchen-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Equipped Kitchen
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="gym-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="gym-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Gym
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="laundry-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="laundry-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Laundry
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="media-room-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="media-room-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Media Room
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Outdoor Details -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Outdoor Details</span
|
||
>
|
||
</h5>
|
||
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-30px gap-y-1 mb-35px"
|
||
>
|
||
<div class="relative">
|
||
<label
|
||
for="back-yard-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="back-yard-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Back yard
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="basketball-court-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="basketball-court-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Basketball court
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Front-yard-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Front-yard-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Front yard
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Garage-Attached-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Garage-Attached-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Garage Attached
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Hot-Bath-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Hot-Bath-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Hot Bath
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Pool-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Pool-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Pool
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Utilities -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Utilities</span
|
||
>
|
||
</h5>
|
||
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-30px gap-y-1 mb-35px"
|
||
>
|
||
<div class="relative">
|
||
<label
|
||
for="Central-Air-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Central-Air-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Central Air
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Electricity-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Electricity-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Electricity
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Heating-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Heating-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Heating
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Natural-Gas-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Natural-Gas-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Natural Gas
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Ventilation-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Ventilation-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Ventilation
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Water-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Water-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Water
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Other Features -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Other Features</span
|
||
>
|
||
</h5>
|
||
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-30px gap-y-1 mb-35px"
|
||
>
|
||
<div class="relative">
|
||
<label
|
||
for="Chair-Accessible-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Chair-Accessible-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Chair Accessible
|
||
</label>
|
||
</div>
|
||
<div class="relative">
|
||
<label
|
||
for="Elevator-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Elevator-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Elevator
|
||
</label>
|
||
</div>
|
||
<div class="relative">
|
||
<label
|
||
for="Fireplace-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Fireplace-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Fireplace
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Smoke-detectors-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Smoke-detectors-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Smoke detectors
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="Washer-and-dryer-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="Washer-and-dryer-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
Washer and dryer
|
||
</label>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<label
|
||
for="WiFi-type"
|
||
class="checkbox-item leading-1.8 group flex items-center cursor-pointer"
|
||
><input
|
||
type="checkbox"
|
||
id="WiFi-type"
|
||
class="hidden"
|
||
>
|
||
<span
|
||
class="checkmark w-4 h-4 bg-white group-hover:bg-secondary-color border border-border-color-16 transition-all duration-300 relative z-0 after:absolute after:right-1 after:top-0 after:w-[5px] after:h-10px after:rotate-[-45deg] after:border after:border-t-0 after:opacity-0 after:border-r-0 after:border-white ml-15px inline-block leading-1 active"
|
||
></span>
|
||
WiFi
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- submit -->
|
||
<div>
|
||
<h5
|
||
class="uppercase text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block z-0"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black -z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<button
|
||
type="submit"
|
||
class="relative z-1 px-30px lg:px-10 py-3 md:py-15px lg:py-17px group-hover:text-heading-color leading-1.5 uppercase"
|
||
>
|
||
Submit Property
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- content 8 -->
|
||
<div class="transition-all duration-300 opacity-0 hidden">
|
||
<!-- login -->
|
||
<div class="accordion-container">
|
||
<div class="accordion mb-30px">
|
||
<div class="px-30px py-5 lg:py-17px bg-section-bg-1">
|
||
<h6
|
||
class="text-base lg:text-lg text-heading-color font-bold mb-0 leading-1"
|
||
>
|
||
<span class="leading-1.3 lg:leading-1.3"
|
||
>Returning customer?
|
||
</span>
|
||
<button
|
||
class="accordion-controller text-secondary-color hover:text-secondary-color leading-1.3 lg:leading-1.3 font-poppins"
|
||
>
|
||
Click here to login
|
||
</button>
|
||
</h6>
|
||
</div>
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<form
|
||
class="content-wrapper form-primary bg-white p-30px border border-border-color-1 mt-15px"
|
||
>
|
||
<p class="text-sm md:text-base mb-5 lg:mb-6">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Please login your accont.
|
||
</span>
|
||
</p>
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-30px mb-30px"
|
||
>
|
||
<!-- name -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Enter your name"
|
||
class="text-base text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-sm placeholder:text-paragraph-color"
|
||
>
|
||
<span
|
||
class="absolute top-1/2 -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-user text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<!-- email -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Enter email address"
|
||
class="text-base text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-sm placeholder:text-paragraph-color"
|
||
>
|
||
<span
|
||
class="absolute top-1/2 -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-envelope text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- submit button -->
|
||
|
||
<div class="flex items-center gap-5 mb-35px">
|
||
<h5
|
||
class="uppercase text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block z-0"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black -z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<button
|
||
type="submit"
|
||
class="relative z-1 px-5 md:px-25px lg:px-10 py-10px md:py-15px lg:py-17px group-hover:text-heading-color leading-1.5 uppercase"
|
||
>
|
||
Login
|
||
</button>
|
||
</h5>
|
||
<!-- agree -->
|
||
<div class="text-sm flex items-center">
|
||
<input type="checkbox" id="agree2" >
|
||
<label for="agree2" class="text-sm ml-1">
|
||
Remember me
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<a class="text-sm md:text-base mb-5 lg:mb-6">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Lost your password?
|
||
</span>
|
||
</a>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- apply coupon -->
|
||
<div class="accordion-container">
|
||
<div class="accordion mb-30px">
|
||
<div class="px-30px py-5 lg:py-17px bg-section-bg-1">
|
||
<h6
|
||
class="text-base lg:text-lg text-heading-color font-bold mb-0 leading-1"
|
||
>
|
||
<span class="leading-1.3 lg:leading-1.3"
|
||
>Have a coupon?
|
||
</span>
|
||
<button
|
||
class="accordion-controller text-secondary-color hover:text-secondary-color leading-1.3 lg:leading-1.3 font-poppins"
|
||
>
|
||
Click here to enter your code
|
||
</button>
|
||
</h6>
|
||
</div>
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<form
|
||
class="content-wrapper form-primary bg-white p-30px border border-border-color-1 mt-15px"
|
||
>
|
||
<p class="text-sm md:text-base mb-5 lg:mb-6">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
If you have a coupon code, please apply it below.
|
||
</span>
|
||
</p>
|
||
<div class="mb-30px">
|
||
<!-- coupon -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Coupon code"
|
||
class="text-base text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-sm placeholder:text-paragraph-color"
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- submit button -->
|
||
|
||
<div>
|
||
<h5
|
||
class="uppercase text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-primary-color hover:border-secondary-color inline-block z-0"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 left-0 w-full h-full bg-primary-color group-hover:bg-secondary-color -z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<button
|
||
type="submit"
|
||
class="relative z-1 px-5 md:px-25px lg:px-10 py-10px md:py-15px lg:py-17px group-hover:text-heading-color leading-1.5 uppercase"
|
||
>
|
||
Apply Coupon
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- billing details -->
|
||
<div>
|
||
<h4
|
||
class="text-22px font-semibold leading-1.3 pr-10px border-r-2 border-secondary-color text-heading-color mb-30px mt-50px"
|
||
>
|
||
Billing Details
|
||
</h4>
|
||
<form
|
||
class="form-primary bg-white border border-border-color-1 p-30px"
|
||
>
|
||
<!-- personal info -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Personal Information</span
|
||
>
|
||
</h5>
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-30px mb-30px"
|
||
>
|
||
<!-- 1st name -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="First name"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span
|
||
class="absolute top-1/2 -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-user text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<!-- last name -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Last name"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span
|
||
class="absolute top-1/2 -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-user text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<!-- email -->
|
||
<div class="relative">
|
||
<input
|
||
type="email"
|
||
placeholder="Email address"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span
|
||
class="absolute top-1/2 -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-envelope text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<!-- number -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Phone number"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span
|
||
class="absolute top-1/2 -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-phone text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<!-- company name -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Company name (optional)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span
|
||
class="absolute top-1/2 -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-globe text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
<!-- company address -->
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Company address (optional)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
<span
|
||
class="absolute top-1/2 -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-globe text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Country-->
|
||
<div class="pb-60px w-300px">
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Country</span
|
||
>
|
||
</h5>
|
||
<div>
|
||
<!-- type select -->
|
||
<div class="relative block">
|
||
<select
|
||
class="selectize boerder-2 border-border-color-9 text-[14px] leading-60px h-65px"
|
||
>
|
||
<option
|
||
value="Select Service Type"
|
||
data-display="Select"
|
||
>
|
||
Select Country
|
||
</option>
|
||
<option value="Australia">Australia</option>
|
||
<option value="Canada">Canada</option>
|
||
<option value="China">China</option>
|
||
<option value="Morocco">Morocco</option>
|
||
<option value="Saudi Arabia">Saudi Arabia</option>
|
||
<option value="United Kingdom (UK)">
|
||
United Kingdom (UK)
|
||
</option>
|
||
<option value="United States (US)">
|
||
United States (US)
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Address -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Address
|
||
</span>
|
||
</h5>
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-30px mb-30px"
|
||
>
|
||
<!-- House number and street name -->
|
||
<div>
|
||
<input
|
||
type="text"
|
||
placeholder="House number and street name"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
</div>
|
||
<!-- Apartment, suite, unit etc. -->
|
||
<div>
|
||
<input
|
||
type="text"
|
||
placeholder="Apartment, suite, unit etc. (optional)"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- town and state -->
|
||
<div>
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-30px mb-35px"
|
||
>
|
||
<!-- City -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leadinl-10px text-heading-color mb-15px"
|
||
>
|
||
<span
|
||
class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>
|
||
Town / City
|
||
</span>
|
||
</h5>
|
||
<input
|
||
type="text"
|
||
placeholder="City"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
</div>
|
||
<!-- State -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leadinl-10px text-heading-color mb-15px"
|
||
>
|
||
<span
|
||
class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>
|
||
State
|
||
</span>
|
||
</h5>
|
||
<input
|
||
type="text"
|
||
placeholder="State"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
</div>
|
||
<!-- Zip -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leadinl-10px text-heading-color mb-15px"
|
||
>
|
||
<span
|
||
class="leading-1.3 md:leading-1.3 lg:leading-1.3"
|
||
>
|
||
Zip
|
||
</span>
|
||
</h5>
|
||
<input
|
||
type="text"
|
||
placeholder="Zip"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create an account? -->
|
||
|
||
<div class="text-sm flex items-center mb-30px">
|
||
<input type="checkbox" id="agree3" >
|
||
<label for="agree3" class="text-sm ml-1">
|
||
Create an account?
|
||
</label>
|
||
</div>
|
||
<!-- message -->
|
||
<div class="mb-30px">
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-15px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Order Notes (optional)
|
||
</span>
|
||
</h5>
|
||
<div class="relative">
|
||
<textarea
|
||
|
||
placeholder="Notes about your order, e.g. special notes for delivery."
|
||
class="min-h-[150px] text-paragraph-color pr-5 pl-50px py-15px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm"
|
||
></textarea>
|
||
<span
|
||
class="absolute top-[30px] -translate-y-1/2 left-4"
|
||
>
|
||
<i
|
||
class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"
|
||
></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-30px">
|
||
<!-- payment methods -->
|
||
<div>
|
||
<h4
|
||
class="text-22px font-semibold leading-1.3 pr-10px border-r-2 border-secondary-color text-heading-color mb-30px mt-50px"
|
||
>
|
||
Payment Method
|
||
</h4>
|
||
<form>
|
||
<ul
|
||
class="accordion-container neighbour-accordion border border-b-0 border-border-color-1 mb-30px"
|
||
>
|
||
<li
|
||
class="accordion border-b border-border-color-1 p-5"
|
||
>
|
||
<!-- accordion header -->
|
||
<div class="accordion-controller cursor-pointer">
|
||
<div
|
||
class="text-base lg:text-lg font-bold font-poppins flex items-center"
|
||
>
|
||
<div class="flex-shrink-0 w-4 h-4 relative pl-1">
|
||
<input
|
||
type="radio"
|
||
name="payment"
|
||
id="check-method"
|
||
class="inline-block absolute w-0 h-0 after:w-[11px] after:h-[11px] after:m-[1px] after:absolute after:left-0 after:top-0 after:bg-white after:outline-offset-[2px] after:outline-1 after:outline after:outline-heading-color after:z-10 after:rounded-100% after:inline-block checked:after:bg-heading-color after:transition-all after:duration-300"
|
||
>
|
||
</div>
|
||
<label
|
||
class="flex-grow leading-1.3 lg:leading-1.3 text-heading-color cursor-pointer ml-4"
|
||
for="check-method"
|
||
>
|
||
Check payments
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div
|
||
class="p-1 pt-15px content-wrapper text-sm lg:text-base"
|
||
>
|
||
<div class="px-30px py-15px shadow-box-shadow-3">
|
||
<p class="leading-1.8 lg:leading-1.8">
|
||
Please send a check to Store Name, Store
|
||
Street, Store Town, Store State / County,
|
||
Store Postcode.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li
|
||
class="accordion border-b border-border-color-1 p-5 active"
|
||
>
|
||
<!-- accordion header -->
|
||
<div class="accordion-controller cursor-pointer">
|
||
<div
|
||
class="text-base lg:text-lg font-bold font-poppins flex items-center"
|
||
>
|
||
<div class="flex-shrink-0 w-4 h-4 relative pl-1">
|
||
<input
|
||
type="radio"
|
||
name="payment"
|
||
id="cash-method"
|
||
class="inline-block absolute w-0 h-0 after:w-[11px] after:h-[11px] after:m-[1px] after:absolute after:left-0 after:top-0 after:bg-white after:outline-offset-[2px] after:outline-1 after:outline after:outline-heading-color after:z-10 after:rounded-100% after:inline-block checked:after:bg-heading-color after:transition-all after:duration-300"
|
||
checked
|
||
>
|
||
</div>
|
||
<label
|
||
class="flex-grow leading-1.3 lg:leading-1.3 text-heading-color cursor-pointer ml-4"
|
||
for="cash-method"
|
||
>
|
||
Cash on delivery
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div
|
||
class="p-1 pt-15px content-wrapper text-sm lg:text-base"
|
||
>
|
||
<div class="px-30px py-15px shadow-box-shadow-3">
|
||
<p class="leading-1.8 lg:leading-1.8">
|
||
Pay with cash upon delivery.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li
|
||
class="accordion border-b border-border-color-1 p-5"
|
||
>
|
||
<!-- accordion header -->
|
||
<div class="accordion-controller cursor-pointer">
|
||
<div
|
||
class="text-base lg:text-lg font-bold font-poppins flex items-center"
|
||
>
|
||
<div class="flex-shrink-0 w-4 h-4 relative pl-1">
|
||
<input
|
||
type="radio"
|
||
name="payment"
|
||
id="paypal"
|
||
class="inline-block absolute w-0 h-0 after:w-[11px] after:h-[11px] after:m-[1px] after:absolute after:left-0 after:top-0 after:bg-white after:outline-offset-[2px] after:outline-1 after:outline after:outline-heading-color after:z-10 after:rounded-100% after:inline-block checked:after:bg-heading-color after:transition-all after:duration-300"
|
||
>
|
||
</div>
|
||
<label
|
||
class="flex-grow leading-1.3 lg:leading-1.3 text-heading-color cursor-pointer ml-4"
|
||
for="paypal"
|
||
>
|
||
PayPal
|
||
<img
|
||
src="./assets/img/icons/payment-3.png"
|
||
alt="#"
|
||
class="max-w-[130px] inline-block ml-3"
|
||
>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- accordion content -->
|
||
<div
|
||
class="accordion-content h-0 overflow-hidden transition-all duration-500"
|
||
>
|
||
<div
|
||
class="p-1 pt-15px content-wrapper text-sm lg:text-base"
|
||
>
|
||
<div class="px-30px py-15px shadow-box-shadow-3">
|
||
<p class="leading-1.8 lg:leading-1.8">
|
||
Pay via PayPal; you can pay with your credit
|
||
card if you don’t have a PayPal account.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- submt -->
|
||
<div>
|
||
<p class="text-sm lg:text-base mb-30px">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Your personal data will be used to process your
|
||
order, support your experience throughout this
|
||
website, and for other purposes described in our
|
||
privacy policy.
|
||
</span>
|
||
</p>
|
||
<h5
|
||
class="uppercase text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block z-0"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black -z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<button
|
||
type="submit"
|
||
class="relative z-1 px-30px lg:px-10 py-3 md:py-15px lg:py-17px group-hover:text-heading-color leading-1.5 uppercase"
|
||
>
|
||
Place order
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- checkout -->
|
||
<div class="flex justify-end">
|
||
<div class="max-w-450px w-full">
|
||
<h4
|
||
class="text-22px font-semibold leading-1.3 pr-10px border-r-2 border-secondary-color text-heading-color mb-30px mt-50px"
|
||
>
|
||
Cart Totals
|
||
</h4>
|
||
<ul class="text-sm lg:text-base text-heading-color">
|
||
<li
|
||
class="p-2 border-b border-border-color-17 bg-table-bg"
|
||
>
|
||
<div class="flex justify-between items-center">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
3 Rooms Manhattan <strong> × 2</strong></span
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
$298.00</span
|
||
>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="p-2 border-b border-border-color-17">
|
||
<div class="flex justify-between items-center">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
OE Replica Wheels <strong> × 2</strong></span
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
$170.00</span
|
||
>
|
||
</div>
|
||
</li>
|
||
|
||
<li
|
||
class="p-2 border-b border-border-color-17 bg-table-bg"
|
||
>
|
||
<div class="flex justify-between items-center">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Wheel Bearing Retainer <strong> × 2</strong></span
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
$150.00</span
|
||
>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="p-2 border-b border-border-color-17">
|
||
<div class="flex justify-between items-center">
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Shipping and Handing</span
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
$15.00</span
|
||
>
|
||
</div>
|
||
</li>
|
||
|
||
<li
|
||
class="p-2 border-b border-border-color-17 bg-table-bg"
|
||
>
|
||
<div class="flex justify-between items-center">
|
||
<span class="leading-1.8 lg:leading-1.8"> Vat</span>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
$00.00</span
|
||
>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="p-2 border-b border-border-color-17">
|
||
<div
|
||
class="flex justify-between items-center font-bold"
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
Order Total</span
|
||
>
|
||
<span class="leading-1.8 lg:leading-1.8">
|
||
$633.00</span
|
||
>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- content 9 -->
|
||
<div class="transition-all duration-300 opacity-0 hidden">
|
||
<form
|
||
class="form-primary bg-white px-25px md:px-50px pt-10 pb-50px"
|
||
>
|
||
<!-- passwords -->
|
||
<div>
|
||
<h5
|
||
class="text-sm md:text-15px lg:text-base font-bold leading-1.3 text-heading-color mb-30px"
|
||
>
|
||
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3">
|
||
Change Password</span
|
||
>
|
||
</h5>
|
||
<div class="grid grid-cols-1 gap-30px pb-30px">
|
||
<!-- Current password -->
|
||
<div class="relative">
|
||
<input
|
||
type="password"
|
||
placeholder="Current Password*"
|
||
class="text-paragraph-color pr-5 pl-50px tra outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-60 tracking-[3px]"
|
||
>
|
||
</div>
|
||
<!-- New password-->
|
||
<div class="relative">
|
||
<input
|
||
type="password"
|
||
placeholder="New Password*"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-60 tracking-[3px]"
|
||
>
|
||
</div>
|
||
|
||
<!-- Confirm new password -->
|
||
<div class="relative">
|
||
<input
|
||
type="password"
|
||
placeholder="Confirm New Password*"
|
||
class="text-paragraph-color pr-5 pl-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:text-paragraph-color placeholder:text-sm placeholder:text-opacity-60 tracking-[3px]"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- submit button -->
|
||
|
||
<div>
|
||
<h5
|
||
class="uppercase text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border bg-secondary-color border-secondary-color hover:border-primary-color hover:bg-primary-color inline-block z-0"
|
||
>
|
||
<button
|
||
type="submit"
|
||
class="relative z-1 px-5 md:px-25px lg:px-10 py-10px md:py-15px lg:py-17px group-hover:text-white leading-23px uppercase h"
|
||
>
|
||
Save Changes
|
||
</button>
|
||
</h5>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- content 10 -->
|
||
<div class="transition-all duration-300 opacity-0 hidden">
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- footer start -->
|
||
<footer>
|
||
<div
|
||
class="pt-187px pb-5 px-15px 3xl:px-[2%] 4xl:px-[5%] mt-95px bg-section-bg-2 text-sm lg:text-base text-white relative"
|
||
>
|
||
<div class="px-15px">
|
||
<!-- footer top -->
|
||
<div
|
||
class="container w-full absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||
>
|
||
<div
|
||
class="px-25px lg:px-60px py-50px bg-secondary-color text-white flex justify-center lg:justify-between items-center flex-col lg:flex-row gap-y-30px lg:gap-0 sm:whitespace-nowrap"
|
||
>
|
||
<div>
|
||
<h5
|
||
class="text-xl md:text-26px lg:text-3xl xl:text-4xl text-white font-bold mb-15px"
|
||
>
|
||
<span class="leading-1.3">Looking for a dream home?</span>
|
||
</h5>
|
||
<p class="text-white leading-1.8">
|
||
We can help you realize your dream of a new home
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h5
|
||
class="capitalize inline-block text-sm md:text-base text-primary-color hover:text-white hover:bg-primary-color relative group whitespace-nowrap font-normal transition-all duration-300 shadow-box-shadow-3 mb-0"
|
||
>
|
||
<span
|
||
class="inline-block absolute top-0 right-0 w-full h-full bg-white group-hover:bg-secondary-color z-1 group-hover:w-0 transition-all duration-300"
|
||
></span>
|
||
<a
|
||
href="contact.html"
|
||
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-white leading-23px"
|
||
>Explore Properties <i class="icon-next"></i
|
||
></a>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- footer main -->
|
||
<div
|
||
class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-12 gap-x-30px text-sm lg:text-base text-white"
|
||
>
|
||
<!-- footer about-->
|
||
<div class="xl:col-start-1 xl:col-span-3 mb-60px lg:pl-35px">
|
||
<div class="mb-15px">
|
||
<a href="index.html">
|
||
<img src="./assets/img/logo-2.png" alt="" >
|
||
</a>
|
||
<p class="leading-1.8 mb-5 lg:mb-25px text-white">
|
||
Lorem Ipsum is simply dummy text of the and typesetting
|
||
industry. Lorem Ipsum is dummy text of the printing.
|
||
</p>
|
||
<ul class="space-y-2">
|
||
<li>
|
||
<p class="leading-1.8 text-white flex">
|
||
<i class="icon-placeholder ml-15px mt-1"></i>
|
||
<span>Brooklyn, New York, United States</span>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<a href="tel:+0123-456789" class="leading-1.8 flex">
|
||
<i class="icon-call ml-15px mt-1"></i>
|
||
<span>+0123-456789</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="mailto:example@example.com"
|
||
class="leading-1.8 flex"
|
||
>
|
||
<i class="icon-mail ml-15px mt-1"></i>
|
||
<span>example@example.com</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<ul class="flex items-center gap-x-5 mt-5">
|
||
<li>
|
||
<a href="https://www.facebook.com" class="leading-1.8">
|
||
<i class="fab fa-facebook-f"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://x.com" class="leading-1.8">
|
||
<i class="fab fa-twitter"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.linkedin.com" class="leading-1.8">
|
||
<i class="fab fa-linkedin"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.youtube.com" class="leading-1.8">
|
||
<i class="fab fa-youtube"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- footer company-->
|
||
<div class="xl:col-start-4 xl:col-span-2 mb-60px">
|
||
<h3 class="text-22px font-bold mb-25px text-white">
|
||
<span class="leading-1.3"> Company </span>
|
||
</h3>
|
||
<ul class="space-y-[15px]">
|
||
<li>
|
||
<a
|
||
href="about.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
About</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="blog.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Blog</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="shop.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
All Products</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="locations.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Locations Map</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="faq.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
FAQ</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="contact.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Contact us</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- footer services-->
|
||
<div class="xl:col-start-6 xl:col-span-2 mb-60px">
|
||
<h3 class="text-22px font-bold mb-25px text-white">
|
||
<span class="leading-1.3"> Services </span>
|
||
</h3>
|
||
<ul class="space-y-[15px]">
|
||
<li>
|
||
<a
|
||
href="order-tracking.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Order tracking</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="wishlist.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Wish List</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="login.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Login</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="account.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
My account</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="about.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Terms & Conditions</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="about.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Promotional Offers</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- footer customer care-->
|
||
<div class="xl:col-start-8 xl:col-span-2 mb-60px">
|
||
<h3 class="text-22px font-bold mb-25px text-white">
|
||
<span class="leading-1.3"> Customer Care </span>
|
||
</h3>
|
||
<ul class="space-y-[15px]">
|
||
<li>
|
||
<a
|
||
href="login.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Login</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="account.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
My account</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="wishlist.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Wish List</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="order-tracking.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Order tracking</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="faq.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
FAQ</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="contact.html"
|
||
class="hover:text-secondary-color translate-x-5 hover:translate-x-0 group leading-1.8"
|
||
><span
|
||
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||
>//</span
|
||
>
|
||
Contact us</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- footer newsletter-->
|
||
<div class="xl:col-start-10 xl:col-span-3 mb-60px">
|
||
<h3 class="text-22px font-bold mb-25px text-white">
|
||
<span class="leading-1.3"> Newsletter </span>
|
||
</h3>
|
||
<p class="leading-1.8 mb-5 lg:mb-25px text-white">
|
||
Subscribe to our weekly Newsletter and receive updates via
|
||
email.
|
||
</p>
|
||
|
||
<!-- subscription input -->
|
||
<div>
|
||
<form class="w-full relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Email*"
|
||
class="w-full text-sm text-paragraph-color pr-5 pl-50px placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block rounded-none"
|
||
>
|
||
<button
|
||
type="submit"
|
||
class="absolute top-0 left-0 h-full px-18px text-white bg-secondary-color hover:bg-primary-color"
|
||
>
|
||
<i class="fas fa-location-arrow text-lg font-bold"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
<!-- payment methods -->
|
||
<div>
|
||
<h3
|
||
class="text-base lg:text-lg font-bold mt-30px mb-15px text-white"
|
||
>
|
||
<span class="leading-1.3"> We Accept </span>
|
||
</h3>
|
||
<img
|
||
src="./assets/img/icons/payment-4.png"
|
||
alt="Payment Image"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- footer copyright -->
|
||
<div
|
||
class="py-25px px-15px 3xl:px-[2%] 4xl:px-[5%] bg-section-bg-7 text-sm lg:text-base text-white"
|
||
>
|
||
<div class="px-15px">
|
||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||
<div>
|
||
<p class="leading-1.8 text-center lg:text-start text-white">
|
||
All Rights Reserved @ Company 2024
|
||
</p>
|
||
</div>
|
||
|
||
<ul
|
||
class="flex gapx-25px items-center justify-center lg:justify-end capitalize font-semibold font-poppins text-sm"
|
||
>
|
||
<li>
|
||
<a href="#" class="leading-1.8">Terms & Conditions</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="leading-1.8"> Claim</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="leading-1.8"> Privacy & Policy</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- scroll top -->
|
||
<button
|
||
class="scroll-up w-30px h-30px lg:w-10 lg:h-10 lg:text-xl bg-section-bg-1 text-heading-color hover:bg-secondary-color hover:text-white rotate-[45deg] shadow-box-shadow-3 fixed bottom-[50px] lg:bottom-[70px] left-[3%] flex justify-center items-center z-xl"
|
||
>
|
||
<i class="fa fa-angle-up leading-1 -rotate-[45deg] inline-block"></i>
|
||
</button>
|
||
<script src="./assets/js/stickyHeader.js"></script>
|
||
<script src="./assets/js/accordion.js"></script>
|
||
<script src="./assets/js/service.js"></script>
|
||
<script src="./assets/js/nice-select2.js"></script>
|
||
<script src="./assets/js/search.js"></script>
|
||
<script src="./assets/js/drawer.js"></script>
|
||
<script src="./assets/js/swiper-bundle.min.js"></script>
|
||
<script src="./assets/js/silder.js"></script>
|
||
<script src="./assets/js/counterup.js"></script>
|
||
<script src="./assets/js/modal.js"></script>
|
||
<script src="./assets/js/tabs.js"></script>
|
||
<script src="./assets/js/glightbox.min.js"></script>
|
||
<script src="./assets/js/scrollUp.js"></script>
|
||
<script src="./assets/js/smoothScroll.js"></script>
|
||
<script src="./assets/js/isotope.pkgd.min.js"></script>
|
||
<script src="./assets/js/filter.js"></script>
|
||
<script src="./assets/js/nice_checkbox.js"></script>
|
||
<script src="./assets/js/count.js"></script>
|
||
<script src="./assets/js/main.js"></script>
|
||
</body>
|
||
</html>
|