First complete upload on nas

This commit is contained in:
2024-09-18 11:20:28 +02:00
commit 4f086962fe
6456 changed files with 1232660 additions and 0 deletions
+392
View File
@@ -0,0 +1,392 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/images/favicon.png">
<title>ListOn - Directory & Listing HTML Template</title>
<link href="assets/plugins/aos/aos.min.css" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/fontawesome/css/all.min.css" rel="stylesheet">
<link href="assets/plugins/OwlCarousel2/css/owl.carousel.min.css" rel="stylesheet">
<link href="assets/plugins/OwlCarousel2/css/owl.theme.default.min.css" rel="stylesheet">
<link href="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/fancy_fileupload.css" rel="stylesheet">
<link href="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.css" rel="stylesheet">
<link href="assets/plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
<link href="assets/plugins/select2/select2.min.css" rel="stylesheet">
<link href="assets/plugins/select2-bootstrap-5/select2-bootstrap-5-theme.min.css" rel="stylesheet">
<!-- Custom style for this template -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- start navbar -->
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand m-0" href="index.html">
<img class="logo-white" src="assets/images/logo-white.png" alt="">
<img class="logo-dark" src="assets/images/logo.png" alt="">
</a>
<div class="d-flex order-lg-2">
<!-- start button -->
<a href="signin.html" class="d-flex align-items-center justify-content-center p-0 btn-user position-relative" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="Favourite">
<i class="fa-solid fa-heart"></i>
<span class="align-items-center bg-primary d-flex end-0 fs-11 justify-content-center nav-count position-absolute rounded-circle text-white">0</span>
</a>
<!-- end /. button -->
<!-- start button -->
<a href="sign-in.html" class="d-flex align-items-center justify-content-center p-0 btn-user" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="Sign In">
<i class="fa-solid fa-user-plus"></i>
</a>
<!-- end /. button -->
<!-- start button -->
<button type="button" id="themeToggleBtn" class="align-items-center bg-transparent border-0 btn-user d-flex justify-content-center p-0">
<i class="fa-solid fa-moon"></i>
</button>
<!-- end /. button -->
<!-- start button -->
<a href="add-listing.html" class="btn btn-primary d-none d-sm-flex fw-medium gap-2 hstack rounded-5">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
<div class="vr d-none d-sm-inline-block"></div>
<span class="d-none d-sm-inline-block">Add Listing</span>
</a>
<!-- end /. button -->
<!-- start navbar toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span id="nav-icon" class="">
<span></span>
<span></span>
<span></span>
</span>
</button>
<!-- end /. navbar toggle button -->
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" aria-current="page" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Home
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="index.html">Home (Main)</a></li>
<li><a class="dropdown-item" href="home-classic.html">Home (Classic)</a></li>
<li><a class="dropdown-item" href="home-rounded.html">Home (Rounded)</a></li>
<li><a class="dropdown-item" href="home-map.html">Home (Map)</a></li>
<li><a class="dropdown-item" href="home-grid.html">Home (Grid)</a></li>
<li><a class="dropdown-item" href="home-waves.html">Home (Waves)</a></li>
<li><a class="dropdown-item" href="home-car.html">Home (Car)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
<li><a class="dropdown-item" href="home-restaurant.html">Home (Restaurant)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle material-ripple" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="typcn typcn-weather-stormy top-menu-icon"></i>Dashboard
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dashboard/dashboard.html">Dashboard</a></li>
<li><a class="dropdown-item" href="dashboard/bookings.html">Bookings</a></li>
<li><a class="dropdown-item" href="dashboard/messages.html">Message</a></li>
<li><a class="dropdown-item" href="dashboard/wallet.html">Wallet</a></li>
<li><a class="dropdown-item" href="dashboard/profile.html">Edit Profile</a></li>
<li><a class="dropdown-item" href="dashboard/add-listing.html">Add listing</a></li>
<li><a class="dropdown-item" href="dashboard/my-listing.html">My listing</a></li>
<li><a class="dropdown-item" href="dashboard/bookings.html">Bookings</a></li>
<li><a class="dropdown-item" href="dashboard/reviews.html">Reviews</a></li>
<li><a class="dropdown-item" href="dashboard/bookmark.html">Bookmark</a></li>
<li><a class="dropdown-item" href="dashboard/setting-app.html">Settings</a></li>
<li><a class="dropdown-item" href="dashboard/invoice.html">Invoice</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Listing
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">List View</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-list-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-list-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-grid-1-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-grid-1-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-grid-2-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-grid-2-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Half Map + Sidebar</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-map.html">Half Map List</a></li>
<li><a class="dropdown-item" href="listings-map-car.html">Half Map List (Car)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
<li><a class="dropdown-item" href="listings-map-grid-1.html">Half Map Grid 1</a></li>
<li><a class="dropdown-item" href="listings-map-grid-2.html">Half Map Grid 2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Listing Details</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listing-details.html">Listing Details 1</a></li>
<li><a class="dropdown-item" href="listing-details-2.html">Listing Details 2</a></li>
<li><a class="dropdown-item" href="listing-details-car.html">Listing Details Car <span class="badge text-bg-primary fw-semibold">New</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="listings-map-grid-1.html">Explore</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Template
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="about.html">About us 1</a></li>
<li><a class="dropdown-item" href="about-2.html">About us 2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Agent</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="agent.html">Agent</a></li>
<li><a class="dropdown-item" href="agent-details.html">Agent Details</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="blog.html" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="blog.html">Blog</a></li>
<li><a class="dropdown-item" href="blog-details.html">Blog Standard</a></li>
<li><a class="dropdown-item" href="blog-post-galary.html">Blog Galary</a></li>
<li><a class="dropdown-item" href="blog-post-video.html">Blog Video</a></li>
<li><a class="dropdown-item" href="blog-post-audio.html">Blog Audio</a></li>
<li><a class="dropdown-item" href="blog-archive.html">Blog Archive</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="add-listing.html">Add Listing</a></li>
<li><a class="dropdown-item" href="submit-rider.html">Submit Rider</a></li>
<li><a class="dropdown-item" href="contact.html">Contact</a></li>
<li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Authentication</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="sign-in.html">Sign In</a></li>
<li><a class="dropdown-item" href="sign-up.html">Sign Up</a></li>
<li><a class="dropdown-item" href="forgot-password.html">Forgot Password</a></li>
<li><a class="dropdown-item" href="two-factor-auth.html">Two factor authentication</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Specialty</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="404.html">404 Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Help Center</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="faq.html">Faq Page</a></li>
<li><a class="dropdown-item" href="terms-conditions.html">Terms & Conditions</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="style-guide.html">Style Guide</a></li>
</ul>
</li>
</ul>
<div class="d-sm-none">
<!-- start button -->
<a href="signin.html" class="btn btn-primary d-flex gap-2 hstack justify-content-center rounded-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
<div class="vr d-none d-sm-inline-block"></div>
<span>Add Listing</span>
</a>
<!-- end /. button -->
</div>
</div>
</div>
</nav>
<!-- end /. navbar -->
<div class="py-5 bg-light mx-3 mb-3 rounded-4">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-9 col-lg-7 text-center">
<!-- start error text -->
<h2 class="error-text font-caveat text-primary">404</h2>
<!-- end /. error text -->
<div class="">
<h2 class="fw-semibold mb-3 text-capitalize">Page not pound.</h2>
<p class="fs-16">The server encountered something unexpected that didn't allow it to complete the request. We apologize. You can go back to main page:</p>
<!-- start button -->
<a href="index.html" class="btn btn-primary btn-lg mt-3">
<span>Go To Home Page</span>
</a>
<!-- end /. button -->
</div>
</div>
</div>
</div>
</div>
<!-- start footer -->
<footer class="footer-dark main-footer overflow-hidden position-relative pt-5">
<div class="container pt-4">
<div class="py-5">
<!-- start app download content -->
<div class="bg-primary rounded-4">
<div class="col-xxl-10 col-md-11 col-10 d-flex flex-md-row flex-column-reverse align-items-md-end align-items-center mx-auto px-0 gap-4">
<img class="app-image flex-shrink-0" src="assets/images/phone-mpckup.png" width="270" alt="Mobile app">
<div class="align-items-lg-center align-self-center d-flex flex-column flex-lg-row ps-xxl-4 pt-5 py-md-3 text-center text-md-start">
<div class="me-md-5">
<h4 class="text-white">Download Our App</h4>
<p class="mb-lg-0 text-white">It is a long established fact that a reader will be distracted by the readable content.</p>
</div>
<div class="d-flex flex-shrink-0 flex-wrap gap-3 justify-content-center">
<!-- start apple store button -->
<a class="align-items-center app-btn d-flex px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fa-apple fab fs-28 me-2"></i>
<div> <span class="fs-13 d-block">Available on the</span> <span class="fs-17 text-capitalize">App Store</span> </div>
</a>
<!-- end /. apple store button -->
<a class="align-items-center app-btn d-flex fs-11 px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fab fa-google-play fs-25 me-2"></i>
<div> <span class="fs-13 d-block">Get it on</span> <span class="fs-17 text-capitalize">Google Play</span> </div>
</a>
</div>
</div>
</div>
</div>
<!-- end /. app download content -->
</div>
<div class="border-top py-5">
<div class="footer-row row gy-5 g-sm-5 gx-xxl-6">
<div class="border-end col-lg-4 col-md-7 col-sm-6">
<h5 class="fw-bold mb-4">Get In Touch</h5>
<div class="mb-4">Join our newsletter and receive the best job<br class="d-none d-xxl-block"> openings of the week, right on your inbox.</div>
<div class="border rounded-4 p-4 mb-4">
<h6 class="text-white-50 mb-3">Join our Whatsapp:</h6>
<a class="align-items-center d-block d-flex whatsapp-number" href="#"><i class="fa-brands fa-whatsapp fs-2 me-2"></i><span class="fs-5 fw-semibold text-decoration-underline">(123) 456-7890</span></a>
</div>
<h5 class="fw-bold mb-4">Want to join ListOn?<br> Write us !</h5>
<span>support@ListOn.com</span>
</div>
<div class="border-end col-lg-4 col-md-5 col-sm-6">
<h5 class="fw-bold mb-4">Stay Connect</h5>
<div>1123 Fictional St, San Francisco<br class="d-none d-xxl-block"> , CA 94103</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<div class="col-lg-4">
<h5 class="fw-bold mb-4">Get In Touch</h5>
<div class="newsletter position-relative mt-4">
<input type="email" class="form-control" placeholder="name@example.com">
<button type="button" class="btn btn-primary search-btn position-absolute top-50 rounded-circle"><i class="fa-solid fa-angle-right"></i></button>
</div>
<div class="border-top my-4"></div>
<h5 class="fw-bold mb-4">Follow the location</h5>
<!-- start social icon -->
<ul class="d-flex flex-wrap gap-2 list-unstyled mb-0 social-icon">
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white inst">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white twi">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white dri">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white fb">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white whatsapp">
<i class="fa-brands fa-whatsapp"></i>
</a>
</li>
</ul>
<!-- /. end social icon -->
</div>
</div>
</div>
</div>
<div class="container border-top">
<div class="align-items-center g-3 py-4 row">
<div class="col-lg-auto">
<!-- start footer nav -->
<ul class="list-unstyled list-separator mb-2 footer-nav">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Sitemap</a></li>
<li class="list-inline-item"><a href="#">Cookies</a></li>
</ul>
<!-- end /. footer nav -->
</div>
<div class="col-lg order-md-first">
<div class="align-items-center row">
<!-- start footer logo -->
<a href="index.html" class="col-sm-auto footer-logo mb-2 mb-sm-0">
<img src="assets/images/logo-white.png" alt="">
</a>
<!-- end /. footer logo -->
<!-- start text -->
<div class="col-sm-auto copy">© 2022 ListOn - All Rights Reserved- All Rights Reserved</div>
<!-- end /. text -->
</div>
</div>
</div>
</div>
</footer>
<!-- end /. footer -->
<!-- Optional JavaScript -->
<script src="assets/plugins/jQuery/jquery.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/aos/aos.min.js"></script>
<script src="assets/plugins/macy/macy.js"></script>
<script src="assets/plugins/simple-parallax/simpleParallax.min.js"></script>
<script src="assets/plugins/OwlCarousel2/owl.carousel.min.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/ResizeSensor.min.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.min.js"></script>
<script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/plugins/counter-up/jquery.counterup.min.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.ui.widget.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fileupload.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.iframe-transport.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fancy-fileupload.js"></script>
<script src="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.js"></script>
<script src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/plugins/select2/select2.min.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
</body>
</html>
+848
View File
@@ -0,0 +1,848 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/images/favicon.png">
<title>ListOn - Directory & Listing HTML Template</title>
<link href="assets/plugins/aos/aos.min.css" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/fontawesome/css/all.min.css" rel="stylesheet">
<link href="assets/plugins/OwlCarousel2/css/owl.carousel.min.css" rel="stylesheet">
<link href="assets/plugins/OwlCarousel2/css/owl.theme.default.min.css" rel="stylesheet">
<link href="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/fancy_fileupload.css" rel="stylesheet">
<link href="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.css" rel="stylesheet">
<link href="assets/plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
<link href="assets/plugins/select2/select2.min.css" rel="stylesheet">
<link href="assets/plugins/select2-bootstrap-5/select2-bootstrap-5-theme.min.css" rel="stylesheet">
<!-- Custom style for this template -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- start navbar -->
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container">
<a class="navbar-brand m-0" href="index.html">
<img class="logo-white" src="assets/images/logo-white.png" alt="">
<img class="logo-dark" src="assets/images/logo.png" alt="">
</a>
<div class="d-flex order-lg-2">
<!-- start button -->
<a href="signin.html" class="d-flex align-items-center justify-content-center p-0 btn-user position-relative" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="Favourite">
<i class="fa-solid fa-heart"></i>
<span class="align-items-center bg-primary d-flex end-0 fs-11 justify-content-center nav-count position-absolute rounded-circle text-white">0</span>
</a>
<!-- end /. button -->
<!-- start button -->
<a href="sign-in.html" class="d-flex align-items-center justify-content-center p-0 btn-user" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="Sign In">
<i class="fa-solid fa-user-plus"></i>
</a>
<!-- end /. button -->
<!-- start button -->
<button type="button" id="themeToggleBtn" class="align-items-center bg-transparent border-0 btn-user d-flex justify-content-center p-0">
<i class="fa-solid fa-moon"></i>
</button>
<!-- end /. button -->
<!-- start button -->
<a href="add-listing.html" class="btn btn-primary d-none d-sm-flex fw-medium gap-2 hstack rounded-5">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
<div class="vr d-none d-sm-inline-block"></div>
<span class="d-none d-sm-inline-block">Add Listing</span>
</a>
<!-- end /. button -->
<!-- start navbar toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span id="nav-icon" class="">
<span></span>
<span></span>
<span></span>
</span>
</button>
<!-- end /. navbar toggle button -->
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" aria-current="page" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Home
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="index.html">Home (Main)</a></li>
<li><a class="dropdown-item" href="home-classic.html">Home (Classic)</a></li>
<li><a class="dropdown-item" href="home-rounded.html">Home (Rounded)</a></li>
<li><a class="dropdown-item" href="home-map.html">Home (Map)</a></li>
<li><a class="dropdown-item" href="home-grid.html">Home (Grid)</a></li>
<li><a class="dropdown-item" href="home-waves.html">Home (Waves)</a></li>
<li><a class="dropdown-item" href="home-car.html">Home (Car)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
<li><a class="dropdown-item" href="home-restaurant.html">Home (Restaurant)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle material-ripple" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="typcn typcn-weather-stormy top-menu-icon"></i>Dashboard
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dashboard/dashboard.html">Dashboard</a></li>
<li><a class="dropdown-item" href="dashboard/bookings.html">Bookings</a></li>
<li><a class="dropdown-item" href="dashboard/messages.html">Message</a></li>
<li><a class="dropdown-item" href="dashboard/wallet.html">Wallet</a></li>
<li><a class="dropdown-item" href="dashboard/profile.html">Edit Profile</a></li>
<li><a class="dropdown-item" href="dashboard/add-listing.html">Add listing</a></li>
<li><a class="dropdown-item" href="dashboard/my-listing.html">My listing</a></li>
<li><a class="dropdown-item" href="dashboard/bookings.html">Bookings</a></li>
<li><a class="dropdown-item" href="dashboard/reviews.html">Reviews</a></li>
<li><a class="dropdown-item" href="dashboard/bookmark.html">Bookmark</a></li>
<li><a class="dropdown-item" href="dashboard/setting-app.html">Settings</a></li>
<li><a class="dropdown-item" href="dashboard/invoice.html">Invoice</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Listing
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">List View</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-list-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-list-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-grid-1-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-grid-1-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-grid-2-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-grid-2-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Half Map + Sidebar</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-map.html">Half Map List</a></li>
<li><a class="dropdown-item" href="listings-map-car.html">Half Map List (Car)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
<li><a class="dropdown-item" href="listings-map-grid-1.html">Half Map Grid 1</a></li>
<li><a class="dropdown-item" href="listings-map-grid-2.html">Half Map Grid 2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Listing Details</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listing-details.html">Listing Details 1</a></li>
<li><a class="dropdown-item" href="listing-details-2.html">Listing Details 2</a></li>
<li><a class="dropdown-item" href="listing-details-car.html">Listing Details Car <span class="badge text-bg-primary fw-semibold">New</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="listings-map-grid-1.html">Explore</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Template
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="about.html">About us 1</a></li>
<li><a class="dropdown-item active" href="about-2.html">About us 2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Agent</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="agent.html">Agent</a></li>
<li><a class="dropdown-item" href="agent-details.html">Agent Details</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="blog.html" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="blog.html">Blog</a></li>
<li><a class="dropdown-item" href="blog-details.html">Blog Standard</a></li>
<li><a class="dropdown-item" href="blog-post-galary.html">Blog Galary</a></li>
<li><a class="dropdown-item" href="blog-post-video.html">Blog Video</a></li>
<li><a class="dropdown-item" href="blog-post-audio.html">Blog Audio</a></li>
<li><a class="dropdown-item" href="blog-archive.html">Blog Archive</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="add-listing.html">Add Listing</a></li>
<li><a class="dropdown-item" href="submit-rider.html">Submit Rider</a></li>
<li><a class="dropdown-item" href="contact.html">Contact</a></li>
<li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Authentication</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="sign-in.html">Sign In</a></li>
<li><a class="dropdown-item" href="sign-up.html">Sign Up</a></li>
<li><a class="dropdown-item" href="forgot-password.html">Forgot Password</a></li>
<li><a class="dropdown-item" href="two-factor-auth.html">Two factor authentication</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Specialty</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="404.html">404 Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Help Center</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="faq.html">Faq Page</a></li>
<li><a class="dropdown-item" href="terms-conditions.html">Terms & Conditions</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="style-guide.html">Style Guide</a></li>
</ul>
</li>
</ul>
<div class="d-sm-none">
<!-- start button -->
<a href="signin.html" class="btn btn-primary d-flex gap-2 hstack justify-content-center rounded-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
<div class="vr d-none d-sm-inline-block"></div>
<span>Add Listing</span>
</a>
<!-- end /. button -->
</div>
</div>
</div>
</nav>
<!-- end /. navbar -->
<!-- start page header -->
<section class="hero mx-3 overflow-hidden position-relative py-4 py-lg-5 rounded-4 bg-light hero-about bg-bottom js-bg-image bg-cover" data-image-src="assets/images/pattern.svg">
<!-- <img class="bg-image" src="assets/images/header/01.jpg" alt="Image"> -->
<div class="container overlay-content py-5">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-10">
<!-- start section header -->
<div class="section-header text-center" data-aos="fade-down">
<!-- start description -->
<div class="bg-primary d-inline-block fs-14 mb-3 px-4 py-2 rounded-5 sub-title text-white">7+ YEARS EXPERIENCED IN FIELD</div>
<!-- end /. section header sub title -->
<!-- start section header -->
<h2 class="display-4 fw-semibold mb-3 section-header__title text-capitalize mb-0">ListOn was founded in 2023 by Alexander with a <span class="font-caveat text-primary">vision to your original</span> vision or inspiration.</h2>
<!-- end /. section header title -->
</div>
<!-- end /. section header -->
</div>
</div>
</div>
</section>
<!-- end /. page header -->
<!-- start about video section -->
<div class="container">
<!-- start about video -->
<div class="about-video position-relative mx-3 rounded-4 overflow-hidden about-video-top">
<!-- Image Parallax -->
<img src="assets/images/about/bg-02.jpg" alt="" class="about-img js-image-parallax">
<a class="align-items-center bg-blur d-flex justify-content-center popup-youtube position-absolute rounded-circle start-50 text-white top-50 translate-middle video-icon z-1" href="https://www.youtube.com/watch?v=0O2aH4XLbto">
<i class="fa-solid fa-play fs-20"></i>
</a>
</div>
<!-- end /. about video -->
</div>
<!-- start story section -->
<div class="py-5 border-bottom">
<div class="container py-4">
<div class="row">
<div class="col-md-6 pe-xxl-5">
<div class="text-end fw-medium">OUR STORY:</div>
</div>
<div class="col-md-6 ps-xxl-5">
<h3 class="display-6 mb-4">About ListOn Brand</h3>
<p class="lead">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
<a href="#" class="text-primary fw-semibold d-inline-block mt-4">Let’s Check open position</a>
</div>
</div>
</div>
<div class="container">
<div class="border-top pt-2">
<div class="mb-5 fw-medium">OUR ACHIEVEMENTS</div>
<div class="row g-4 justify-content-center">
<div class="col-sm-6 col-lg-3">
<div class="counter-box align-items-center bg-light d-flex display-5 fw-semibold justify-content-center m-auto rounded-circle text-primary">
<span class="counter">3,00 </span>+
</div>
<h5 class="fs-18 mb-0 mt-3 text-center">Job posted</h5>
</div>
<div class="col-sm-6 col-lg-3">
<div class="counter-box align-items-center bg-light d-flex display-5 fw-semibold justify-content-center m-auto rounded-circle text-primary">
<span class="counter">2,50 </span>+
</div>
<h5 class="fs-18 mb-0 mt-3 text-center">Successful hires</h5>
</div>
<div class="col-sm-6 col-lg-3">
<div class="counter-box align-items-center bg-light d-flex display-5 fw-semibold justify-content-center m-auto rounded-circle text-primary">
<span class="counter">10</span>M +
</div>
<h5 class="fs-18 mb-0 mt-3 text-center">Monthly visits</h5>
</div>
<div class="col-sm-6 col-lg-3">
<div class="counter-box align-items-center bg-light d-flex display-5 fw-semibold justify-content-center m-auto rounded-circle text-primary">
<span class="counter">593 </span>+
</div>
<h5 class="fs-18 mb-0 mt-3 text-center">Verified companies</h5>
</div>
</div>
</div>
</div>
</div>
<!-- end /. story section -->
<!-- start about section -->
<div class="py-5">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-8">
<!-- start section header -->
<div class="section-header text-center mb-5" data-aos="fade-down">
<!-- start subtitle -->
<div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">About us</div>
<!-- end /. subtitle -->
<!-- start title -->
<h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Explore over 2.5 million people travel around the world.</h2>
<!-- end /. title -->
<!-- start description -->
<div class="sub-title fs-16">Discover exciting categories. <span class="text-primary fw-semibold">Find what you’re looking for.</span></div>
<!-- end /. description -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row g-4 justify-content-between">
<div class="col-lg-6 col-xl-5">
<div class="column-text-box left">
<h6 class="fs-14 fw-semibold heading-sm l-spacing-1 position-relative text-primary text-uppercase title-line">ABOUT ListOn GROUP</h6>
<h3 class="display-6">Innovative Buildings with new materials</h3>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<blockquote class="about-blockquote display-6 font-caveat fst-italic my-3"> It uses a dictionary of over 200 Latin words, combined with a handful of model sentence.</blockquote>
<div class="mb-3">
<div class="align-items-center d-flex fs-18 fw-semibold justify-content-between mb-2">
<span>Prosperity</span>
<span>60%</span>
</div>
<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: 60%"></div>
</div>
</div>
<div class="mb-3">
<div class="align-items-center d-flex fs-18 fw-semibold justify-content-between mb-2">
<span>Quality</span>
<span>85%</span>
</div>
<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: 85%"></div>
</div>
</div>
<div class="">
<div class="align-items-center d-flex fs-18 fw-semibold justify-content-between mb-2">
<span>Guaranty</span>
<span>40%</span>
</div>
<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: 40%"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 ps-xxl-5">
<!-- start about image masonry -->
<div class="ps-xl-4 position-relative">
<div class="row g-3">
<div class="col-6">
<div class="about-image-wrap mb-3 rounded-4">
<img src="assets/images/about/01.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-one rounded-3">
</div>
<div class="about-image-wrap rounded-4">
<img src="assets/images/about/02.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-two rounded-3">
</div>
</div>
<div class="col-6">
<div class="about-image-wrap mb-3 rounded-4">
<img src="assets/images/about/03.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-three rounded-3">
</div>
<div class="about-image-wrap rounded-4">
<img src="assets/images/about/04.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-four rounded-3">
</div>
</div>
</div>
<img src="assets/images/png-img/about-shape-1.png" alt="About Shape" class="banner-shape-one position-absolute">
<img src="assets/images/png-img/about-shape-2.png" alt="About Shape" class="banner-shape-two position-absolute">
</div>
<!-- end /. about image masonry -->
</div>
</div>
</div>
</div>
<!-- end /. about section -->
<!-- start awards section -->
<div class="bg-dark mb-3 mx-3 py-5 rounded-4">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-8">
<!-- start section header -->
<div class="section-header text-center mb-5" data-aos="fade-down">
<!-- start subtitle -->
<div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Awards</div>
<!-- end /. subtitle -->
<!-- start section header -->
<h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize text-white">Our Awards</h2>
<!-- end /. title -->
<!-- start description -->
<div class="sub-title fs-16 text-white">Find a job you love. <span class="text-primary fw-semibold">Set your career interests.</span></div>
<!-- end /. description -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row justify-content-center g-4 g-xxl-5">
<div class="col-6 col-md-3">
<img src="assets/images/png-img/award-01.png" alt="" class="img-fluid px-xl-4">
<div class="mt-3 pt-3 text-center">
<h5 class="text-primary">World Architecture Festival</h5>
<div class="text-white">Jun 23, 2023</div>
</div>
</div>
<div class="col-6 col-md-3">
<img src="assets/images/png-img/award-02.png" alt="" class="img-fluid px-xl-4">
<div class="mt-3 pt-3 text-center">
<h5 class="text-primary">Venice Biennale of Architecture</h5>
<div class="text-white">Jun 23, 2023</div>
</div>
</div>
<div class="col-6 col-md-3">
<img src="assets/images/png-img/award-03.png" alt="" class="img-fluid px-xl-4">
<div class="mt-3 pt-3 text-center">
<h5 class="text-primary">Tamayouz Excellence Award for Architecture</h5>
<div class="text-white">Jun 23, 2023</div>
</div>
</div>
<div class="col-6 col-md-3">
<img src="assets/images/png-img/award-04.png" alt="" class="img-fluid px-xl-4">
<div class="mt-3 pt-3 text-center">
<h5 class="text-primary">RIBA President's Medals</h5>
<div class="text-white">Jun 23, 2023</div>
</div>
</div>
</div>
</div>
</div>
<!-- end /. awards section -->
<!-- start team section -->
<div class="py-5">
<div class="container py-4">
<div class="row">
<div class="col-sm-10 col-md-10 col-lg-6">
<!-- start section header -->
<div class="section-header mb-5" data-aos="fade-down">
<!-- start subtitle -->
<div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Our Team</div>
<!-- end /. subtitle -->
<!-- start title -->
<h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Meet Our Team</h2>
<!-- end /. title -->
<!-- start description -->
<div class="sub-title fs-16">A team of experienced and dedicated professionals who are passionate about helping our clients find their dream properties. From our agents to our support staff, everyone on our team is committed to providing personalized service, expert guidance, and exceptional results.</div>
<!-- end /. description -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row justify-content-center g-4 gx-xxl-5">
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container">
<img src="assets/images/avatar/01.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Ethan Blackwood</h4>
<div>Co-founder</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/02.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Edwin Martins</h4>
<div>Product Manager</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/03.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Alexander Kaminski</h4>
<div>Software Developer</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/04.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Pranoti Deshpande</h4>
<div>DevOps</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/05.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Alexander Steele</h4>
<div>Data analysis</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/06.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Marcus Knight</h4>
<div>Security Engineer</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/07.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Alexander Kaminski</h4>
<div>Support Engineer</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/02.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Gabriel North</h4>
<div>Security Engineer</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
</div>
</div>
</div>
<!-- end /. team section -->
<!-- start customers section -->
<div class="py-5 bg-light">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-8">
<!-- start section header -->
<div class="section-header text-center mb-5" data-aos="fade-down">
<!-- start subtitle -->
<div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Our Customers</div>
<!-- end /. subtitle -->
<!-- start title -->
<h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Trusted By Thousands News Of Companies</h2>
<!-- end /. title -->
<!-- start description -->
<div class="sub-title fs-16">Discover exciting categories. <span class="text-primary fw-semibold">Find what you’re looking for.</span></div>
<!-- end /. description -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row align-items-center justify-content-center g-2 g-sm-3 g-md-4">
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/01.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/02.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/03.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/04.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/05.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/06.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
</div>
</div>
</div>
<!-- end /. customers section -->
<!-- start footer -->
<footer class="footer-dark main-footer overflow-hidden position-relative pt-5">
<div class="container pt-4">
<div class="py-5">
<!-- start app download content -->
<div class="bg-primary rounded-4">
<div class="col-xxl-10 col-md-11 col-10 d-flex flex-md-row flex-column-reverse align-items-md-end align-items-center mx-auto px-0 gap-4">
<img class="app-image flex-shrink-0" src="assets/images/phone-mpckup.png" width="270" alt="Mobile app">
<div class="align-items-lg-center align-self-center d-flex flex-column flex-lg-row ps-xxl-4 pt-5 py-md-3 text-center text-md-start">
<div class="me-md-5">
<h4 class="text-white">Download Our App</h4>
<p class="mb-lg-0 text-white">It is a long established fact that a reader will be distracted by the readable content.</p>
</div>
<div class="d-flex flex-shrink-0 flex-wrap gap-3 justify-content-center">
<!-- start apple store button -->
<a class="align-items-center app-btn d-flex px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fa-apple fab fs-28 me-2"></i>
<div> <span class="fs-13 d-block">Available on the</span> <span class="fs-17 text-capitalize">App Store</span> </div>
</a>
<!-- end /. apple store button -->
<a class="align-items-center app-btn d-flex fs-11 px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fab fa-google-play fs-25 me-2"></i>
<div> <span class="fs-13 d-block">Get it on</span> <span class="fs-17 text-capitalize">Google Play</span> </div>
</a>
</div>
</div>
</div>
</div>
<!-- end /. app download content -->
</div>
<div class="border-top py-5">
<div class="footer-row row gy-5 g-sm-5 gx-xxl-6">
<div class="border-end col-lg-4 col-md-7 col-sm-6">
<h5 class="fw-bold mb-4">Get In Touch</h5>
<div class="mb-4">Join our newsletter and receive the best job<br class="d-none d-xxl-block"> openings of the week, right on your inbox.</div>
<div class="border rounded-4 p-4 mb-4">
<h6 class="text-white-50 mb-3">Join our Whatsapp:</h6>
<a class="align-items-center d-block d-flex whatsapp-number" href="#"><i class="fa-brands fa-whatsapp fs-2 me-2"></i><span class="fs-5 fw-semibold text-decoration-underline">(123) 456-7890</span></a>
</div>
<h5 class="fw-bold mb-4">Want to join ListOn?<br> Write us !</h5>
<span>support@ListOn.com</span>
</div>
<div class="border-end col-lg-4 col-md-5 col-sm-6">
<h5 class="fw-bold mb-4">Stay Connect</h5>
<div>1123 Fictional St, San Francisco<br class="d-none d-xxl-block"> , CA 94103</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<div class="col-lg-4">
<h5 class="fw-bold mb-4">Get In Touch</h5>
<div class="newsletter position-relative mt-4">
<input type="email" class="form-control" placeholder="name@example.com">
<button type="button" class="btn btn-primary search-btn position-absolute top-50 rounded-circle"><i class="fa-solid fa-angle-right"></i></button>
</div>
<div class="border-top my-4"></div>
<h5 class="fw-bold mb-4">Follow the location</h5>
<!-- start social icon -->
<ul class="d-flex flex-wrap gap-2 list-unstyled mb-0 social-icon">
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white inst">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white twi">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white dri">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white fb">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white whatsapp">
<i class="fa-brands fa-whatsapp"></i>
</a>
</li>
</ul>
<!-- /. end social icon -->
</div>
</div>
</div>
</div>
<div class="container border-top">
<div class="align-items-center g-3 py-4 row">
<div class="col-lg-auto">
<!-- start footer nav -->
<ul class="list-unstyled list-separator mb-2 footer-nav">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Sitemap</a></li>
<li class="list-inline-item"><a href="#">Cookies</a></li>
</ul>
<!-- end /. footer nav -->
</div>
<div class="col-lg order-md-first">
<div class="align-items-center row">
<!-- start footer logo -->
<a href="index.html" class="col-sm-auto footer-logo mb-2 mb-sm-0">
<img src="assets/images/logo-white.png" alt="">
</a>
<!-- end /. footer logo -->
<!-- start text -->
<div class="col-sm-auto copy">© 2022 ListOn - All Rights Reserved- All Rights Reserved</div>
<!-- end /. text -->
</div>
</div>
</div>
</div>
</footer>
<!-- end /. footer -->
<!-- Optional JavaScript -->
<script src="assets/plugins/jQuery/jquery.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/aos/aos.min.js"></script>
<script src="assets/plugins/macy/macy.js"></script>
<script src="assets/plugins/simple-parallax/simpleParallax.min.js"></script>
<script src="assets/plugins/OwlCarousel2/owl.carousel.min.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/ResizeSensor.min.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.min.js"></script>
<script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/plugins/counter-up/jquery.counterup.min.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.ui.widget.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fileupload.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.iframe-transport.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fancy-fileupload.js"></script>
<script src="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.js"></script>
<script src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/plugins/select2/select2.min.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
</body>
</html>
+798
View File
@@ -0,0 +1,798 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/images/favicon.png">
<title>ListOn - Directory & Listing HTML Template</title>
<link href="assets/plugins/aos/aos.min.css" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/fontawesome/css/all.min.css" rel="stylesheet">
<link href="assets/plugins/OwlCarousel2/css/owl.carousel.min.css" rel="stylesheet">
<link href="assets/plugins/OwlCarousel2/css/owl.theme.default.min.css" rel="stylesheet">
<link href="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/fancy_fileupload.css" rel="stylesheet">
<link href="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.css" rel="stylesheet">
<link href="assets/plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
<link href="assets/plugins/select2/select2.min.css" rel="stylesheet">
<link href="assets/plugins/select2-bootstrap-5/select2-bootstrap-5-theme.min.css" rel="stylesheet">
<!-- Custom style for this template -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- start navbar -->
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container">
<a class="navbar-brand m-0" href="index.html">
<img class="logo-white" src="assets/images/logo-white.png" alt="">
<img class="logo-dark" src="assets/images/logo.png" alt="">
</a>
<div class="d-flex order-lg-2">
<!-- start button -->
<a href="signin.html" class="d-flex align-items-center justify-content-center p-0 btn-user position-relative" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="Favourite">
<i class="fa-solid fa-heart"></i>
<span class="align-items-center bg-primary d-flex end-0 fs-11 justify-content-center nav-count position-absolute rounded-circle text-white">0</span>
</a>
<!-- end /. button -->
<!-- start button -->
<a href="sign-in.html" class="d-flex align-items-center justify-content-center p-0 btn-user" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="Sign In">
<i class="fa-solid fa-user-plus"></i>
</a>
<!-- end /. button -->
<!-- start button -->
<button type="button" id="themeToggleBtn" class="align-items-center bg-transparent border-0 btn-user d-flex justify-content-center p-0">
<i class="fa-solid fa-moon"></i>
</button>
<!-- end /. button -->
<!-- start button -->
<a href="add-listing.html" class="btn btn-primary d-none d-sm-flex fw-medium gap-2 hstack rounded-5">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
<div class="vr d-none d-sm-inline-block"></div>
<span class="d-none d-sm-inline-block">Add Listing</span>
</a>
<!-- end /. button -->
<!-- start navbar toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span id="nav-icon" class="">
<span></span>
<span></span>
<span></span>
</span>
</button>
<!-- end /. navbar toggle button -->
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" aria-current="page" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Home
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="index.html">Home (Main)</a></li>
<li><a class="dropdown-item" href="home-classic.html">Home (Classic)</a></li>
<li><a class="dropdown-item" href="home-rounded.html">Home (Rounded)</a></li>
<li><a class="dropdown-item" href="home-map.html">Home (Map)</a></li>
<li><a class="dropdown-item" href="home-grid.html">Home (Grid)</a></li>
<li><a class="dropdown-item" href="home-waves.html">Home (Waves)</a></li>
<li><a class="dropdown-item" href="home-car.html">Home (Car)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
<li><a class="dropdown-item" href="home-restaurant.html">Home (Restaurant)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle material-ripple" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="typcn typcn-weather-stormy top-menu-icon"></i>Dashboard
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dashboard/dashboard.html">Dashboard</a></li>
<li><a class="dropdown-item" href="dashboard/bookings.html">Bookings</a></li>
<li><a class="dropdown-item" href="dashboard/messages.html">Message</a></li>
<li><a class="dropdown-item" href="dashboard/wallet.html">Wallet</a></li>
<li><a class="dropdown-item" href="dashboard/profile.html">Edit Profile</a></li>
<li><a class="dropdown-item" href="dashboard/add-listing.html">Add listing</a></li>
<li><a class="dropdown-item" href="dashboard/my-listing.html">My listing</a></li>
<li><a class="dropdown-item" href="dashboard/bookings.html">Bookings</a></li>
<li><a class="dropdown-item" href="dashboard/reviews.html">Reviews</a></li>
<li><a class="dropdown-item" href="dashboard/bookmark.html">Bookmark</a></li>
<li><a class="dropdown-item" href="dashboard/setting-app.html">Settings</a></li>
<li><a class="dropdown-item" href="dashboard/invoice.html">Invoice</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Listing
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">List View</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-list-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-list-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-grid-1-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-grid-1-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-grid-2-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-grid-2-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Half Map + Sidebar</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-map.html">Half Map List</a></li>
<li><a class="dropdown-item" href="listings-map-car.html">Half Map List (Car)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
<li><a class="dropdown-item" href="listings-map-grid-1.html">Half Map Grid 1</a></li>
<li><a class="dropdown-item" href="listings-map-grid-2.html">Half Map Grid 2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Listing Details</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listing-details.html">Listing Details 1</a></li>
<li><a class="dropdown-item" href="listing-details-2.html">Listing Details 2</a></li>
<li><a class="dropdown-item" href="listing-details-car.html">Listing Details Car <span class="badge text-bg-primary fw-semibold">New</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="listings-map-grid-1.html">Explore</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Template
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="about.html">About us 1</a></li>
<li><a class="dropdown-item" href="about-2.html">About us 2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Agent</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="agent.html">Agent</a></li>
<li><a class="dropdown-item" href="agent-details.html">Agent Details</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="blog.html" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="blog.html">Blog</a></li>
<li><a class="dropdown-item" href="blog-details.html">Blog Standard</a></li>
<li><a class="dropdown-item" href="blog-post-galary.html">Blog Galary</a></li>
<li><a class="dropdown-item" href="blog-post-video.html">Blog Video</a></li>
<li><a class="dropdown-item" href="blog-post-audio.html">Blog Audio</a></li>
<li><a class="dropdown-item" href="blog-archive.html">Blog Archive</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="add-listing.html">Add Listing</a></li>
<li><a class="dropdown-item" href="submit-rider.html">Submit Rider</a></li>
<li><a class="dropdown-item" href="contact.html">Contact</a></li>
<li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Authentication</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="sign-in.html">Sign In</a></li>
<li><a class="dropdown-item" href="sign-up.html">Sign Up</a></li>
<li><a class="dropdown-item" href="forgot-password.html">Forgot Password</a></li>
<li><a class="dropdown-item" href="two-factor-auth.html">Two factor authentication</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Specialty</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="404.html">404 Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Help Center</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="faq.html">Faq Page</a></li>
<li><a class="dropdown-item" href="terms-conditions.html">Terms & Conditions</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="style-guide.html">Style Guide</a></li>
</ul>
</li>
</ul>
<div class="d-sm-none">
<!-- start button -->
<a href="signin.html" class="btn btn-primary d-flex gap-2 hstack justify-content-center rounded-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
<div class="vr d-none d-sm-inline-block"></div>
<span>Add Listing</span>
</a>
<!-- end /. button -->
</div>
</div>
</div>
</nav>
<!-- end /. navbar -->
<!-- start page header -->
<section class="dark-overlay hero mx-3 overflow-hidden position-relative py-4 py-lg-5 rounded-4 text-white">
<img class="bg-image" src="assets/images/header/01.jpg" alt="Image">
<div class="container overlay-content py-5">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-10">
<!-- start section header -->
<div class="section-header text-center" data-aos="fade-down">
<!-- start description -->
<div class="bg-primary d-inline-block fs-14 mb-3 px-4 py-2 rounded-5 sub-title">7+ YEARS EXPERIENCED IN FIELD</div>
<!-- end /. section header sub title -->
<!-- start section header -->
<h2 class="display-4 fw-semibold mb-3 section-header__title text-capitalize">ListOn was founded in 2023 by Alexander with a <span class="font-caveat text-white">vision to your original</span> vision or inspiration.</h2>
<!-- end /. section header title -->
</div>
<!-- end /. section header -->
</div>
</div>
</div>
</section>
<!-- end /. page header -->
<!-- start achievements section -->
<div class="container">
<div class="achievements-wrapper ms-auto me-auto">
<div class="bg-center js-bg-image bg-cover bg-light counter-content_about position-relative rounded-4" data-image-src="assets/images/pattern.svg">
<div class="g-4 justify-content-center row">
<div class="col-sm-6 col-xl-3 text-center">
<div class="display-5 fw-semibold numscroller text-primary"><span class="counter">3,000 </span>+</div>
<h5 class="fs-18 mb-0 mt-3">Job posted</h5>
</div>
<div class="col-sm-6 col-xl-3 text-center">
<div class="display-5 fw-semibold numscroller text-primary"><span class="counter">2,500 </span>+</div>
<h5 class="fs-18 mb-0 mt-3">Successful hires</h5>
</div>
<div class="col-sm-6 col-xl-3 text-center">
<div class="display-5 fw-semibold numscroller text-primary"><span class="counter">10</span>M +</div>
<h5 class="fs-18 mb-0 mt-3">Monthly visits</h5>
</div>
<div class="col-sm-6 col-xl-3 text-center">
<div class="display-5 fw-semibold numscroller text-primary"><span class="counter">593 </span>+</div>
<h5 class="fs-18 mb-0 mt-3">Verified companies</h5>
</div>
</div>
</div>
</div>
</div>
<!-- end /. achievements section -->
<!-- start about section -->
<div class="py-5">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-8">
<!-- start section header -->
<div class="section-header text-center mb-5" data-aos="fade-down">
<!-- start subtitle -->
<div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">About us</div>
<!-- end /. subtitle -->
<!-- start title -->
<h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Explore over 2.5 million people travel around the world.</h2>
<!-- end /. title -->
<!-- start description -->
<div class="sub-title fs-16">Discover exciting categories. <span class="text-primary fw-semibold">Find what you’re looking for.</span></div>
<!-- end /. description -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="column-text-box left">
<p><span class="float-start important-text mb-2 me-2 position-relative text-primary fs-50"><strong>M</strong></span>any desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p> It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
<blockquote class="about-blockquote display-6 font-caveat fst-italic my-3"> It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</blockquote>
<p>We hope you enjoy it using it as much as we did building it. Cheers!</p>
<img src="assets/images/png-img/signature.png" alt="" class="signature mt-4">
</div>
</div>
<div class="col-md-6 ps-xxl-5">
<!-- start about image masonry -->
<div class="ps-xl-4 position-relative">
<div class="row g-3">
<div class="col-6">
<div class="about-image-wrap mb-3 rounded-4">
<img src="assets/images/about/01.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-one rounded-3">
</div>
<div class="about-image-wrap rounded-4">
<img src="assets/images/about/02.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-two rounded-3">
</div>
</div>
<div class="col-6">
<div class="about-image-wrap mb-3 rounded-4">
<img src="assets/images/about/03.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-three rounded-3">
</div>
<div class="about-image-wrap rounded-4">
<img src="assets/images/about/04.jpg" alt="" class="h-100 w-100 object-fit-cover about-image-four rounded-3">
</div>
</div>
</div>
<img src="assets/images/png-img/about-shape-1.png" alt="About Shape" class="banner-shape-one position-absolute">
<img src="assets/images/png-img/about-shape-2.png" alt="About Shape" class="banner-shape-two position-absolute">
</div>
<!-- end /. about image masonry -->
</div>
</div>
</div>
</div>
<!-- end /. about section -->
<!-- start awards section -->
<div class="bg-dark mb-3 mx-3 py-5 rounded-4">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-8">
<!-- start section header -->
<div class="section-header text-center mb-5" data-aos="fade-down">
<!-- start subtitle -->
<div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Awards</div>
<!-- end /. subtitle -->
<!-- start section header -->
<h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize text-white">Our Awards</h2>
<!-- end /. title -->
<!-- start description -->
<div class="sub-title fs-16 text-white">Find a job you love. <span class="text-primary fw-semibold">Set your career interests.</span></div>
<!-- end /. description -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row justify-content-center g-4 g-xxl-5">
<div class="col-6 col-md-3">
<img src="assets/images/png-img/award-01.png" alt="" class="img-fluid px-xl-4">
<div class="mt-3 pt-3 text-center">
<h5 class="text-primary">World Architecture Festival</h5>
<div class="text-white">Jun 23, 2023</div>
</div>
</div>
<div class="col-6 col-md-3">
<img src="assets/images/png-img/award-02.png" alt="" class="img-fluid px-xl-4">
<div class="mt-3 pt-3 text-center">
<h5 class="text-primary">Venice Biennale of Architecture</h5>
<div class="text-white">Jun 23, 2023</div>
</div>
</div>
<div class="col-6 col-md-3">
<img src="assets/images/png-img/award-03.png" alt="" class="img-fluid px-xl-4">
<div class="mt-3 pt-3 text-center">
<h5 class="text-primary">Tamayouz Excellence Award for Architecture</h5>
<div class="text-white">Jun 23, 2023</div>
</div>
</div>
<div class="col-6 col-md-3">
<img src="assets/images/png-img/award-04.png" alt="" class="img-fluid px-xl-4">
<div class="mt-3 pt-3 text-center">
<h5 class="text-primary">RIBA President's Medals</h5>
<div class="text-white">Jun 23, 2023</div>
</div>
</div>
</div>
</div>
</div>
<!-- end /. awards section -->
<!-- start about video section -->
<div class="about-video position-relative mx-3 rounded-4 overflow-hidden">
<!-- Image Parallax -->
<img src="assets/images/about/bg-01.jpg" alt="" class="about-img js-image-parallax">
<a class="align-items-center bg-blur d-flex justify-content-center popup-youtube position-absolute rounded-circle start-50 text-white top-50 translate-middle video-icon z-1" href="https://www.youtube.com/watch?v=0O2aH4XLbto">
<i class="fa-solid fa-play fs-20"></i>
</a>
</div>
<!-- end /. about video section -->
<!-- start team section -->
<div class="py-5">
<div class="container py-4">
<div class="row">
<div class="col-sm-10 col-md-10 col-lg-6">
<!-- start section header -->
<div class="section-header mb-5" data-aos="fade-down">
<!-- start subtitle -->
<div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Our Team</div>
<!-- end /. subtitle -->
<!-- start title -->
<h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Meet Our Team</h2>
<!-- end /. title -->
<!-- start description -->
<div class="sub-title fs-16">A team of experienced and dedicated professionals who are passionate about helping our clients find their dream properties. From our agents to our support staff, everyone on our team is committed to providing personalized service, expert guidance, and exceptional results.</div>
<!-- end /. description -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row justify-content-center g-4 gx-xxl-5">
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container">
<img src="assets/images/avatar/01.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Ethan Blackwood</h4>
<div>Co-founder</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/02.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Edwin Martins</h4>
<div>Product Manager</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/03.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Alexander Kaminski</h4>
<div>Software Developer</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/04.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Pranoti Deshpande</h4>
<div>DevOps</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/05.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Alexander Steele</h4>
<div>Data analysis</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/06.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Marcus Knight</h4>
<div>Security Engineer</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/07.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Alexander Kaminski</h4>
<div>Support Engineer</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/02.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Gabriel North</h4>
<div>Security Engineer</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
</div>
</div>
</div>
<!-- end /. team section -->
<!-- start customers section -->
<div class="py-5 bg-light">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-8">
<!-- start section header -->
<div class="section-header text-center mb-5" data-aos="fade-down">
<!-- start subtitle -->
<div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Our Customers</div>
<!-- end /. subtitle -->
<!-- start title -->
<h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Trusted By Thousands News Of Companies</h2>
<!-- end /. title -->
<!-- start description -->
<div class="sub-title fs-16">Discover exciting categories. <span class="text-primary fw-semibold">Find what you’re looking for.</span></div>
<!-- end /. description -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row align-items-center justify-content-center g-2 g-sm-3 g-md-4">
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/01.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/02.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/03.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/04.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/05.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
<div class="col-6 col-sm-4 col-lg-3 col-xxl-2">
<div class="border-0 card card-hover d-block header-cat-box px-3 py-3 rounded-4 text-center">
<img src="assets/images/brand-logo/06.png" alt="" height="60" class="company-logo img-fluid">
</div>
</div>
</div>
</div>
</div>
<!-- end /. customers section -->
<!-- start footer -->
<footer class="footer-dark main-footer overflow-hidden position-relative pt-5">
<div class="container pt-4">
<div class="py-5">
<!-- start app download content -->
<div class="bg-primary rounded-4">
<div class="col-xxl-10 col-md-11 col-10 d-flex flex-md-row flex-column-reverse align-items-md-end align-items-center mx-auto px-0 gap-4">
<img class="app-image flex-shrink-0" src="assets/images/phone-mpckup.png" width="270" alt="Mobile app">
<div class="align-items-lg-center align-self-center d-flex flex-column flex-lg-row ps-xxl-4 pt-5 py-md-3 text-center text-md-start">
<div class="me-md-5">
<h4 class="text-white">Download Our App</h4>
<p class="mb-lg-0 text-white">It is a long established fact that a reader will be distracted by the readable content.</p>
</div>
<div class="d-flex flex-shrink-0 flex-wrap gap-3 justify-content-center">
<!-- start apple store button -->
<a class="align-items-center app-btn d-flex px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fa-apple fab fs-28 me-2"></i>
<div> <span class="fs-13 d-block">Available on the</span> <span class="fs-17 text-capitalize">App Store</span> </div>
</a>
<!-- end /. apple store button -->
<a class="align-items-center app-btn d-flex fs-11 px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fab fa-google-play fs-25 me-2"></i>
<div> <span class="fs-13 d-block">Get it on</span> <span class="fs-17 text-capitalize">Google Play</span> </div>
</a>
</div>
</div>
</div>
</div>
<!-- end /. app download content -->
</div>
<div class="border-top py-5">
<div class="footer-row row gy-5 g-sm-5 gx-xxl-6">
<div class="border-end col-lg-4 col-md-7 col-sm-6">
<h5 class="fw-bold mb-4">Get In Touch</h5>
<div class="mb-4">Join our newsletter and receive the best job<br class="d-none d-xxl-block"> openings of the week, right on your inbox.</div>
<div class="border rounded-4 p-4 mb-4">
<h6 class="text-white-50 mb-3">Join our Whatsapp:</h6>
<a class="align-items-center d-block d-flex whatsapp-number" href="#"><i class="fa-brands fa-whatsapp fs-2 me-2"></i><span class="fs-5 fw-semibold text-decoration-underline">(123) 456-7890</span></a>
</div>
<h5 class="fw-bold mb-4">Want to join ListOn?<br> Write us !</h5>
<span>support@ListOn.com</span>
</div>
<div class="border-end col-lg-4 col-md-5 col-sm-6">
<h5 class="fw-bold mb-4">Stay Connect</h5>
<div>1123 Fictional St, San Francisco<br class="d-none d-xxl-block"> , CA 94103</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<div class="col-lg-4">
<h5 class="fw-bold mb-4">Get In Touch</h5>
<div class="newsletter position-relative mt-4">
<input type="email" class="form-control" placeholder="name@example.com">
<button type="button" class="btn btn-primary search-btn position-absolute top-50 rounded-circle"><i class="fa-solid fa-angle-right"></i></button>
</div>
<div class="border-top my-4"></div>
<h5 class="fw-bold mb-4">Follow the location</h5>
<!-- start social icon -->
<ul class="d-flex flex-wrap gap-2 list-unstyled mb-0 social-icon">
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white inst">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white twi">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white dri">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white fb">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white whatsapp">
<i class="fa-brands fa-whatsapp"></i>
</a>
</li>
</ul>
<!-- /. end social icon -->
</div>
</div>
</div>
</div>
<div class="container border-top">
<div class="align-items-center g-3 py-4 row">
<div class="col-lg-auto">
<!-- start footer nav -->
<ul class="list-unstyled list-separator mb-2 footer-nav">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Sitemap</a></li>
<li class="list-inline-item"><a href="#">Cookies</a></li>
</ul>
<!-- end /. footer nav -->
</div>
<div class="col-lg order-md-first">
<div class="align-items-center row">
<!-- start footer logo -->
<a href="index.html" class="col-sm-auto footer-logo mb-2 mb-sm-0">
<img src="assets/images/logo-white.png" alt="">
</a>
<!-- end /. footer logo -->
<!-- start text -->
<div class="col-sm-auto copy">© 2022 ListOn - All Rights Reserved- All Rights Reserved</div>
<!-- end /. text -->
</div>
</div>
</div>
</div>
</footer>
<!-- end /. footer -->
<!-- Optional JavaScript -->
<script src="assets/plugins/jQuery/jquery.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/aos/aos.min.js"></script>
<script src="assets/plugins/macy/macy.js"></script>
<script src="assets/plugins/simple-parallax/simpleParallax.min.js"></script>
<script src="assets/plugins/OwlCarousel2/owl.carousel.min.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/ResizeSensor.min.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.min.js"></script>
<script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/plugins/counter-up/jquery.counterup.min.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.ui.widget.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fileupload.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.iframe-transport.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fancy-fileupload.js"></script>
<script src="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.js"></script>
<script src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/plugins/select2/select2.min.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
</body>
</html>
+997
View File
@@ -0,0 +1,997 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/images/favicon.png">
<title>ListOn - Directory & Listing HTML Template</title>
<link href="assets/plugins/aos/aos.min.css" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/fontawesome/css/all.min.css" rel="stylesheet">
<link href="assets/plugins/OwlCarousel2/css/owl.carousel.min.css" rel="stylesheet">
<link href="assets/plugins/OwlCarousel2/css/owl.theme.default.min.css" rel="stylesheet">
<link href="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/fancy_fileupload.css" rel="stylesheet">
<link href="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.css" rel="stylesheet">
<link href="assets/plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
<link href="assets/plugins/select2/select2.min.css" rel="stylesheet">
<link href="assets/plugins/select2-bootstrap-5/select2-bootstrap-5-theme.min.css" rel="stylesheet">
<!-- Custom style for this template -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- start navbar -->
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container">
<a class="navbar-brand m-0" href="index.html">
<img class="logo-white" src="assets/images/logo-white.png" alt="">
<img class="logo-dark" src="assets/images/logo.png" alt="">
</a>
<div class="d-flex order-lg-2">
<!-- start button -->
<a href="signin.html" class="d-flex align-items-center justify-content-center p-0 btn-user position-relative" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="Favourite">
<i class="fa-solid fa-heart"></i>
<span class="align-items-center bg-primary d-flex end-0 fs-11 justify-content-center nav-count position-absolute rounded-circle text-white">0</span>
</a>
<!-- end /. button -->
<!-- start button -->
<a href="sign-in.html" class="d-flex align-items-center justify-content-center p-0 btn-user" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="Sign In">
<i class="fa-solid fa-user-plus"></i>
</a>
<!-- end /. button -->
<!-- start button -->
<button type="button" id="themeToggleBtn" class="align-items-center bg-transparent border-0 btn-user d-flex justify-content-center p-0">
<i class="fa-solid fa-moon"></i>
</button>
<!-- end /. button -->
<!-- start button -->
<a href="add-listing.html" class="btn btn-primary d-none d-sm-flex fw-medium gap-2 hstack rounded-5">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
<div class="vr d-none d-sm-inline-block"></div>
<span class="d-none d-sm-inline-block">Add Listing</span>
</a>
<!-- end /. button -->
<!-- start navbar toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span id="nav-icon" class="">
<span></span>
<span></span>
<span></span>
</span>
</button>
<!-- end /. navbar toggle button -->
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" aria-current="page" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Home
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="index.html">Home (Main)</a></li>
<li><a class="dropdown-item" href="home-classic.html">Home (Classic)</a></li>
<li><a class="dropdown-item" href="home-rounded.html">Home (Rounded)</a></li>
<li><a class="dropdown-item" href="home-map.html">Home (Map)</a></li>
<li><a class="dropdown-item" href="home-grid.html">Home (Grid)</a></li>
<li><a class="dropdown-item" href="home-waves.html">Home (Waves)</a></li>
<li><a class="dropdown-item" href="home-car.html">Home (Car)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
<li><a class="dropdown-item" href="home-restaurant.html">Home (Restaurant)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle material-ripple" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="typcn typcn-weather-stormy top-menu-icon"></i>Dashboard
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dashboard/dashboard.html">Dashboard</a></li>
<li><a class="dropdown-item" href="dashboard/bookings.html">Bookings</a></li>
<li><a class="dropdown-item" href="dashboard/messages.html">Message</a></li>
<li><a class="dropdown-item" href="dashboard/wallet.html">Wallet</a></li>
<li><a class="dropdown-item" href="dashboard/profile.html">Edit Profile</a></li>
<li><a class="dropdown-item" href="dashboard/add-listing.html">Add listing</a></li>
<li><a class="dropdown-item" href="dashboard/my-listing.html">My listing</a></li>
<li><a class="dropdown-item" href="dashboard/bookings.html">Bookings</a></li>
<li><a class="dropdown-item" href="dashboard/reviews.html">Reviews</a></li>
<li><a class="dropdown-item" href="dashboard/bookmark.html">Bookmark</a></li>
<li><a class="dropdown-item" href="dashboard/setting-app.html">Settings</a></li>
<li><a class="dropdown-item" href="dashboard/invoice.html">Invoice</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Listing
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">List View</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-list-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-list-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-grid-1-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-grid-1-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-grid-2-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-grid-2-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Half Map + Sidebar</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-map.html">Half Map List</a></li>
<li><a class="dropdown-item" href="listings-map-car.html">Half Map List (Car)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
<li><a class="dropdown-item" href="listings-map-grid-1.html">Half Map Grid 1</a></li>
<li><a class="dropdown-item" href="listings-map-grid-2.html">Half Map Grid 2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Listing Details</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listing-details.html">Listing Details 1</a></li>
<li><a class="dropdown-item" href="listing-details-2.html">Listing Details 2</a></li>
<li><a class="dropdown-item" href="listing-details-car.html">Listing Details Car <span class="badge text-bg-primary fw-semibold">New</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="listings-map-grid-1.html">Explore</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Template
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="about.html">About us 1</a></li>
<li><a class="dropdown-item" href="about-2.html">About us 2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Agent</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="agent.html">Agent</a></li>
<li><a class="dropdown-item" href="agent-details.html">Agent Details</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="blog.html" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="blog.html">Blog</a></li>
<li><a class="dropdown-item" href="blog-details.html">Blog Standard</a></li>
<li><a class="dropdown-item" href="blog-post-galary.html">Blog Galary</a></li>
<li><a class="dropdown-item" href="blog-post-video.html">Blog Video</a></li>
<li><a class="dropdown-item" href="blog-post-audio.html">Blog Audio</a></li>
<li><a class="dropdown-item" href="blog-archive.html">Blog Archive</a></li>
</ul>
</li>
<li><a class="dropdown-item active" href="add-listing.html">Add Listing</a></li>
<li><a class="dropdown-item" href="submit-rider.html">Submit Rider</a></li>
<li><a class="dropdown-item" href="contact.html">Contact</a></li>
<li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Authentication</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="sign-in.html">Sign In</a></li>
<li><a class="dropdown-item" href="sign-up.html">Sign Up</a></li>
<li><a class="dropdown-item" href="forgot-password.html">Forgot Password</a></li>
<li><a class="dropdown-item" href="two-factor-auth.html">Two factor authentication</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Specialty</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="404.html">404 Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Help Center</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="faq.html">Faq Page</a></li>
<li><a class="dropdown-item" href="terms-conditions.html">Terms & Conditions</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="style-guide.html">Style Guide</a></li>
</ul>
</li>
</ul>
<div class="d-sm-none">
<!-- start button -->
<a href="signin.html" class="btn btn-primary d-flex gap-2 hstack justify-content-center rounded-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
<div class="vr d-none d-sm-inline-block"></div>
<span>Add Listing</span>
</a>
<!-- end /. button -->
</div>
</div>
</div>
</nav>
<!-- end /. navbar -->
<!-- start page header -->
<section class="dark-overlay hero mx-3 overflow-hidden position-relative py-4 py-lg-5 rounded-4 text-white">
<img class="bg-image" src="assets/images/header/04.jpg" alt="Image">
<div class="container overlay-content">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-8 col-xl-7">
<!-- start section header -->
<div class="section-header text-center mb-5" data-aos="fade-down">
<!-- start section header -->
<h2 class="display-4 fw-semibold mb-3 section-header__title text-capitalize">Find your <span class="font-caveat text-primary">dream</span> place</h2>
<!-- end /. section header title -->
<!-- start description -->
<div class="sub-title fs-18">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
<!-- end /. section header sub title -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-10">
<!-- start search content -->
<div class="border-0 card d-flex flex-md-row position-relative search-wrapper">
<div class="align-items-center d-flex search-field w-100">
<div class="svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
<!-- start input -->
<input type="email" class="form-control search-input" placeholder="What are you looking for?">
<!-- end /. input -->
</div>
<div class="vertical-divider"></div>
<div class="align-items-center d-flex search-field w-100">
<div class="svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z" />
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
</svg>
</div>
<!-- start select -->
<select class="form-select search-select-field">
<option selected>Location</option>
<option value="1">Florence, Italy</option>
<option value="2">Second choice</option>
<option value="3">Third choice</option>
</select>
<!-- end /. select -->
</div>
<input type="submit" value="Search places" class="btn btn-primary rounded-5 mt-3 mt-md-0">
</div>
<!-- end /. search content -->
</div>
</div>
</div>
</section>
<!-- end /. page header -->
<!-- start add listing section -->
<div class="py-5 bg-light m-3 rounded-4">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-8">
<!-- start section header -->
<div class="section-header text-center mb-5" data-aos="fade-down">
<!-- start subtitle -->
<div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Listing</div>
<!-- end /. subtitle -->
<!-- start title -->
<h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Add Listing</h2>
<!-- end /. title -->
<!-- start description -->
<div class="sub-title fs-16">Discover exciting categories. <span class="text-primary fw-semibold">Find what you’re looking for.</span></div>
<!-- end /. description -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row justify-content-center g-4">
<div class="col-xl-10 col-xxl-9">
<div class="border-0 card listing-form mb-4 p-4 rounded-4 shadow-sm">
<div class="align-items-sm-center bg-light d-sm-flex mb-4 p-4 rounded-3">
<div class="d-flex flex-shrink-0 gap-1">
<span class="fw-semibold text-dark">01/</span>
<div class="align-items-center bg-primary card-icon d-flex justify-content-center mb-2 rounded-circle text-white">
<i class="fa-solid fa-user fs-5"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="fw-semibold font-caveat fs-2">Basic Informations</h4>
<p class="mb-0 fs-15">There are many variations of passages of Lorem Ipsum<br class="d-none d-lg-block"> available, but the majority have</p>
</div>
</div>
<div class="row g-4">
<div class="col-sm-6">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">Listing Title</label>
<input type="text" class="form-control" required>
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-6">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">Category</label>
<select class="form-select">
<option selected>Category</option>
<option value="1">Restaurant</option>
<option value="2">Event</option>
<option value="3">Adrenaline</option>
</select>
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-12">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">Tags</label>
<input type="text" class="form-control" placeholder="+ Add tag" required="">
</div>
<!-- end /. form group -->
</div>
</div>
</div>
<div class="border-0 card listing-form mb-4 p-4 rounded-4 shadow-sm">
<div class="align-items-sm-center bg-light d-sm-flex mb-4 p-4 rounded-3">
<div class="d-flex flex-shrink-0 gap-1">
<span class="fw-semibold text-dark">02/</span>
<div class="align-items-center bg-primary card-icon d-flex justify-content-center mb-2 rounded-circle text-white">
<i class="fa-solid fa-location-dot fs-5"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="fw-semibold font-caveat fs-2">Location</h4>
<p class="mb-0 fs-15">There are many variations of passages of Lorem Ipsum<br class="d-none d-lg-block"> available, but the majority have</p>
</div>
</div>
<div class="row g-4">
<div class="col-sm-6">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">City</label>
<select class="form-select" aria-label="Default select example">
<option selected>Select City</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-6">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">Address</label>
<input type="email" class="form-control" placeholder="8706 Herrick Ave, Valley..." required="">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-6">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">State</label>
<input type="number" class="form-control" placeholder="State" required="">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-6">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">Zip-Code</label>
<input type="number" class="form-control" placeholder="3870" required="">
</div>
<!-- end /. form group -->
</div>
</div>
</div>
<div class="border-0 card listing-form mb-4 p-4 rounded-4 shadow-sm">
<div class="align-items-sm-center bg-light d-sm-flex mb-4 p-4 rounded-3">
<div class="d-flex flex-shrink-0 gap-1">
<span class="fw-semibold text-dark">03/</span>
<div class="align-items-center bg-primary card-icon d-flex justify-content-center mb-2 rounded-circle text-white">
<i class="fa-solid fa-image fs-5"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="fw-semibold font-caveat fs-2">Gallery</h4>
<p class="mb-0 fs-15">There are many variations of passages of Lorem Ipsum<br class="d-none d-lg-block"> available, but the majority have</p>
</div>
</div>
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">Gallery</label>
<input class="fileUp fileup-sm" type="file" name="files" accept=".jpg, .png, image/jpeg, image/png" multiple>
<div class="form-text">Recommended to 350 x 350 px (png, jpg, jpeg).</div>
</div>
<!-- end /. form group -->
</div>
<div class="border-0 card listing-form mb-4 p-4 rounded-4 shadow-sm">
<div class="align-items-sm-center bg-light d-sm-flex mb-4 p-4 rounded-3">
<div class="d-flex flex-shrink-0 gap-1">
<span class="fw-semibold text-dark">04/</span>
<div class="align-items-center bg-primary card-icon d-flex justify-content-center mb-2 rounded-circle text-white">
<i class="fa-solid fa-circle-info fs-5"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="fw-semibold font-caveat fs-2">Details</h4>
<p class="mb-0 fs-15">There are many variations of passages of Lorem Ipsum<br class="d-none d-lg-block"> available, but the majority have</p>
</div>
</div>
<div class="row g-4">
<div class="col-sm-12">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">Description</label>
<textarea class="form-control" rows="7" placeholder="Please enter up to 4000 characters."></textarea>
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-4">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">Phone</label>
<input type="number" class="form-control" placeholder="(123) 456 - 789" required="">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-4">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">Company website</label>
<input type="text" class="form-control" placeholder="https://company.com" required="">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-4">
<!-- start form group -->
<div class="">
<label class="required fw-medium mb-2">Email Address</label>
<input type="email" class="form-control" placeholder="example@email.com" required="">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-12">
<hr>
</div>
<div class="col-sm-6">
<!-- start form group -->
<div class="">
<label class="fw-medium mb-2">Facebook Page<span class="fs-13 ms-1 text-muted">(optional)</span></label>
<input type="text" class="form-control" placeholder="https://facebook.com">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-6">
<!-- start form group -->
<div class="">
<label class="fw-medium mb-2">Twitter profile<span class="fs-13 ms-1 text-muted">(optional)</span></label>
<input type="text" class="form-control" placeholder="https://twitter.com">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-6">
<!-- start form group -->
<div class="">
<label class="fw-medium mb-2">Instagram profile<span class="fs-13 ms-1 text-muted">(optional)</span></label>
<input type="text" class="form-control" placeholder="https://instagram.com">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-6">
<!-- start form group -->
<div class="">
<label class="fw-medium mb-2">Linkedin page<span class="fs-13 ms-1 text-muted">(optional)</span></label>
<input type="text" class="form-control" placeholder="https://linkedin.com">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-12">
<hr>
</div>
<div class="col-md-12">
<div class="fw-medium text-dark mb-3">Property amenities<span class="fs-13 ms-1 text-muted">(optional)</span></div>
<div class="row gx-3 gy-2">
<div class="col-auto">
<!-- Start Form Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultOne">
<label class="form-check-label" for="flexCheckDefaultOne">
Garden
</label>
</div>
<!-- /. End Form Check -->
</div>
<div class="col-auto">
<!-- Start Form Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultTwo">
<label class="form-check-label" for="flexCheckDefaultTwo">
Security cameras
</label>
</div>
<!-- /. End Form Check -->
</div>
<div class="col-auto">
<!-- Start Form Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultThree">
<label class="form-check-label" for="flexCheckDefaultThree">
Laundry
</label>
</div>
<!-- /. End Form Check -->
</div>
<div class="col-auto">
<!-- Start Form Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultFour">
<label class="form-check-label" for="flexCheckDefaultFour">
Internet
</label>
</div>
<!-- /. End Form Check -->
</div>
<div class="col-auto">
<!-- Start Form Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultFive">
<label class="form-check-label" for="flexCheckDefaultFive">
Pool
</label>
</div>
<!-- /. End Form Check -->
</div>
<div class="col-auto">
<!-- Start Form Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultSix">
<label class="form-check-label" for="flexCheckDefaultSix">
Video surveillance
</label>
</div>
<!-- /. End Form Check -->
</div>
<div class="col-auto">
<!-- Start Form Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultSeven">
<label class="form-check-label" for="flexCheckDefaultSeven">
Laundry room
</label>
</div>
<!-- /. End Form Check -->
</div>
<div class="col-auto">
<!-- Start Form Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultEight">
<label class="form-check-label" for="flexCheckDefaultEight">
Jacuzzi
</label>
</div>
<!-- /. End Form Check -->
</div>
<div class="col-auto">
<!-- Start Form Check -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefaultNine">
<label class="form-check-label" for="flexCheckDefaultNine">
Security cameras
</label>
</div>
<!-- /. End Form Check -->
</div>
</div>
</div>
</div>
</div>
<div class="border-0 card listing-form mb-4 p-4 rounded-4 shadow-sm">
<div class="align-items-sm-center bg-light d-sm-flex mb-4 p-4 rounded-3">
<div class="d-flex flex-shrink-0 gap-1">
<span class="fw-semibold text-dark">05/</span>
<div class="align-items-center bg-primary card-icon d-flex justify-content-center mb-2 rounded-circle text-white">
<i class="fa-solid fa-clock fs-5"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="fw-semibold font-caveat fs-2">Opening Hours</h4>
<p class="mb-0 fs-15">There are many variations of passages of Lorem Ipsum<br class="d-none d-lg-block"> available, but the majority have</p>
</div>
</div>
<div class="accordion listing-accordion" id="accordionExample">
<div class="accordion-item mb-3">
<h2 class="accordion-header">
<button class="accordion-button px-3 py-2 text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-calendar2-plus text-primary me-3" viewBox="0 0 16 16">
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z" />
<path d="M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V4zM8 8a.5.5 0 0 1 .5.5V10H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V11H6a.5.5 0 0 1 0-1h1.5V8.5A.5.5 0 0 1 8 8z" />
</svg>
<span class="fs-18 fw-medium">Add schedule plan</span><span class="count fs-13 ms-1 text-muted">(optional)</span>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body p-4">
<div class="row g-4">
<div class="col-sm-3">
<!-- start form group -->
<div class="">
<label class="fw-medium mb-2">Date</label>
<input type="date" class="form-control">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-3">
<!-- start form group -->
<div class="">
<label class="fw-medium mb-2">Time</label>
<input type="datetime-local" class="form-control">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-3">
<!-- start form group -->
<div class="">
<label class="fw-medium mb-2">Place</label>
<input type="text" class="form-control" placeholder="Place">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-3">
<!-- start form group -->
<div class="">
<label class="fw-medium mb-2">Address</label>
<input type="text" class="form-control" placeholder="8706 Herrick Ave, Valley...">
</div>
<!-- end /. form group -->
</div>
</div>
<div class="text-center mt-3">
<button type="button" class="btn btn-light"><i class="fa fa-plus me-2"></i>Add another schedule item</button>
</div>
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed px-3 py-2 text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-cup-hot text-primary me-3" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M.5 6a.5.5 0 0 0-.488.608l1.652 7.434A2.5 2.5 0 0 0 4.104 16h5.792a2.5 2.5 0 0 0 2.44-1.958l.131-.59a3 3 0 0 0 1.3-5.854l.221-.99A.5.5 0 0 0 13.5 6H.5ZM13 12.5a2.01 2.01 0 0 1-.316-.025l.867-3.898A2.001 2.001 0 0 1 13 12.5ZM2.64 13.825 1.123 7h11.754l-1.517 6.825A1.5 1.5 0 0 1 9.896 15H4.104a1.5 1.5 0 0 1-1.464-1.175Z" />
<path d="m4.4.8-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 3.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 3.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 3 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 4.4.8Zm3 0-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 6.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 6.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 6 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 7.4.8Zm3 0-.003.004-.014.019a4.077 4.077 0 0 0-.204.31 2.337 2.337 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.198 3.198 0 0 1-.202.388 5.385 5.385 0 0 1-.252.382l-.019.025-.005.008-.002.002A.5.5 0 0 1 9.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 9.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 9 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 10.4.8Z" />
</svg>
<span class="fs-18 fw-medium">Add restaurant menu</span><span class="count fs-13 ms-1 text-muted">(optional)</span>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body p-4">
<div class="row g-4">
<div class="col-sm-4">
<!-- start form group -->
<div class="">
<label class="text-medium mb-2">Title</label>
<input type="date" class="form-control">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-4">
<!-- start form group -->
<div class="">
<label class="fw-medium mb-2">Description</label>
<input type="text" class="form-control">
</div>
<!-- end /. form group -->
</div>
<div class="col-sm-4">
<!-- start form group -->
<div class="">
<label class="fw-medium mb-2">Meal Type</label>
<select class="form-select">
<option selected="">Select meal type</option>
<option value="1">Starter</option>
<option value="2">Soup</option>
<option value="3">Main Course</option>
</select>
</div>
<!-- end /. form group -->
</div>
</div>
<div class="text-center mt-3">
<button type="button" class="btn btn-light"><i class="fa fa-plus me-2"></i>Add another meal</button>
</div>
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed px-3 py-2 text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-alarm text-primary me-3" viewBox="0 0 16 16">
<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z" />
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z" />
</svg>
<span class="fs-18 fw-medium">Add opening hours</span><span class="count fs-13 ms-1 text-muted">(optional)</span>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body p-4">
<div class="mb-3 row">
<label class="col-sm-2 col-form-label fw-medium">Monday</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Open">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Close">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label fw-medium">Tuesday</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Open">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Close">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label fw-medium">Wednesday</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Open">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Close">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label fw-medium">Thursday</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Open">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Close">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label fw-medium">Friday</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Open">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Close">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label fw-medium">Saturday</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Open">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Close">
</div>
</div>
<div class="row">
<label class="col-sm-2 col-form-label fw-medium">Sunday</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Open">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Close">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border-0 card listing-form mb-4 p-4 rounded-4 shadow-sm">
<div class="align-items-sm-center bg-light d-sm-flex mb-4 p-4 rounded-3">
<div class="d-flex flex-shrink-0 gap-1">
<span class="fw-semibold text-dark">06/</span>
<div class="align-items-center bg-primary card-icon d-flex justify-content-center mb-2 rounded-circle text-white">
<i class="fa-solid fa-money-check-dollar fs-5"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="fw-semibold font-caveat fs-2">Add Pricing plan</h4>
<p class="mb-0 fs-15">There are many variations of passages of Lorem Ipsum<br class="d-none d-lg-block"> available, but the majority have</p>
</div>
</div>
<div class="table-responsive">
<table id="faqs" class="table table-borderless">
<thead>
<tr>
<th class="fw-medium">Title</th>
<th class="fw-medium">Description</th>
<th class="fw-medium">Price</th>
<th class="fw-medium">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control" placeholder="USD"></td>
<td class="mt-10"><button type="button" class="btn btn-danger"><i class="fa fa-trash"></i></button></td>
</tr>
</tbody>
</table>
</div>
<div class="text-center">
<button onclick="addItem();" class="btn btn-light"><i class="fa fa-plus me-2"></i>Add New</button>
</div>
</div>
<div class="text-center mt-5">
<!-- Start Button -->
<button type="submit" class="btn btn-primary btn-lg d-inline-flex hstack gap-2">
<span>Submit for approval</span>
<span class="vr"></span>
<i class="fa-arrow-right fa-solid fs-14"></i>
</button>
<!-- /.End Button -->
</div>
</div>
</div>
</div>
</div>
<!-- end /. add listing section -->
<!-- start footer -->
<footer class="footer-dark main-footer overflow-hidden position-relative pt-5">
<div class="container pt-4">
<div class="py-5">
<!-- start app download content -->
<div class="bg-primary rounded-4">
<div class="col-xxl-10 col-md-11 col-10 d-flex flex-md-row flex-column-reverse align-items-md-end align-items-center mx-auto px-0 gap-4">
<img class="app-image flex-shrink-0" src="assets/images/phone-mpckup.png" width="270" alt="Mobile app">
<div class="align-items-lg-center align-self-center d-flex flex-column flex-lg-row ps-xxl-4 pt-5 py-md-3 text-center text-md-start">
<div class="me-md-5">
<h4 class="text-white">Download Our App</h4>
<p class="mb-lg-0 text-white">It is a long established fact that a reader will be distracted by the readable content.</p>
</div>
<div class="d-flex flex-shrink-0 flex-wrap gap-3 justify-content-center">
<!-- start apple store button -->
<a class="align-items-center app-btn d-flex px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fa-apple fab fs-28 me-2"></i>
<div> <span class="fs-13 d-block">Available on the</span> <span class="fs-17 text-capitalize">App Store</span> </div>
</a>
<!-- end /. apple store button -->
<a class="align-items-center app-btn d-flex fs-11 px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fab fa-google-play fs-25 me-2"></i>
<div> <span class="fs-13 d-block">Get it on</span> <span class="fs-17 text-capitalize">Google Play</span> </div>
</a>
</div>
</div>
</div>
</div>
<!-- end /. app download content -->
</div>
<div class="border-top py-5">
<div class="footer-row row gy-5 g-sm-5 gx-xxl-6">
<div class="border-end col-lg-4 col-md-7 col-sm-6">
<h5 class="fw-bold mb-4">Get In Touch</h5>
<div class="mb-4">Join our newsletter and receive the best job<br class="d-none d-xxl-block"> openings of the week, right on your inbox.</div>
<div class="border rounded-4 p-4 mb-4">
<h6 class="text-white-50 mb-3">Join our Whatsapp:</h6>
<a class="align-items-center d-block d-flex whatsapp-number" href="#"><i class="fa-brands fa-whatsapp fs-2 me-2"></i><span class="fs-5 fw-semibold text-decoration-underline">(123) 456-7890</span></a>
</div>
<h5 class="fw-bold mb-4">Want to join ListOn?<br> Write us !</h5>
<span>support@ListOn.com</span>
</div>
<div class="border-end col-lg-4 col-md-5 col-sm-6">
<h5 class="fw-bold mb-4">Stay Connect</h5>
<div>1123 Fictional St, San Francisco<br class="d-none d-xxl-block"> , CA 94103</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<div class="col-lg-4">
<h5 class="fw-bold mb-4">Get In Touch</h5>
<div class="newsletter position-relative mt-4">
<input type="email" class="form-control" placeholder="name@example.com">
<button type="button" class="btn btn-primary search-btn position-absolute top-50 rounded-circle"><i class="fa-solid fa-angle-right"></i></button>
</div>
<div class="border-top my-4"></div>
<h5 class="fw-bold mb-4">Follow the location</h5>
<!-- start social icon -->
<ul class="d-flex flex-wrap gap-2 list-unstyled mb-0 social-icon">
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white inst">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white twi">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white dri">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white fb">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white whatsapp">
<i class="fa-brands fa-whatsapp"></i>
</a>
</li>
</ul>
<!-- /. end social icon -->
</div>
</div>
</div>
</div>
<div class="container border-top">
<div class="align-items-center g-3 py-4 row">
<div class="col-lg-auto">
<!-- start footer nav -->
<ul class="list-unstyled list-separator mb-2 footer-nav">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Sitemap</a></li>
<li class="list-inline-item"><a href="#">Cookies</a></li>
</ul>
<!-- end /. footer nav -->
</div>
<div class="col-lg order-md-first">
<div class="align-items-center row">
<!-- start footer logo -->
<a href="index.html" class="col-sm-auto footer-logo mb-2 mb-sm-0">
<img src="assets/images/logo-white.png" alt="">
</a>
<!-- end /. footer logo -->
<!-- start text -->
<div class="col-sm-auto copy">© 2022 ListOn - All Rights Reserved- All Rights Reserved</div>
<!-- end /. text -->
</div>
</div>
</div>
</div>
</footer>
<!-- end /. footer -->
<!-- Optional JavaScript -->
<script src="assets/plugins/jQuery/jquery.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/aos/aos.min.js"></script>
<script src="assets/plugins/macy/macy.js"></script>
<script src="assets/plugins/simple-parallax/simpleParallax.min.js"></script>
<script src="assets/plugins/OwlCarousel2/owl.carousel.min.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/ResizeSensor.min.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.min.js"></script>
<script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/plugins/counter-up/jquery.counterup.min.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.ui.widget.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fileupload.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.iframe-transport.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fancy-fileupload.js"></script>
<script src="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.js"></script>
<script src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/plugins/select2/select2.min.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
</body>
</html>
+36
View File
@@ -0,0 +1,36 @@
<?php include('include/headscript.php'); ?>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$iduser = $_POST['iduser'];
$idyogaschool = $_POST['idyogaschool'];
$product_id = isset($_POST['product_id']) ? $_POST['product_id'] : null; // product_id è opzionale
// Connessione al database
$conn = new mysqli($servername, $username, $password, $database);
// Verifica se il record è già tra i preferiti
$query = "SELECT * FROM bookmarks WHERE iduser = ? AND idyogaschool = ? AND product_id = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param('iii', $iduser, $idyogaschool, $product_id); // Usare il product_id
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows == 0) {
// Se non è già nei preferiti, aggiungi
$query = "INSERT INTO bookmarks (iduser, idyogaschool, product_id) VALUES (?, ?, ?)";
$stmt = $conn->prepare($query);
$stmt->bind_param('iii', $iduser, $idyogaschool, $product_id); // Assicurati che product_id sia valorizzato
$stmt->execute();
} else {
// Se è già nei preferiti, rimuovi il preferito
$query = "DELETE FROM bookmarks WHERE iduser = ? AND idyogaschool = ? AND product_id = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param('iii', $iduser, $idyogaschool, $product_id);
$stmt->execute();
}
// Chiudi la connessione al database
$stmt->close();
$conn->close();
}
?>
+56
View File
@@ -0,0 +1,56 @@
<?php
session_start();
// Connessione al database
require_once('../Connections/yogiwherequery.php');
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['id_schedule'])) {
$idschedule = intval($_POST['id_schedule']);
$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error) {
echo json_encode(['status' => 'error', 'message' => 'Errore di connessione al database']);
exit;
}
// Query per recuperare dettagli
$query = "SELECT yogaclass.nameyogaclass, schedule.cost FROM schedule LEFT JOIN yogaclass ON yogaclass.idyogaclass = schedule.idyogaclass WHERE schedule.idschedule = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param("i", $idschedule);
$stmt->execute();
$result = $stmt->get_result();
$class = $result->fetch_assoc();
if ($class) {
// Inizializza il carrello se non esiste
if (!isset($_SESSION['cart'])) {
$_SESSION['cart'] = array();
}
// Imposta il tempo di avvio del carrello se non è stato impostato
if (!isset($_SESSION['cart_start_time']) || empty($_SESSION['cart'])) {
$_SESSION['cart_start_time'] = time(); // Inizializza il tempo di avvio del carrello
}
// Aggiunta dell'articolo al carrello
$_SESSION['cart'][$idschedule] = [
'name' => $class['nameyogaclass'],
'cost' => $class['cost'],
'quantity' => 1,
'added_at' => time() // Registra l'ora corrente
];
echo json_encode(['status' => 'success', 'message' => 'Articolo aggiunto al carrello!']);
exit;
} else {
echo json_encode(['status' => 'error', 'message' => 'Classe non trovata.']);
exit;
}
$stmt->close();
$conn->close();
} else {
echo json_encode(['status' => 'error', 'message' => 'Errore nell\'aggiunta al carrello.']);
exit;
}
File diff suppressed because it is too large Load Diff
+719
View File
@@ -0,0 +1,719 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/images/favicon.png">
<title>ListOn - Directory & Listing HTML Template</title>
<link href="assets/plugins/aos/aos.min.css" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/fontawesome/css/all.min.css" rel="stylesheet">
<link href="assets/plugins/OwlCarousel2/css/owl.carousel.min.css" rel="stylesheet">
<link href="assets/plugins/OwlCarousel2/css/owl.theme.default.min.css" rel="stylesheet">
<link href="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/fancy_fileupload.css" rel="stylesheet">
<link href="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.css" rel="stylesheet">
<link href="assets/plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
<link href="assets/plugins/select2/select2.min.css" rel="stylesheet">
<link href="assets/plugins/select2-bootstrap-5/select2-bootstrap-5-theme.min.css" rel="stylesheet">
<!-- Custom style for this template -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- start navbar -->
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container">
<a class="navbar-brand m-0" href="index.html">
<img class="logo-white" src="assets/images/logo-white.png" alt="">
<img class="logo-dark" src="assets/images/logo.png" alt="">
</a>
<div class="d-flex order-lg-2">
<!-- start button -->
<a href="signin.html" class="d-flex align-items-center justify-content-center p-0 btn-user position-relative" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="Favourite">
<i class="fa-solid fa-heart"></i>
<span class="align-items-center bg-primary d-flex end-0 fs-11 justify-content-center nav-count position-absolute rounded-circle text-white">0</span>
</a>
<!-- end /. button -->
<!-- start button -->
<a href="sign-in.html" class="d-flex align-items-center justify-content-center p-0 btn-user" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="Sign In">
<i class="fa-solid fa-user-plus"></i>
</a>
<!-- end /. button -->
<!-- start button -->
<button type="button" id="themeToggleBtn" class="align-items-center bg-transparent border-0 btn-user d-flex justify-content-center p-0">
<i class="fa-solid fa-moon"></i>
</button>
<!-- end /. button -->
<!-- start button -->
<a href="add-listing.html" class="btn btn-primary d-none d-sm-flex fw-medium gap-2 hstack rounded-5">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
<div class="vr d-none d-sm-inline-block"></div>
<span class="d-none d-sm-inline-block">Add Listing</span>
</a>
<!-- end /. button -->
<!-- start navbar toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span id="nav-icon" class="">
<span></span>
<span></span>
<span></span>
</span>
</button>
<!-- end /. navbar toggle button -->
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" aria-current="page" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Home
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="index.html">Home (Main)</a></li>
<li><a class="dropdown-item" href="home-classic.html">Home (Classic)</a></li>
<li><a class="dropdown-item" href="home-rounded.html">Home (Rounded)</a></li>
<li><a class="dropdown-item" href="home-map.html">Home (Map)</a></li>
<li><a class="dropdown-item" href="home-grid.html">Home (Grid)</a></li>
<li><a class="dropdown-item" href="home-waves.html">Home (Waves)</a></li>
<li><a class="dropdown-item" href="home-car.html">Home (Car)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
<li><a class="dropdown-item" href="home-restaurant.html">Home (Restaurant)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle material-ripple" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="typcn typcn-weather-stormy top-menu-icon"></i>Dashboard
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dashboard/dashboard.html">Dashboard</a></li>
<li><a class="dropdown-item" href="dashboard/bookings.html">Bookings</a></li>
<li><a class="dropdown-item" href="dashboard/messages.html">Message</a></li>
<li><a class="dropdown-item" href="dashboard/wallet.html">Wallet</a></li>
<li><a class="dropdown-item" href="dashboard/profile.html">Edit Profile</a></li>
<li><a class="dropdown-item" href="dashboard/add-listing.html">Add listing</a></li>
<li><a class="dropdown-item" href="dashboard/my-listing.html">My listing</a></li>
<li><a class="dropdown-item" href="dashboard/bookings.html">Bookings</a></li>
<li><a class="dropdown-item" href="dashboard/reviews.html">Reviews</a></li>
<li><a class="dropdown-item" href="dashboard/bookmark.html">Bookmark</a></li>
<li><a class="dropdown-item" href="dashboard/setting-app.html">Settings</a></li>
<li><a class="dropdown-item" href="dashboard/invoice.html">Invoice</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Listing
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">List View</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-list-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-list-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-grid-1-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-grid-1-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-grid-2-left.html">Left Sidebar</a></li>
<li><a class="dropdown-item" href="listings-grid-2-right.html">Right Sidebar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Half Map + Sidebar</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listings-map.html">Half Map List</a></li>
<li><a class="dropdown-item" href="listings-map-car.html">Half Map List (Car)&nbsp;<span class="badge text-bg-primary fw-semibold">New</span></a></li>
<li><a class="dropdown-item" href="listings-map-grid-1.html">Half Map Grid 1</a></li>
<li><a class="dropdown-item" href="listings-map-grid-2.html">Half Map Grid 2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Listing Details</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="listing-details.html">Listing Details 1</a></li>
<li><a class="dropdown-item" href="listing-details-2.html">Listing Details 2</a></li>
<li><a class="dropdown-item" href="listing-details-car.html">Listing Details Car <span class="badge text-bg-primary fw-semibold">New</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="listings-map-grid-1.html">Explore</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Template
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="about.html">About us 1</a></li>
<li><a class="dropdown-item" href="about-2.html">About us 2</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Agent</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="agent.html">Agent</a></li>
<li><a class="dropdown-item" href="agent-details.html">Agent Details</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="blog.html" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="blog.html">Blog</a></li>
<li><a class="dropdown-item" href="blog-details.html">Blog Standard</a></li>
<li><a class="dropdown-item" href="blog-post-galary.html">Blog Galary</a></li>
<li><a class="dropdown-item" href="blog-post-video.html">Blog Video</a></li>
<li><a class="dropdown-item" href="blog-post-audio.html">Blog Audio</a></li>
<li><a class="dropdown-item" href="blog-archive.html">Blog Archive</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="add-listing.html">Add Listing</a></li>
<li><a class="dropdown-item" href="submit-rider.html">Submit Rider</a></li>
<li><a class="dropdown-item" href="contact.html">Contact</a></li>
<li><a class="dropdown-item" href="pricing.html">Pricing</a></li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Authentication</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="sign-in.html">Sign In</a></li>
<li><a class="dropdown-item" href="sign-up.html">Sign Up</a></li>
<li><a class="dropdown-item" href="forgot-password.html">Forgot Password</a></li>
<li><a class="dropdown-item" href="two-factor-auth.html">Two factor authentication</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Specialty</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="404.html">404 Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Help Center</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="faq.html">Faq Page</a></li>
<li><a class="dropdown-item" href="terms-conditions.html">Terms & Conditions</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="style-guide.html">Style Guide</a></li>
</ul>
</li>
</ul>
<div class="d-sm-none">
<!-- start button -->
<a href="signin.html" class="btn btn-primary d-flex gap-2 hstack justify-content-center rounded-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
<div class="vr d-none d-sm-inline-block"></div>
<span>Add Listing</span>
</a>
<!-- end /. button -->
</div>
</div>
</div>
</nav>
<!-- end /. navbar -->
<!-- start page header -->
<section class="dark-overlay hero mx-3 overflow-hidden position-relative py-4 py-lg-5 rounded-4 text-white">
<img class="bg-image" src="assets/images/header/04.jpg" alt="Image">
<div class="container overlay-content">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-8 col-xl-7">
<!-- start section header -->
<div class="section-header text-center mb-5" data-aos="fade-down">
<!-- start section header -->
<h2 class="display-4 fw-semibold mb-3 section-header__title text-capitalize">Find your <span class="font-caveat text-primary">dream</span> place</h2>
<!-- end /. section header title -->
<!-- start description -->
<div class="sub-title fs-18">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
<!-- end /. section header sub title -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-10">
<!-- start search content -->
<div class="border-0 card d-flex flex-md-row position-relative search-wrapper">
<div class="align-items-center d-flex search-field w-100">
<div class="svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
<!-- start input -->
<input type="email" class="form-control search-input" placeholder="What are you looking for?">
<!-- end /. input -->
</div>
<div class="vertical-divider"></div>
<div class="align-items-center d-flex search-field w-100">
<div class="svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z" />
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
</svg>
</div>
<!-- start select -->
<select class="form-select search-select-field">
<option selected>Location</option>
<option value="1">Florence, Italy</option>
<option value="2">Second choice</option>
<option value="3">Third choice</option>
</select>
<!-- end /. select -->
</div>
<input type="submit" value="Search places" class="btn btn-primary rounded-5 mt-3 mt-md-0">
</div>
<!-- end /. search content -->
</div>
</div>
</div>
</section>
<!-- end /. page header -->
<div class="py-5">
<div class="container py-4">
<div class="row">
<div class="col-sm-10 col-md-10 col-lg-6">
<!-- start section header -->
<div class="section-header mb-5" data-aos="fade-down">
<!-- start subtitle -->
<div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Agents</div>
<!-- end /. subtitle -->
<!-- start title -->
<h2 class="display-5 fw-semibold mb-3 section-header__title text-capitalize">Agents / Persons</h2>
<!-- end /. title -->
<!-- start description -->
<div class="sub-title fs-16">A team of experienced and dedicated professionals who are passionate about helping our clients find their dream properties. From our agents to our support staff, everyone on our team is committed to providing personalized service, expert guidance, and exceptional results.</div>
<!-- end /. description -->
</div>
<!-- end /. section header -->
</div>
</div>
<div class="row justify-content-center g-4 gx-xxl-5">
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container">
<img src="assets/images/avatar/01.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Ethan Blackwood</h4>
<div>12 Listing</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/02.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Edwin Martins</h4>
<div>12 Listing</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/03.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Alexander Kaminski</h4>
<div>12 Listing</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/04.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Pranoti Deshpande</h4>
<div>12 Listing</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/05.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Alexander Steele</h4>
<div>12 Listing</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/06.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Marcus Knight</h4>
<div>12 Listing</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/07.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Alexander Kaminski</h4>
<div>12 Listing</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
<!-- Start Card -->
<div class="team-member mt-4">
<div class="member-header overflow-hidden position-relative rounded-4">
<div class="d-block overflow-hidden position-relative team-avatar-container bg-gradient">
<img src="assets/images/avatar/02.jpg" class="img-fluid w-100" alt="">
</div>
<ul class="align-items-center d-flex fs-21 gap-2 justify-content-center list-unstyled mb-0 member-social position-absolute">
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="align-items-center d-flex fs-14 justify-content-center rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!-- Start Avatar Info -->
<div class="member-info mt-3 text-center">
<h4 class="mb-2 member-name text-truncate">Gabriel North</h4>
<div>12 Listing</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<!-- /.End Avatar Info -->
</div>
<!-- /.End Card -->
</div>
</div>
</div>
</div>
<!-- start footer -->
<footer class="footer-dark main-footer overflow-hidden position-relative pt-5">
<div class="container pt-4">
<div class="py-5">
<!-- start app download content -->
<div class="bg-primary rounded-4">
<div class="col-xxl-10 col-md-11 col-10 d-flex flex-md-row flex-column-reverse align-items-md-end align-items-center mx-auto px-0 gap-4">
<img class="app-image flex-shrink-0" src="assets/images/phone-mpckup.png" width="270" alt="Mobile app">
<div class="align-items-lg-center align-self-center d-flex flex-column flex-lg-row ps-xxl-4 pt-5 py-md-3 text-center text-md-start">
<div class="me-md-5">
<h4 class="text-white">Download Our App</h4>
<p class="mb-lg-0 text-white">It is a long established fact that a reader will be distracted by the readable content.</p>
</div>
<div class="d-flex flex-shrink-0 flex-wrap gap-3 justify-content-center">
<!-- start apple store button -->
<a class="align-items-center app-btn d-flex px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fa-apple fab fs-28 me-2"></i>
<div> <span class="fs-13 d-block">Available on the</span> <span class="fs-17 text-capitalize">App Store</span> </div>
</a>
<!-- end /. apple store button -->
<a class="align-items-center app-btn d-flex fs-11 px-3 py-2 rounded-3 text-decoration-none text-white border" href="#"> <i class="fab fa-google-play fs-25 me-2"></i>
<div> <span class="fs-13 d-block">Get it on</span> <span class="fs-17 text-capitalize">Google Play</span> </div>
</a>
</div>
</div>
</div>
</div>
<!-- end /. app download content -->
</div>
<div class="border-top py-5">
<div class="footer-row row gy-5 g-sm-5 gx-xxl-6">
<div class="border-end col-lg-4 col-md-7 col-sm-6">
<h5 class="fw-bold mb-4">Get In Touch</h5>
<div class="mb-4">Join our newsletter and receive the best job<br class="d-none d-xxl-block"> openings of the week, right on your inbox.</div>
<div class="border rounded-4 p-4 mb-4">
<h6 class="text-white-50 mb-3">Join our Whatsapp:</h6>
<a class="align-items-center d-block d-flex whatsapp-number" href="#"><i class="fa-brands fa-whatsapp fs-2 me-2"></i><span class="fs-5 fw-semibold text-decoration-underline">(123) 456-7890</span></a>
</div>
<h5 class="fw-bold mb-4">Want to join ListOn?<br> Write us !</h5>
<span>support@ListOn.com</span>
</div>
<div class="border-end col-lg-4 col-md-5 col-sm-6">
<h5 class="fw-bold mb-4">Stay Connect</h5>
<div>1123 Fictional St, San Francisco<br class="d-none d-xxl-block"> , CA 94103</div>
<div class="mt-4">
<a class="d-block fw-medium mb-1" href="#">
<i class="fa-solid fa-phone me-2"></i><span>(123) 456-7890</span>
</a>
<a class="email-link d-block fw-medium" href="#">
<i class="fa-solid fa-envelope me-2"></i>
support@ListOn.com
</a>
</div>
</div>
<div class="col-lg-4">
<h5 class="fw-bold mb-4">Get In Touch</h5>
<div class="newsletter position-relative mt-4">
<input type="email" class="form-control" placeholder="name@example.com">
<button type="button" class="btn btn-primary search-btn position-absolute top-50 rounded-circle"><i class="fa-solid fa-angle-right"></i></button>
</div>
<div class="border-top my-4"></div>
<h5 class="fw-bold mb-4">Follow the location</h5>
<!-- start social icon -->
<ul class="d-flex flex-wrap gap-2 list-unstyled mb-0 social-icon">
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white inst">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white twi">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white dri">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white fb">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" class="rounded-circle align-items-center d-flex fs-19 icon-wrap justify-content-center rounded-2 text-white whatsapp">
<i class="fa-brands fa-whatsapp"></i>
</a>
</li>
</ul>
<!-- /. end social icon -->
</div>
</div>
</div>
</div>
<div class="container border-top">
<div class="align-items-center g-3 py-4 row">
<div class="col-lg-auto">
<!-- start footer nav -->
<ul class="list-unstyled list-separator mb-2 footer-nav">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Sitemap</a></li>
<li class="list-inline-item"><a href="#">Cookies</a></li>
</ul>
<!-- end /. footer nav -->
</div>
<div class="col-lg order-md-first">
<div class="align-items-center row">
<!-- start footer logo -->
<a href="index.html" class="col-sm-auto footer-logo mb-2 mb-sm-0">
<img src="assets/images/logo-white.png" alt="">
</a>
<!-- end /. footer logo -->
<!-- start text -->
<div class="col-sm-auto copy">© 2022 ListOn - All Rights Reserved- All Rights Reserved</div>
<!-- end /. text -->
</div>
</div>
</div>
</div>
</footer>
<!-- end /. footer -->
<!-- Optional JavaScript -->
<script src="assets/plugins/jQuery/jquery.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/aos/aos.min.js"></script>
<script src="assets/plugins/macy/macy.js"></script>
<script src="assets/plugins/simple-parallax/simpleParallax.min.js"></script>
<script src="assets/plugins/OwlCarousel2/owl.carousel.min.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/ResizeSensor.min.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.min.js"></script>
<script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/plugins/counter-up/jquery.counterup.min.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.ui.widget.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fileupload.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.iframe-transport.js"></script>
<script src="assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fancy-fileupload.js"></script>
<script src="assets/plugins/ion.rangeSlider/ion.rangeSlider.min.js"></script>
<script src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/plugins/select2/select2.min.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
</body>
</html>
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,295 @@
/*
Favethemes documentation styles
*/
/* Google Fonts ------ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
color: #535353;
font-size: 16px;
font-family: 'Inter Tight', sans-serif;
font-weight: 400;
}
a,
a:hover,
a:active,
a:focus {
color: #0a73c0;
text-decoration: none;
}
.page-header {
margin-top: 0;
}
.m-t-0 {
margin-top: 0px;
}
h1, h2, h3, h4, h5, h6 {
color: #212529;
}
/*--- selectin ---*/
::-moz-selection {
color: #fff;
background: #0a73c0;
text-shadow: none;
}
::selection {
color: #fff;
background: #0a73c0;
text-shadow: none;
}
@media (min-width: 768px) {
.bs-sidebar.affix {
top: 50px;
width: 220px;
}
}
@media (min-width: 992px) {
.bs-sidebar.affix {
top: 70px;
width: 263px;
}
}
.bs-sidenav {
border-radius: 5px;
background-color: #fff;
-webkit-box-shadow: 0 0 35px rgba(140, 152, 164, 0.125);
box-shadow: 0 0 35px rgba(140, 152, 164, 0.125);
border: 1px solid #e7eaf3;
padding: 2rem;
}
.bs-sidenav a {
color: #212529;
padding: 10px 0 !important;
font-weight: 500;
}
.bs-sidenav .active a {
color: #0a73c0;
}
.bs-sidenav a.last {
border-bottom: none;
}
.nav>li>a:hover,
.nav>li>a:focus,
.bs-sidenav a:hover {
background-color: rgba(255, 255, 255, 0.1)
}
pre.prettyprint {
padding: 20px 10px;
}
/*h1[id] {
padding-top: 80px;
margin-top: -45px;
}*/
h3 {
margin-top: 40px;
}
.goodbye {
border-top: 1px solid #eee;
padding: 20px 0 0;
margin-top: 80px;
}
img {
max-width: 100%;
}
ol li{
line-break: anywhere;
}
ol li b,
ol li strong{
color: #212529;
font-weight: 500;
}
.content {
margin-bottom: 50px;
}
/*** Navber
==============================================================================*/
.navbar-default {
margin: 0;
padding: 0 1rem;
z-index: 2;
background-color: #fff;
border-bottom: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
border: 0;
min-height: 60px;
}
.navbar-default .navbar-nav > li > a {
color: #0a73c0;
font-weight: 700;
}
.navbar-brand {
padding: 13px 15px;
height: 60px;
}
.navbar-brand img {
height: 30px;
}
/*** Header
==============================================================================*/
.jumbotron {
color: #fff;
padding-top: 120px;
padding-bottom: 60px;
background-color: #212529;
border-bottom: 1px solid #212529;
}
.jumbotron h1 {
margin-bottom: 20px;
margin-top: 0;
font-weight: 600;
font-size: 42px;
}
.jumbotron p {
color: #fff;
font-weight: 400;
font-size: 18px;
}
.prev-inner:hover h4{
color: #0a73c0;
}
.preview_inner {
text-align: center;
margin-bottom: 20px;
background-color: #fafafa;
border: 1px solid #e1e8ed;
padding: 10px;
border-radius: 10px;
min-height: 327px;
}
.preview_inner h4 {
font-size: 17px;
letter-spacing: 1px;
margin: 5px 0 15px;
font-weight: 500;
}
.preview-btn {
background-color: #0a73c0;
border: 1px solid #0a73c0;
padding: 4px 12px;
font-size: 13px;
letter-spacing: 0.5px;
margin-top: 10px;
color: #fff;
font-weight: 600;
}
.preview-btn:hover {
background-color: #fff;
border-color: #0a73c0;
color: #0a73c0;
}
figure.snip {
position: relative;
overflow: hidden;
width: 100%;
background: #212529;
text-align: center;
/*box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);*/
}
figure.snip * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
figure.snip img {
max-width: 100%;
vertical-align: top;
}
figure.snip i {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
font-size: 40px;
color: #fff;
width: 60px;
height: 60px;
line-height: 60px;
-webkit-transform: translate(-50%, -50%) scale(0);
-ms-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
-webkit-transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
-o-transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
figure.snip a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
figure.snip:hover img,
figure.snip.hover img {
opacity: 0.3;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
figure.snip:hover i,
figure.snip.hover i {
-webkit-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
-webkit-transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/*** Footer
==============================================================================*/
footer {
background-color: #2c3136;
padding: 10px 0;
}
footer p {
color: #fff;
margin: 0;
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 507 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 718 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 368 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

File diff suppressed because one or more lines are too long
@@ -0,0 +1,44 @@
/*
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*
* Uses the built in easing capabilities added In jQuery 1.1
* to offer multiple easing options
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
File diff suppressed because one or more lines are too long
@@ -0,0 +1,79 @@
$(document).ready(function () {
"use strict"; // Start of use strict
// IE10 viewport hack for Surface/desktop Windows 8 bug
// See Getting Started docs for more information
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
var $window = $(window);
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '.bs-sidebar',
offset: navHeight
});
$window.on('load', function () {
$body.scrollspy('refresh');
});
// back to top
setTimeout(function () {
var $sideBar = $('.bs-sidebar');
$sideBar.affix({
offset: {
top: function () {
var offsetTop = $sideBar.offset().top;
var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 33);
var navOuterHeight = $('.bs-docs-nav').height();
return (this.top = offsetTop - navOuterHeight - sideBarMargin);
}
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true));
}
}
});
}, 100);
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function (event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 50)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
/* Demo purposes only */
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
$('body').scrollspy({
target: '.bs-docs-sidebar',
offset: 40
});
});
@@ -0,0 +1,470 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Theme documentation.">
<meta name="author" content="Favethemes">
<link rel="shortcut icon" href="assets/img/favicon.png">
<title>ListOn - Directory & Listing HTML Template</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top bs-docs-nav" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="border-end navbar-brand pe-3 pe-sm-4 py-0" href="#">
<img src="assets/img/logo.png" class="img-responsive" alt="">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<!-- <li><a href="#">Support Forum</a></li> -->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>ListOn - Directory & Listing HTML Template</h1>
<p>
Created: Nov 22, 2023<br>
By: easital_tech<br>
Email: <a href="mailto:easital.theme@gmail.com">easital.theme@gmail.com</a>
</p>
<p>Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a href="https://themeforest.net/user/easital_tech">here</a> Thanks so much!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-3">
<!-- sidebar -->
<div class="bs-sidebar hidden-xs">
<ul class="nav bs-sidenav">
<li><a class="page-scroll" href="#introduction">Introduction</a></li>
<li><a class="page-scroll" href="#changelog">Changelog</a></li>
<li><a class="page-scroll" href="#features">Features</a></li>
<li><a class="page-scroll" href="#html_structure">HTML Structure</a></li>
<li><a class="page-scroll" href="#css_structure">CSS Structure</a></li>
<li><a class="page-scroll" href="#JavaScript_structure">JavaScript</a></li>
<li><a class="page-scroll" href="#file_structure">File Structure</a></li>
<li><a class="page-scroll" href="#sourcesAndCredits">Sources and Credits</a></li>
<li><a class="page-scroll" href="#customization">Customization</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-9">
<!-- Main content -->
<div class="content">
<!-- Introduction section -->
<section id="introduction">
<div class="page-header">
<h2 class="m-t-0"># Introduction</h2>
</div>
<p>ListOn is an intuitive and clean HTML-based template crafted exclusively for directory and listing websites. Ideal for business, organizations and individuals seeking to showcase their listings, ListOn offers a sophisticated and feature-rich solution. ListOn ensures you make a compelling online listing presence to captivate potential customers, clients and visitors. This versatile template can be effortlessly customized to suit your unique requirements or business needs.</p>
<p>Boasting a contemporary and clean design, ListOn guarantees a seamless user experience, allowing visitors to effortlessly navigate through property listings and discover their ideal home or investment opportunity. Developed with the latest web technologies, including HTML5, CSS3, and Bootstrap 5, ListOn ensures a fully responsive and mobile-friendly layout across various devices. Its adaptability makes it a go-to choice for a wide range of real estate agencies and businesses.</p>
</section>
<!-- Changelog -->
<section id="changelog">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h2># Changelog</h2>
</div>
<h4>Nov 24, 2023</h4>
<p>- Release v1.0</p>
<ul>
<li>Initial release</li>
</ul>
<h4>Dec 21, 2023</h4>
<p>- Release v2.0</p>
<ul>
<ul>
<li>Add: Add dashboard feature (light & dark) <code>New</code></li>
<li>Update: Update home (waves) masonry ui</li>
<li>Update: Update some CSS issue</li>
<li>Fixed: Fixed filter (for mobile) dropdown issue</li>
</ul>
</ul>
<h4>Dec 31, 2023</h4>
<p>- Release v2.1</p>
<ul>
<ul>
<li>Add: Add Home page (Car), List car with map and Listing details (Car) <code>New</code></li>
<li>Update: Update some CSS issue</li>
</ul>
</ul>
<h4>Jan 10, 2024</h4>
<p>- Release v2.2</p>
<ul>
<ul>
<li>Add: Add dark mode</li>
<li>Add: Add RTL</li>
<li>Update: Update some CSS issue</li>
<li>Update: Update some js issue</li>
</ul>
</ul>
<h4>Jan 15, 2024</h4>
<p>- Release v2.3</p>
<ul>
<ul>
<li>Add: Add Home page (Restaurant) <code>New</code></li>
<li>Update: Update some CSS issue</li>
<li>Update: Update some js issue</li>
</ul>
</ul>
<h4>Feb 11, 2024</h4>
<p>- Release v2.4</p>
<ul>
<ul>
<li>Add: Add Blog Video, Audio, Galary, Archive pages <code>New</code></li>
<li>Add: Add blog comments form section</li>
<li>Update: Update some CSS issue</li>
<li>Update: Update some js issue</li>
</ul>
</ul>
<h4>Apr 16, 2024</h4>
<p>- Release v2.5</p>
<ul>
<ul>
<li>Add: Add Submit rider page <code>New</code></li>
<li>Add: Add Dashboard invoice</li>
<li>Update: Update some CSS issue</li>
<li>Published template at <a href="../../index.html" target="_blank">this demo url</a></li>
</ul>
</ul>
</div>
</div>
</section>
<!-- Features section -->
<section id="features">
<div class="page-header">
<h2># Features</h2>
</div>
<ul>
<li>Powered by HTML5, CSS3 & jQuery</li>
<li>08 engaging homepage styles</li>
<li>Included user dashboard</li>
<li>Dark & RTL mode</li>
<li>Extensive maps integration based on Snazzy Maps</li>
<li>Dedicated pages for listing details (2 variants)</li>
<li>Listing page with user-friendly search, filter, categories, and half-map</li>
<li>Fully responsive layout for desktops, tablets, and mobile devices</li>
<li>Built with the latest Bootstrap 5 for optimal performance</li>
<li>Well-structured and commented code for easy customization</li>
<li>Utilizes Font Awesome Fonts Icons</li>
<li>Free licensed Google font for a visually appealing typography</li>
<li>Comprehensive sections, including Blog Post Page, Director Listing Page, and Agent Page</li>
<li>Integration of Snazzy Google Maps for enhanced property location visualization</li>
<li>Easy customization to tailor the template to your specific needs</li>
<li>W3C Valid, Clean, and Commented Code for optimal performance</li>
<li>Cross-browser compatibility ensures a seamless experience for all users</li>
<li>Retina ready for enhanced visual quality</li>
<li>Minimal and Clean Code for an elegant and efficient design</li>
<li>AOS Animations for a visually engaging experience</li>
<li>SEO-friendly Code for improved search engine visibility</li>
<li>Documentation included for easy setup and customization</li>
<li><b>And Much More...</b></li>
</ul>
</section>
<!-- HTML Structure -->
<section id="html_structure">
<div class="page-header">
<h2># HTML Structure</h2>
</div>
<h4>HTML Structure</h4>
<p>This theme is a fixed layout with four columns. All of the information within the body content area. The general template structure is the same throughout the template. Here is the general structure.</p>
<img src="assets/img/html-structure.png" alt="">
</section>
<!-- HTML Structure -->
<section id="css_structure">
<div class="page-header">
<h2># CSS Structure</h2>
</div>
<p>I'm using two CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.</p>
<p>The second file contains all of the specific stylings for the page. The file is separated into sections using:</p>
<img src="assets/img/css-structure.png" alt="">
</section>
<!-- HTML Structure -->
<section id="JavaScript_structure">
<div class="page-header">
<h2># JavaScript </h2>
</div>
<h4>JavaScript Structure</h4>
<p>This is our Javascript files structure.</p>
<img src="assets/img/js-structure.png" alt="">
</section>
<!-- Service Section -->
<section id="file_structure">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h2># File Structure</h2>
</div>
<h4>File structure</h4>
<p>HTML, css and javascript files included.</p>
</div>
<div class="col-xs-12 col-lg-6 col-sm-6">
<pre>
<code>liston-main.zip
├── assets/
├── dashboard/
├── rtl/
├── 404.html
├── about.html
├── about-2.html
├── add-listing.html
├── agent.html
├── agent-details.html
├── blog.html
├── blog-archive.html
├── blog-details.html
├── blog-post-audio.html
├── blog-post-galary.html
├── blog-post-video.html
├── contact.html
├── faq.html
├── forgot-password.html
├── home-car.html
├── home-classic.html
├── home-grid.html
├── home-map.html
├── home-restaurant.html
├── home-rounded.html
├── home-waves.html
├── index.html
├── listing-details.html
├── listing-details-2.html
├── listing-details-car.html
├── listings-grid-1-left.html
├── listings-grid-1-right.html
├── listings-grid-2-left.html
├── listings-grid-2-right.html
├── listings-list-left.html
├── listings-list-right.html
├── listings-map.html
├── listings-map-car.html
├── listings-map-grid-1.html
├── listings-map-grid-2.html
├── pricing.html
├── sign-in.html
├── sign-up.html
├── style-guide.html
├── terms-conditions.html
└── two-factor-auth.html</code></pre>
</div>
<div class="col-xs-12 col-lg-6 col-sm-6">
<pre><code class="language-bash" data-lang="bash">liston-main.zip
├── assets/
│ ├── css/
│ ├── documentation/
│ ├── img/
│ ├── js/
└────── plugins/
</code></pre>
<pre><code class="language-bash" data-lang="bash">plugins/
├── aos/
├── bootstrap/
├── counter-up/
├── fontawesome/
├── ion.rangeSlider/
├── jQuery/
├── jquery-fancyfileuploader/
├── macy/
├── magnific-popup/
├── OwlCarousel2/
├── select2/
├── select2-bootstrap-5/
├── simple-parallax/
├── theia-sticky-sidebar/
└── waypoints/</code></pre>
</div>
</div>
</section>
<!-- Sources and Credits Section -->
<section id="sourcesAndCredits">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h2># Sources and Credits</h2>
<p>I've used the following images, icons or other files as listed.</p>
</div>
<ol>
<li>
<p><b>Bootstrap :</b> Build fast, responsive sites with Bootstrap <a href="http://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a></p>
</li>
<li>
<p><b>Google fonts :</b> Wix Madefor Display <a href="https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&display=swap" rel="stylesheet" target=" _blank">https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&display=swap</a></p>
</li>
<li>
<p><b>Google fonts :</b> Caveat <a href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet" target=" _blank">https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap</a></p>
</li>
<li>
<p><b>jQuery :</b> fast, small, and feature-rich JavaScript library. <a href="http://jquery.com/" target="_blank">http://jquery.com/</a></p>
</li>
<li>
<p><b>Unsplash :</b> The internet’s source of freely useable images. Powered by
creators everywhere. <a href="https://unsplash.com/" target="_blank">https://unsplash.com/</a></p>
</li>
<li>
<p><b>Freepik :</b> All the assets you need, in one place
creators everywhere. <a href="https://www.freepik.com/" target="_blank">https://www.freepik.com/</a></p>
</li>
<li>
<p><b>Flaticon :</b> Access 12.4M+ vector icons & stickers <a href="https://www.flaticon.com/" target="_blank">https://www.flaticon.com/</a></p>
</li>
<li>
<p><b>unDraw :</b> <a href="https://undraw.co/" target="_blank">https://undraw.co/</a></p>
</li>
<li>
<p><b>Magnific Popup :</b> Magnific Popup is a responsive lightbox & dialog
script with focus on performance and providing best experience for user with
any device
(for jQuery or Zepto.js). <a href="https://dimsemenov.com/plugins/magnific-popup/" target="_blank">https://dimsemenov.com/plugins/magnific-popup/</a></p>
</li>
<li>
<p><b>Font Awesome :</b> <a href="https://fontawesome.com/" target="_blank">https://fontawesome.com/</a></p>
</li>
<li>
<p><b>AOS :</b> Animate On Scroll Library <a href="https://michalsnik.github.io/aos/" target="_blank">https://michalsnik.github.io/aos/</a></p>
</li>
<li>
<p><b>Ion.RangeSlide :</b> Easy to use, flexible and responsive range slider with skin support <a href="http://ionden.com/a/plugins/ion.rangeSlider/" target="_blank">http://ionden.com/a/plugins/ion.rangeSlider/</a></p>
</li>
<li>
<p><b>jQuery Fancy File Uploader :</b> A jQuery plugin to convert the HTML file input type into a mobile-friendly fancy file uploader. Choose from a MIT or LGPL license. <a href="https://github.com/cubiclesoft/jquery-fancyfileuploader" target="_blank">https://github.com/cubiclesoft/jquery-fancyfileuploader</a></p>
</li>
<li>
<p><b>Counter-Up :</b>Counter-Up is a jQuery plugin that animates a number from
zero (counting up towards it). It supports counting up: <a href="https://github.com/bfintal/Counter-Up" target="_blank">https://github.com/bfintal/Counter-Up</a></p>
</li>
<li>
<p><b>Select2:</b> The jQuery replacement for select boxes. <a href="https://select2.org/" target="_blank">https://select2.org/</a></p>
</li>
<li>
<p><b>Select2 Bootstrap 5 Theme :</b> Get started with the Select2 Bootstrap 5 theme, the look of Bootstrap 5, with the functionality of Select2. <a href="https://apalfrey.github.io/select2-bootstrap-5-theme/" target="_blank">https://apalfrey.github.io/select2-bootstrap-5-theme/</a></p>
</li>
<li>
<p><b>Theia Sticky Sidebar :</b><a href="https://github.com/WeCodePixels/theia-sticky-sidebar" target="_blank">https://github.com/WeCodePixels/theia-sticky-sidebar</a></p>
</li>
<li>
<p><b>Owl Carousel 2 :</b> Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. <a href="https://owlcarousel2.github.io/OwlCarousel2/" target="_blank">https://owlcarousel2.github.io/OwlCarousel2/</a></p>
</li>
<li>
<p><b>Waypoint :</b> Waypoints is the easiest way to trigger a function when you scroll to an element. <a href="http://imakewebthings.com/waypoints/" target="_blank">http://imakewebthings.com/waypoints/</a></p>
</li>
<li>
<p><b>Snazzy Maps :</b> <a href="https://snazzymaps.com/" target="_blank">https://snazzymaps.com/</a></p>
</li>
<li>
<p><b>Toastr :</b> Simple javascript toast notifications <a href="https://codeseven.github.io/toastr/" target="_blank">https://codeseven.github.io/toastr/</a></p>
</li>
<li>
<p><b>APEXCHARTS.JS :</b> Modern & Interactive Open-source Charts <a href="https://apexcharts.com/" target="_blank">https://apexcharts.com/</a></p>
</li>
<li>
<p><b>DataTables :</b> Add advanced interaction controls
to your HTML tables the free & easy way <a href="https://datatables.net/" target="_blank">https://datatables.net/</a></p>
</li>
<li>
<p><b>metismenu :</b> A collapsible jQuery menu plugin <a href="https://github.com/onokumus/metismenu" target="_blank">https://github.com/onokumus/metismenu</a></p>
</li>
<li>
<p><b>perfect-scrollbar :</b> Minimalistic but perfect custom scrollbar plugin <a href="https://github.com/mdbootstrap/perfect-scrollbar" target="_blank">https://github.com/mdbootstrap/perfect-scrollbar</a></p>
</li>
</ol>
</div>
</div>
</section>
<!-- Customization section -->
<section id="customization">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h2># Customization</h2>
</div>
<ol>
<li>
<p><b>How do I open the template?</b></p>
<p>The template is 100% ready to use, with no compilation needed. Just unzip, go
to the html folder and open the <code>index.html</code> file in your browser
using a development server</p>
</li>
<li>
<p><b>How do I start a simple local development server?</b></p>
<p>Make sure you have the latest <code>PHP</code> version installed. Then go to
the <code>html</code> folder and run the <code>php -S localhost:4000</code>
command from the console. You should see the template running at
<code>http://localhost:4000</code>
</p>
</li>
<li>
<p><b>How do I install/uninstall a dependency with Bower?</b></p>
<p>Run bower install &lt;dependency-name&gt; --save. After this then you should
add the installed dependencies to the <code>.html</code> files.</p>
</li>
<li>
<p><b>I have a question, but it is not listed here, what can I do?</b></p>
<p>Send us an email to easital.theme@gmail.com or contact us through our Theme
Forest profile and we'll do our best to try to help you.</p>
</li>
<li>
<p><b>I would like to see a new plugin installed or functionality developed in
Kernel, is it possible?</b></p>
<p>We are always trying to improve and adding new functionalities and plugins to
<b>ListOn - Directory & Listing HTML Template
</b>, so every request is welcomed and will be evaluated.
</p>
</li>
<li>
<p><b>I found a bug, what can I do?</b></p>
<p>Please let us know and we'll do our best to fix it as soon as possible</p>
</li>
<li>
<p><b>Are updates free?</b></p>
<p>Yes, they are and always will be</p>
</li>
</ol>
</div>
</div>
</section>
<div class="alert alert-info" role="alert">
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer>
<div class="container">
<div class="col-sm-12">
<p>&copy; <a href="https://themeforest.net/user/easital_tech" target="_blank">easital_tech</a> 2023</p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.easing.min.js" type="text/javascript"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Some files were not shown because too many files have changed in this diff Show More