<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Listing Page
    </title>
    <link rel="icon" href="./images/icon.jpeg" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <script src="https://kit.fontawesome.com/bb4b9dd0bd.js" crossorigin="anonymous">
      
    </script>
    <link rel="stylesheet" href="/css/listing-page.css" />

  </head>
  <body>
    <!-- Navbar -->

    <nav class="navbar  navbar-expand-lg bg-white bg-gradient  sticky-top nav_bg ">
      <div class="container-fluid">
        <a href="" class="mx-5 nav_logo">          <img src="../images/logo.png" alt="" /></a>

        <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 class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mx-auto  mb-2 mb-lg-0 border-1 gap-lg-1 gap-md-1  nav_menu">
            <li class="nav-item">
              <a class="nav-link  text-secondary nav_link" aria-current="page" href="./index.html">Home</a>
            </li>

            <li class="nav-item">
              <a
                class="nav-link active text-success nav_link .nav_link.active"
                aria-current="page"
                href="./index.html"
              >Find a roommate</a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-secondary nav_link" href="./pages/about.html">List your room</a>
            </li>

            <li class="nav-item">
              <a class="nav-link  text-secondary nav_link" aria-current="page" href="./index.html">Blog</a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-secondary nav_link" href="./pages/contact.html">Contact Us</a>
            </li>

          </ul>
        </div>

        <div class="collapse navbar-collapse nav_profile" id="navbarSupportedContent">
          <ul class="navbar-nav  mx-auto   mb-2 mb-lg-0 mx-5 gap-lg-1 gap-md-1">

            <li class="nav-item">
              <a class="nav-link text-secondary" href="">
                <i class="fa-solid fa-envelope text-secondary nav_link"></i>
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-secondary " href="">
                <i class="fa-regular fa-bell text-secondary nav_link"></i>
              </a>
            </li>

            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle nav_link"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <img src="/images/profile-image.png" alt="" width="15%" />
                Aramide.A
                      </a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item nav_link" href="#">Action</a>
                </li>
                <li>
                  <a class="dropdown-item nav_link" href="#">Another action</a>
                </li>
                <li>
                  <a class="dropdown-item nav_link" href="#">Something else here</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Hero section -->
    <div class="hero-section container-fluid">
      <div class="">
        <h1 class=" fw-bold text-white text-center hero-tag">
          Find Your Perfect Roommate
        </h1>
      </div>
    </div>

    <div class="main mx-auto" style="max-width: 1240px">

      <!-- search/filter section -->
      <div class="header">

        <div class="d-flex justify-content-center gap-2 mt-5 search_school">
          <div class="btn-group" role="group">
            <button
              type="button"
              class="btn btn-white border-1 border-secondary"
              data-bs-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              <i class="material-icons icon_alignment">filter_list</i>Filter
            </button>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item" href="#">Price</a>
              </li>
              <li>
                <a class="dropdown-item" href="#">Location</a>
              </li>
            </ul>
          </div>

          <div class=" ">
            <div class="input-group input-group-lg search_input">
              <span class="input-group-text search_icon" id="basic-addon1">                <i class="fas fa-search"></i></span>
              <input
                type="text"
                class="form-control search_bar"
                placeholder="Search your school"
                aria-label="Username"
                aria-describedby="basic-addon1"
              />
            </div>
          </div>

        </div>
        <p class="mt-3 search_result">
          Search results in <span>Agbowo, University of Ibadan</span>
        </p>

        <div class="d-flex justify-content-between">
          <div class="">
            <p>
              University of Ibadan
            </p>
          </div>

          <div>
            <div class="btn-group mb-3" role="group">
              <button
                type="button"
                class="btn btn-white border-1 border-secondary"
                data-bs-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                Sort by<i class="material-icons icon_alignment">swap_vert</i>
              </button>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item" href="#">Price</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Location</a>
                </li>
              </ul>
            </div>

          </div>

        </div>

        <!-- Tab Navigation for post -->
        <div>
          <ul class="nav nav-tabs nav-underline" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button
                class="nav-link text-success active btn_best_match"
                id="best-tab"
                data-bs-toggle="tab"
                data-bs-target="#best-tab-pane"
                type="button"
                role="tab"
                aria-controls="best-tab-pane"
                aria-selected="true"
              >Best Match</button>
            </li>
            <li class="nav-item" role="presentation">
              <button
                class="nav-link btn_recent_match"
                id="recent-tab"
                data-bs-toggle="tab"
                data-bs-target="#recent-tab-pane"
                type="button"
                role="tab"
                aria-controls="recent-tab-pane"
                aria-selected="false"
              >Most Recent</button>
            </li>
            <li class="nav-item" role="presentation">
              <button
                class="nav-link btn_saved"
                id="saved-tab"
                data-bs-toggle="tab"
                data-bs-target="#saved-tab-pane"
                type="button"
                role="tab"
                aria-controls="saved-tab-pane"
                aria-selected="false"
              >Saved</button>
            </li>

          </ul>
          <div class="tab-content mt-3" id="myTabContent">
            <div
              class="tab-pane fade show active"
              id="best-tab-pane"
              role="tabpanel"
              aria-labelledby="best-tab"
              tabindex="0"
            >
              100 roomates matches your result...
            </div>
            <div
              class="tab-pane fade"
              id="recent-tab-pane"
              role="tabpanel"
              aria-labelledby="recent-tab"
              tabindex="0"
            >
              ...
            </div>
            <div
              class="tab-pane fade"
              id="saved-tab-pane"
              role="tabpanel"
              aria-labelledby="saved-tab"
              tabindex="0"
            >
              ...
            </div>

          </div>
        </div>

      </div>

      <!-- property details -->
      <div class="mx-auto  mt-5 mb-5 property_details ">
        <div class="card listing_box">

          <p class="pt-3 mx-3 mb-1 post_date">
            Posted 2 days ago
          </p>
          <div class="d-flex mx-auto justify-content-between  gap-5 ">
            <div class="">

              <div class="image_container">

                <div class="image-container">
                  <img src="/images/a.png" alt="hostel" class="listing_img" />
                  <div class="verified-badge">

                    <div>
                      <p class="gender">
                        Girls
                      </p>
                    </div>
                  </div>
                  <p class="favorite">
                    <i class="fa-solid fa-heart"></i>
                  </p>

                  <div>
                    <p class="user_verified">
                      <i class="material-icons icon_alignment ">verified</i>User Verified
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div class="listing_description">
              <p id="school_name">
                University of Lagos
              </p>

              <div class="d-flex justify-content-between">
                <h3 id="hostel_name">
                  Moremi Hostel
                </h3>

                <h4 id="room_no">
                  Room A3
                </h4>
              </div>

              <div class="d-flex gap-2 room_size">
                <p>
                  4 bed space
                </p>
                <p>
                  1 available
                </p>
              </div>

              <p id="hostel_description">
                Moremi Hostel is located at 34, Akoka, street, 
                just a five-minutes walk from university of Lagos.
                The room at Moremi Hostel offers a cozy, comfortable 
                setting perfect for students seeking a convenient place to stay near the University of Lagos. 
                <a href="">View more</a>
              </p>

              <div class="d-flex gap-2 image_grid">
                <img
                  src="/images/Photo_of_a_Spanish_house_near_the_coast__S85530654_St100_G3.png"
                  alt=""
                  id="image_list"
                />
                <img src="/images/Spanish_house_at_the_coast__S1562583659_St50_G7.png" alt="" id="image_list" />
                <img
                  src="/images/Photo_of_a_Spanish_house_near_the_coast__S85530656_St100_G3.png"
                  alt=""
                  id="image_list"
                />
                <img src="/images/test.png" alt="" id="image_list" />
                <img src="/images/Group 1309.png" alt="" id="image_list" />
              </div>
            </div>

            <div class=" amenities">
              <h4 class="text-danger fw-bold mx-2">
                ₦170,000 <sub>/bed space</sub>
              </h4>

              <div class="">
                <h2 class="mx-2">
                  Amenities
                </h2>

                <ol class="list_item">
                  <li class="li-amenites">
                    <img src="/images/game-icons_tap.png" alt="" class="mx-2" />Borehole
                  </li>
                  <li class="li-amenites">
                    <img src="/images/mdi_wardrobe.png" alt="" class="mx-2" />Wardrobe
                  </li>
                  <li class="li-amenites">
                    <img src="/images/Vector (4).png" alt="" class="mx-2" />Generator
                  </li>
                  <li class="li-amenites">
                    <img src="/images/Vector (5).png" alt="" class="mx-2" />Security
                  </li>
                </ol>
              </div>

              <button class="text-center text-white amenities_btn mx-2">View</button>
            </div>
          </div>
        </div>
      </div>

      <!--Temporary property details just for static view -->
      <div class="mx-auto  mt-5 mb-5 property_details ">
        <div class="card listing_box">

          <p class="pt-3 mx-3 mb-1 post_date">
            Posted 2 days ago
          </p>
          <div class="d-flex mx-auto justify-content-between  gap-5 ">
            <div class="">

              <div class="image_container">

                <div class="image-container">
                  <img src="/images/a (1).png" alt="hostel" class="listing_img" />
                  <div class="verified-badge">

                    <div>
                      <p class="gender">
                        Boys
                      </p>
                    </div>
                  </div>
                  <p class="favorite">
                    <i class="fa-solid fa-heart"></i>
                  </p>

                  <div>
                    <p class="user_verified">
                      <i class="material-icons icon_alignment ">verified</i>User Verified
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div class="listing_description">
              <p id="school_name">
                University of Lagos
              </p>

              <div class="d-flex justify-content-between">
                <h3 id="hostel_name">
                  Moremi Hostel
                </h3>

                <h4 id="room_no">
                  Room A3
                </h4>
              </div>

              <div class="d-flex gap-2 room_size">
                <p>
                  4 bed space
                </p>
                <p>
                  1 available
                </p>
              </div>

              <p id="hostel_description">
                Moremi Hostel is located at 34, Akoka, street, 
                just a five-minutes walk from university of Lagos.
                The room at Moremi Hostel offers a cozy, comfortable 
                setting perfect for students seeking a convenient place to stay near the University of Lagos. 
                <a href="">View more</a>
              </p>

              <div class="d-flex gap-2 image_grid">
                <img
                  src="/images/Photo_of_a_Spanish_house_near_the_coast__S85530654_St100_G3.png"
                  alt=""
                  id="image_list"
                />
                <img src="/images/Spanish_house_at_the_coast__S1562583659_St50_G7.png" alt="" id="image_list" />
                <img
                  src="/images/Photo_of_a_Spanish_house_near_the_coast__S85530656_St100_G3.png"
                  alt=""
                  id="image_list"
                />
                <img src="/images/test.png" alt="" id="image_list" />
                <img src="/images/Group 1309.png" alt="" id="image_list" />
              </div>
            </div>

            <div class=" amenities">
              <h4 class="amenities_price fw-bold mx-2">
                ₦170,000 <sub>/bed space</sub>
              </h4>

              <div class="">
                <h2 class="mx-2">
                  Amenities
                </h2>

                <ol class="list_item">
                  <li class="li-amenites">
                    <img src="/images/game-icons_tap.png" alt="" class="mx-2" />Borehole
                  </li>
                  <li class="li-amenites">
                    <img src="/images/mdi_wardrobe.png" alt="" class="mx-2" />Wardrobe
                  </li>
                  <li class="li-amenites">
                    <img src="/images/Vector (4).png" alt="" class="mx-2" />Generator
                  </li>
                  <li class="li-amenites">
                    <img src="/images/Vector (5).png" alt="" class="mx-2" />Security
                  </li>
                </ol>
              </div>

              <button class="text-center text-white amenities_btn mx-2">View</button>
            </div>
          </div>
        </div>
      </div>
      <!--Temporary property details just for static view -->
      <div class="mx-auto  mt-5 mb-5 property_details ">
        <div class="card listing_box">

          <p class="pt-3 mx-3 mb-1 post_date">
            Posted 2 days ago
          </p>
          <div class="d-flex mx-auto justify-content-between  gap-5 ">
            <div class="">

              <div class="image_container">

                <div class="image-container">
                  <img src="/images/a.png" alt="hostel" class="listing_img" />
                  <div class="verified-badge">

                    <div>
                      <p class="gender">
                        Girls
                      </p>
                    </div>
                  </div>
                  <p class="favorite">
                    <i class="fa-solid fa-heart"></i>
                  </p>

                  <div>
                    <p class="user_verified">
                      <i class="material-icons icon_alignment ">verified</i>User Verified
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div class="listing_description">
              <p id="school_name">
                University of Lagos
              </p>

              <div class="d-flex justify-content-between">
                <h3 id="hostel_name">
                  Moremi Hostel
                </h3>

                <h4 id="room_no">
                  Room A3
                </h4>
              </div>

              <div class="d-flex gap-2 room_size">
                <p>
                  4 bed space
                </p>
                <p>
                  1 available
                </p>
              </div>

              <p id="hostel_description">
                Moremi Hostel is located at 34, Akoka, street, 
                just a five-minutes walk from university of Lagos.
                The room at Moremi Hostel offers a cozy, comfortable 
                setting perfect for students seeking a convenient place to stay near the University of Lagos. 
                <a href="">View more</a>
              </p>

              <div class="d-flex gap-2 image_grid">
                <img
                  src="/images/Photo_of_a_Spanish_house_near_the_coast__S85530654_St100_G3.png"
                  alt=""
                  id="image_list"
                />
                <img src="/images/Spanish_house_at_the_coast__S1562583659_St50_G7.png" alt="" id="image_list" />
                <img
                  src="/images/Photo_of_a_Spanish_house_near_the_coast__S85530656_St100_G3.png"
                  alt=""
                  id="image_list"
                />
                <img src="/images/test.png" alt="" id="image_list" />
                <img src="/images/Group 1309.png" alt="" id="image_list" />
              </div>
            </div>

            <div class=" amenities">
              <h4 class="amenities_price fw-bold mx-2">
                ₦170,000 <sub>/bed space</sub>
              </h4>

              <div class="">
                <h2 class=" mx-2">
                  Amenities
                </h2>

                <ol class="list_item">
                  <li class="li-amenites">
                    <img src="/images/game-icons_tap.png" alt="" class="mx-2" />Borehole
                  </li>
                  <li class="li-amenites">
                    <img src="/images/mdi_wardrobe.png" alt="" class="mx-2" />Wardrobe
                  </li>
                  <li class="li-amenites">
                    <img src="/images/Vector (4).png" alt="" class="mx-2" />Generator
                  </li>
                  <li class="li-amenites">
                    <img src="/images/Vector (5).png" alt="" class="mx-2" />Security
                  </li>
                </ol>
              </div>

              <button class="text-center text-white amenities_btn mx-2">View</button>
            </div>
          </div>
        </div>
      </div>
      <!--Temporary property details just for static view -->
      <div class="mx-auto  mt-5 mb-5 property_details ">
        <div class="card listing_box">

          <p class="pt-3 mx-3 mb-1 post_date">
            Posted 2 days ago
          </p>
          <div class="d-flex mx-auto justify-content-between  gap-5 ">
            <div class="">

              <div class="image_container">

                <div class="image-container">
                  <img src="/images/a (1).png" alt="hostel" class="listing_img" />
                  <div class="verified-badge">

                    <div>
                      <p class="gender">
                        Boys
                      </p>
                    </div>
                  </div>
                  <p class="favorite">
                    <i class="fa-solid fa-heart"></i>
                  </p>

                  <div>
                    <p class="user_verified">
                      <i class="material-icons icon_alignment ">verified</i>User Verified
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div class="listing_description">
              <p id="school_name">
                University of Lagos
              </p>

              <div class="d-flex justify-content-between">
                <h3 id="hostel_name">
                  Moremi Hostel
                </h3>

                <h4 id="room_no">
                  Room A3
                </h4>
              </div>

              <div class="d-flex gap-2 room_size">
                <p>
                  4 bed space
                </p>
                <p>
                  1 available
                </p>
              </div>

              <p id="hostel_description">
                Moremi Hostel is located at 34, Akoka, street, 
                just a five-minutes walk from university of Lagos.
                The room at Moremi Hostel offers a cozy, comfortable 
                setting perfect for students seeking a convenient place to stay near the University of Lagos. 
                <a href="">View more</a>
              </p>

              <div class="d-flex gap-2 image_grid">
                <img
                  src="/images/Photo_of_a_Spanish_house_near_the_coast__S85530654_St100_G3.png"
                  alt=""
                  id="image_list"
                />
                <img src="/images/Spanish_house_at_the_coast__S1562583659_St50_G7.png" alt="" id="image_list" />
                <img
                  src="/images/Photo_of_a_Spanish_house_near_the_coast__S85530656_St100_G3.png"
                  alt=""
                  id="image_list"
                />
                <img src="/images/test.png" alt="" id="image_list" />
                <img src="/images/Group 1309.png" alt="" id="image_list" />
              </div>
            </div>

            <div class="amenities">
              <h4 class="amenities_price  fw-bold mx-2">
                ₦170,000 <sub>/bed space</sub>
              </h4>

              <div class="">
                <h2 class=" mx-2">
                  Amenities
                </h2>

                <ol class="list_item">
                  <li class="li-amenites">
                    <img src="/images/game-icons_tap.png" alt="" class="mx-2" />Borehole
                  </li>
                  <li class="li-amenites">
                    <img src="/images/mdi_wardrobe.png" alt="" class="mx-2" />Wardrobe
                  </li>
                  <li class="li-amenites">
                    <img src="/images/Vector (4).png" alt="" class="mx-2" />Generator
                  </li>
                  <li class="li-amenites">
                    <img src="/images/Vector (5).png" alt="" class="mx-2" />Security
                  </li>
                </ol>
              </div>

              <button class="text-center text-white amenities_btn mx-2">View</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class=" text-white text-cen  pt-4">
      <!-- Grid container -->
      <div class="container-fluid d-flex justify-content-around mt-5">

        {{-- logo   --}}
        <div>
          <div class="headline">
            <img class="text-white" src="images/landing/logo2.png" alt="" />

            <ul class="list-unstyled mb-0 ">
              <li class="mt-3 mb-2">
                Connecting students with affordable, comfortable and convenient shared living spaces.
              </li>
              <li>
                <!-- Section: Social media -->
                <section class="d-flex justify-content-between mt-4">
                  <!-- Facebook -->
                  <div class="social-link">
                    <a class="btn_footer btn-outline btn-floating m-1" href="#!" role="button">
                      <i class="fab fa-facebook-f"></i></a>
                  </div>

                  <!-- Twitter -->
                  <div class="social-link">
                    <a data-mdb-ripple-init class="btn_footer btn-outline btn-floating m-1" href="#!" role="button">
                      <i class="fab fa-twitter"></i></a>
                  </div>

                  <!-- Instagram -->
                  <div class="social-link">
                    <a data-mdb-ripple-init class="btn_footer btn-outline btn-floating m-1" href="#!" role="button">
                      <i class="fab fa-instagram"></i></a>
                  </div>

                  <!-- Linkedin -->
                  <div class="social-link">
                    <a data-mdb-ripple-init class="btn_footer btn-outline btn-floating m-1" href="#!" role="button">
                      <i class="fab fa-linkedin-in"></i></a>
                  </div>

                </section>
              </li>
            </ul>
          </div>
        </div>

        {{--  Quick links  --}}
        <div>
          <div class="quick_links">
            <h5 class="">
              Quick Links
            </h5>

            <ul class="list-unstyled mb-0">
              <li class="">
                <a class=" text-decoration-none" href="#!">Contact Us</a>
              </li>
              <li class="">
                <a class=" text-decoration-none" href="#!">Featured</a>
              </li>
              <li class="">
                <a class=" text-decoration-none" href="#!">List Your Space</a>
              </li>
              <li class="">
                <a class=" text-decoration-none" href="#!">Find a Roommate</a>
              </li>
            </ul>
          </div>
        </div>

        {{--  contact info  --}}
        <div>
          <div class="contact_info">
            <h5 class="">
              Contact Information
            </h5>

            <ul class="list-unstyled mb-0">
              <li>
                <a class=text-decoration-none href="#!">+2348 0000 000</a>
              </li>
              <li>
                <a class=" text-decoration-none" href="#!">info
                  @mypropertytrades.com
                </a>
              </li>
            </ul>
          </div>
        </div>

        {{--  legal  --}}
        <div>
          <div class="legal">
            <h5 class="">
              Legal
            </h5>

            <ul class="list-unstyled  mb-0">
              <li>
                <a class="text-decoration-none" href="#!">Privacy Policy</a>
              </li>
              <li>
                <a class="text-decoration-none" href="#!">Terms &</a>
              </li>
              <li>
                <a class=" text-decoration-none" href="#!">Conditions</a>
              </li>
            </ul>
          </div>
        </div>

      </div>

      <!-- Copyright -->
      <div class="text-center mt-5 p-3 copy_right">
        © 2025 Mypropertytrade. :
    <a class="text-reset fw-bold text-decoration-none" href="">All rights reserved</a>
      </div>
      <!-- Copyright -->
    </footer>
    <!-- Footer -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
      
    </script>
  </body>
</html>

