<!DOCTYPE html>
<html lang="en">

<!-- Mirrored from social.webestica.com/index-event.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 09 Feb 2023 03:43:20 GMT -->
<head>
	<title>Social - Network, Community and Event Theme</title>

	<!-- Meta Tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="author" content="Webestica.com">
	<meta name="description" content="Bootstrap 5 based Social Media Network and Community Theme">

	<!-- Favicon -->
	<link rel="shortcut icon" href="assets/images/favicon.ico">

	<!-- Google Font -->
	<link rel="preconnect" href="https://fonts.googleapis.com/">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap">

	<!-- Plugins CSS -->
	<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
	<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-icons/bootstrap-icons.css">
 
  <!-- Theme CSS -->
	<link id="style-switch" rel="stylesheet" type="text/css" href="assets/css/style.css">

</head>

<body>

<!-- **************** MAIN CONTENT START **************** -->

<!-- =======================
Header START -->
<header class="navbar-dark navbar-transparent header-static">

	<!-- Logo Nav START -->
	<nav class="navbar navbar-expand-lg">
		<div class="container">
			<!-- Logo START -->
			<a class="navbar-brand" href="index-2.html">
        <img class="light-mode-item navbar-brand-item" src="assets/images/logo.svg" alt="logo">
				<img class="dark-mode-item navbar-brand-item" src="assets/images/logo.svg" alt="logo">
			</a>
			<!-- Logo END -->

			<!-- Responsive navbar toggler -->
			<button class="navbar-toggler ms-auto icon-md btn btn-light p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-animation">
          <span></span>
          <span></span>
          <span></span>
        </span>
      </button>

			<!-- Main navbar START -->
			<div class="collapse navbar-collapse" id="navbarCollapse">

				<ul class="navbar-nav navbar-nav-scroll ms-auto">
					<!-- Nav item 1 Demos -->
					<li class="nav-item dropdown">
						<a class="nav-link active dropdown-toggle" href="#" id="homeMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Demo</a>
						<ul class="dropdown-menu" aria-labelledby="homeMenu">
							<li> <a class="dropdown-item" href="index-2.html">Home default</a></li>
							<li> <a class="dropdown-item" href="index-classic.html">Home classic</a></li>
							<li> <a class="dropdown-item" href="index-post.html">Home post</a></li>
							<li> <a class="dropdown-item" href="index-video.html">Home video</a></li>
							<li> <a class="dropdown-item active" href="index-event.html">Home event</a></li>
							<li> <a class="dropdown-item" href="landing.html">Landing page</a></li>
							<li> <a class="dropdown-item" href="app-download.html">App download</a></li>
              <li class="dropdown-divider"></li>
							<li> 
								<a class="dropdown-item" href="https://themes.getbootstrap.com/store/webestica/" target="_blank">
									<i class="text-success fa-fw bi bi-cloud-download-fill me-2"></i>Buy Social!
								</a> 
							</li>
						</ul>
					</li>
					<!-- Nav item 2 Pages -->
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="pagesMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
						<ul class="dropdown-menu" aria-labelledby="pagesMenu">
							<li> <a class="dropdown-item" href="albums.html">Albums</a></li>
							<li> <a class="dropdown-item" href="celebration.html">Celebration</a></li>
              <li> <a class="dropdown-item" href="messaging.html">Messaging</a></li>
							<!-- Dropdown submenu -->
							<li class="dropdown-submenu dropend"> 
                <a class="dropdown-item dropdown-toggle" href="#!">Profile</a>
								<ul class="dropdown-menu" data-bs-popper="none">
									<li> <a class="dropdown-item" href="my-profile.html">Feed</a> </li>
									<li> <a class="dropdown-item" href="my-profile-about.html">About</a> </li>
									<li> <a class="dropdown-item" href="my-profile-connections.html">Connections</a> </li>
									<li> <a class="dropdown-item" href="my-profile-media.html">Media</a> </li>
									<li> <a class="dropdown-item" href="my-profile-videos.html">Videos</a> </li>
									<li> <a class="dropdown-item" href="my-profile-events.html">Events</a> </li>
									<li> <a class="dropdown-item" href="my-profile-activity.html">Activity</a> </li>
								</ul>
							</li>
							<li> <a class="dropdown-item" href="events.html">Events</a></li>
							<li> <a class="dropdown-item" href="events-2.html">Events 2</a></li>
							<li> <a class="dropdown-item" href="event-details.html">Event details</a></li>
							<li> <a class="dropdown-item" href="event-details-2.html">Event details 2</a></li>
							<li> <a class="dropdown-item" href="groups.html">Groups</a></li>
							<li> <a class="dropdown-item" href="group-details.html">Group details</a></li>
							<li> <a class="dropdown-item" href="post-videos.html">Post videos</a></li>
							<li> <a class="dropdown-item" href="post-video-details.html">Post video details</a></li>
							<li> <a class="dropdown-item" href="post-details.html">Post details</a></li>
							<li> <a class="dropdown-item" href="video-details.html">Video details</a></li>
              <li> <a class="dropdown-item" href="blog.html">Blog</a></li>
							<li> <a class="dropdown-item" href="blog-details.html">Blog details</a></li>
              
							<!-- Dropdown submenu levels -->
							<li class="dropdown-divider"></li>
							<li class="dropdown-submenu dropend">
								<a class="dropdown-item dropdown-toggle" href="#">Dropdown levels</a>
								<ul class="dropdown-menu dropdown-menu-end" data-bs-popper="none">
									<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
									<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
									<!-- dropdown submenu open left -->
									<li class="dropdown-submenu dropstart">
										<a class="dropdown-item dropdown-toggle" href="#">Dropdown (start)</a>
										<ul class="dropdown-menu dropdown-menu-end" data-bs-popper="none">
											<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
											<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
										</ul>
									</li>
									<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
								</ul>
							</li>
						</ul>
					</li>

					<!-- Nav item 3 Post -->
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="postMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account </a>
						<ul class="dropdown-menu" aria-labelledby="postMenu">
              <li> <a class="dropdown-item" href="create-page.html">Create a page</a></li>
							<li> <a class="dropdown-item" href="settings.html">Settings</a> </li>
							<li> <a class="dropdown-item" href="notifications.html">Notifications</a> </li>
							<li> <a class="dropdown-item" href="help.html">Help center</a> </li>
							<li> <a class="dropdown-item" href="help-details.html">Help details</a> </li>
              <!-- dropdown submenu open left -->
              <li class="dropdown-submenu dropstart">
                <a class="dropdown-item dropdown-toggle" href="#">Authentication</a>
                <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="none">
                  <li> <a class="dropdown-item" href="sign-in.html">Sign in</a> </li>
                  <li> <a class="dropdown-item" href="sign-up.html">Sing up</a> </li>
                  <li> <a class="dropdown-item" href="forgot-password.html">Forgot password</a> </li>
                  <li class="dropdown-divider"></li>
                  <li> <a class="dropdown-item" href="sign-in-advance.html">Sign in advance</a> </li>
                  <li> <a class="dropdown-item" href="sign-up-advance.html">Sing up advance</a> </li>
                  <li> <a class="dropdown-item" href="forgot-password-advance.html">Forgot password advance</a> </li>
                </ul>
              </li>
              <li> <a class="dropdown-item" href="error-404.html">Error 404</a> </li>
              <li> <a class="dropdown-item" href="offline.html">Offline</a> </li>
              <li> <a class="dropdown-item" href="privacy-and-terms.html">Privacy & terms</a> </li>
						</ul>
					</li>

					<!-- Nav item 4 Mega menu -->
					<li class="nav-item">
						<a class="nav-link" href="my-profile-connections.html">My network</a>
					</li>
				</ul>
			</div>
			<!-- Main navbar END -->

			<!-- Nav right START -->
			<ul class="nav flex-nowrap align-items-center ms-sm-3 list-unstyled">
        <!-- Notification dropdown END -->
        <li class="nav-item ms-2 dropdown">
					<a class="nav-link btn icon-md p-0" href="#" id="profileDropdown" role="button" data-bs-auto-close="outside" data-bs-display="static" data-bs-toggle="dropdown" aria-expanded="false">
						<img class="avatar-img rounded-2" src="assets/images/avatar/07.jpg" alt="">
					</a>
          <ul class="dropdown-menu dropdown-animation dropdown-menu-end pt-3 small me-md-n3" aria-labelledby="profileDropdown">
            <!-- Profile info -->
            <li class="px-3">
              <div class="d-flex align-items-center position-relative">
                <!-- Avatar -->
                <div class="avatar me-3">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/07.jpg" alt="avatar">
                </div>
                <div>
                  <a class="h6 stretched-link" href="#">Lori Ferguson</a>
                  <p class="small m-0">Web Developer</p>
                </div>
              </div>
              <a class="dropdown-item btn btn-primary-soft btn-sm my-2 text-center" href="my-profile.html">View profile</a>
            </li>
            <!-- Links -->
            <li><a class="dropdown-item" href="settings.html"><i class="bi bi-gear fa-fw me-2"></i>Settings & Privacy</a></li>
            <li> 
              <a class="dropdown-item" href="https://support.webestica.com/" target="_blank">
                <i class="fa-fw bi bi-life-preserver me-2"></i>Support
              </a> 
            </li>
            <li> 
              <a class="dropdown-item" href="docs/index.html" target="_blank">
                <i class="fa-fw bi bi-card-text me-2"></i>Documentation
              </a> 
            </li>
            <li class="dropdown-divider"></li>
            <li><a class="dropdown-item bg-danger-soft-hover" href="sign-in-advance.html"><i class="bi bi-power fa-fw me-2"></i>Sign Out</a></li>
            <li> <hr class="dropdown-divider"></li>
            <!-- Dark mode switch START -->
            <li>
              <div class="modeswitch-wrap" id="darkModeSwitch">
                <div class="modeswitch-item">
                  <div class="modeswitch-icon"></div>
                </div>
                <span>Dark mode</span>
              </div>
            </li> 
            <!-- Dark mode switch END -->
          </ul>
				</li>
			  <!-- Profile START -->
        
			</ul>
			<!-- Nav right END -->
		</div>
	</nav>
	<!-- Logo Nav END -->
</header>
<!-- =======================
Header END -->

<!-- **************** MAIN CONTENT START **************** -->
<main> 

  <!-- Hero event START -->
  <section class="pt-5 pb-0 position-relative" style="background-image: url(assets/images/bg/07.jpg); background-repeat: no-repeat; background-size: cover; background-position: top center;">
  <div class="bg-overlay bg-dark opacity-8"></div>
    <!-- Container START -->
    <div class="container">
      <div class="pt-5">
        <div class="row position-relative">
          <div class="col-xl-8 col-lg-10 mx-auto pt-sm-5 text-center">
            <!-- Title -->
            <h1 class="text-white">Find events near you</h1>
            <p class="text-white">Let's uncover the best places to eat, drink, and shop nearest to you.</p>
            <div class="mx-auto bg-mode shadow rounded p-4 mt-5">
              <h5 class="mb-3 text-start">We will help you to find all</h5>
              <!-- Form START -->
              <form class="row g-3 justify-content-center">
                <div class="col-md-5">
                  <!-- What -->
                  <div class="input-group">
                    <input class="form-control form-control-lg me-1 pe-5" type="text" placeholder="What">
                  </div>
                </div>
                <div class="col-md-5">
                  <!-- Where -->
                  <div class="input-group">
                    <input class="form-control form-control-lg me-1 pe-5" type="text" placeholder="Where">
                    <a class="position-absolute top-50 end-0 translate-middle-y text-secondary px-3 z-index-9" href="#"> <i class="fa-solid fa-crosshairs"></i> </a>
                  </div>
                </div>
                <div class="col-md-2 d-grid">
                  <!-- Search -->
                  <a class="btn btn-lg btn-primary" href="#">Search</a>
                </div>
              </form>
              <!-- Form END -->
            </div>
          </div>
          <div class="mb-n5 mt-3 mt-lg-5">
            <div class="col-xl-9 col-lg-11 mx-auto">
              <!-- Category START -->
              <div class="d-md-flex gap-3 mt-5">
                <!-- Category item -->
                <a href="events.html" class="card card-body mb-3 mb-lg-0 p-3 text-center">
                  <img class="h-40px mb-3" src="assets/images/icon/badge-outline-filled.svg" alt="">
                  <h6>Arts & Entertainment</h6>
                </a>
                <!-- Category item -->
                <a href="events.html" class="card card-body mb-3 mb-lg-0 p-3 text-center">
                  <img class="h-40px mb-3" src="assets/images/icon/clipboard-outline-filled.svg" alt="">
                  <h6> Business & Conferences</h6>
                </a>
                <!-- Category item -->
                <a href="events.html" class="card card-body mb-3 mb-lg-0 p-3 text-center">
                  <img class="h-40px mb-3" src="assets/images/icon/home-outline-filled.svg" alt="">
                  <h6>PNY E-Gaming Fest</h6>
                </a>
                <!-- Category item -->
                <a href="events.html" class="card card-body mb-3 mb-lg-0 p-3 text-center">
                  <img class="h-40px mb-3" src="assets/images/icon/clock-outline-filled.svg" alt="">
                  <h6>Events & Parties</h6>
                </a>
                <!-- Category item -->
                <a href="events.html" class="card card-body mb-3 mb-lg-0 p-3 text-center">
                  <img class="h-40px mb-3" src="assets/images/icon/imac-outline-filled.svg" alt="">
                  <h6>Sports & Wellness</h6>
                </a>
              </div>
              <!-- Category END -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section> 
  <!-- Hero event END -->

  <!-- Discover Events START -->
  <section class="bg-mode py-5">
    <div class="container pt-5">
      <div class="row">
        <div class="col-12 mb-3">
          <div class="d-sm-flex justify-content-between">
            <!-- Title -->
            <h4>Discover Events </h4>
            <a class="btn btn-link" href="events-2.html">View all events</a>
          </div>
        </div>
      </div>
      <div class="row g-4">
        <div class="col-sm-6 col-lg-3">
          <!-- Event item START -->
          <div class="card h-100">
            <div class="position-relative">
              <img class="img-fluid rounded-top" src="assets/images/events/01.jpg" alt="">
              <div class="badge bg-danger text-white mt-2 me-2 position-absolute top-0 end-0">
                Online
              </div>
            </div>
            <!-- Card body START -->
            <div class="card-body position-relative pt-0">
              <!-- Tag -->
              <a class="btn btn-xs btn-primary mt-n3" href="event-details-2.html">Spa training </a>
              <h5 class="mt-3"> <a href="event-details-2.html"> Bone thugs-n-harmony </a> </h5>
              <!-- Date time -->
              <p class="mb-0 small"> <i class="bi bi-calendar-check pe-1"></i> Mon, Sep 25, 2020 at 9:30 AM </p>
              <p class="small"> <i class="bi bi-geo-alt pe-1"></i> San francisco </p>
              <!-- Avatar group START -->
              <ul class="avatar-group list-unstyled align-items-center mb-0">
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/04.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <div class="avatar-img rounded-circle bg-primary"><span class="smaller text-white position-absolute top-50 start-50 translate-middle">+78</span></div>
                </li>
                <li class="ms-3">
                  <small> are attending</small>
                </li>
              </ul>
              <!-- Avatar group END -->
              <!-- Button -->
              <div class="d-flex mt-3 justify-content-between">
                <!-- Interested button -->
                <div class="w-100">
                  <input type="checkbox" class="btn-check d-block" id="Interested1">
                  <label class="btn btn-sm btn-outline-success d-block" for="Interested1"><i class="fa-solid fa-thumbs-up me-1"></i> Interested</label>
                </div>
                <div class="dropdown ms-3">
                  <a href="#" class="btn btn-sm btn-primary-soft" id="eventActionShare" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-share-fill"></i>
                  </a>
                  <!-- Dropdown menu -->
                  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="eventActionShare">
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-envelope fa-fw pe-1"></i> Send via Direct Message</a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-bookmark-check fa-fw pe-1"></i> Share to News Feed </a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-people fa-fw pe-1"></i> Share to a group</a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-share fa-fw pe-1"></i> Share post via …</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-person fa-fw pe-1"></i> Share on a friend's profile</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- Card body END -->
        </div>
        <!-- Event item END -->
        </div>
        <div class="col-sm-6 col-lg-3">
          <!-- Event item START -->
          <div class="card h-100">
            <div class="position-relative">
              <img class="img-fluid rounded-top" src="assets/images/events/02.jpg" alt="">
              <div class="badge bg-danger text-white mt-2 me-2 position-absolute top-0 end-0">
                Hotel
              </div>
            </div>
            <!-- Card body START -->
            <div class="card-body position-relative pt-0">
              <!-- Tag -->
              <a class="btn btn-xs btn-primary mt-n3" href="event-details-2.html">Photography Workshop</a>
              <h5 class="mt-3"> <a href="event-details-2.html"> Decibel magazine </a> </h5>
              <!-- Date time -->
              <p class="mb-0 small"> <i class="bi bi-calendar-check pe-1"></i> Mon, Aug 10, 2022 at 9:30 AM </p>
              <p class="small"> <i class="bi bi-geo-alt pe-1"></i> London </p>
              <!-- Avatar group START -->
              <ul class="avatar-group list-unstyled align-items-center mb-0">
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/05.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/06.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <div class="avatar-img rounded-circle bg-primary"><span class="smaller text-white position-absolute top-50 start-50 translate-middle">+34</span></div>
                </li>
                <li class="ms-3">
                  <small> are attending</small>
                </li>
              </ul>
              <!-- Avatar group END -->
              <!-- Button -->
              <div class="d-flex mt-3 justify-content-between">
                <!-- Interested button -->
                <div class="w-100">
                  <input type="checkbox" class="btn-check d-block" id="Interested2" checked>
                  <label class="btn btn-sm btn-outline-success d-block" for="Interested2"><i class="fa-solid fa-thumbs-up me-1"></i> Interested</label>
                </div>
                <div class="dropdown ms-3">
                  <a href="#" class="btn btn-sm btn-primary-soft" id="eventActionShare2" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-share-fill"></i>
                  </a>
                  <!-- Dropdown menu -->
                  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="eventActionShare2">
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-envelope fa-fw pe-1"></i> Send via Direct Message</a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-bookmark-check fa-fw pe-1"></i> Share to News Feed </a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-people fa-fw pe-1"></i> Share to a group</a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-share fa-fw pe-1"></i> Share post via …</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-person fa-fw pe-1"></i> Share on a friend's profile</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- Card body END -->
        </div>
        <!-- Event item END -->
        </div>
        <div class="col-sm-6 col-lg-3">
          <!-- Event item START -->
          <div class="card h-100">
            <div class="position-relative">
              <img class="img-fluid rounded-top" src="assets/images/events/03.jpg" alt="">
              <div class="badge bg-danger text-white mt-2 me-2 position-absolute top-0 end-0">
                Online
              </div>
            </div>
            <!-- Card body START -->
            <div class="card-body position-relative pt-0">
              <!-- Tag -->
              <a class="btn btn-xs btn-primary mt-n3" href="event-details-2.html">Conference</a>
              <h5 class="mt-3"> <a href="event-details-2.html"> Illenium: fallen embers tour </a> </h5>
              <!-- Date time -->
              <p class="mb-0 small"> <i class="bi bi-calendar-check pe-1"></i> Sun, Sep 23, 2022 at 12:00 PM </p>
              <p class="small"> <i class="bi bi-geo-alt pe-1"></i> Mumbai </p>
              <!-- Avatar group START -->
              <ul class="avatar-group list-unstyled align-items-center mb-0">
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/06.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/07.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/08.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <div class="avatar-img rounded-circle bg-primary"><span class="smaller text-white position-absolute top-50 start-50 translate-middle">+65</span></div>
                </li>
                <li class="ms-3">
                  <small> are attending</small>
                </li>
              </ul>
              <!-- Avatar group END -->
              <!-- Button -->
              <div class="d-flex mt-3 justify-content-between">
                <!-- Interested button -->
                <div class="w-100">
                  <input type="checkbox" class="btn-check d-block" id="Interested3">
                  <label class="btn btn-sm btn-outline-success d-block" for="Interested3"><i class="fa-solid fa-thumbs-up me-1"></i> Interested</label>
                </div>
                <div class="dropdown ms-3">
                  <a href="#" class="btn btn-sm btn-primary-soft" id="eventActionShare3" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-share-fill"></i>
                  </a>
                  <!-- Dropdown menu -->
                  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="eventActionShare3">
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-envelope fa-fw pe-1"></i> Send via Direct Message</a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-bookmark-check fa-fw pe-1"></i> Share to News Feed </a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-people fa-fw pe-1"></i> Share to a group</a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-share fa-fw pe-1"></i> Share post via …</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-person fa-fw pe-1"></i> Share on a friend's profile</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- Card body END -->
        </div>
        <!-- Event item END -->
      </div>
      <div class="col-sm-6 col-lg-3">
          <!-- Event item START -->
          <div class="card h-100">
            <div class="position-relative">
              <img class="img-fluid rounded-top" src="assets/images/events/04.jpg" alt="">
            </div>
            <!-- Card body START -->
            <div class="card-body position-relative pt-0">
              <!-- Tag -->
              <a class="btn btn-xs btn-primary mt-n3" href="event-details-2.html">Live show</a>
              <h5 class="mt-3"> <a href="event-details-2.html"> Comedy on the green </a> </h5>
              <!-- Date time -->
              <p class="mb-0 small"> <i class="bi bi-calendar-check pe-1"></i> Fri, Oct 05, 2022 at 1:00 AM </p>
              <p class="small"> <i class="bi bi-geo-alt pe-1"></i> Miami </p>
              <!-- Avatar group START -->
              <ul class="avatar-group list-unstyled align-items-center mb-0">
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/06.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <img class="avatar-img rounded-circle" src="assets/images/avatar/04.jpg" alt="avatar">
                </li>
                <li class="avatar avatar-xs">
                  <div class="avatar-img rounded-circle bg-primary"><span class="smaller text-white position-absolute top-50 start-50 translate-middle">+56</span></div>
                </li>
                <li class="ms-3">
                  <small> are attending</small>
                </li>
              </ul>
              <!-- Avatar group END -->
              <!-- Button -->
              <div class="d-flex mt-3 justify-content-between">
                <!-- Interested button -->
                <div class="w-100">
                  <input type="checkbox" class="btn-check d-block" id="Interested4" checked>
                  <label class="btn btn-sm btn-outline-success d-block" for="Interested4"><i class="fa-solid fa-thumbs-up me-1"></i> Interested</label>
                </div>
                <div class="dropdown ms-3">
                  <a href="#" class="btn btn-sm btn-primary-soft" id="eventActionShare4" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-share-fill"></i>
                  </a>
                  <!-- Dropdown menu -->
                  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="eventActionShare4">
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-envelope fa-fw pe-1"></i> Send via Direct Message</a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-bookmark-check fa-fw pe-1"></i> Share to News Feed </a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-people fa-fw pe-1"></i> Share to a group</a></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-share fa-fw pe-1"></i> Share post via …</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#"> <i class="bi bi-person fa-fw pe-1"></i> Share on a friend's profile</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- Card body END -->
          </div>
          <!-- Event item END -->
        </div>
      </div>
    </div>
  </section>
  <!-- Discover Events END -->

  <!-- Book conference START -->
  <section class="bg-mode pt-0 pt-lg-5">
    <div class="container">
      <div class="row g-4 justify-content-between">
        <div class="col-lg-5">
          <!-- Global conference START -->
          <!-- Image -->
          <a href="event-details-2.html"><img class="rounded" src="assets/images/events/06.jpg" alt=""></a>
          <!-- Info -->
          <h5 class="mt-4"> <a href="event-details-2.html"> Global conference </a></h5>
          <p>He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty gay assistance joy.</p>
          <!-- Avatar group -->
          <ul class="avatar-group list-unstyled align-items-center mb-0">
            <li class="avatar avatar-xs">
              <img class="avatar-img rounded-circle" src="assets/images/avatar/05.jpg" alt="avatar">
            </li>
            <li class="avatar avatar-xs">
              <img class="avatar-img rounded-circle" src="assets/images/avatar/06.jpg" alt="avatar">
            </li>
            <li class="avatar avatar-xs">
              <div class="avatar-img rounded-circle bg-primary"><span class="smaller text-white position-absolute top-50 start-50 translate-middle">+34</span></div>
            </li>
            <li class="ms-3">
              <small> are attending</small>
            </li>
          </ul>
          <!-- Global conference END -->
        </div>
        <div class="col-lg-6">
          <!-- Book a conference START -->
          <h4 class="mb-4">Book a conference</h4>
          <div class="bg-light dashed p-4 rounded">
            <div class="row g-4 justify-content-between">
              <div class="col-sm-7">
                <div class="row g-3">
                  <!-- Date -->
                  <div class="col-6">
                    <small>Date</small>
                    <h6>12 june, 2022</h6>
                  </div>
                  <!-- Time -->
                  <div class="col-6">
                    <small>Time</small>
                    <h6>🌞Morning 10AM</h6>
                  </div>
                  <!-- Address -->
                  <div class="col-12">
                    <small>Address</small>
                    <h6>2492 Centennial NW, Acworth, GA, 30102</h6>
                  </div>
                  <div class="col-12">
                    <a class="btn btn-white" href="#"><i class="bi bi-share-fill pe-2"></i> Share </a>
                  </div>
                </div>
              </div>
              <div class="col-sm-5 text-center">
                <div class="ticket-border">
                  <!-- QR code -->
                <img class="w-200px mx-auto" src="assets/images/qr-code.png" alt="">
                <a class="btn btn-primary mt-3" href="#"><i class="bi bi-ticket-fill pe-2"></i> Book now </a>
              </div>
              </div>
            </div>
          </div>
          <!-- Book a conference END -->
        </div>
      </div>
    </div>
  </section>
  <!-- Book conference END -->

  <!-- Top Destinations START -->
  <section class="bg-mode pb-5 pt-0 pt-lg-5">
    <div class="container">
      <div class="row">
        <div class="col-12 mb-3">
          <!-- Title -->
          <h4>Top Destinations </h4>
        </div>
      </div>
      <div class="row g-4">
        <div class="col-sm-6 col-lg-3">
          <!-- Card START -->
          <div class="card card-overlay-bottom card-img-scale">
            <!-- Card Image -->
            <img class="card-img" src="assets/images/albums/02.jpg" alt="">
            <!-- Card Image overlay -->
            <div class="card-img-overlay d-flex flex-column p-3 p-sm-4">
              <div class="w-100 mt-auto">
                <!-- Card title -->
                <h5 class="text-white"><a href="#" class="btn-link text-reset stretched-link">California</a></h5>
                <!-- Card info -->
                <span class="text-white small">Business & Conferences</span>
              </div>
            </div>
          </div>
          <!-- Card END -->
        </div>
        <div class="col-sm-6 col-lg-3">
          <!-- Card START -->
          <div class="card card-overlay-bottom card-img-scale">
            <!-- Card Image -->
            <img class="card-img" src="assets/images/albums/04.jpg" alt="">
            <!-- Card Image overlay -->
            <div class="card-img-overlay d-flex flex-column p-3 p-sm-4">
              <div class="w-100 mt-auto">
                <!-- Card title -->
                <h5 class="text-white"><a href="#" class="btn-link text-reset stretched-link">Los Angeles</a></h5>
                <!-- Card info -->
                <span class="text-white small">Events & Parties</span>
              </div>
            </div>
          </div>
          <!-- Card END -->
        </div>
        <div class="col-sm-6 col-lg-3">
          <!-- Card START -->
          <div class="card card-overlay-bottom card-img-scale">
            <!-- Card Image -->
            <img class="card-img" src="assets/images/albums/05.jpg" alt="">
            <!-- Card Image overlay -->
            <div class="card-img-overlay d-flex flex-column p-3 p-sm-4">
              <div class="w-100 mt-auto">
                <!-- Card title -->
                <h5 class="text-white"><a href="#" class="btn-link text-reset stretched-link">London</a></h5>
                <!-- Card info -->
                <span class="text-white small">Arts & Entertainment</span>
              </div>
            </div>
          </div>
          <!-- Card END -->
        </div>
        <div class="col-sm-6 col-lg-3">
          <!-- Card START -->
          <div class="card card-overlay-bottom card-img-scale">
            <!-- Card Image -->
            <img class="card-img" src="assets/images/albums/01.jpg" alt="">
            <!-- Card Image overlay -->
            <div class="card-img-overlay d-flex flex-column p-3 p-sm-4">
              <div class="w-100 mt-auto">
                <!-- Card title -->
                <h5 class="text-white"><a href="#" class="btn-link text-reset stretched-link">London</a></h5>
                <!-- Card info -->
                <span class="text-white small">Arts & Entertainment</span>
              </div>
            </div>
          </div>
          <!-- Card END -->
        </div>
      </div>
    </div>
  </section>
  <!-- Top Destinations END -->

  <!-- Explore Groups START -->
  <section class="pt-5 pb-5">
    <div class="container">
      <div class="row">
        <div class="col-12 mb-3">
          <!-- Title -->
          <h4>Explore Groups </h4>
        </div>
      </div>
      <div class="row g-4">
        <div class="col-md-4">
          <!-- Card START -->
          <div class="card">
            <div class="h-80px rounded-top" style="background-image:url(assets/images/bg/01.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;"></div>
              <!-- Card body START -->
              <div class="card-body text-center pt-0">
                <!-- Avatar -->
                <div class="avatar avatar-lg mt-n5 mb-3">
                  <a href="group-details.html"><img class="avatar-img rounded-circle border border-white border-3 bg-mode" src="assets/images/logo/08.svg" alt=""></a>
                </div>
                <!-- Info -->
                <h5 class="mb-0"> <a href="group-details.html">All in the Mind</a> </h5>
                <small> <i class="bi bi-lock pe-1"></i> Private Group</small>
                <!-- Group stat START -->
                <div class="hstack gap-2 gap-xl-3 justify-content-center mt-3">
                  <!-- Group stat item -->
                  <div>
                    <h6 class="mb-0">32k</h6>
                    <small>Members</small>
                  </div>
                  <!-- Divider -->
                  <div class="vr"></div>
                  <!-- Group stat item -->
                  <div>
                    <h6 class="mb-0">20</h6>
                    <small>Post per day</small>
                  </div>
                </div>
                <!-- Group stat END -->
                <!-- Avatar group START -->
                <ul class="avatar-group list-unstyled align-items-center justify-content-center mb-0 mt-3">
                  <li class="avatar avatar-xs">
                    <img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
                  </li>
                  <li class="avatar avatar-xs">
                    <img class="avatar-img rounded-circle" src="assets/images/avatar/03.jpg" alt="avatar">
                  </li>
                  <li class="avatar avatar-xs">
                    <img class="avatar-img rounded-circle" src="assets/images/avatar/04.jpg" alt="avatar">
                  </li>
                  <li class="avatar avatar-xs">
                    <img class="avatar-img rounded-circle" src="assets/images/avatar/05.jpg" alt="avatar">
                  </li>
                  <li class="avatar avatar-xs">
                    <div class="avatar-img rounded-circle bg-primary"><span class="smaller text-white position-absolute top-50 start-50 translate-middle">+22</span></div>
                  </li>
                </ul>
                <!-- Avatar group END -->
            </div>
            <!-- Card body END -->
          </div>
          <!-- Card END -->
        </div>
        <div class="col-md-4">
          <!-- Card START -->
          <div class="card">
            <div class="h-80px rounded-top" style="background-image:url(assets/images/bg/02.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;"></div>
              <!-- Card body START -->
              <div class="card-body text-center pt-0">
                <!-- Avatar -->
                <div class="avatar avatar-lg mt-n5 mb-3">
                  <a href="group-details.html"><img class="avatar-img rounded-circle border border-white border-3 bg-mode" src="assets/images/logo/02.svg" alt=""></a>
                </div>
                <!-- Info -->
                <h5 class="mb-0"><a href="group-details.html">Beauty queens</a></h5>
                <small> <i class="bi bi-globe pe-1"></i> Public Group</small>
                <!-- Group stat START -->
                <div class="hstack gap-2 gap-xl-3 justify-content-center mt-3">
                  <!-- Group stat item -->
                  <div>
                    <h6 class="mb-0">23k</h6>
                    <small>Members</small>
                  </div>
                  <!-- Divider -->
                  <div class="vr"></div>
                  <!-- Group stat item -->
                  <div>
                    <h6 class="mb-0">12</h6>
                    <small>Post per day</small>
                  </div>
                </div>
                <!-- Group stat END -->
                <!-- Avatar group START -->
                <ul class="avatar-group list-unstyled align-items-center justify-content-center mb-0 mt-3">
                  <li class="avatar avatar-xs">
                    <img class="avatar-img rounded-circle" src="assets/images/avatar/06.jpg" alt="avatar">
                  </li>
                  <li class="avatar avatar-xs">
                    <img class="avatar-img rounded-circle" src="assets/images/avatar/07.jpg" alt="avatar">
                  </li>
                  <li class="avatar avatar-xs">
                    <img class="avatar-img rounded-circle" src="assets/images/avatar/09.jpg" alt="avatar">
                  </li>
                  <li class="avatar avatar-xs">
                    <div class="avatar-img rounded-circle bg-primary"><span class="smaller text-white position-absolute top-50 start-50 translate-middle">+13</span></div>
                  </li>
                </ul>
                <!-- Avatar group END -->
            </div>
            <!-- Card body END -->
          </div>
          <!-- Card END -->
        </div>
        <div class="col-md-4">
          <!-- Card START -->
          <div class="card">
            <div class="h-80px rounded-top" style="background-image:url(assets/images/bg/03.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;"></div>
              <!-- Card body START -->
              <div class="card-body text-center pt-0">
                <!-- Avatar -->
                <div class="avatar avatar-lg mt-n5 mb-3">
                  <a href="group-details.html"><img class="avatar-img rounded-circle border border-white border-3 bg-mode" src="assets/images/logo/09.svg" alt=""></a>
                </div>
                <!-- Info -->
                <h5 class="mb-0"> <a href="group-details.html">Eternal triangle</a></h5>
                <small> <i class="bi bi-globe pe-1"></i> Public Group</small>
                <!-- Group stat START -->
                <div class="hstack gap-2 gap-xl-3 justify-content-center mt-3">
                  <!-- Group stat item -->
                  <div>
                    <h6 class="mb-0">45k</h6>
                    <small>Members</small>
                  </div>
                  <!-- Divider -->
                  <div class="vr"></div>
                  <!-- Group stat item -->
                  <div>
                    <h6 class="mb-0">16</h6>
                    <small>Post per day</small>
                  </div>
                </div>
                <!-- Group stat END -->
                <!-- Avatar group START -->
                <ul class="avatar-group list-unstyled align-items-center justify-content-center mb-0 mt-3">
                  <li class="avatar avatar-xs">
                    <img class="avatar-img rounded-circle" src="assets/images/avatar/11.jpg" alt="avatar">
                  </li>
                  <li class="avatar avatar-xs">
                    <img class="avatar-img rounded-circle" src="assets/images/avatar/10.jpg" alt="avatar">
                  </li>
                  <li class="avatar avatar-xs">
                    <div class="avatar-img rounded-circle bg-primary"><span class="smaller text-white position-absolute top-50 start-50 translate-middle">+12</span></div>
                  </li>
                </ul>
                <!-- Avatar group END -->
            </div>
            <!-- Card body END -->
          </div>
          <!-- Card END -->
        </div>
      </div>
    </div>
  </section>
  <!-- Explore Groups END -->

</main>
<!-- **************** MAIN CONTENT END **************** -->

<!-- Footer START -->
<footer class="pt-5 bg-mode">
  <div class="container pt-4">
    <div class="row g-4">
      <div class="col-sm-6 col-lg-3">
        <!-- Footer Widget -->
        <img src="assets/images/logo.svg" alt="">
        <p class="mt-3">Match way these she avoids seeing death their fat off. </p>
      </div>
      <div class="col-sm-6 col-lg-3">
        <!-- Footer Widget -->
        <h5 class="mb-4">Download</h5>
        <ul class="nav flex-column">
          <li class="nav-item"><a class="nav-link pt-0" href="#"> <i class="bi bi-globe fa-fw pe-2"></i>Web Browser</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> <i class="bi bi-windows fa-fw pe-2"></i>Windows</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> <i class="bi bi-apple fa-fw pe-2"></i>macOS</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> <i class="bi bi-phone fa-fw pe-2"></i>iOS & Android</a></li>
        </ul>
      </div>
      <div class="col-sm-6 col-lg-3">
        <!-- Footer Widget -->
        <h5 class="mb-4">About</h5>
        <ul class="nav flex-column">
          <li class="nav-item"><a class="nav-link pt-0" href="#"> About social</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Security</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Customer Support</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Partners</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Careers - <b> Join Us! </b></a></li>
        </ul>
      </div>
      <div class="col-sm-6 col-lg-3">
        <!-- Footer Widget -->
        <h5 class="mb-4">Resources</h5>
        <ul class="nav flex-column">
          <li class="nav-item"><a class="nav-link pt-0" href="#"> Join</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Help Center</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Developers</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Status</a></li>
          <li class="nav-item"><a class="nav-link" href="#"> Communities </a></li>
        </ul>
      </div>
    </div>
  </div>
  <hr class="mb-0 mt-5">
  <div class="bg- light py-3">
    <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <!-- Footer nav START -->
          <ul class="nav justify-content-center justify-content-lg-start lh-1">
            <li class="nav-item">
              <a class="nav-link ps-0" href="#">Support </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" target="_blank" href="docs/index.html">Docs </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Terms of Use</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Privacy &amp; terms</a>
            </li>
          </ul>
          <!-- Footer nav START -->
        </div>
        <div class="col-lg-6">
          <!-- Copyright START -->
          <p class="text-center text-lg-end mb-0">©2022 <a class="text-body" target="_blank" href="https://www.webestica.com/"> Webestica </a>All rights reserved.</p>
          <!-- Copyright END -->
        </div>
      </div>
    </div>
  </div>
</footer>
<!-- Footer END -->

<!-- =======================
JS libraries, plugins and custom scripts -->

<!-- Bootstrap JS -->
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<!-- Template Functions -->
<script src="assets/js/functions.js"></script>
  
</body>

<!-- Mirrored from social.webestica.com/index-event.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 09 Feb 2023 03:43:25 GMT -->
</html>