5+ CSS Facebook Clone Examples

This post contains a total of 5+ Hand-Picked CSS Facebook Clone Examples with Source Code. All these Facebook Clones are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Facebook Clone Examples

1. By Vipin

Made by Vipin. Fully Functional CSS Facebook Clone with Working Post button, Notification Menu, Settings Menu, etc. Source

<!DOCTYPE html>
<html lang='en' class='bg-gray'>
<head>
  <meta charset='UTF-8'>
  <title></title>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- font awaysome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- main css -->
  <link rel="stylesheet" href="main.css" />
  <!-- bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>FaceBook</title>
</head>
  <style class="INLINE_PEN_STYLESHEET_ID">
    body{
  scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;

}
.sideBar{
  overflow: hidden;
}
.sideBar:hover{
  overflow-y: scroll !important;
  overflow-x: hidden;
}


.pop-avatar{
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  
}
.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.createRoom {
  font-size: 72px;
  background: -webkit-linear-gradient( #0066ff 0%, #ff33cc 100%);
  
  -webkit-text-fill-color: transparent;
}
/* stories */
.story:hover{
  opacity: .8;
}
.fs-0 {
  font-size: 4rem;
}
.fs-7 {
  font-size: 0.8rem;
}
.fw-bold{
  font-weight:350 !important;
}
.bg-gray-dark{
  background-color: #ececec !important;
}
.hoverDark:hover{
  background-color: #d8d8d8 !important;
}
.hoverLight:hover{
  background-color: #F0F0F0 !important;
}
.bg-gray {
  background-color: #e9ecef !important;
}
/* nav button */
.btn button:hover {
  background: #f0f2f5 !important;
}
.nav__btn button:hover i {
  color: #0d6efd !important;
}
.nav__btn-active i {
  color: #0d6efd !important;
}
.nav__btn-active {
  position: relative;
}
.nav__btn-active::before {
  content: "";
  position: absolute;
  bottom: -4.5px;
  left: 0;
  transform: translateY(4.5px);
  width: 100%;
  height: 3px;
  border-bottom: solid #0d6efd !important;
}
/* chat box */
.modal-content:hover .fa-phone,
.modal-content:hover .fa-video,
.modal-content:hover .fa-file-image,
.modal-content:hover .fa-circle-plus,
.modal-content:hover .fa-portrait,
.modal-content:hover .fa-adjust,
.modal-content:hover .fa-thumbs-up{
  color:#0d6efd !important
}
.txt:hover {
  text-decoration: underline;
}

@media (min-width: 62em) {
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
@media (max-width:768px) {
  ::-webkit-scrollbar {
    display: none;
  }
  .timeline{
    margin: 0;
    padding: 0 !important;
  }
  .notification{
    display: none !important;
  }
}
::-webkit-scrollbar {
  width: 10px;
}

.timeline::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar-track {
  background-color: #e9ecef;
  
}

::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: #C8C8C8;
  border: 6px solid rgba(0,0,0,0.2);
}


  </style>
</head>
<body>
   <!-- ======================App bar======================== -->
  <div class="bg-white d-flex align-items-center fixed-top shadow " style="min-height: 56px; z-index: 5">
    <div class="container-fluid">
      <div class="row align-items-center">
        <!-- search -->
        <div class="col d-flex align-items-center">
          <!-- logo -->
          <i class="fa-brands fa-facebook text-primary" style="font-size: 3em"></i>
          <!-- search bar -->
          <div class="input-group ms-2">
            <!-- mobile -->
            <span class="input-group-prepand d-lg-none" id="searchMenu" type="button" data-bs-toggle="dropdown"
              aria-expanded="false" data-bs-auto-close="outside">
              <div class="input-group-text bg-gray border-0 rounded-circle" style="min-height: 40px">
                <i class="fa-solid fa-magnifying-glass text-muted"></i>
              </div>
            </span>
            <!-- desktop -->
            <span class="input-group-prepand d-none d-lg-block" id="searchMenu" type="button" data-bs-toggle="dropdown"
              aria-expanded="false" data-bs-auto-close="outside">
              <div class="input-group-text bg-gray border-0 rounded-pill" style="min-height: 40px; min-width: 230px">
                <i class="fa-solid fa-magnifying-glass me-2 text-muted"></i>
                <p class="m-0 fs-7 text-muted">Search faceBook</p>
              </div>
            </span>
            <!--search dropdown -->

            <ul class="dropdown-menu border-0 shadow p-3 overflow-auto" aria-labelledby="searchMenu"
              style="width: 20em; max-height: 600px">
              <!-- search input -->
              <input type="text" class="rounded-pill border-0 bg-gray dropdown-item" placeholder="Search faceBook"
                autofocus />
              <!-- sedarch result -->
              <!-- result 1 -->
              <li class="my-4">
                <div class="alert dropdown-item p-1 m-0 d-flex align-items-center justify-content-between fade show"
                  role="alert">
                  <div class="d-flex align-items-center">
                    <img src="https://picsum.photos/200" alt="avatar" class="rounded-circle me-2"
                      style="width: 35px; height: 35px; object-fit: cover" />
                    <p class="m-0">Lorem ipsum</p>
                  </div>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              </li>
              <!-- result 2 -->
              <li class="my-4">
                <div class="alert dropdown-item p-1 m-0 d-flex align-items-center justify-content-between fade show"
                  role="alert">
                  <div class="d-flex align-items-center">
                    <img src="https://picsum.photos/40/40" alt="avatar" class="rounded-circle me-2"
                      style="width: 35px; height: 35px; object-fit: cover" />
                    <p class="m-0">Lorem ipsum</p>
                  </div>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              </li>
              <!-- result 3 -->
              <li class="my-4">
                <div class="alert dropdown-item p-1 m-0 d-flex align-items-center justify-content-between fade show"
                  role="alert">
                  <div class="d-flex align-items-center">
                    <img src="https://picsum.photos/200/200" alt="avatar" class="rounded-circle me-2"
                      style="width: 35px; height: 35px; object-fit: cover" />
                    <p class="m-0">Lorem ipsum</p>
                  </div>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- nav -->
        <div class="col d-none d-lg-flex justify-content-center">
          <!-- home -->
          <div class="mx-4 nav__btn nav__btn-active">
            <button class="btn px-4">
              <i class="fas fa-home text-muted fs-4"></i>
            </button>
          </div>
          <!-- market -->
          <div class="mx-4 nav__btn">
            <button class="btn px-4">
              <i class="fas fa-store text-muted fs-4"></i>
            </button>
          </div>
          <!-- group -->
          <div class="mx-4 nav__btn">
            <button type="button" class="btn position-relative">
              <i class="fas fa-users position-relative text-muted fs-4"><span
                  class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                  style="font-size: 0.3rem">
                  1
                  <span class="visually-hidden"></span> </span></i>
            </button>
          </div>
          <!-- gaming-->
          <div class="mx-4 nav__btn">
            <button class="btn px-4">
              <i class="fas fa-gamepad text-muted fs-4"></i>
            </button>
          </div>
        </div>
        <!-- menus -->
        <div class="col d-flex align-items-center justify-content-end">
          <!-- avatar -->
          <div class="d-none d-lg-flex align-items-center justify-content-center rounded-pill p-1">

            <img src="https://i.ibb.co/HVCzX0Z/253672468-609134610133707-40920716104383943-n.jpg" alt="avatar"
              class="rounded-circle me-1" style="width: 30px; height: 30px; object-fit: cover" />
            <p class="m-0">Vipin</p>
          </div>
          <!-- main menu -->
          <div class="d-flex align-items-center justify-content-center p-1 mx-2 bg-gray rounded-circle" id="mainMenu"
            data-bs-toggle="dropdown" aria-expanded="false" type="button"
            style="height: 38px; width: 38px; object-fit: cover">
            <i class="fas fa-ellipsis-h"></i>
          </div>

          <!-- main menu dd -->
          <ul class="dropdown-menu force-overflow bg-gray border-0 shadow p-3 overflow-auto" aria-labelledby="mainMenu"
            style="width: 38em; max-height: 700px">
            <!-- menu header -->
            <li class="p-1 mx-2">
              <h3>Menu</h3>
            </li>
            <div class="d-lg-flex flex-lg-row flex-col justify-content">
              <!-- menu -->
              <div style="width: 22rem" class="rounded bg-light m-2 p-2">
                <!-- search -->
                <li class="p-1">
                  <div class="input-group-text bg-gray border-0 rounded-pill"
                    style="min-height: 35px; min-width: 230px">
                    <i class="fa-solid fa-search text-muted"></i>
                    <input type="text" placeholder="Search Menu" class="form-control rounded-pill border-0 bg-gray"
                      style="height: 35px; background-color: #f0f2f5" />
                  </div>
                </li>
                <!-- social items -->
                <h4 class="m-2">Social</h4>
                <!-- s 1 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2 m-0">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yu/r/eXC82ZeepQ7.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="m-0">
                        <p class="m-0 p-0">Events</p>
                        <span class="m-0 text-muted" style="font-size: 13px; line-height: 70%">
                          Lorem ipsum dolor sit amet consectetur. Lorem, ipsum
                          dolor.</span>
                      </div>
                    </div>
                  </a>
                </li>
                <!-- s 2 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-1">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/y8/r/S0U5ECzYUSu.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0 text-dark">Friends</p>
                        <span class="fs-7 text-muted">
                          Lorem ipsum dolor sit amet consectetur .</span>
                      </div>
                    </div>
                  </a>
                </li>
                <!-- s 3 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/y5/r/PrjLkDYpYbH.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0">Groups</p>
                        <span class="fs-7 text-muted">
                          Lorem ipsum dolor sit amet consectetur .</span>
                      </div>
                    </div>
                  </a>
                </li>
                <!-- s 4 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yJ/r/FqUGk9K0fOs.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0">News Feed</p>
                        <span class="fs-7 text-muted">
                          Lorem ipsum dolor sit amet consectetur .</span>
                      </div>
                    </div>
                  </a>
                </li>
                <!-- s 5 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yH/r/kyCAf2jbZvF.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0">Pages</p>
                        <span class="fs-7 text-muted">
                          Lorem ipsum dolor sit amet consectetur. Lorem,
                          ipsum.
                        </span>
                      </div>
                    </div>
                  </a>
                </li>
                <hr />
                <!-- environment -->
                <h4 class="m-2">Environment</h4>
                <!-- e 1 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yk/r/JN4tUY_MDMK.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0 p-0">Gaming Video</p>
                        <span class="text-muted" style="font-size: 13px; line-height: 70%">
                          Lorem ipsum dolor sit amet consectetur. Lorem, ipsum
                          dolor.</span>
                      </div>
                    </div>
                  </a>
                </li>
                <!-- e 2 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yt/r/PObY9OA5lvJ.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0 p-0">Play Games</p>
                        <span class="text-muted" style="font-size: 13px; line-height: 70%">
                          Lorem ipsum dolor sit amet consectetur.</span>
                      </div>
                    </div>
                  </a>
                </li>
                <hr />
                <!-- Shoping -->
                <h4 class="m-2">Shoping</h4>
                <!-- s 1 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yU/r/D2y-jJ2C_hO.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0 p-0">Marketplace</p>
                        <span class="text-muted" style="font-size: 13px; line-height: 70%">
                          Lorem ipsum dolor sit amet consectetur. Lorem, ipsum
                          dolor.</span>
                      </div>
                    </div>
                  </a>
                </li>
                <hr />
                <!-- Personal -->
                <h4 class="m-2">Personal</h4>
                <!-- p 1 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yj/r/8OasGoQgQgF.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0 p-0">Recent ad activity</p>
                        <span class="text-muted" style="font-size: 13px; line-height: 70%">
                          Lorem ipsum dolor sit amet consectetur. Lorem, ipsum
                          dolor.</span>
                      </div>
                    </div>
                  </a>
                </li>
                <!-- p 2 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/y8/r/he-BkogidIc.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0 p-0">Memories</p>
                        <span class="text-muted" style="font-size: 13px; line-height: 70%">
                          Lorem ipsum dolor sit amet consectetur.</span>
                      </div>
                    </div>
                  </a>
                </li>
                <!-- p 3 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yD/r/lVijPkTeN-r.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0 p-0">Saved</p>
                        <span class="text-muted" style="font-size: 13px; line-height: 70%">
                          Lorem ipsum dolor sit amet consectetur.
                        </span>
                      </div>
                    </div>
                  </a>
                </li>
                <!-- p 4 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none justify-content-between text-dark d-flex align-items-center">
                    <div class="d-flex flex-row">
                      <div class="pe-2">
                        <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yC/r/bo0Zt72NIra.png" alt="icon form fb"
                          class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover" />
                      </div>
                      <div class="">
                        <p class="m-0 p-0">Weather</p>
                        <span class="text-muted" style="font-size: 13px; line-height: 70%">
                          Lorem ipsum dolor sit amet consectetur.
                        </span>
                      </div>
                    </div>
                  </a>
                </li>
              </div>
              <!-- Create -->
              <div class="rounded bg-light m-2 p-2" style="
                    max-height: 585px;
                    min-width: 12em;
                    max-width: fit-content;
                  ">
                <li class="p-1 mx-2">
                  <h4>Create</h4>
                </li>
                <!-- c l -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none text-dark d-flex align-items-center">
                    <div style="width: 38px; height: 38px"
                      class="d-flex align-items-center justify-content-center rounded-circle bg-gray mx-3">
                      <i class="fa-solid fa-lg fa-pen-to-square"></i>
                    </div>
                    <div>
                      <p class="m-0">Post</p>
                    </div>
                  </a>
                </li>
                <!-- c 2 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none text-dark d-flex align-items-center">
                    <div style="width: 38px; height: 38px"
                      class="d-flex align-items-center justify-content-center rounded-circle bg-gray mx-3">
                      <i class="fa-solid fa-lg fa-book-open"></i>
                    </div>
                    <div>
                      <p class="m-0">Story</p>
                    </div>
                  </a>
                </li>
                <!-- c 3 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none text-dark d-flex align-items-center">
                    <div style="width: 38px; height: 38px"
                      class="d-flex align-items-center justify-content-center rounded-circle bg-gray mx-3">
                      <i class="fa-solid fa-lg fa-message"></i>
                    </div>
                    <div>
                      <p class="m-0">Room</p>
                    </div>
                  </a>
                </li>
                <!-- c 4 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none text-dark d-flex align-items-center">
                    <div style="width: 38px; height: 38px"
                      class="d-flex align-items-center justify-content-center rounded-circle bg-gray mx-3">
                      <i class="fa-solid fa-lg fa-video"></i>
                    </div>
                    <div>
                      <p class="m-0">Group Post</p>
                    </div>
                  </a>
                </li>
                <hr />
                <!-- c 5 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none text-dark d-flex align-items-center">
                    <div style="width: 38px; height: 38px"
                      class="d-flex align-items-center justify-content-center rounded-circle bg-gray mx-3">
                      <i class="fa-solid fa-lg fa-flag"></i>
                    </div>
                    <div>
                      <p class="m-0">Page</p>
                    </div>
                  </a>
                </li>
                <!-- c 6 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none text-dark d-flex align-items-center">
                    <div style="width: 38px; height: 38px"
                      class="d-flex align-items-center justify-content-center rounded-circle bg-gray mx-3">
                      <i class="fa-solid fa-lg fa-bullhorn"></i>
                    </div>
                    <div>
                      <p class="m-0">Ad</p>
                    </div>
                  </a>
                </li>
                <!-- c 7 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none text-dark d-flex align-items-center">
                    <div style="width: 38px; height: 38px"
                      class="d-flex align-items-center justify-content-center rounded-circle bg-gray mx-3">
                      <i class="fa-solid fa-users"></i>
                    </div>
                    <div>
                      <p class="m-0">Group</p>
                    </div>
                  </a>
                </li>
                <!-- c 8 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none text-dark d-flex align-items-center">
                    <div style="width: 38px; height: 38px"
                      class="d-flex align-items-center justify-content-center rounded-circle bg-gray mx-3">
                      <i class="fa-solid fa-calendar-plus"></i>
                    </div>
                    <div>
                      <p class="m-0">Event</p>
                    </div>
                  </a>
                </li>
                <!-- c 9 -->
                <li class="my-2 p-1 dropdown-item text-wrap">
                  <a href="#" class="text-decoration-none text-dark d-flex align-items-center">
                    <div style="width: 38px; height: 38px"
                      class="d-flex align-items-center justify-content-center rounded-circle bg-gray mx-3">
                      <i class="fa-solid fa-basket-shopping"></i>
                    </div>
                    <div>
                      <p class="m-0">Marketplace Listing</p>
                    </div>
                  </a>
                </li>
              </div>
            </div>
          </ul>
          <!-- chat -->
          <div class="d-flex align-items-center justify-content-center p-1 mx-2 bg-gray rounded-circle" id="chatMenu"
            data-bs-toggle="dropdown" aria-expanded="false" type="button" data-bs-auto-close="outside"
            style="height: 38px; width: 38px; object-fit: cover">
            <i class="fas fa-comment"></i>
          </div>
          <!-- caht dd -->
          <ul class="dropdown-menu border-0 shadow p-3 overflow-auto" aria-labelledby="chatMenu">
            <!-- header -->
            <li class="p-1">
              <div class="d-flex justify-content-between">
                <h3>Messages</h3>
                <div>
                  <!--Setting -->
                  <i class="fa-solid fa-ellipsis text-muted ms-2" type="button" data-bs-toggle="dropdown"></i>
                  <!-- setting dd -->
                  <ul class="dropdown-menu shadow" style="width: 18em">
                    <!-- title -->
                    <div class="p-2">
                      <h5>Chat Settings</h5>
                      <span class="text-muted fs-7">Lorem ipsum dolor sit amet.</span>
                    </div>
                    <!-- item 1 -->
                    <li>
                      <div class="dropdown-item d-flex align-items-center justify-content-between">
                        <!-- icon -->
                        <div class="d-flex align-items-center">
                          <i class="fa-solid fa-phone me-3"></i>
                          <p class="m-0">Incoming Call sounds</p>
                        </div>
                        <!-- toggle -->
                        <div class="form-check form-switch m-0">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
                            checked />
                          <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                        </div>
                      </div>
                    </li>
                    <!-- item 2 -->
                    <li>
                      <div class="dropdown-item d-flex align-items-center justify-content-between">
                        <!-- icon -->
                        <div class="d-flex align-items-center">
                          <i class="fa-solid fa-volume-off me-3"></i>
                          <p class="m-0">Message Sounds</p>
                        </div>
                        <!-- toggle -->
                        <div class="form-check form-switch m-0">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
                            checked />
                          <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                        </div>
                      </div>
                    </li>
                    <!-- item 3 -->
                    <li>
                      <div class="dropdown-item d-flex align-items-center justify-content-between m-0">
                        <!-- icon -->
                        <div class="d-flex align-items-center m-0">
                          <i class="fa-solid fa-spinner me-3"></i>
                          <p class="m-0">Pop up new Messages</p>
                        </div>
                        <!-- toggle -->
                        <div class="form-check form-switch m-0">
                          <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
                            checked />
                          <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                        </div>
                      </div>
                      <span class="ms-5 text-muted fs-7">Lorem ipsum dolor sit.</span>
                    </li>
                    <hr class="m-0" />
                    <!-- item 1 -->
                    <li>
                      <div class="dropdown-item d-flex align-items-center justify-content-between m-0">
                        <!-- icon -->
                        <div class="d-flex align-items-center m-0">
                          <i class="fa-solid fa-spinner me-3"></i>
                          <p class="m-0">Lorem, ipsum dolor.</p>
                        </div>
                      </div>
                    </li>
                    <!-- item 2 -->
                    <li>
                      <div class="dropdown-item d-flex align-items-center justify-content-between m-0">
                        <!-- icon -->
                        <div class="d-flex align-items-center m-0">
                          <i class="fa-solid fa-spinner me-3"></i>
                          <p class="m-0">Lorem, ipsum dolor.</p>
                        </div>
                      </div>
                    </li>
                    <!-- item 3 -->
                    <li>
                      <div class="dropdown-item d-flex align-items-center justify-content-between m-0">
                        <!-- icon -->
                        <div class="d-flex align-items-center m-0">
                          <i class="fa-solid fa-spinner me-3"></i>
                          <p class="m-0">Lorem, ipsum dolor.</p>
                        </div>
                      </div>
                    </li>
                    <!-- item 4 -->
                    <li>
                      <div class="dropdown-item d-flex align-items-center justify-content-between m-0">
                        <!-- icon -->
                        <div class="d-flex align-items-center m-0">
                          <i class="fa-solid fa-spinner me-3"></i>
                          <p class="m-0">Lorem, ipsum dolor.</p>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <!-- expand -->
                  <i class="fa-solid fa-expand-arrows-alt text-muted ms-2"></i>
                  <!-- new message -->
                  <i class="fa-solid fa-edit text-muted ms-2" data-bs-toggle="modal" data-bs-target="#newChat"
                    type="button"></i>
                </div>
              </div>
            </li>
            <!-- search -->
            <li class="p-1">
              <div class="input-group-text bg-gray border-0 rounded-pill" style="min-height: 35px; min-width: 230px">
                <i class="fa-solid fa-search text-muted"></i>
                <input type="text" placeholder="Search Messanger" class="form-control rounded-pill border-0 bg-gray"
                  style="height: 35px; background-color: #f0f2f5" />
              </div>
            </li>
            <!-- messages 1-->
            <li class="my-2 p-1" type="button" data-bs-toggle="modal" data-bs-target="#singleChat1">
              <div class="d-flex align-items-center justify-content-between">
                <!-- big avatar  -->
                <div class="d-flex align-items-center justify-content-evenly">
                  <!-- avatar -->
                  <div class="p-2">
                    <img src="https://picsum.photos/204" class="rounded-circle"
                      style="width: 42px; height: 42px; object-fit: cover" alt="avatar" />
                  </div>
                  <!-- message -->
                  <div class="fs-7 m-0">
                    <span class="fs-7 text-muted">Lorem, ipsum. &#8226; 7d
                    </span>
                  </div>
                  <!-- small avatar -->
                  <div class="p-2">
                    <img src="https://picsum.photos/204" alt="avatar" class="rounded-circle"
                      style="width: 15px; height: 15px; object-fit: cover" />
                  </div>
                </div>
              </div>
            </li>
            <!-- messages 2-->
            <li class="my-2 p-1" type="button" data-bs-toggle="modal" data-bs-target="#singleChat2">
              <div class="d-flex align-items-center justify-content-between">
                <!-- big avatar  -->
                <div class="d-flex align-items-center justify-content-evenly">
                  <!-- avatar -->
                  <div class="p-2">
                    <img src="https://picsum.photos/219" class="rounded-circle"
                      style="width: 42px; height: 42px; object-fit: cover" alt="avatar" />
                  </div>
                  <!-- message -->
                  <div class="fs-7 m-0">
                    <span class="fs-7 text-muted">Hi! &#8226; 7d </span>
                  </div>
                  <!-- small avatar -->
                  <div class="p-2">
                    <img src="https://picsum.photos/219" alt="avatar" class="rounded-circle"
                      style="width: 15px; height: 15px; object-fit: cover" />
                  </div>
                </div>
              </div>
            </li>
            <!-- messages 3-->
            <li class="my-2 p-1" type="button" data-bs-toggle="modal" data-bs-target="#singleChat3">
              <div class="d-flex align-items-center justify-content-between">
                <!-- big avatar  -->
                <div class="d-flex align-items-center justify-content-evenly">
                  <!-- avatar -->
                  <div class="p-2">
                    <img src="https://picsum.photos/222" class="rounded-circle"
                      style="width: 42px; height: 42px; object-fit: cover" alt="avatar" />
                  </div>
                  <!-- message -->
                  <div class="fs-7 m-0">
                    <span class="fs-7 text-muted">Bring the files!. &#8226; 7d
                    </span>
                  </div>
                  <!-- small avatar -->
                  <div class="p-2">
                    <img src="https://picsum.photos/221" alt="avatar" class="rounded-circle"
                      style="width: 15px; height: 15px; object-fit: cover" />
                  </div>
                </div>
              </div>
            </li>
            <!-- messages 4-->
            <li class="my-2 p-1" type="button" data-bs-toggle="modal" data-bs-target="#singleChat2">
              <div class="d-flex align-items-center justify-content-between">
                <!-- big avatar  -->
                <div class="d-flex align-items-center justify-content-evenly">
                  <!-- avatar -->
                  <div class="p-2">
                    <img src="https://picsum.photos/220" class="rounded-circle"
                      style="width: 42px; height: 42px; object-fit: cover" alt="avatar" />
                  </div>
                  <!-- message -->
                  <div class="fs-7 m-0">
                    <span class="fs-7 text-muted">Lorem, ipsum. &#8226; 7d
                    </span>
                  </div>
                  <!-- small avatar -->
                  <div class="p-2">
                    <img src="https://picsum.photos/221" alt="avatar" class="rounded-circle"
                      style="width: 15px; height: 15px; object-fit: cover" />
                  </div>
                </div>
              </div>
            </li>
            <!-- messages 5-->
            <li class="my-2 p-1" type="button" data-bs-toggle="modal" data-bs-target="#singleChat2">
              <div class="d-flex align-items-center justify-content-between">
                <!-- big avatar  -->
                <div class="d-flex align-items-center justify-content-evenly">
                  <!-- avatar -->
                  <div class="p-2">
                    <img src="https://picsum.photos/220" class="rounded-circle"
                      style="width: 42px; height: 42px; object-fit: cover" alt="avatar" />
                  </div>
                  <!-- message -->
                  <div class="fs-7 m-0">
                    <span class="fs-7 text-muted">Lorem, ipsum. &#8226; 7d
                    </span>
                  </div>
                  <!-- small avatar -->
                  <div class="p-2">
                    <img src="https://picsum.photos/221" alt="avatar" class="rounded-circle"
                      style="width: 15px; height: 15px; object-fit: cover" />
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <!-- notification -->
          <div class=" notification d-flex align-items-center justify-content-center p-1 mx-2 bg-gray rounded-circle" id="notMenu"
            data-bs-toggle="dropdown" aria-expanded="false" type="button" data-bs-auto-close="outside"
            style="height: 38px; width: 38px; object-fit: cover">
            <i class="fas fa-bell"></i>
          </div>
          <!-- notification dd -->
          <ul class=" dropdown-menu border-0 shadow p-3 overflow-auto border-0 m-0 p-0" aria-labelledby="notMenu"
            style="width: 24em; max-height: 600px">
            <!-- header -->
            <li class="list-group-item d-flex flex-column p-0 m-0 rounded border-0">
              <div class="d-flex justify-content-between p-0">
                <h3 class="fw-bold">Notifications</h3>
                <!-- menu -->
                <div class="align-items-center">
                  <i class="fa-solid fa-ellipsis p-2 text-muted fs-5 d-flex justify-content-end" type="button"></i>
                </div>
                <!-- menu dd -->
              </div>
            </li>
            <!-- nav -->
            <div class="d-flex ps-0">
              <li type="button"
                class="rounded-pill px-3 bg-primary bg-opacity-10 text-primary list-group-item border-0">
                <span class="fs-6 " style="font-weight:500;">All</span>
              </li>
              <li type="button" class="bg-gray mx-2 rounded-pill px-3  list-group-item border-0">
                <span class="fs-6 " style="font-weight:500;">Unread</span>
              </li>
            </div>
            <!-- New  -->
            <div class="d-flex justify-content-between mt-2 p-0">
              <h6 style="font-weight: 500;">New</h4>
                <!-- menu -->
                <span class="text-primary" type="button">See All</span>
            </div>
            <!-- menu dd -->
            <!-- n 1 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 2 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 3 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 4 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 5 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 6 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 7 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 8 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-none"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <hr>
            <!-- earlier -->
            <div class="d-flex justify-content-between mt-2 p-0">
              <h6 style="font-weight: 500;">Earlier</h4>
                <!-- menu -->
                <span class="text-primary" type="button">See All</span>
            </div>
            <!-- n 1 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 2 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 3 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 4 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 5 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 6 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 7 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-flex"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
            <!-- n 8 -->
            <li class="rounded my-2 p-1 text-muted">
              <a href="#" class="text-decoration-none">
                <div class="row m-0">
                  <!-- head -->
                  <div class="m-0 p-0 col-sm-2">
                    <!-- avatar -->
                    <div class="pe-2 m-0 position-relative">

                      <img src="https://i.ibb.co/q9jsTYh/866-536x354.jpg" alt="avatar" class="rounded-circle"
                        style="width: 48px; height: 48px; object-fit: cover" />
                      <!-- small avatar -->
                      <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                        style="width: 23px; height: 23px; left:75%; top: 90%;">
                        <img src="https://i.ibb.co/B3FgtsT/approve-blue-circle-like-thumbs-up-vote-icon-410407.png"
                          class="position-absolute rounded-circle "
                          style="width: 22px; height: 22px; object-fit: cover;">
                      </span>
                    </div>
                  </div>
                  <!-- body -->
                  <div class="col-lg-9">
                    <span class="text-muted m-0 fs-7">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae,
                      vel.
                      <br>
                      <span class="fs-7 text-primary">9 hours ago</span>
                    </span>
                  </div>
                  <!-- foter-->
                  <div class="m-0 p-auto col-sm-1 justify-content-between align-items-center d-none"><i
                      class="fa-solid fs-7 d-flex fa-circle text-primary"></i></div>
                </div>
              </a>
            </li>
          </ul>
          <!-- secondary menu -->
          <div class="d-flex align-items-center justify-content-center p-1 mx-2 bg-gray rounded-circle" id="secMenu"
            data-bs-toggle="dropdown" aria-expanded="false" type="button" data-bs-auto-close="outside"
            style="height: 38px; width: 38px; object-fit: cover">
            <i class="fa-solid fa-caret-down"></i>
          </div>
          <!-- secondary dd -->

          <ul class="dropdown-menu shadow border-0 p-2 overflow-auto" style="width: 23em; max-height: fit-content;"
            aria-labelledby="secMenu">
            <li class="m-2  rounded" a href="#" class="text-decoration-none text-dark d-flex align-items-center">
              <!-- profile -->
              <div type="button" class="d-flex dropdown-item align-items-center justify-content-start rounded p-1">

                <img src="https://i.ibb.co/HVCzX0Z/253672468-609134610133707-40920716104383943-n.jpg" alt="avatar"
                  class="rounded-circle me-2" style="width: 50px; height: 50px; object-fit: cover" />
                <!-- <p class="m-0 fw-bold fs-4">Vipin Beniwal</p>
                  <br>
                  <span class="text-muted fs-7">See your profile</span> -->
                <div class="col mx-2">
                  <span class="m-0 p-0 fs-5 fw-bold">Vipin Beniwal</span><br>
                  <span class="m-0 p-0 text-muted fs-6">See your Profile</span>
                </div>
              </div>
              <!-- feedback -->
              <hr>
              <div type="button" class="row my-2 rounded mx-0 p-1 dropdown-item d-flex">
                <!-- icon -->
                <div style="width: 38px; height: 38px"
                  class="d-flex align-items-center justify-content-center rounded-circle bg-gray-dark mx-1">
                  <i class="fa-solid fa-message fa-lg"></i>
                </div>
                <!-- body -->
                <div class="col align-items-center  justify-content-between">
                  <span class="m-0 p-0 fw-bold">Give feedback</span><br>
                  <span class="m-0 p-0 text-muted fs-7">Help us improve FaceBook</span>
                </div>
                <!-- foot -->
                <div class="col-2 d-flex justify-content-end align-items-center">
                  <i class="fa-solid fa-angle-right fa-lg "></i>
                </div>
              </div>
              <hr>
              <!-- menu -->
              <!-- settings -->
              <div type="button" class="row my-2 rounded mx-0 p-1 dropdown-item d-flex">
                <!-- icon -->
                <div style="width: 38px; height: 38px"
                  class="d-flex align-items-center justify-content-center rounded-circle bg-gray-dark mx-1">
                  <i class="fa-solid fa-lg fa-gear"></i>
                </div>
                <!-- body -->
                <div class="col align-items-center d-flex justify-content-between">
                  <span class="m-0 fw-bold">Setting & privacy</span>
                </div>
                <!-- foot -->
                <div class="col-2 d-flex justify-content-end align-items-center">
                  <i class="fa-solid fa-angle-right fa-lg "></i>
                </div>
              </div>
              <!-- Help & Support -->
              <div type="button" class="row rounded my-2 mx-0 p-1 dropdown-item d-flex">
                <!-- icon -->
                <div style="width: 38px; height: 38px"
                  class="d-flex align-items-center justify-content-center rounded-circle bg-gray-dark mx-1">
                  <i class="fa-solid fa-circle-question fa-lg"></i>
                </div>
                <!-- body -->
                <div class="col align-items-center d-flex justify-content-between">
                  <span class="m-0 fw-bold">Help & Support</span>
                </div>
                <!-- foot -->
                <div class="col-2 d-flex justify-content-end align-items-center">
                  <i class="fa-solid fa-angle-right fa-lg "></i>
                </div>
              </div>
              <!--Display & accessility -->
              <div type="button" class="row my-2 rounded mx-0 p-1 dropdown-item d-flex">
                <!-- icon -->
                <div style="width: 38px; height: 38px"
                  class="d-flex align-items-center justify-content-center rounded-circle bg-gray-dark mx-1">
                  <i class="fa-solid fa-lg fa-moon"></i>
                </div>
                <!-- body -->
                <div class="col align-items-center d-flex justify-content-between">
                  <span class="m-0 fw-bold">Display & accessility</span>
                </div>
                <!-- foot -->
                <div class="col-2 d-flex justify-content-end align-items-center">
                  <i class="fa-solid fa-angle-right fa-lg "></i>
                </div>
              </div>
              <!-- log out -->
              <div type="button" class="row my-2 rounded mx-0 p-1 dropdown-item d-flex">
                <!-- icon -->
                <div style="width: 38px; height: 38px"
                  class="d-flex align-items-center justify-content-center rounded-circle bg-gray-dark mx-1">
                  <i class="fa-solid fa-right-from-bracket fa-lg"></i>
                </div>
                <!-- body -->
                <div class="col align-items-center d-flex justify-content-between">
                  <span class="m-0 fw-bold">Log Out</span>
                </div>
                <!-- foot -->
                <div class="col-2 d-flex justify-content-end align-items-center">
                  <i class="fa-solid fa-angle-right fa-lg "></i>
                </div>
              </div>
              <!-- footMenu -->
              <div type="button" class="row mt-2 rounded mx-0 p-1 d-flex">
                <p class="text-wrap text-muted text-decoration-none m-0 p-0 fs-7">
                  <a href="#" class="text-decoration-none text-muted">Privacy</a> &#8226; <a href="#"
                    class="text-decoration-none text-muted fs-7">Terms</a> &#8226; <a href="#"
                    class="text-decoration-none text-muted fs-7">Advertising</a> &#8226; <a href="#"
                    class="text-decoration-none text-muted fs-7">Ad choices</a> &#8226; <a href="#"
                    class="text-decoration-none text-muted fs-7">Cookies</a> &#8226; <a href="#"
                    class="text-decoration-none text-muted fs-7">More</a> &#8226; Meta &copy; 2022
                </p>
              </div>
            </li>
          </ul>

        </div>
      </div>
    </div>
  </div>
  <!-- ====================== Main ======================= -->
  <div class="container-fluid ">

    <div class="row justify-content-evenly  " style="height: 100%; margin-top: 4em ;">
      <!-- =================== left sidebar ===================-->
      <div class="sideBar d-none d-xxl-block p-2 col-lg-3 bg-gray  border-0  " style="height: 730px;">
        <!-- profile -->
        <div class="d-flex ms-1 my-1 ps-3  p-1 align-items-center justify-content-start rounded hoverDark"
          type="button">

          <img src="https://i.ibb.co/HVCzX0Z/253672468-609134610133707-40920716104383943-n.jpg" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Vipin Beniwal</span>
          </div>
        </div>
        <!-- Friends -->
        <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark" type="button">

          <img src="https://static.xx.fbcdn.net/rsrc.php/v3/y8/r/S0U5ECzYUSu.png" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Friends</span>
          </div>
        </div>
        <!-- saved -->
        <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark" type="button">

          <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yD/r/lVijPkTeN-r.png" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Saved</span>
          </div>
        </div>
        <!-- Groups -->
        <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark" type="button">

          <img src="https://static.xx.fbcdn.net/rsrc.php/v3/y5/r/PrjLkDYpYbH.png" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Groups</span>
          </div>
        </div>
        <!-- Marketplace -->
        <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark" type="button">

          <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yU/r/D2y-jJ2C_hO.png" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Marketplace</span>
          </div>
        </div>
        <!-- Memories -->
        <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark" type="button">

          <img src="https://static.xx.fbcdn.net/rsrc.php/v3/y8/r/he-BkogidIc.png" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Memories</span>
          </div>
        </div>
        <!-- Pages -->
        <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark" type="button">

          <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yH/r/kyCAf2jbZvF.png" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Pages</span>
          </div>
        </div>
        <!-- Events -->
        <div class="d-flex ms-2 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark" type="button">

          <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yu/r/eXC82ZeepQ7.png" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Events</span>
          </div>
        </div>
        <!-- Most Recent -->
        <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark" type="button">

          <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yc/r/hTN47HVa4oS.png" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Most Recent</span>
          </div>
        </div>
        <!-- Favourites -->
        <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark" type="button">

          <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yK/r/mAnT0r8GSOm.png" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Favourites</span>
          </div>
        </div>

        <!-- see more dd -->
        <div class="p-1 bg-gray " type="button">
          <div class="accordion bg-gray" id="seeMoreSidebar">
            <div class="accordion-item bg-gray border-0">

              <div id="seeMoreSide" class="accordion-collapse bg-gray collapse " aria-labelledby="headingOne"
                data-bs-parent="#seeMoreSidebar">
                <div class="accordion-body bg-gray p-0 m-0">
                  <!-- Pages -->
                  <div
                    class="d-flex ms-2 my-1 bg-gray p-2 align-items-center justify-content-start rounded p-1 hoverDark">

                    <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yH/r/kyCAf2jbZvF.png" alt="avatar"
                      class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

                    <div class="col mx-2">
                      <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Pages</span>
                    </div>
                  </div>
                  <!-- Events -->
                  <div
                    class="d-flex ms-2 my-1 bg-gray p-2 align-items-center justify-content-start rounded p-1 hoverDark">

                    <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yu/r/eXC82ZeepQ7.png" alt="avatar"
                      class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

                    <div class="col mx-2">
                      <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Events</span>
                    </div>
                  </div>
                  <!-- Most Recent -->
                  <div
                    class="d-flex ms-2 my-1 bg-gray p-2 align-items-center justify-content-start rounded p-1 hoverDark">

                    <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yc/r/hTN47HVa4oS.png" alt="avatar"
                      class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

                    <div class="col mx-2">
                      <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Most Recent</span>
                    </div>
                  </div>
                  <!-- Favourites -->
                  <div
                    class="d-flex ms-2 my-1 bg-gray p-2 align-items-center justify-content-start rounded p-1 hoverDark">

                    <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yK/r/mAnT0r8GSOm.png" alt="avatar"
                      class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

                    <div class="col mx-2">
                      <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Favourites</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- See More -->
        <div
          class="d-flex ms-1 bg-gray border-0  accordion-flush my-2 p-2 align-items-center justify-content-start rounded p-1 hoverDark"
          style="box-shadow: none;" type="button" data-bs-toggle="collapse" data-bs-target="#seeMoreSide"
          aria-expanded="true" aria-controls="seeMoreSide">
          <div class="rounded-circle p-3 d-flex justify-content-center align-items-center "><i
              class="fa-solid fa-lg fa-angle-down rounded-circle"></i></div>
          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">See More</span>
          </div>
        </div>
        <hr class="m-0 p-0 text-muted">
        <!-- shortcuts -->
        <div class="bg-gray text-muted d-flex ms-1 mb-1 mt-0 ps-3  p-0 align-items-center justify-content-between ">
          <!-- heading -->
          <span class="p-0 d-flex justify-content-start fw-bold fs-5">Your shortcuts</span>
          <!-- edit -->
          <span class=" d-flex justify-content-end  align-items-center text-primary hoverDark p-1 m-1 rounded "
            data-bs-toggle="modal" data-bs-target="#exampleModal" type="button">Edit</span>
          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="editShortcuts" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <!-- head -->
                <div class="modal-header align-items-center">
                  <h5 class="text-dark text-center w-100 m-0" id="editShortcuts">Edit your Shortcuts</h5>
                  <div class="text-muted bg-gray rounded-circle d-flex justify-content-end">
                    <button type="button" class="btn-close m-1" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                </div>
                <!-- body -->
                <div class="modal-body">
                  <p class="text-muted">
                    Shortcuts provide quick access to what you do most on Facebook. Your shortcuts are sorted
                    automatically, but you can pin something so it's always shown at the top or hide it from the list.
                  </p>
                  <!-- search -->

                  <div class="input-group-text bg-gray border-0 rounded-pill"
                    style="min-height: 35px; min-width: 230px">
                    <i class="fa-solid fa-search text-muted"></i>
                    <input type="text" placeholder="Search Messanger" class="form-control rounded-pill border-0 bg-gray"
                      style="height: 35px; background-color: #f0f2f5" />
                  </div>

                  <!-- is It? -->
                  <div class="d-flex ms-1 my-1 p-1 align-items-center justify-content-start  ">

                    <img src="https://i.ibb.co/sjkyMHj/104426444-112499970508643-4838017725490327262-n.png" alt="avatar"
                      class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

                    <div class="col mx-2">
                      <span class="m-0 p-0 fs-6 text-dark " style="font-weight: 500;">is It?</span>
                    </div>
                    <!-- slections -->
                    <select class="form-select w-50 border-0 bg-gray">
                      <option value="1">
                        <p><i class="fa-solid fa-sparkles"></i>Sort Automatically</p>
                      </option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                    </select>


                  </div>

                </div>
                <!-- foot -->
                <div class="modal-footer">
                  <button type="button" class="btn text-primary hoverDark" data-bs-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary px-4">Save</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- is It? -->
        <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark" type="button">

          <img src="https://i.ibb.co/sjkyMHj/104426444-112499970508643-4838017725490327262-n.png" alt="avatar"
            class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

          <div class="col mx-2">
            <span class="m-0 p-0 fs-6 " style="font-weight: 500;">is It?</span>
          </div>
        </div>
        <!-- footMenu -->
        <div class="row mt-2 rounded mx-0 p-1 d-flex">
          <p class="text-wrap text-muted text-decoration-none m-0 p-0 fs-7">
            <a href="#" class="text-decoration-none text-muted">Privacy</a> &#8226; <a href="#"
              class="text-decoration-none text-muted fs-7">Terms</a> &#8226; <a href="#"
              class="text-decoration-none text-muted fs-7">Advertising</a> &#8226; <a href="#"
              class="text-decoration-none text-muted fs-7">Ad choices</a> &#8226; <a href="#"
              class="text-decoration-none text-muted fs-7">Cookies</a> &#8226; <a href="#"
              class="text-decoration-none text-muted fs-7">More</a> &#8226; Meta &copy; 2022
          </p>
        </div>
      </div>
      <!-- =================== Timeline===================-->
      <div class="timeline col-12 m-0 col-lg-6 sideBar" style="height: 730px;  ">
        <div class=" border-0 px-1 bg-gray">
          <!-- stories -->
          <div class="w-z d-flex  justify-content-between position-relative mt-3 align-items-center">
            <!-- s 1 -->
            <div class="rounded shadow  bg-white story me-1 " type="button" style="width: 8em; height: 220px;">
              <img src="https://i.ibb.co/wzgj0j5/photo-1651666621445-e1ec1dc67c45.jpg" alt="avatar" class="card-img-top"
                style=" height: 70%; object-fit: cover; width: 8em;">
              <div class="d-flex align-items-center justify-content-center position-relative" style="min-height: 50px;">
                <div class="rounded-circle translate-middle position-absolute top-0 start-50 " ">
                  <i class=" fa-solid rounded-circle fa-circle-plus align-bottom fs-3 p-1 bg-white text-primary "></i>
                </div>
                <p class=" mb-1 text-center d-flex align-text-bottom align-bottom fs-7 fw-bold " >Create Story</p>
                </div>
                </div> 
                <!-- s 2 -->
                <div class=" rounded shadow story position-relative bg-white me-1 " type=" button"
                  style="width: 8em; height: 220px;">
                  <img src="https://randomuser.me/api/portraits/women/50.jpg" alt="avatar"
                    class="rounded-circle position-absolute top-0 start-0 m-2 p-1 bg-primary "
                    style="width: 38px; height: 38px; object-fit: cover; z-index: 4" />
                  <img src="https://i.ibb.co/cC16L4M/photo-1651182733147-6d1ea394991e.jpg" alt="avatar"
                    class="card-img-top position-relative  rounded"
                    style=" height: 100%; object-fit: cover; width: 8em;">

                </div>
                <!-- s 3 -->
                <div class="rounded shadow story position-relative bg-white me-1 " type="button"
                  style="width: 8em; height: 220px;">
                  <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="avatar"
                    class="rounded-circle position-absolute top-0 start-0 m-2 p-1 bg-primary "
                    style="width: 38px; height: 38px; object-fit: cover; z-index: 4" />
                  <img src="https://i.ibb.co/2sMFpBf/photo-1649449446718-33d2753a36eb.jpg" alt="avatar"
                    class="card-img-top position-relative  rounded"
                    style=" height: 100%; object-fit: cover; width: 8em;">

                </div>
                <!-- s 4 -->
                <div class="rounded shadow story position-relative bg-white me-1 " type="button"
                  style="width: 8em; height: 220px;">
                  <img src="https://randomuser.me/api/portraits/women/48.jpg" alt="avatar"
                    class="rounded-circle position-absolute top-0 start-0 m-2 p-1 bg-primary "
                    style="width: 38px; height: 38px; object-fit: cover; z-index: 4" />
                  <img src="https://i.ibb.co/MVG2q1m/photo-1649827159600-237a092f95b5.jpg" alt="avatar"
                    class="card-img-top position-relative  rounded"
                    style=" height: 100%; object-fit: cover; width: 8em;">

                </div>
                <!-- s 5 -->
                <div class="rounded shadow d-none d-lg-block story position-relative bg-white m-0 " type="button"
                  style="width: 8em; height: 220px;">
                  <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="avatar"
                    class="rounded-circle position-absolute top-0 start-0 m-2 p-1 bg-primary "
                    style="width: 38px; height: 38px; object-fit: cover; z-index: 4" />
                  <img src="https://i.ibb.co/sC54Fhs/photo-1650542915513-8a5c82709174.jpg" alt="avatar"
                    class="card-img-top position-relative  rounded"
                    style=" height: 100%; object-fit: cover; width: 8em;">

                </div>
                <!-- next button -->
                <div class="position-absolute top-50 start-100 translate-middle rounded-circle d-none d-lg-block"
                  type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="See all stories">
                  <i class="fas fa-arrow-right p-2 border text-muted bg-white rounded-circle"></i>
                </div>



          </div>
          <!-- create post -->
          <div class=" my-3 shadow  p-3 col  rounded bg-white " type="button">

                <!-- profile -->
                <div class="d-flex justify-content-st align-items-center">
                  <img src="https://i.ibb.co/HVCzX0Z/253672468-609134610133707-40920716104383943-n.jpg" alt="avatar"
                    class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

                  <div class="w-75 mx-2" data-bs-toggle="modal" data-bs-target="#createPostModal" type="button">
                    <input class="m-0 p- fs-6 form-control rounded-pill border-0 bg-gray"
                      placeholder="What's on your mind, Vipin?" disabled type="text">
                  </div>
                </div>
                <hr class="text-muted m-1 my-2">
                <!-- create modal -->
                <div class="d-flex justify-content-between align-items-center row">
                  <!-- Live Video -->
                  <div class="col d-flex p-2 rounded mx-2 align-items-center justify-content-center hoverLight d-flex">
                    <i class="fa-solid fa-lg mx-2 text-danger fa-video"></i>
                    <span class="m-0 text-muted p-0 fw-bold">Live Video</span>
                  </div>
                  <!-- Photo/video -->
                  <div class="col d-flex p-2 rounded mx-2 align-items-center justify-content-center hoverLight d-flex"
                    data-bs-toggle="modal" data-bs-target="#createPostModal" type="button">
                    <i class="fa-solid fa-lg mx-2 text-success fa-photo-film"></i>
                    <span class="m-0 text-muted p-0 fw-bold">Photo/video</span>
                  </div>
                  <!-- Feelings/Activity -->
                  <div class="col d-flex p-2 rounded mx-2 align-items-center justify-content-center hoverLight d-flex">
                    <i class="fa-regular fa-lg mx-2 text-warning fa-face-grin"></i>
                    <span class="m-0 text-muted p-0 fw-bold">Feelings/Activity</span>
                  </div>
                </div>
          </div>
          <!-- Create Post Modal -->
          <div class="modal fade  shadow" id="createPostModal" tabindex="-1" aria-labelledby="createPostModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered ">
                  <div class="modal-content">
                    <!-- head -->
                    <div class="modal-header align-items-center">
                      <h5 class="modal-title w-100 text-center fw-bold " id="createPostModalLabel">Create Post</h5>
                      <button type="button" class="btn-close rounded-circle bg-gray" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                    </div>
                    <!-- body -->
                    <div class="modal-body p-2">
                      <!-- avatar -->
                      <div class="d-flex m-2 ">
                        <div class="rounded-circle ">
                          <img src="https://i.ibb.co/HVCzX0Z/253672468-609134610133707-40920716104383943-n.jpg"
                            alt="avatar" class="rounded-circle" style="width: 48px; height:  48px; object-fit: cover;">
                        </div>
                        <div class="d-flex flex-column  ">
                          <span class="m-0 px-2 p-0">Vipin Beniwal</span>
                          <div class="m-0 mx-2  rounded  bg-gray d-flex p-1 align-items-center" data-bs-toggle="tooltip"
                            data-bs-placement="bottom" title="Your Friends" type="button" style="font-size: 12px;">
                            <i class="fa-solid  fa-user-group px-1"></i>
                            <span class="m-0 p-0 mx-1 "> Friends </span>
                            <i class="fa-solid fa-caret-down px-1"></i>
                          </div>
                        </div>
                      </div>
                      <!-- input -->
                      <div class="m-0 p-1 d-flex justify-content-between align-items-center">
                        <textarea type="text" class="form-control border-0 bg-white"
                          placeholder="What's on your mind, Vipin?" style="width: 90%;"></textarea>
                        <i class="fa-regular fa-lg text-muted fa-face-smile" type="button" data-bs-toggle="tooltip"
                          data-bs-placement="top" title="Emoji"></i>
                      </div>
                      <!-- photo upload -->
                      <div class="w-100 border  rounded p-1 " type="button" style="height: 15em;">
                        <form>
                          <input type="file" name="file" id="file" class="inputfile"
                            class="h-75 rounded bg-gray hoverDark w-100 d-flex justify-content-center align-items-center flex-column ">
                          <label style="height: 14.3em;" type="button"
                            class=" rounded bg-gray hoverDark w-100 d-flex justify-content-center align-items-center flex-column"
                            for="file">
                            <div class="rounded-circle d-flex  align-items-center justify-content-center bg-gray"
                              style="width: 40px; height: 40px; ">
                              <i class="fa-regular fa-lg  fa-image "></i>
                            </div>
                            <p class="w-100 text-center fs-4 m-0  p-1">Add Photos/videos</p>
                            <span class="text-muted fs-7 w-100 text-center">or drag and drop</span>
                          </label>
                        </form>



                      </div>
                      <!-- add to ur post -->
                      <!-- submit -->
                    </div>
                    <!-- foot -->
                    <div class="p-2">
                      <button type="button" style="width: 100%;" class="p-1 fs-5 btn btn-primary">Post</button>
                    </div>
                  </div>
                </div>
          </div>
          <!-- create room -->
          <div
                class=" bg-white  shadow m-0  w-100 d-flex position-relative justify-content-between align-items-center rounded"
                data-bs-toggle="modal" data-bs-target="#videoModal" type="button">
                <!-- create room button -->
                <div
                  class="m-2 rounded-pill d-flex justify-content-between align-items-center border border-2  bg-gray "
                  type="button" style=" height: 40px; border: 4px;  ">
                  <i class="fa-solid text-info fs-6 fa-lg mx-3 fa-video "></i>
                  <span class="me-3 text-info fw-bold">Create Room</span>
                </div>
                <!-- profiles -->
                <div class="d-flex mx-2  align-items-center justify-content-start rounded-circle "
                  data-bs-toggle="tooltip" data-bs-placement="bottom" title="lorem ipsam" type="button">
                  <div class="position-relative">
                    <img src="https://randomuser.me/api/portraits/women/48.jpg" alt="avatar" class="rounded-circle me-2"
                      style="width: 38px; height: 38px; object-fit: cover" />
                    <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                      style="left: 75%; "></span>
                  </div>
                </div>
                <div class=" me-2 d-lg-flex d-none align-items-center justify-content-start rounded-circle "
                  data-bs-toggle="tooltip" data-bs-placement="bottom" title="lorem ipsam" type="button">
                  <div class="position-relative">
                    <img src="https://randomuser.me/api/portraits/women/49.jpg" alt="avatar" class="rounded-circle me-2"
                      style="width: 38px; height: 38px; object-fit: cover" />
                    <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                      style="left: 75%; "></span>
                  </div>
                </div>
                <div class="d-flex me-2  align-items-center justify-content-start rounded-circle "
                  data-bs-toggle="tooltip" data-bs-placement="bottom" title="lorem ipsam" type="button">
                  <div class="position-relative">
                    <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="avatar" class="rounded-circle me-2"
                      style="width: 38px; height: 38px; object-fit: cover" />
                    <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                      style="left: 75%; "></span>
                  </div>
                </div>
                <div class="d-lg-flex d-none me-2  align-items-center justify-content-start rounded-circle "
                  data-bs-toggle="tooltip" data-bs-placement="bottom" title="lorem ipsam" type="button">
                  <div class="position-relative">
                    <img src="https://randomuser.me/api/portraits/women/38.jpg" alt="avatar" class="rounded-circle me-2"
                      style="width: 38px; height: 38px; object-fit: cover" />
                    <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                      style="left: 75%; "></span>
                  </div>
                </div>
                <div class="d-lg-flex d-none me-2  align-items-center justify-content-start rounded-circle "
                  data-bs-toggle="tooltip" data-bs-placement="bottom" title="lorem ipsam" type="button">
                  <div class="position-relative">
                    <img src="https://randomuser.me/api/portraits/men/68.jpg" alt="avatar" class="rounded-circle me-2"
                      style="width: 38px; height: 38px; object-fit: cover" />
                    <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                      style="left: 75%; "></span>
                  </div>
                </div>
                <div class="d-lg-flex d-none me-2  align-items-center justify-content-start rounded-circle "
                  data-bs-toggle="tooltip" data-bs-placement="bottom" title="lorem ipsam" type="button">
                  <div class="position-relative">
                    <img src="https://randomuser.me/api/portraits/women/40.jpg" alt="avatar" class="rounded-circle me-2"
                      style="width: 38px; height: 38px; object-fit: cover" />
                    <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                      style="left: 75%; "></span>
                  </div>
                </div>
                <div class="d-lg-flex d-none me-2  align-items-center justify-content-start rounded-circle "
                  data-bs-toggle="tooltip" data-bs-placement="bottom" title="lorem ipsam" type="button">
                  <div class="position-relative">
                    <img src="https://randomuser.me/api/portraits/women/87.jpg" alt="avatar" class="rounded-circle me-2"
                      style="width: 38px; height: 38px; object-fit: cover" />
                    <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                      style="left: 75%; "></span>
                  </div>
                </div>
                <div class="d-lg-flex d-none me-2  align-items-center justify-content-start rounded-circle "
                  data-bs-toggle="tooltip" data-bs-placement="bottom" title="lorem ipsam" type="button">
                  <div class="position-relative">
                    <img src="https://randomuser.me/api/portraits/women/40.jpg" alt="avatar" class="rounded-circle me-2"
                      style="width: 38px; height: 38px; object-fit: cover" />
                    <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                      style="left: 75%; "></span>
                  </div>
                </div>
                <!-- next button -->
                <div class="position-absolute top-50 fs-4  translate-middle rounded-circle d-none d-lg-block"
                  type="button" style="right: -.01em;" data-bs-toggle="collapse" data-bs-target="#roomSideSlider"
                  aria-expanded="true" aria-controls="roomSideSlider">
                  <i class="fas fa-arrow-right p-2 border text-muted bg-white rounded-circle"></i>
                </div>
          </div>
            <!-- posts -->
          <div class="m-0 p-0">
                <!-- P 1 -->
                <div class="shadow bg-white m-0 rounded my-2" style="min-height: 600px;">
                  <!-- head -->
                  <div class="  d-flex px-3 mt-3 pt-2 justify-content-between align-items-center">
                    <div class="d-flex pt-2 ">
                      <!-- avatar -->
                      <div class="rounded rounded-3   position-relative "
                        style="width: 40px; height:40px ; object-fit: cover;">
                        <img src="https://i.ibb.co/HNHtx1B/96234633-931037977356835-265102200601051136-n.jpg"
                          class="rounded rounded-3 " style="width: 34px; height:34px ;" alt="avatar">
                        <!-- small avatar -->
                        <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                          style="width: 23px; height: 23px; left:60%; top: 60%;">
                          <img src="https://i.ibb.co/HCV2MR5/download-2.jpg"
                            class="position-absolute border border-white rounded-circle "
                            style="width: 28px; height: 28px; object-fit: cover;">
                        </span>

                      </div>
                      <div class="d-flex flex-column justify-content-between align-items-center">
                        <span class="m-0 px-2 fw-bold fs-7 popover-min-width:600px  p-0" type="button">Memes Wale</span>
                        <span class="m-0 fs-7 text-muted p-0 w-100 ps-2 align-items-start text-start"
                          data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true"
                          data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" style="min-width:300px; height:300px;">
                      <div class="align-items-center popover-body d-flex p-2" >
                        <img src="https://i.ibb.co/HCV2MR5/download-2.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
                      </div>
                      <div class="p-2">
                        <h5 class="m-1 py-1">Mark Z.</h5>
                        <div class="d-flex">
                          <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                          <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
                        </div>
                        <div class="d-flex ">
                          <i class="fas fa-graduation-cap m-1 text-muted"></i>
                          <p>Studies at MIT</p>
                        </div>
                      </div>
                    </div>' type="button">Mark Z</span>

                      </div>

                    </div>
                    <div class="d-flex pt-2">
                      <div
                        class="rounded-circle d-flex bg-white hoverLight justify-content-center align-items-center mx-2"
                        type="button" style="width: 35px; height: 35px;">
                        <i class="fa-solid text-muted fa-lg fa-ellipsis"></i>
                      </div>
                    </div>
                  </div>
                  <p class="mx-3 m-0 mb-1 p-0 fs-7">"Caption"</p>
                  <!-- body -->
                  <div class="m-0 p-0">
                    <hr class="m-0 p-0 text-muted">
                    <img class=" w-100" style="height: 650px; object-fit:cover !important;"
                      src="https://i.ibb.co/xjnZsQR/photo-1650599811699-a531af8496dd.jpg"
                      alt="photo-1650599811699-a531af8496dd" border="0">
                    <hr class="m-0 p-0 text-muted">
                    <!-- reaction -->
                    <div class="p-o d-flex justify-content-between text-muted align-items-center">
                      <div class="p-2 d-flex  position-relative  align-items-start">
                        <!-- heart -->
                        <div class="d-flex ps-2 fs-6 m-0 p-0 " type="button" data-bs-toggle="tooltip"
                          data-bs-placement="top" title="Mark Z. and 6k others">&#10084;</div>
                        <!-- like -->
                        <div class="d-flex  fs-6  position-relative" type="button" data-bs-toggle="tooltip"
                          data-bs-placement="top" title="John and 2k others"> &#128077;</div>
                        <!-- haha -->
                        <div class="d-flex  fs-6 m-0 p-0 " type="button" data-bs-toggle="tooltip"
                          data-bs-placement="top" title="Mark Z. and 20 others">&#128518;</div>

                        <div class="d-flex  fs-6 text-muted px-1 position-relative" type="button"> 8k</div>
                      </div>
                      <div class="px-3">
                        <a href="#" class="text-decoration-none text-muted " type="button">50 Comments</a>
                      </div>
                    </div>
                    <hr class="text-muted mx-2 m-0 p-0 ">
                    <!-- like/comment -->
                    <div class="p-2 d-flex">
                      <div class="rounded hoverLight w-50 text-muted text-center fs-6 p-1 fw-bold" type="button"><i
                          class="fa-solid me-2 fa-thumbs-up"></i>Like
                      </div>
                      <div class="rounded hoverLight w-50 text-muted text-center fs-6 p-1 fw-bold" type="button"><i
                          class="fa-solid me-2 fa-comment"></i>Comment
                      </div>
                    </div>
                    <hr class="text-muted mx-2 m-0 p-0 ">

                    <div class="d-flex justify-content-between m-1 px-3 ">
                      <div class="" type="button">
                        <a href="#" class="txt text-muted text-decoration-none" data-bs-toggle="collapse"
                          data-bs-target="#allComments" aria-expanded="false" aria-controls="allComments">View previous
                          7 comments</a>
                      </div>

                      <div class="text-muted" type="button" type="button" id="allComments" data-bs-toggle="dropdown"
                        aria-expanded="true">All Comments <i class="fa-solid fa-caret-down"></i></div>
                    </div>
                    <!-- all comment button -->
                    <div class="dropdown">
                      <ul class="dropdown-menu" aria-labelledby="allComments">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
                    </div>
                    <hr class="text-muted mx-2 m-0 p-0 ">
                    <!-- all comments -->
                    <div class="m-2 p-1 ">
                      <!-- c 1 -->
                      <div class="d-flex my-2">
                        <!-- avatar -->
                        <div class="rounded-circle m-0 p-0 ">
                          <img src="https://randomuser.me/api/portraits/women/49.jpg" class="rounded-circle m-0 p-0"
                            style="width: 32px; height: 32px; object-fit: cover;" alt="avatar">
                        </div>
                        <!-- name and comment -->
                        <div class="">
                          <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                            <div class="d-flex flex-column m-1">
                              <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                              <span class="m-0 p-0 text-dark ">Lorem ipsum dolor sit.</span>
                            </div>
                          </div>
                          <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                            <div class="mx-2 fw-bold" type="button">Like</div>
                            <div class="mx-2 fw-bold" type="button">Reply</div>
                            <div class="mx-2 fw-bold" type="button">Share</div>
                            <div class="mx-2" type="button">1d</div>
                          </div>
                        </div>
                      </div>
                      <!-- c 2 -->
                      <div class="d-flex my-2">
                        <!-- avatar -->
                        <div class="rounded-circle m-0 p-0 ">
                          <img src="https://randomuser.me/api/portraits/women/48.jpg" class="rounded-circle m-0 p-0"
                            style="width: 32px; height: 32px; object-fit: cover;" alt="avatar">
                        </div>
                        <!-- name and comment -->
                        <div class="">
                          <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                            <div class="d-flex flex-column m-1">
                              <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                              <span class="m-0 p-0 text-dark ">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                                Ipsum, assumenda.</span>
                            </div>
                          </div>
                          <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                            <div class="mx-2 fw-bold" type="button">Like</div>
                            <div class="mx-2 fw-bold" type="button">Reply</div>
                            <div class="mx-2 fw-bold" type="button">Share</div>
                            <div class="mx-2" type="button">1d</div>
                          </div>
                        </div>
                      </div>
                      <!-- c 3 -->
                      <div class="d-flex my-2">
                        <!-- avatar -->
                        <div class="rounded-circle m-0 p-0 ">
                          <img src="https://i.ibb.co/TgP0sKm/Mark-Zuckerberg-F8-2019-Keynote-32830578717-cropped.jpg"
                            class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                            alt="avatar">
                        </div>
                        <!-- name and comment -->
                        <div class="">
                          <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                            <div class="d-flex flex-column m-1">
                              <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                              <span class="m-0 p-0 text-dark ">Tha's Great. Keep it up.</span>
                            </div>
                          </div>
                          <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                            <div class="mx-2 fw-bold" type="button">Like</div>
                            <div class="mx-2 fw-bold" type="button">Reply</div>
                            <div class="mx-2 fw-bold" type="button">Share</div>
                            <div class="mx-2" type="button">1d</div>
                          </div>
                        </div>
                      </div>
                      <!-- all comments accordion dd -->
                      <div class="accordion" id="allCommentsDD">
                        <div class="accordion-item border-0 m-0">
                          <div id="allComments" class="accordion-collapse collapse border-0 m-0 "
                            aria-labelledby="headingOne" data-bs-parent="#allCommentsDD">
                            <div class="accordion-body border-0 m-0 p-1">
                              <!-- c 1 -->
                              <div class="d-flex my-2">
                                <!-- avatar -->
                                <div class="rounded-circle m-0 p-0 ">
                                  <img src="https://randomuser.me/api/portraits/women/49.jpg"
                                    class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                    alt="avatar">
                                </div>
                                <!-- name and comment -->
                                <div class="">
                                  <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                    <div class="d-flex flex-column m-1">
                                      <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                      <span class="m-0 p-0 text-dark ">Lorem ipsum dolor sit.</span>
                                    </div>
                                  </div>
                                  <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                    <div class="mx-2 fw-bold" type="button">Like</div>
                                    <div class="mx-2 fw-bold" type="button">Reply</div>
                                    <div class="mx-2 fw-bold" type="button">Share</div>
                                    <div class="mx-2" type="button">1d</div>
                                  </div>
                                </div>
                              </div>
                              <!-- c 2 -->
                              <div class="d-flex my-2">
                                <!-- avatar -->
                                <div class="rounded-circle m-0 p-0 ">
                                  <img src="https://randomuser.me/api/portraits/women/48.jpg"
                                    class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                    alt="avatar">
                                </div>
                                <!-- name and comment -->
                                <div class="">
                                  <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                    <div class="d-flex flex-column m-1">
                                      <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                      <span class="m-0 p-0 text-dark ">Lorem, ipsum dolor sit amet consectetur
                                        adipisicing elit. Ipsum, assumenda.</span>
                                    </div>
                                  </div>
                                  <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                    <div class="mx-2 fw-bold" type="button">Like</div>
                                    <div class="mx-2 fw-bold" type="button">Reply</div>
                                    <div class="mx-2 fw-bold" type="button">Share</div>
                                    <div class="mx-2" type="button">1d</div>
                                  </div>
                                </div>
                              </div>
                              <!-- c 3 -->
                              <div class="d-flex my-2">
                                <!-- avatar -->
                                <div class="rounded-circle m-0 p-0 ">
                                  <img
                                    src="https://i.ibb.co/TgP0sKm/Mark-Zuckerberg-F8-2019-Keynote-32830578717-cropped.jpg"
                                    class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                    alt="avatar">
                                </div>
                                <!-- name and comment -->
                                <div class="">
                                  <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                    <div class="d-flex flex-column m-1">
                                      <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                      <span class="m-0 p-0 text-dark ">Tha's Great. Keep it up.</span>
                                    </div>
                                  </div>
                                  <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                    <div class="mx-2 fw-bold" type="button">Like</div>
                                    <div class="mx-2 fw-bold" type="button">Reply</div>
                                    <div class="mx-2 fw-bold" type="button">Share</div>
                                    <div class="mx-2" type="button">1d</div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- P 2 -->
                <div class="shadow bg-white m-0 rounded my-2" style="min-height: 600px;">
                  <!-- head -->
                  <div class="  d-flex px-3 mt-3 pt-2 justify-content-between align-items-center">
                    <div class="d-flex pt-2 ">
                      <!-- avatar -->

                      <div class="rounded-circle ">
                        <img src="https://i.ibb.co/L6sKHWs/oppo-h-JQi0y-RQQzk-unsplash.jpg" class="rounded-circle "
                          style="width: 34px; height:34px ; object-fit: cover;" alt="avatar">
                      </div>
                      <div class="d-flex flex-column justify-content-between align-items-start">

                        <span class="m-0 fs-7  fw-bold p-0 w-100 ps-2 align-items-start text-start"
                          data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true"
                          data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" style="min-width:300px; height:300px;">
                      <div class="align-items-center popover-body d-flex p-2" >
                        <img src="https://i.ibb.co/HCV2MR5/download-2.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
                      </div>
                      <div class="p-2">
                        <h5 class="m-1 py-1">Mark Z.</h5>
                        <div class="d-flex">
                          <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                          <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
                        </div>
                        <div class="d-flex ">
                          <i class="fas fa-graduation-cap m-1 text-muted"></i>
                          <p>Studies at MIT</p>
                        </div>
                      </div>
                    </div>' type="button">Michael Dam</span>
                        <span class="m-0 px-2 text-muted fs-7 popover-min-width:600px  p-0" type="button">
                          1d &#8226; &#127758;
                        </span>

                      </div>

                    </div>
                    <div class="d-flex pt-2">
                      <div
                        class="rounded-circle d-flex bg-white hoverLight justify-content-center align-items-center mx-2"
                        type="button" style="width: 35px; height: 35px;">
                        <i class="fa-solid text-muted fa-lg fa-ellipsis"></i>
                      </div>
                    </div>
                  </div>
                  <p class="mx-3 m-0 mb-1 p-0 fs-7">"Caption"</p>
                  <!-- body -->
                  <div class="m-0 p-0">
                    <hr class="m-0 p-0 text-muted">
                    <img class=" w-100" style="height: 650px; object-fit:cover !important;"
                      src="https://i.ibb.co/CK8Rqf6/allyssa-sayers-znu-Q3xdyn-Oo-unsplash.jpg" border="0">
                    <hr class="m-0 p-0 text-muted">
                    <!-- reaction -->
                    <div class="p-o d-flex justify-content-between text-muted align-items-center">
                      <div class="p-2 d-flex  position-relative  align-items-start">
                        <!-- heart -->
                        <div class="d-flex ps-2 fs-6 m-0 p-0 " type="button" data-bs-toggle="tooltip"
                          data-bs-placement="top" title="Mark Z. and 6k others">&#10084;</div>

                        <div class="d-flex  fs-6  position-relative" type="button" data-bs-toggle="tooltip"
                          data-bs-placement="top" title="John and 2k others"> &#128077;</div>
                        <!-- haha -->
                        <div class="d-flex  fs-6 m-0 p-0 " type="button" data-bs-toggle="tooltip"
                          data-bs-placement="top" title="Mark Z. and 15 others">&#128518;</div>
                        <div class="d-flex  fs-6 text-muted px-1 position-relative" type="button"> 8k</div>
                      </div>
                      <div class="px-3">
                        <a href="#" class="text-decoration-none text-muted " type="button">50 Comments</a>
                      </div>
                    </div>
                    <hr class="text-muted mx-2 m-0 p-0 ">
                    <!-- like/comment -->
                    <div class="p-2 d-flex">
                      <div class="rounded hoverLight w-50 text-muted text-center fs-6 p-1 fw-bold" type="button"><i
                          class="fa-solid me-2 fa-thumbs-up"></i>Like
                      </div>
                      <div class="rounded hoverLight w-50 text-muted text-center fs-6 p-1 fw-bold" type="button"><i
                          class="fa-solid me-2 fa-comment"></i>Comment
                      </div>
                    </div>
                    <hr class="text-muted mx-2 m-0 p-0 ">

                    <div class="d-flex justify-content-between m-1 px-3 ">
                      <div class="" type="button">
                        <a href="#" class="txt text-muted text-decoration-none" data-bs-toggle="collapse"
                          data-bs-target="#allComments" aria-expanded="false" aria-controls="allComments">View previous
                          7 comments</a>
                      </div>

                      <div class="text-muted" type="button" type="button" id="allComments" data-bs-toggle="dropdown"
                        aria-expanded="true">All Comments <i class="fa-solid fa-caret-down"></i></div>
                    </div>
                    <!-- all comment button -->
                    <div class="dropdown">
                      <ul class="dropdown-menu" aria-labelledby="allComments">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
                    </div>
                    <hr class="text-muted mx-2 m-0 p-0 ">
                    <!-- all comments -->
                    <div class="m-2 p-1 ">
                      <!-- c 1 -->
                      <div class="d-flex my-2">
                        <!-- avatar -->
                        <div class="rounded-circle m-0 p-0 ">
                          <img src="https://randomuser.me/api/portraits/women/49.jpg" class="rounded-circle m-0 p-0"
                            style="width: 32px; height: 32px; object-fit: cover;" alt="avatar">
                        </div>
                        <!-- name and comment -->
                        <div class="">
                          <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                            <div class="d-flex flex-column m-1">
                              <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                              <span class="m-0 p-0 text-dark ">Lorem ipsum dolor sit.</span>
                            </div>
                          </div>
                          <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                            <div class="mx-2 fw-bold" type="button">Like</div>
                            <div class="mx-2 fw-bold" type="button">Reply</div>
                            <div class="mx-2 fw-bold" type="button">Share</div>
                            <div class="mx-2" type="button">1d</div>
                          </div>
                        </div>
                      </div>
                      <!-- c 2 -->
                      <div class="d-flex my-2">
                        <!-- avatar -->
                        <div class="rounded-circle m-0 p-0 ">
                          <img src="https://randomuser.me/api/portraits/women/48.jpg" class="rounded-circle m-0 p-0"
                            style="width: 32px; height: 32px; object-fit: cover;" alt="avatar">
                        </div>
                        <!-- name and comment -->
                        <div class="">
                          <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                            <div class="d-flex flex-column m-1">
                              <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                              <span class="m-0 p-0 text-dark ">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                                Ipsum, assumenda.</span>
                            </div>
                          </div>
                          <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                            <div class="mx-2 fw-bold" type="button">Like</div>
                            <div class="mx-2 fw-bold" type="button">Reply</div>
                            <div class="mx-2 fw-bold" type="button">Share</div>
                            <div class="mx-2" type="button">1d</div>
                          </div>
                        </div>
                      </div>
                      <!-- c 3 -->
                      <div class="d-flex my-2">
                        <!-- avatar -->
                        <div class="rounded-circle m-0 p-0 ">
                          <img src="https://i.ibb.co/TgP0sKm/Mark-Zuckerberg-F8-2019-Keynote-32830578717-cropped.jpg"
                            class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                            alt="avatar">
                        </div>
                        <!-- name and comment -->
                        <div class="">
                          <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                            <div class="d-flex flex-column m-1">
                              <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                              <span class="m-0 p-0 text-dark ">Tha's Great. Keep it up.</span>
                            </div>
                          </div>
                          <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                            <div class="mx-2 fw-bold" type="button">Like</div>
                            <div class="mx-2 fw-bold" type="button">Reply</div>
                            <div class="mx-2 fw-bold" type="button">Share</div>
                            <div class="mx-2" type="button">1d</div>
                          </div>
                        </div>
                      </div>
                      <!-- all comments accordion dd -->
                      <div class="accordion" id="allCommentsDD">
                        <div class="accordion-item border-0 m-0">
                          <div id="allComments" class="accordion-collapse collapse border-0 m-0 "
                            aria-labelledby="headingOne" data-bs-parent="#allCommentsDD">
                            <div class="accordion-body border-0 m-0 p-1">
                              <!-- c 1 -->
                              <div class="d-flex my-2">
                                <!-- avatar -->
                                <div class="rounded-circle m-0 p-0 ">
                                  <img src="https://randomuser.me/api/portraits/women/49.jpg"
                                    class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                    alt="avatar">
                                </div>
                                <!-- name and comment -->
                                <div class="">
                                  <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                    <div class="d-flex flex-column m-1">
                                      <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                      <span class="m-0 p-0 text-dark ">Lorem ipsum dolor sit.</span>
                                    </div>
                                  </div>
                                  <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                    <div class="mx-2 fw-bold" type="button">Like</div>
                                    <div class="mx-2 fw-bold" type="button">Reply</div>
                                    <div class="mx-2 fw-bold" type="button">Share</div>
                                    <div class="mx-2" type="button">1d</div>
                                  </div>
                                </div>
                              </div>
                              <!-- c 2 -->
                              <div class="d-flex my-2">
                                <!-- avatar -->
                                <div class="rounded-circle m-0 p-0 ">
                                  <img src="https://randomuser.me/api/portraits/women/48.jpg"
                                    class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                    alt="avatar">
                                </div>
                                <!-- name and comment -->
                                <div class="">
                                  <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                    <div class="d-flex flex-column m-1">
                                      <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                      <span class="m-0 p-0 text-dark ">Lorem, ipsum dolor sit amet consectetur
                                        adipisicing elit. Ipsum, assumenda.</span>
                                    </div>
                                  </div>
                                  <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                    <div class="mx-2 fw-bold" type="button">Like</div>
                                    <div class="mx-2 fw-bold" type="button">Reply</div>
                                    <div class="mx-2 fw-bold" type="button">Share</div>
                                    <div class="mx-2" type="button">1d</div>
                                  </div>
                                </div>
                              </div>
                              <!-- c 3 -->
                              <div class="d-flex my-2">
                                <!-- avatar -->
                                <div class="rounded-circle m-0 p-0 ">
                                  <img
                                    src="https://i.ibb.co/TgP0sKm/Mark-Zuckerberg-F8-2019-Keynote-32830578717-cropped.jpg"
                                    class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                    alt="avatar">
                                </div>
                                <!-- name and comment -->
                                <div class="">
                                  <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                    <div class="d-flex flex-column m-1">
                                      <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                      <span class="m-0 p-0 text-dark ">Tha's Great. Keep it up.</span>
                                    </div>
                                  </div>
                                  <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                    <div class="mx-2 fw-bold" type="button">Like</div>
                                    <div class="mx-2 fw-bold" type="button">Reply</div>
                                    <div class="mx-2 fw-bold" type="button">Share</div>
                                    <div class="mx-2" type="button">1d</div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- P 3 -->
                <div class="shadow bg-white m-0 rounded my-2" style="min-height: 600px;">
                  <!-- head -->
                  <div class="  d-flex px-3 mt-3 pt-2 justify-content-between align-items-center">
                    <div class="d-flex pt-2 ">
                      <!-- avatar -->
                      <div class="rounded-circle ">
                        <img src="https://i.ibb.co/48cQJSq/oppo-ksm0qs-Jcx-Xk-unsplash.jpg" class="rounded-circle "
                          style="width: 34px; height:34px ; object-fit: cover;" alt="avatar">
                      </div>
                      <div class="d-flex flex-column justify-content-between align-items-start">

                        <span class="m-0 fs-7  fw-bold p-0 w-100 ps-2 align-items-start text-start"
                          data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true"
                          data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" style="min-width:300px; height:300px;">
                      <div class="align-items-center popover-body d-flex p-2" >
                        <img src="https://i.ibb.co/48cQJSq/oppo-ksm0qs-Jcx-Xk-unsplash.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
                      </div>
                      <div class="p-2">
                        <h5 class="m-1 py-1">Kirill Balobanov
                        </h5>
                        <div class="d-flex">
                          <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                          <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
                        </div>
                        <div class="d-flex ">
                          <i class="fas fa-graduation-cap m-1 text-muted"></i>
                          <p>Studies at MIT</p>
                        </div>
                      </div>
                    </div>' type="button">Kirill Balobanov
                        </span>
                        <span class="m-0 px-2 text-muted fs-7 popover-min-width:600px  p-0" type="button">
                          3d
                        </span>

                      </div>

                    </div>
                    <div class="d-flex pt-2">
                      <div
                        class="rounded-circle d-flex bg-white hoverLight justify-content-center align-items-center mx-2"
                        type="button" style="width: 35px; height: 35px;">
                        <i class="fa-solid text-muted fa-lg fa-ellipsis"></i>
                      </div>
                    </div>
                  </div>
                  <!-- captiion -->
                  <p class="mx-3 m-0 mb-1 p-0 fs-7">"Caption"</p>
                  <!-- body -->
                  <div class="m-0 p-0">
                    <hr class="m-0 p-0 text-muted">
                    <img class=" w-100" style="height: 650px; object-fit:cover !important;"
                      src="https://i.ibb.co/dQcsFZC/alexander-grigoryev-lk-Ya33goc-BA-unsplash-1.jpg" border="0">
                    <hr class="m-0 p-0 text-muted">
                    <!-- reaction -->
                    <div class="p-o d-flex justify-content-between text-muted align-items-center">
                      <div class="p-2 d-flex  position-relative  align-items-start">
                        <!-- heart -->
                        <div class="d-flex ps-2 fs-6 m-0 p-0 " type="button" data-bs-toggle="tooltip"
                          data-bs-placement="top" title="Mark Z. and 6k others">&#10084;</div>

                        <div class="d-flex  fs-6  position-relative" type="button" data-bs-toggle="tooltip"
                          data-bs-placement="top" title="John and 2k others"> &#128077;</div>
                        <!-- haha -->
                        <div class="d-flex  fs-6 m-0 p-0 " type="button" data-bs-toggle="tooltip"
                          data-bs-placement="top" title="Mark Z. and 5 others">&#128518;</div>
                        <div class="d-flex  fs-6 text-muted px-1 position-relative" type="button"> 8k</div>
                      </div>
                      <div class="px-3">
                        <a href="#" class="text-decoration-none text-muted " type="button">50 Comments</a>
                      </div>
                    </div>
                    <hr class="text-muted mx-2 m-0 p-0 ">
                    <!-- like/comment -->
                    <div class="p-2 d-flex">
                      <div class="rounded hoverLight w-50 text-muted text-center fs-6 p-1 fw-bold" type="button"><i
                          class="fa-solid me-2 fa-thumbs-up"></i>Like
                      </div>
                      <div class="rounded hoverLight w-50 text-muted text-center fs-6 p-1 fw-bold" type="button"><i
                          class="fa-solid me-2 fa-comment"></i>Comment
                      </div>
                    </div>
                    <hr class="text-muted mx-2 m-0 p-0 ">
                    <div class="d-flex justify-content-between m-1 px-3 ">
                      <div class="" type="button">
                        <a href="#" class="txt text-muted text-decoration-none" data-bs-toggle="collapse"
                          data-bs-target="#allComments" aria-expanded="false" aria-controls="allComments">View previous
                          7 comments</a>
                      </div>

                      <div class="text-muted" type="button" type="button" id="allComments" data-bs-toggle="dropdown"
                        aria-expanded="true">All Comments <i class="fa-solid fa-caret-down"></i></div>
                    </div>
                    <!-- all comment button -->
                    <div class="dropdown">
                      <ul class="dropdown-menu" aria-labelledby="allComments">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
                    </div>
                    <hr class="text-muted mx-2 m-0 p-0 ">
                    <!-- all comments -->
                    <div class="m-2 p-1 ">
                      <!-- c 1 -->
                      <div class="d-flex my-2">
                        <!-- avatar -->
                        <div class="rounded-circle m-0 p-0 ">
                          <img src="https://randomuser.me/api/portraits/women/49.jpg" class="rounded-circle m-0 p-0"
                            style="width: 32px; height: 32px; object-fit: cover;" alt="avatar">
                        </div>
                        <!-- name and comment -->
                        <div class="">
                          <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                            <div class="d-flex flex-column m-1">
                              <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                              <span class="m-0 p-0 text-dark ">Lorem ipsum dolor sit.</span>
                            </div>
                          </div>
                          <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                            <div class="mx-2 fw-bold" type="button">Like</div>
                            <div class="mx-2 fw-bold" type="button">Reply</div>
                            <div class="mx-2 fw-bold" type="button">Share</div>
                            <div class="mx-2" type="button">1d</div>
                          </div>
                        </div>
                      </div>
                      <!-- c 2 -->
                      <div class="d-flex my-2">
                        <!-- avatar -->
                        <div class="rounded-circle m-0 p-0 ">
                          <img src="https://randomuser.me/api/portraits/women/48.jpg" class="rounded-circle m-0 p-0"
                            style="width: 32px; height: 32px; object-fit: cover;" alt="avatar">
                        </div>
                        <!-- name and comment -->
                        <div class="">
                          <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                            <div class="d-flex flex-column m-1">
                              <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                              <span class="m-0 p-0 text-dark ">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                                Ipsum, assumenda.</span>
                            </div>
                          </div>
                          <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                            <div class="mx-2 fw-bold" type="button">Like</div>
                            <div class="mx-2 fw-bold" type="button">Reply</div>
                            <div class="mx-2 fw-bold" type="button">Share</div>
                            <div class="mx-2" type="button">1d</div>
                          </div>
                        </div>
                      </div>
                      <!-- c 3 -->
                      <div class="d-flex my-2">
                        <!-- avatar -->
                        <div class="rounded-circle m-0 p-0 ">
                          <img src="https://i.ibb.co/TgP0sKm/Mark-Zuckerberg-F8-2019-Keynote-32830578717-cropped.jpg"
                            class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                            alt="avatar">
                        </div>
                        <!-- name and comment -->
                        <div class="">
                          <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                            <div class="d-flex flex-column m-1">
                              <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                              <span class="m-0 p-0 text-dark ">Tha's Great. Keep it up.</span>
                            </div>
                          </div>
                          <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                            <div class="mx-2 fw-bold" type="button">Like</div>
                            <div class="mx-2 fw-bold" type="button">Reply</div>
                            <div class="mx-2 fw-bold" type="button">Share</div>
                            <div class="mx-2" type="button">1d</div>
                          </div>
                        </div>
                      </div>
                      <!-- all comments accordion dd -->
                      <div class="accordion" id="allCommentsDD">
                        <div class="accordion-item border-0 m-0">
                          <div id="allComments" class="accordion-collapse collapse border-0 m-0 "
                            aria-labelledby="headingOne" data-bs-parent="#allCommentsDD">
                            <div class="accordion-body border-0 m-0 p-1">
                              <!-- c 1 -->
                              <div class="d-flex my-2">
                                <!-- avatar -->
                                <div class="rounded-circle m-0 p-0 ">
                                  <img src="https://randomuser.me/api/portraits/women/49.jpg"
                                    class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                    alt="avatar">
                                </div>
                                <!-- name and comment -->
                                <div class="">
                                  <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                    <div class="d-flex flex-column m-1">
                                      <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                      <span class="m-0 p-0 text-dark ">Lorem ipsum dolor sit.</span>
                                    </div>
                                  </div>
                                  <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                    <div class="mx-2 fw-bold" type="button">Like</div>
                                    <div class="mx-2 fw-bold" type="button">Reply</div>
                                    <div class="mx-2 fw-bold" type="button">Share</div>
                                    <div class="mx-2" type="button">1d</div>
                                  </div>
                                </div>
                              </div>
                              <!-- c 2 -->
                              <div class="d-flex my-2">
                                <!-- avatar -->
                                <div class="rounded-circle m-0 p-0 ">
                                  <img src="https://randomuser.me/api/portraits/women/48.jpg"
                                    class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                    alt="avatar">
                                </div>
                                <!-- name and comment -->
                                <div class="">
                                  <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                    <div class="d-flex flex-column m-1">
                                      <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                      <span class="m-0 p-0 text-dark ">Lorem, ipsum dolor sit amet consectetur
                                        adipisicing elit. Ipsum, assumenda.</span>
                                    </div>
                                  </div>
                                  <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                    <div class="mx-2 fw-bold" type="button">Like</div>
                                    <div class="mx-2 fw-bold" type="button">Reply</div>
                                    <div class="mx-2 fw-bold" type="button">Share</div>
                                    <div class="mx-2" type="button">1d</div>
                                  </div>
                                </div>
                              </div>
                              <!-- c 3 -->
                              <div class="d-flex my-2">
                                <!-- avatar -->
                                <div class="rounded-circle m-0 p-0 ">
                                  <img
                                    src="https://i.ibb.co/TgP0sKm/Mark-Zuckerberg-F8-2019-Keynote-32830578717-cropped.jpg"
                                    class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                    alt="avatar">
                                </div>
                                <!-- name and comment -->
                                <div class="">
                                  <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                    <div class="d-flex flex-column m-1">
                                      <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                      <span class="m-0 p-0 text-dark ">Tha's Great. Keep it up.</span>
                                    </div>
                                  </div>
                                  <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                    <div class="mx-2 fw-bold" type="button">Like</div>
                                    <div class="mx-2 fw-bold" type="button">Reply</div>
                                    <div class="mx-2 fw-bold" type="button">Share</div>
                                    <div class="mx-2" type="button">1d</div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- P 4 -->
                <div class="shadow bg-white m-0 rounded my-2" style="min-height: 600px;">
                  <!-- head -->
                  <div class="  d-flex px-3 mt-3 pt-2 justify-content-between align-items-center">
                    <div class="d-flex pt-2 ">
                      <!-- avatar -->
                      <div class="rounded rounded-3   position-relative "
                        style="width: 40px; height:40px ; object-fit: cover;">
                        <img src="https://i.ibb.co/HNHtx1B/96234633-931037977356835-265102200601051136-n.jpg"
                          class="rounded rounded-3 " style="width: 34px; height:34px ;" alt="avatar">
                        <!-- small avatar -->
                        <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                          style="width: 23px; height: 23px; left:60%; top: 60%;">
                          <img src="https://i.ibb.co/HCV2MR5/download-2.jpg"
                            class="position-absolute border border-white rounded-circle "
                            style="width: 28px; height: 28px; object-fit: cover;">
                        </span>

                      </div>
                      <div class="d-flex flex-column justify-content-between align-items-center">
                        <span class="m-0 px-2 fw-bold fs-7 popover-min-width:600px  p-0" type="button">Memes Wale</span>
                        <span class="m-0 fs-7 text-muted p-0 w-100 ps-2 align-items-start text-start"
                          data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true"
                          data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" style="min-width:300px; height:300px;">
                      <div class="align-items-center popover-body d-flex p-2" >
                        <img src="https://i.ibb.co/HCV2MR5/download-2.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
                      </div>
                      <div class="p-2">
                        <h5 class="m-1 py-1">Mark Z.</h5>
                        <div class="d-flex">
                          <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                          <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
                        </div>
                        <div class="d-flex ">
                          <i class="fas fa-graduation-cap m-1 text-muted"></i>
                          <p>Studies at MIT</p>
                        </div>
                      </div>
                    </div>' type="button">Mark Z</span>

                      </div>

                    </div>
                    <div class="d-flex pt-2">
                      <div
                        class="rounded-circle d-flex bg-white hoverLight justify-content-center align-items-center mx-2"
                        type="button" style="width: 35px; height: 35px;">
                        <i class="fa-solid text-muted fa-lg fa-ellipsis"></i>
                      </div>
                    </div>
                  </div>
                  <p class="mx-3 m-0 mb-1 p-0 fs-7">"Caption"</p>
                  <!-- body -->
                  <hr class="m-0 p-0 text-muted">
                  <img class=" w-100" style="height: 650px; object-fit:cover !important;"
                    src="https://i.ibb.co/xjnZsQR/photo-1650599811699-a531af8496dd.jpg"
                    alt="photo-1650599811699-a531af8496dd" border="0">
                  <hr class="m-0 p-0 text-muted">
                  <!-- reaction -->
                  <div class="p-o d-flex justify-content-between text-muted align-items-center">
                    <div class="p-2 d-flex  position-relative  align-items-start">
                      <!-- haha -->
                      <div class="d-flex ps-2 fs-6 m-0 p-0 " type="button" data-bs-toggle="tooltip"
                        data-bs-placement="top" title="Mark Z. and 6k others">&#128518;</div>
                      <div class="d-flex  fs-6  position-relative" type="button" data-bs-toggle="tooltip"
                        data-bs-placement="top" title="John and 2k others"> &#128077;</div>
                      <div class="d-flex  fs-6 text-muted px-1 position-relative" type="button"> 8k</div>
                    </div>
                    <div class="px-3">
                      <a href="#" class="text-decoration-none text-muted " type="button">50 Comments</a>
                    </div>
                  </div>
                  <hr class="text-muted mx-2 m-0 p-0 ">
                  <!-- like/comment -->
                  <div class="p-2 d-flex">
                    <div class="rounded hoverLight w-50 text-muted text-center fs-6 p-1 fw-bold" type="button"><i
                        class="fa-solid me-2 fa-thumbs-up"></i>Like
                    </div>
                    <div class="rounded hoverLight w-50 text-muted text-center fs-6 p-1 fw-bold" type="button"><i
                        class="fa-solid me-2 fa-comment"></i>Comment
                    </div>
                  </div>
                  <hr class="text-muted mx-2 m-0 p-0 ">

                  <div class="d-flex justify-content-between m-1 px-3 ">
                    <div class="" type="button">
                      <a href="#" class="txt text-muted text-decoration-none" data-bs-toggle="collapse"
                        data-bs-target="#allComments" aria-expanded="false" aria-controls="allComments">View previous 7
                        comments</a>
                    </div>

                    <div class="text-muted" type="button" type="button" id="allComments" data-bs-toggle="dropdown"
                      aria-expanded="true">All Comments <i class="fa-solid fa-caret-down"></i></div>
                  </div>
                  <!-- all comment button -->
                  <div class="dropdown">
                    <ul class="dropdown-menu" aria-labelledby="allComments">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">Another action</a></li>
                      <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                  </div>
                  <hr class="text-muted mx-2 m-0 p-0 ">
                  <!-- all comments -->
                  <div class="m-2 p-1 ">
                    <!-- c 1 -->
                    <div class="d-flex my-2">
                      <!-- avatar -->
                      <div class="rounded-circle m-0 p-0 ">
                        <img src="https://randomuser.me/api/portraits/women/49.jpg" class="rounded-circle m-0 p-0"
                          style="width: 32px; height: 32px; object-fit: cover;" alt="avatar">
                      </div>
                      <!-- name and comment -->
                      <div class="">
                        <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                          <div class="d-flex flex-column m-1">
                            <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                            <span class="m-0 p-0 text-dark ">Lorem ipsum dolor sit.</span>
                          </div>
                        </div>
                        <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                          <div class="mx-2 fw-bold" type="button">Like</div>
                          <div class="mx-2 fw-bold" type="button">Reply</div>
                          <div class="mx-2 fw-bold" type="button">Share</div>
                          <div class="mx-2" type="button">1d</div>
                        </div>
                      </div>
                    </div>
                    <!-- c 2 -->
                    <div class="d-flex my-2">
                      <!-- avatar -->
                      <div class="rounded-circle m-0 p-0 ">
                        <img src="https://randomuser.me/api/portraits/women/48.jpg" class="rounded-circle m-0 p-0"
                          style="width: 32px; height: 32px; object-fit: cover;" alt="avatar">
                      </div>
                      <!-- name and comment -->
                      <div class="">
                        <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                          <div class="d-flex flex-column m-1">
                            <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                            <span class="m-0 p-0 text-dark ">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                              Ipsum, assumenda.</span>
                          </div>
                        </div>
                        <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                          <div class="mx-2 fw-bold" type="button">Like</div>
                          <div class="mx-2 fw-bold" type="button">Reply</div>
                          <div class="mx-2 fw-bold" type="button">Share</div>
                          <div class="mx-2" type="button">1d</div>
                        </div>
                      </div>
                    </div>
                    <!-- c 3 -->
                    <div class="d-flex my-2">
                      <!-- avatar -->
                      <div class="rounded-circle m-0 p-0 ">
                        <img src="https://i.ibb.co/TgP0sKm/Mark-Zuckerberg-F8-2019-Keynote-32830578717-cropped.jpg"
                          class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                          alt="avatar">
                      </div>
                      <!-- name and comment -->
                      <div class="">
                        <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                          <div class="d-flex flex-column m-1">
                            <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                            <span class="m-0 p-0 text-dark ">Tha's Great. Keep it up.</span>
                          </div>
                        </div>
                        <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                          <div class="mx-2 fw-bold" type="button">Like</div>
                          <div class="mx-2 fw-bold" type="button">Reply</div>
                          <div class="mx-2 fw-bold" type="button">Share</div>
                          <div class="mx-2" type="button">1d</div>
                        </div>
                      </div>
                    </div>
                    <!-- all comments accordion dd -->
                    <div class="accordion" id="allCommentsDD">
                      <div class="accordion-item border-0 m-0">
                        <div id="allComments" class="accordion-collapse collapse border-0 m-0 "
                          aria-labelledby="headingOne" data-bs-parent="#allCommentsDD">
                          <div class="accordion-body border-0 m-0 p-1">
                            <!-- c 1 -->
                            <div class="d-flex my-2">
                              <!-- avatar -->
                              <div class="rounded-circle m-0 p-0 ">
                                <img src="https://randomuser.me/api/portraits/women/49.jpg"
                                  class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                  alt="avatar">
                              </div>
                              <!-- name and comment -->
                              <div class="">
                                <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                  <div class="d-flex flex-column m-1">
                                    <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                    <span class="m-0 p-0 text-dark ">Lorem ipsum dolor sit.</span>
                                  </div>
                                </div>
                                <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                  <div class="mx-2 fw-bold" type="button">Like</div>
                                  <div class="mx-2 fw-bold" type="button">Reply</div>
                                  <div class="mx-2 fw-bold" type="button">Share</div>
                                  <div class="mx-2" type="button">1d</div>
                                </div>
                              </div>
                            </div>
                            <!-- c 2 -->
                            <div class="d-flex my-2">
                              <!-- avatar -->
                              <div class="rounded-circle m-0 p-0 ">
                                <img src="https://randomuser.me/api/portraits/women/48.jpg"
                                  class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                  alt="avatar">
                              </div>
                              <!-- name and comment -->
                              <div class="">
                                <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                  <div class="d-flex flex-column m-1">
                                    <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                    <span class="m-0 p-0 text-dark ">Lorem, ipsum dolor sit amet consectetur adipisicing
                                      elit. Ipsum, assumenda.</span>
                                  </div>
                                </div>
                                <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                  <div class="mx-2 fw-bold" type="button">Like</div>
                                  <div class="mx-2 fw-bold" type="button">Reply</div>
                                  <div class="mx-2 fw-bold" type="button">Share</div>
                                  <div class="mx-2" type="button">1d</div>
                                </div>
                              </div>
                            </div>
                            <!-- c 3 -->
                            <div class="d-flex my-2">
                              <!-- avatar -->
                              <div class="rounded-circle m-0 p-0 ">
                                <img
                                  src="https://i.ibb.co/TgP0sKm/Mark-Zuckerberg-F8-2019-Keynote-32830578717-cropped.jpg"
                                  class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                  alt="avatar">
                              </div>
                              <!-- name and comment -->
                              <div class="">
                                <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                  <div class="d-flex flex-column m-1">
                                    <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                    <span class="m-0 p-0 text-dark ">Tha's Great. Keep it up.</span>
                                  </div>
                                </div>
                                <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                  <div class="mx-2 fw-bold" type="button">Like</div>
                                  <div class="mx-2 fw-bold" type="button">Reply</div>
                                  <div class="mx-2 fw-bold" type="button">Share</div>
                                  <div class="mx-2" type="button">1d</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
                <!-- P 5 -->
                <div class="shadow bg-white m-0 rounded my-2" style="min-height: 600px;">
                  <!-- head -->
                  <div class="  d-flex px-3 mt-3 pt-2 justify-content-between align-items-center">
                    <div class="d-flex pt-2 ">
                      <!-- avatar -->
                      <div class="rounded rounded-3   position-relative "
                        style="width: 40px; height:40px ; object-fit: cover;">
                        <img src="https://i.ibb.co/HNHtx1B/96234633-931037977356835-265102200601051136-n.jpg"
                          class="rounded rounded-3 " style="width: 34px; height:34px ;" alt="avatar">
                        <!-- small avatar -->
                        <span class="position-absolute rounded-circle m-0 p-0 translate-middle bottom-0 "
                          style="width: 23px; height: 23px; left:60%; top: 60%;">
                          <img src="https://i.ibb.co/HCV2MR5/download-2.jpg"
                            class="position-absolute border border-white rounded-circle "
                            style="width: 28px; height: 28px; object-fit: cover;">
                        </span>

                      </div>
                      <div class="d-flex flex-column justify-content-between align-items-center">
                        <span class="m-0 px-2 fw-bold fs-7 popover-min-width:600px  p-0" type="button">Memes Wale</span>
                        <span class="m-0 fs-7 text-muted p-0 w-100 ps-2 align-items-start text-start"
                          data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true"
                          data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" style="min-width:300px; height:300px;">
                      <div class="align-items-center popover-body d-flex p-2" >
                        <img src="https://i.ibb.co/HCV2MR5/download-2.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
                      </div>
                      <div class="p-2">
                        <h5 class="m-1 py-1">Mark Z.</h5>
                        <div class="d-flex">
                          <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                          <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
                        </div>
                        <div class="d-flex ">
                          <i class="fas fa-graduation-cap m-1 text-muted"></i>
                          <p>Studies at MIT</p>
                        </div>
                      </div>
                    </div>' type="button">Mark Z</span>

                      </div>

                    </div>
                    <div class="d-flex pt-2">
                      <div
                        class="rounded-circle d-flex bg-white hoverLight justify-content-center align-items-center mx-2"
                        type="button" style="width: 35px; height: 35px;">
                        <i class="fa-solid text-muted fa-lg fa-ellipsis"></i>
                      </div>
                    </div>
                  </div>
                  <p class="mx-3 m-0 mb-1 p-0 fs-7">"Caption"</p>
                  <!-- body -->
                  <hr class="m-0 p-0 text-muted">
                  <img class=" w-100" style="height: 650px; object-fit:cover !important;"
                    src="https://i.ibb.co/xjnZsQR/photo-1650599811699-a531af8496dd.jpg"
                    alt="photo-1650599811699-a531af8496dd" border="0">
                  <hr class="m-0 p-0 text-muted">
                  <!-- reaction -->
                  <div class="p-o d-flex justify-content-between text-muted align-items-center">
                    <div class="p-2 d-flex  position-relative  align-items-start">
                      <!-- haha -->
                      <div class="d-flex ps-2 fs-6 m-0 p-0 " type="button" data-bs-toggle="tooltip"
                        data-bs-placement="top" title="Mark Z. and 6k others">&#128518;</div>
                      <div class="d-flex  fs-6  position-relative" type="button" data-bs-toggle="tooltip"
                        data-bs-placement="top" title="John and 2k others"> &#128077;</div>
                      <div class="d-flex  fs-6 text-muted px-1 position-relative" type="button"> 8k</div>
                    </div>
                    <div class="px-3">
                      <a href="#" class="text-decoration-none text-muted " type="button">50 Comments</a>
                    </div>
                  </div>
                  <hr class="text-muted mx-2 m-0 p-0 ">
                  <!-- like/comment -->
                  <div class="p-2 d-flex">
                    <div class="rounded hoverLight w-50 text-muted text-center fs-6 p-1 fw-bold" type="button"><i
                        class="fa-solid me-2 fa-thumbs-up"></i>Like
                    </div>
                    <div class="rounded hoverLight w-50 text-muted text-center fs-6 p-1 fw-bold" type="button"><i
                        class="fa-solid me-2 fa-comment"></i>Comment
                    </div>
                  </div>
                  <hr class="text-muted mx-2 m-0 p-0 ">

                  <div class="d-flex justify-content-between m-1 px-3 ">
                    <div class="" type="button">
                      <a href="#" class="txt text-muted text-decoration-none" data-bs-toggle="collapse"
                        data-bs-target="#allComments" aria-expanded="false" aria-controls="allComments">View previous 7
                        comments</a>
                    </div>

                    <div class="text-muted" type="button" type="button" id="allComments" data-bs-toggle="dropdown"
                      aria-expanded="true">All Comments <i class="fa-solid fa-caret-down"></i></div>
                  </div>
                  <!-- all comment button -->
                  <div class="dropdown">
                    <ul class="dropdown-menu" aria-labelledby="allComments">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">Another action</a></li>
                      <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                  </div>
                  <hr class="text-muted mx-2 m-0 p-0 ">
                  <!-- all comments -->
                  <div class="m-2 p-1 ">
                    <!-- c 1 -->
                    <div class="d-flex my-2">
                      <!-- avatar -->
                      <div class="rounded-circle m-0 p-0 ">
                        <img src="https://randomuser.me/api/portraits/women/49.jpg" class="rounded-circle m-0 p-0"
                          style="width: 32px; height: 32px; object-fit: cover;" alt="avatar">
                      </div>
                      <!-- name and comment -->
                      <div class="">
                        <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                          <div class="d-flex flex-column m-1">
                            <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                            <span class="m-0 p-0 text-dark ">Lorem ipsum dolor sit.</span>
                          </div>
                        </div>
                        <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                          <div class="mx-2 fw-bold" type="button">Like</div>
                          <div class="mx-2 fw-bold" type="button">Reply</div>
                          <div class="mx-2 fw-bold" type="button">Share</div>
                          <div class="mx-2" type="button">1d</div>
                        </div>
                      </div>
                    </div>
                    <!-- c 2 -->
                    <div class="d-flex my-2">
                      <!-- avatar -->
                      <div class="rounded-circle m-0 p-0 ">
                        <img src="https://randomuser.me/api/portraits/women/48.jpg" class="rounded-circle m-0 p-0"
                          style="width: 32px; height: 32px; object-fit: cover;" alt="avatar">
                      </div>
                      <!-- name and comment -->
                      <div class="">
                        <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                          <div class="d-flex flex-column m-1">
                            <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                            <span class="m-0 p-0 text-dark ">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                              Ipsum, assumenda.</span>
                          </div>
                        </div>
                        <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                          <div class="mx-2 fw-bold" type="button">Like</div>
                          <div class="mx-2 fw-bold" type="button">Reply</div>
                          <div class="mx-2 fw-bold" type="button">Share</div>
                          <div class="mx-2" type="button">1d</div>
                        </div>
                      </div>
                    </div>
                    <!-- c 3 -->
                    <div class="d-flex my-2">
                      <!-- avatar -->
                      <div class="rounded-circle m-0 p-0 ">
                        <img src="https://i.ibb.co/TgP0sKm/Mark-Zuckerberg-F8-2019-Keynote-32830578717-cropped.jpg"
                          class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                          alt="avatar">
                      </div>
                      <!-- name and comment -->
                      <div class="">
                        <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                          <div class="d-flex flex-column m-1">
                            <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                            <span class="m-0 p-0 text-dark ">Tha's Great. Keep it up.</span>
                          </div>
                        </div>
                        <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                          <div class="mx-2 fw-bold" type="button">Like</div>
                          <div class="mx-2 fw-bold" type="button">Reply</div>
                          <div class="mx-2 fw-bold" type="button">Share</div>
                          <div class="mx-2" type="button">1d</div>
                        </div>
                      </div>
                    </div>
                    <!-- all comments accordion dd -->
                    <div class="accordion" id="allCommentsDD">
                      <div class="accordion-item border-0 m-0">
                        <div id="allComments" class="accordion-collapse collapse border-0 m-0 "
                          aria-labelledby="headingOne" data-bs-parent="#allCommentsDD">
                          <div class="accordion-body border-0 m-0 p-1">
                            <!-- c 1 -->
                            <div class="d-flex my-2">
                              <!-- avatar -->
                              <div class="rounded-circle m-0 p-0 ">
                                <img src="https://randomuser.me/api/portraits/women/49.jpg"
                                  class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                  alt="avatar">
                              </div>
                              <!-- name and comment -->
                              <div class="">
                                <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                  <div class="d-flex flex-column m-1">
                                    <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                    <span class="m-0 p-0 text-dark ">Lorem ipsum dolor sit.</span>
                                  </div>
                                </div>
                                <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                  <div class="mx-2 fw-bold" type="button">Like</div>
                                  <div class="mx-2 fw-bold" type="button">Reply</div>
                                  <div class="mx-2 fw-bold" type="button">Share</div>
                                  <div class="mx-2" type="button">1d</div>
                                </div>
                              </div>
                            </div>
                            <!-- c 2 -->
                            <div class="d-flex my-2">
                              <!-- avatar -->
                              <div class="rounded-circle m-0 p-0 ">
                                <img src="https://randomuser.me/api/portraits/women/48.jpg"
                                  class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                  alt="avatar">
                              </div>
                              <!-- name and comment -->
                              <div class="">
                                <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                  <div class="d-flex flex-column m-1">
                                    <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                    <span class="m-0 p-0 text-dark ">Lorem, ipsum dolor sit amet consectetur adipisicing
                                      elit. Ipsum, assumenda.</span>
                                  </div>
                                </div>
                                <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                  <div class="mx-2 fw-bold" type="button">Like</div>
                                  <div class="mx-2 fw-bold" type="button">Reply</div>
                                  <div class="mx-2 fw-bold" type="button">Share</div>
                                  <div class="mx-2" type="button">1d</div>
                                </div>
                              </div>
                            </div>
                            <!-- c 3 -->
                            <div class="d-flex my-2">
                              <!-- avatar -->
                              <div class="rounded-circle m-0 p-0 ">
                                <img
                                  src="https://i.ibb.co/TgP0sKm/Mark-Zuckerberg-F8-2019-Keynote-32830578717-cropped.jpg"
                                  class="rounded-circle m-0 p-0" style="width: 32px; height: 32px; object-fit: cover;"
                                  alt="avatar">
                              </div>
                              <!-- name and comment -->
                              <div class="">
                                <div class="d-flex flex-column bg-gray mx-2 px-3 " style="border-radius: 18px;">
                                  <div class="d-flex flex-column m-1">
                                    <span class="m-0 p-0 text-dark fw-bold fs-7" type="button">Mark Z.</span>
                                    <span class="m-0 p-0 text-dark ">Tha's Great. Keep it up.</span>
                                  </div>
                                </div>
                                <div class="mx-2 p-0 d-flex justify-content-start fs-7 text-muted ">
                                  <div class="mx-2 fw-bold" type="button">Like</div>
                                  <div class="mx-2 fw-bold" type="button">Reply</div>
                                  <div class="mx-2 fw-bold" type="button">Share</div>
                                  <div class="mx-2" type="button">1d</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
          </div>

            </div>
      </div>
      <!-- =================== right sidebar / Chat box===================-->
      <div class="sideBar col-lg-3 d-none d-xxl-block sideBar" style="height: 730px;  ">
            <!-- sponsored -->
            <span class="p-0 d-flex justify-content-start text-muted  fs-5" style="font-weight: 500; ">Sponsored</span>
            <hr class="text-muted my-2 p-0">
            <!-- your pages -->
            <div class="d-flex align-items-center justify-content-between my-2">
              <span class="p-0 d-flex text-muted justify-content-start  fs-5" style="font-weight: 500;">Your
                Pages</span>
              <!-- side menu -->
              <div
                class="d-flex text-muted align-items-center justify-content-center p-1 mx-2 bg-gray rounded-circle hoverDark"
                style="height: 35px; width: 35px; " data-bs-toggle="dropdown" aria-expanded="false" type="button">
                <i class="fas fa-ellipsis-h"></i>
              </div>
              <!--  your page ddMenu -->
              <div class="dropdown-menu shadow" style="width: 18em">
                <!-- collapse -->
                <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverLight"
                  type="button">

                  <div class="d-flex align-items-center justify-content-center p-1 mx-2 bg-gray rounded-circle"
                    style="height: 38px; width: 38px; object-fit: cover">
                    <i class="fa-solid fa-down-left-and-up-right-to-center"></i>
                  </div>
                  <div class="col mx-2">
                    <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Collapse Panel</span>
                  </div>
                </div>
                <hr class="text-muted m-1">
                <!-- is It? -->
                <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverLight"
                  type="button">

                  <img src="https://i.ibb.co/sjkyMHj/104426444-112499970508643-4838017725490327262-n.png" alt="avatar"
                    class="rounded-circle mx-2 me-2" style="width: 38px; height: 38px; object-fit: cover" />

                  <div class="col mx-2">
                    <span class="m-0 p-0 fs-6 " style="font-weight: 500;">is It?</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- is It? -->
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              type="button">

              <img src="https://i.ibb.co/sjkyMHj/104426444-112499970508643-4838017725490327262-n.png" alt="avatar"
                class="rounded-circle me-2" style="width: 38px; height: 38px; object-fit: cover" />

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">is It?</span>
              </div>
            </div>
            <!-- create promotion -->
            <div class="d-flex ms-3 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              type="button">
              <i class="fa-solid  text-muted fa-bullhorn"></i>
              <div class="col mx-2">
                <span class="m-0 text-muted p-0 fs-7 " style="font-weight: 500;">Create Promotion</span>
              </div>
            </div>

            <hr class="text-muted my-2 p-0">

            <!-- Contacts -->
            <div class="d-flex align-items-center justify-content-between my-2">
              <span class="p-0 d-flex text-muted justify-content-start  fs-5" style="font-weight: 500;">Contacts</span>
              <!-- side menu -->
              <div class="d-flex text-muted align-items-center justify-content-center">
                <!-- start a video chat -->
                <div
                  class=" p-1  align-items-center justify-content-center d-flex align-items-center bg-gray rounded-circle hoverDark"
                  style="height: 35px; width: 35px; " data-bs-toggle="modal" data-bs-target="#videoModal" type="button">
                  <i class="fa-solid fa-video"></i>
                </div>
                <!-- video chat room modal -->
                <div class="modal fade " id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel"
                  aria-hidden="true">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content modal-dialog-centered bg-dark ">
                      <!-- head -->
                      <div class="modal-header border-0 w-100 pe-4 pt-4">
                        <button type="button" class="btn-close btn-close-white align-items-end" data-bs-dismiss="modal"
                          aria-label="Close"></button>
                      </div>
                      <!-- body -->
                      <div class="modal-body d-flex flex-column align-items-center justify-content-center"
                        style="min-height: 400px;min-width: 600px;">
                        <i class="fas fa-video fs-0"></i>
                        <h3 class="text-white">Schedule A Room For Later</h3>
                        <p class="text-white text-center w-75 max-auto">Lorem ipsum dolor sit, amet consectetur
                          adipisicing
                          elit. Est ipsa vero ipsam dolorum, quis at officiis soluta veniam dolores aliquid illum illo
                          accusamus modi neque voluptate, quisquam, sequi praesentium! Reprehenderit perspiciatis eaque
                          nam
                          temporibus, animi, illo a tempore quidem culpa qui vitae cupiditate, laudantium magni quam
                          aspernatur delectus porro? Voluptas? </p>
                        <button class="btn btn-lg btn-primary rounded-pill">Schedule Room</button>
                      </div>

                    </div>
                  </div>
                </div>
                <!-- new chat -->
                <div
                  class=" p-1  align-items-center justify-content-center d-flex align-items-center bg-gray rounded-circle hoverDark"
                  style="height: 35px; width: 35px;" data-bs-toggle="modal" data-bs-target="#newChat" " type=" button">
                  <i class="fa-solid fa-magnifying-glass"></i>
                </div>
                <!-- dd menu -->
                <div class=" p-1  align-items-center justify-content-center d-flex bg-gray rounded-circle hoverDark"
                  style="height: 35px; width: 35px; " id="ddMenuContacts" data-bs-toggle="dropdown"
                  aria-expanded="false" type="button">
                  <i class="fas fa-ellipsis-h"></i>
                </div>
                <!-- contact ddMenu -->
                <div class="dropdown-menu shadow" style="width: 18em">
                  <!-- title -->
                  <div class="p-2">
                    <h5>Chat Settings</h5>
                    <span class="text-muted fs-7">Lorem ipsum dolor sit amet.</span>
                  </div>
                  <!-- item 1 -->
                  <li>
                    <div class="dropdown-item d-flex align-items-center justify-content-between">
                      <!-- icon -->
                      <div class="d-flex align-items-center">
                        <i class="fa-solid fa-phone me-3"></i>
                        <p class="m-0">Incoming Call sounds</p>
                      </div>
                      <!-- toggle -->
                      <div class="form-check form-switch m-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
                          checked />
                        <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                      </div>
                    </div>
                  </li>
                  <!-- item 2 -->
                  <li>
                    <div class="dropdown-item d-flex align-items-center justify-content-between">
                      <!-- icon -->
                      <div class="d-flex align-items-center">
                        <i class="fa-solid fa-volume-off me-3"></i>
                        <p class="m-0">Message Sounds</p>
                      </div>
                      <!-- toggle -->
                      <div class="form-check form-switch m-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
                          checked />
                        <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                      </div>
                    </div>
                  </li>
                  <!-- item 3 -->
                  <li>
                    <div class="dropdown-item d-flex align-items-center justify-content-between m-0">
                      <!-- icon -->
                      <div class="d-flex align-items-center m-0">
                        <i class="fa-solid fa-spinner me-3"></i>
                        <p class="m-0">Pop up new Messages</p>
                      </div>
                      <!-- toggle -->
                      <div class="form-check form-switch m-0">
                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
                          checked />
                        <label class="form-check-label" for="flexSwitchCheckChecked"></label>
                      </div>
                    </div>
                    <span class="ms-5 text-muted fs-7">Lorem ipsum dolor sit.</span>
                  </li>
                  <hr class="m-0" />
                  <!-- item 1 -->
                  <li>
                    <div class="dropdown-item d-flex align-items-center justify-content-between m-0">
                      <!-- icon -->
                      <div class="d-flex align-items-center m-0">
                        <i class="fa-solid fa-spinner me-3"></i>
                        <p class="m-0">Lorem, ipsum dolor.</p>
                      </div>
                    </div>
                  </li>
                  <!-- item 2 -->
                  <li>
                    <div class="dropdown-item d-flex align-items-center justify-content-between m-0">
                      <!-- icon -->
                      <div class="d-flex align-items-center m-0">
                        <i class="fa-solid fa-spinner me-3"></i>
                        <p class="m-0">Lorem, ipsum dolor.</p>
                      </div>
                    </div>
                  </li>
                  <!-- item 3 -->
                  <li>
                    <div class="dropdown-item d-flex align-items-center justify-content-between m-0">
                      <!-- icon -->
                      <div class="d-flex align-items-center m-0">
                        <i class="fa-solid fa-spinner me-3"></i>
                        <p class="m-0">Lorem, ipsum dolor.</p>
                      </div>
                    </div>
                  </li>
                  <!-- item 4 -->
                  <li>
                    <div class="dropdown-item d-flex align-items-center justify-content-between m-0">
                      <!-- icon -->
                      <div class="d-flex align-items-center m-0">
                        <i class="fa-solid fa-spinner me-3"></i>
                        <p class="m-0">Lorem, ipsum dolor.</p>
                      </div>
                    </div>
                  </li>
                </div>
              </div>
            </div>

            <!-- Friends -->
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/women/48.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/women/48.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/men/75.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/women/37.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/women/37.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/men/45.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/men/67.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/women/75.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/women/75.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/women/70.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/women/70.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/men/79.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/men/79.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/women/71.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/women/71.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/women/77.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/women/77.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/men/74.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/men/74.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/men/75.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <!-- Friends -->
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/women/48.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/women/48.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/men/75.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>
            <div class="d-flex ms-1 my-1 ps-3 p-1 align-items-center justify-content-start rounded hoverDark"
              data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true"
              data-bs-trigger="hover" data-bs-content='<div class="d-flex p-0 m-0" >
            <div class="align-items-center popover-body d-flex p-2">
              <img src="https://randomuser.me/api/portraits/women/37.jpg" style="height: 70px; width: 70px;" alt="avatar" class="pop-avatar">
            </div>
            <div class="p-2">
              <h5 class="m-1 py-1">Lorem, ipsum.</h5>
              <div class="d-flex">
                <i class="fas fa-user-friends m-1 d-flex text-muted"></i>
                <p class="m-0">2 mutal friends: <span class="fw-bold ">Jerry</span> and <span class="fw-bold">Phu</span></p>
              </div>
              <div class="d-flex ">
                <i class="fas fa-graduation-cap m-1 text-muted"></i>
                <p>Studies at MIT</p>
              </div>
            </div>
          </div>' type="button">
              <div class="position-relative">
                <img src="https://randomuser.me/api/portraits/women/37.jpg" alt="avatar" class="rounded-circle me-2"
                  style="width: 38px; height: 38px; object-fit: cover" />
                <span class="position-absolute bottom-0 translate-middle border-light rounded-circle bg-success p-1"
                  style="left: 75%; "></span>
              </div>

              <div class="col mx-2">
                <span class="m-0 p-0 fs-6 " style="font-weight: 500;">Lorem, ipsum.</span>
              </div>
            </div>


      </div>
    </div>
  </div>

  
      <!-- ======================New Chat======================== -->
      <div class="modal fade" id="newChat" tabindex="-1" aria-labelledby="newChatLabel" aria-hidden="true"
        data-bs-backdrop="false">
        <div class="modal-dialog modal-sm position-absolute bottom-0 end-0 w-75 shadow"
          style="transform: translateX(-80px)">
          <div class="modal-content border-0">
            <!-- head -->
            <div class="modal-header align-items-start">
              <div>
                <h6 class="modal-title text-dark mb-2" id="newChatLabel">
                  New Message
                </h6>
                <label class="text-dark">To:</label>
                <input type="text" class="border-0" />
              </div>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- body -->
            <div class="modal-body shadow border-0 m-0 p-0">
              <div class="w-50 border-bottom border-primary" type="button">
                <p class="m- m-0 p-2 text-primary ps-4 fw-b">Suggested
                </p>
              </div>

            </div>
            <!-- footer -->
            <div class="modal-footer border-0" style="min-height: 300px;">

            </div>
          </div>
        </div>
      </div>

      <!-- ======================Single Chat======================== -->
      <!-- chat 1 -->
      <div class="modal fade" id="singleChat1" tabindex="-1" aria-labelledby="singleChat1Label" aria-hidden="true"
        data-bs-backdrop="false">
        <div class="modal-dialog modal-sm position-absolute bottom-0 end-0 w-75" style="transform: translateX(-80px)">
          <div class="modal-content border-0 shadow">
            <!-- head -->
            <div class="modal-header">
              <div class="dropdown-item d-flex rounded" type="button" data-bs-container="body" data-bs-toggle="popover"
                data-bs-placement="left" data-bs-content='
              <div class="m-0">
                <div class="popover-body d-flex flex-column p-0"> 
                  <div class="d-flex align-items-center dropdown-item p-1 rounded">
                    <i class="fa-regular fa-comment me-3 fs-4"></i>
                    <p class="m-0">Open Message </p>
                  </div>
                  
                  <div class="d-flex align-items-center dropdown-item p-2 rounded">
                    <i class="fa-regular fa-user me-3 fs-4"></i>
                    <p class="m-0">User Profile </p>
                  </div>
                  <hr>
                  <div class="d-flex align-items-center dropdown-item p-2 rounded">
                    <i class="fa-regular fa-user me-3 fs-4"></i>
                    <p class="m-0">User Profile </p>
                  </div>
                  <div class="d-flex align-items-center dropdown-item p-2 rounded">
                    <i class="fa-regular fa-user me-3 fs-4"></i>
                    <p class="m-0">User Profile </p>
                  </div>
                  <div class="d-flex align-items-center dropdown-item p-2 rounded">
                    <i class="fa-regular fa-user me-3 fs-4"></i>
                    <p class="m-0">User Profile </p>
                  </div>
                </div>
              </div>' data-bs-html="true">
                <!-- avatar -->
                <div class="position-relative">
                  <img src="https://picsum.photos/204" alt="avatar" class="rounded-circle me-2"
                    style="width: 40px; height: 40px; object-fit: cover" />
                  <span
                    class="position-absolute translate-middle bottom-0 translate-middle bg-success border border-light rounded-circle p-1"
                    style="left: 70%;">
                    <span class="visually-hidden"></span>
                  </span>
                </div>
                <!-- name -->
                <div>
                  <p class="m-0">Mike<i class="fa-solid fa-chevron-down"></i></p>
                  <span class="text-muted m-0 p-o fs-7">Active Now</span>
                </div>
              </div>

              <!-- close btn -->
              <i class="fa-solid fa-video mx-2 text-muted" type="button"></i>
              <i class="fa-solid fa-phone mx-2 text-muted" type="button"></i>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- body -->
            <div class="modal-body m-1 p-1 overflow-auto" style="max-height: 300px">
              <!-- message l -->
              <li class="list-group-item border-0 d-flex">
                <!-- avatar -->
                <div class="">
                  <img src="https://picsum.photos/204" alt="avatar" class="rounded-circle me-2"
                    style="width: 28px; height: 28px; object-fit: cover" />
                </div>
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
              </li>
              <!-- message r -->
              <li class="list-group-item border-0 d-flex justify-content-end">
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
                <!-- avatar -->
                <div class="p-2">
                  <img
                    src="https://scontent.fixc8-2.fna.fbcdn.net/v/t39.30808-6/253672468_609134610133707_40920716104383943_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=730e14&_nc_ohc=ovUojc-NiwkAX8rc7Ri&_nc_ht=scontent.fixc8-2.fna&oh=00_AT9jPnUQlu4RXWQvoBEhlGuOsUB-WRdICxHTNA4Zqf2pzw&oe=626D2C8C"
                    alt="avatar" class="rounded-circle me-2" style="width: 28px; height: 28px; object-fit: cover" />
                </div>
              </li>
              <!-- message l -->
              <li class="list-group-item border-0 d-flex">
                <!-- avatar -->
                <div class="">
                  <img src="https://picsum.photos/204" alt="avatar" class="rounded-circle me-2"
                    style="width: 28px; height: 28px; object-fit: cover" />
                </div>
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
              </li>
              <!-- message r -->
              <li class="list-group-item border-0 d-flex justify-content-end">
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
                <!-- avatar -->
                <div class="p-2">
                  <img
                    src="https://scontent.fixc8-2.fna.fbcdn.net/v/t39.30808-6/253672468_609134610133707_40920716104383943_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=730e14&_nc_ohc=ovUojc-NiwkAX8rc7Ri&_nc_ht=scontent.fixc8-2.fna&oh=00_AT9jPnUQlu4RXWQvoBEhlGuOsUB-WRdICxHTNA4Zqf2pzw&oe=626D2C8C"
                    alt="avatar" class="rounded-circle me-2" style="width: 28px; height: 28px; object-fit: cover" />
                </div>
              </li>
            </div>
            <!-- footer -->
            <div class="modal-footer border-0 p-0 m-0">
              <div class="d-flex">
                <!-- icons -->
                <div class="d-flex align-items-center">
                  <i class="fa-solid fa-circle-plus mx-1 fs-5 text-muted" type="button"></i>
                  <i class="fa-solid fa-file-image mx-1 fs-5 text-muted" type="button"></i>
                  <i class="fa-solid fa-portrait mx-1 fs-5 text-muted" type="button"></i>
                  <i class="fa-solid fa-adjust mx-1 fs-5 text-muted" type="button"></i>
                </div>
                <!-- input -->
                <div class="">
                  <input type="text" class="form-control rounded-pill border-0 bg-gray" placeholder="Aa" />
                </div>
                <!-- thumbs up icon -->
                <div class="d-flex align-items-center mx-2">
                  <i class="fa-solid fa-thumbs-up fs-5 text-muted" type="button"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- chat 2 -->
      <div class="modal fade" id="singleChat2" tabindex="-1" aria-labelledby="singleChat2Label" aria-hidden="true"
        data-bs-backdrop="false">
        <div class="modal-dialog modal-sm position-absolute bottom-0 end-0 w-75" style="transform: translateX(-80px)">
          <div class="modal-content border-0 shadow">
            <!-- head -->
            <div class="modal-header">
              <div class="dropdown-item d-flex rounded" type="button" data-bs-container="body" data-bs-toggle="popover"
                data-bs-placement="left" data-bs-content='
            <div class="m-0">
              <div class="popover-body d-flex flex-column p-0"> 
                <div class="d-flex align-items-center dropdown-item p-1 rounded">
                  <i class="fa-regular fa-comment me-3 fs-4"></i>
                  <p class="m-0">Open Message </p>
                </div>
                
                <div class="d-flex align-items-center dropdown-item p-2 rounded">
                  <i class="fa-regular fa-user me-3 fs-4"></i>
                  <p class="m-0">User Profile </p>
                </div>
                <hr>
                <div class="d-flex align-items-center dropdown-item p-2 rounded">
                  <i class="fa-regular fa-user me-3 fs-4"></i>
                  <p class="m-0">User Profile </p>
                </div>
                <div class="d-flex align-items-center dropdown-item p-2 rounded">
                  <i class="fa-regular fa-user me-3 fs-4"></i>
                  <p class="m-0">User Profile </p>
                </div>
                <div class="d-flex align-items-center dropdown-item p-2 rounded">
                  <i class="fa-regular fa-user me-3 fs-4"></i>
                  <p class="m-0">User Profile </p>
                </div>
              </div>
            </div>' data-bs-html="true">
                <!-- avatar -->
                <div class="position-relative">
                  <img src="https://picsum.photos/219" alt="avatar" class="rounded-circle me-2"
                    style="width: 40px; height: 40px; object-fit: cover" />
                  <span
                    class="position-absolute bottom-0 translate-middle bg-success border border-light rounded-circle p-1"
                    style="left: 75%">
                    <span class="visually-hidden"></span>
                  </span>
                </div>
                <!-- name -->
                <div>
                  <p class="m-0">Rohan<i class="fa-solid fa-chevron-down"></i></p>
                  <span class="text-muted fs-7">Active Now</span>
                </div>
              </div>

              <!-- close btn -->
              <i class="fa-solid fa-video mx-2 text-muted" type="button"></i>
              <i class="fa-solid fa-phone mx-2 text-muted" type="button"></i>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- body -->
            <div class="modal-body m-1 p-1 overflow-auto" style="max-height: 300px">
              <!-- message l -->
              <li class="list-group-item border-0 d-flex">
                <!-- avatar -->
                <div class="">
                  <img src="https://picsum.photos/219" alt="avatar" class="rounded-circle me-2"
                    style="width: 28px; height: 28px; object-fit: cover" />
                </div>
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
              </li>
              <!-- message r -->
              <li class="list-group-item border-0 d-flex justify-content-end">
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
                <!-- avatar -->
                <div class="p-2">
                  <img
                    src="https://scontent.fixc8-2.fna.fbcdn.net/v/t39.30808-6/253672468_609134610133707_40920716104383943_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=730e14&_nc_ohc=ovUojc-NiwkAX8rc7Ri&_nc_ht=scontent.fixc8-2.fna&oh=00_AT9jPnUQlu4RXWQvoBEhlGuOsUB-WRdICxHTNA4Zqf2pzw&oe=626D2C8C"
                    alt="avatar" class="rounded-circle me-2" style="width: 28px; height: 28px; object-fit: cover" />
                </div>
              </li>
              <!-- message l -->
              <li class="list-group-item border-0 d-flex">
                <!-- avatar -->
                <div class="">
                  <img src="https://picsum.photos/219" alt="avatar" class="rounded-circle me-2"
                    style="width: 28px; height: 28px; object-fit: cover" />
                </div>
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
              </li>
              <!-- message r -->
              <li class="list-group-item border-0 d-flex justify-content-end">
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
                <!-- avatar -->
                <div class="p-2">
                  <img
                    src="https://scontent.fixc8-2.fna.fbcdn.net/v/t39.30808-6/253672468_609134610133707_40920716104383943_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=730e14&_nc_ohc=ovUojc-NiwkAX8rc7Ri&_nc_ht=scontent.fixc8-2.fna&oh=00_AT9jPnUQlu4RXWQvoBEhlGuOsUB-WRdICxHTNA4Zqf2pzw&oe=626D2C8C"
                    alt="avatar" class="rounded-circle me-2" style="width: 28px; height: 28px; object-fit: cover" />
                </div>
              </li>
            </div>
            <!-- footer -->
            <div class="modal-footer border-0 p-0 m-0">
              <div class="d-flex">
                <!-- icons -->
                <div class="d-flex align-items-center">
                  <i class="fa-solid fa-circle-plus mx-1 fs-5 text-muted" type="button"></i>
                  <i class="fa-solid fa-file-image mx-1 fs-5 text-muted" type="button"></i>
                  <i class="fa-solid fa-portrait mx-1 fs-5 text-muted" type="button"></i>
                  <i class="fa-solid fa-adjust mx-1 fs-5 text-muted" type="button"></i>
                </div>
                <!-- input -->
                <div class="">
                  <input type="text" class="form-control rounded-pill border-0 bg-gray" placeholder="Aa" />
                </div>
                <!-- thumbs up icon -->
                <div class="d-flex align-items-center mx-2">
                  <i class="fa-solid fa-thumbs-up fs-5 text-muted" type="button"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- chat 3 -->
      <div class="modal fade" id="singleChat3" tabindex="-1" aria-labelledby="singleChat3Label" aria-hidden="true"
        data-bs-backdrop="false">
        <div class="modal-dialog modal-sm position-absolute bottom-0 end-0 w-75" style="transform: translateX(-80px)">
          <div class="modal-content border-0 shadow">
            <!-- head -->
            <div class="modal-header">
              <div class="dropdown-item d-flex rounded" type="button" data-bs-container="body" data-bs-toggle="popover"
                data-bs-placement="left" data-bs-content='
            <div class="m-0">
              <div class="popover-body d-flex flex-column p-0"> 
                <div class="d-flex align-items-center dropdown-item p-1 rounded">
                  <i class="fa-regular fa-comment me-3 fs-4"></i>
                  <p class="m-0">Open Message </p>
                </div>
                
                <div class="d-flex align-items-center dropdown-item p-2 rounded">
                  <i class="fa-regular fa-user me-3 fs-4"></i>
                  <p class="m-0">User Profile </p>
                </div>
                <hr>
                <div class="d-flex align-items-center dropdown-item p-2 rounded">
                  <i class="fa-regular fa-user me-3 fs-4"></i>
                  <p class="m-0">User Profile </p>
                </div>
                <div class="d-flex align-items-center dropdown-item p-2 rounded">
                  <i class="fa-regular fa-user me-3 fs-4"></i>
                  <p class="m-0">User Profile </p>
                </div>
                <div class="d-flex align-items-center dropdown-item p-2 rounded">
                  <i class="fa-regular fa-user me-3 fs-4"></i>
                  <p class="m-0">User Profile </p>
                </div>
              </div>
            </div>' data-bs-html="true">
                <!-- avatar -->
                <div class="position-relative">
                  <img src="https://picsum.photos/222" alt="avatar" class="rounded-circle me-2"
                    style="width: 40px; height: 40px; object-fit: cover" />
                  <span
                    class="position-absolute bottom-0 translate-middle bg-success border border-light rounded-circle p-1"
                    style="left: 75%">
                    <span class="visually-hidden"></span>
                  </span>
                </div>
                <!-- name -->
                <div>
                  <p class="m-0">Sumit<i class="fa-solid fa-chevron-down"></i></p>
                  <span class="text-muted fs-7">Active Now</span>
                </div>
              </div>

              <!-- close btn -->
              <i class="fa-solid fa-video mx-2 text-muted" type="button"></i>
              <i class="fa-solid fa-phone mx-2 text-muted" type="button"></i>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- body -->
            <div class="modal-body m-1 p-1 overflow-auto" style="max-height: 300px">
              <!-- message l -->
              <li class="list-group-item border-0 d-flex">
                <!-- avatar -->
                <div class="">
                  <img src="https://picsum.photos/222" alt="avatar" class="rounded-circle me-2"
                    style="width: 28px; height: 28px; object-fit: cover" />
                </div>
                <!-- message -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
              </li>
              <!-- message r -->
              <li class="list-group-item border-0 d-flex justify-content-end">
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
                <!-- avatar -->
                <div class="p-2">
                  <img
                    src="https://scontent.fixc8-2.fna.fbcdn.net/v/t39.30808-6/253672468_609134610133707_40920716104383943_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=730e14&_nc_ohc=ovUojc-NiwkAX8rc7Ri&_nc_ht=scontent.fixc8-2.fna&oh=00_AT9jPnUQlu4RXWQvoBEhlGuOsUB-WRdICxHTNA4Zqf2pzw&oe=626D2C8C"
                    alt="avatar" class="rounded-circle me-2" style="width: 28px; height: 28px; object-fit: cover" />
                </div>
              </li>
              <!-- message l -->
              <li class="list-group-item border-0 d-flex">
                <!-- avatar -->
                <div class="">
                  <img src="https://picsum.photos/222" alt="avatar" class="rounded-circle me-2"
                    style="width: 28px; height: 28px; object-fit: cover" />
                </div>
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
              </li>
              <!-- message r -->
              <li class="list-group-item border-0 d-flex justify-content-end">
                <!-- messgae -->
                <p class="bg-gray p-2 rounded">Lorem, ipsum dolor.</p>
                <!-- avatar -->
                <div class="p-2">
                  <img
                    src="https://scontent.fixc8-2.fna.fbcdn.net/v/t39.30808-6/253672468_609134610133707_40920716104383943_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=730e14&_nc_ohc=ovUojc-NiwkAX8rc7Ri&_nc_ht=scontent.fixc8-2.fna&oh=00_AT9jPnUQlu4RXWQvoBEhlGuOsUB-WRdICxHTNA4Zqf2pzw&oe=626D2C8C"
                    alt="avatar" class="rounded-circle me-2" style="width: 28px; height: 28px; object-fit: cover" />
                </div>
              </li>
            </div>
            <!-- footer -->
            <div class="modal-footer border-0 p-0 m-0">
              <div class="d-flex">
                <!-- icons -->
                <div class="d-flex align-items-center">
                  <i class="fa-solid fa-circle-plus mx-1 fs-5 text-muted" type="button"></i>
                  <i class="fa-solid fa-file-image mx-1 fs-5 text-muted" type="button"></i>
                  <i class="fa-solid fa-portrait mx-1 fs-5 text-muted" type="button"></i>
                  <i class="fa-solid fa-adjust mx-1 fs-5 text-muted" type="button"></i>
                </div>
                <!-- input -->
                <div class="">
                  <input type="text" class="form-control rounded-pill border-0 bg-gray" placeholder="Aa" />
                </div>
                <!-- thumbs up icon -->
                <div class="d-flex align-items-center mx-2">
                  <i class="fa-solid fa-thumbs-up fs-5 text-muted" type="button"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ======================chat icon======================== -->
      <div
        class="fixed-bottom me-4 mb-3 d-flex bg-light justify-content-center rounded-circle shadow hoverDark align-items-center"
        data-bs-toggle="modal" data-bs-target="#newChat" type="button"
        style="width: 45px; height: 45px; z-index: 7 ; left: inherit; ">
        <i class="fa-solid fa-lg fa-pen-to-square "></i>
      </div>
      
      <!-- main js -->
      <script src="main.js"></script>
      <!-- font awesome -->
      <script src="https://kit.fontawesome.com/99c11d2d6d.js" crossorigin="anonymous"></script>
      <!-- bootstrap -->

      <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
      <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl)
        })

        var popoverTriggerList = [].slice.call(
          document.querySelectorAll('[data-bs-toggle="popover"]')
        );
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
          return new bootstrap.Popover(popoverTriggerEl);
        });
      </script>
</body>
</html>

2. By Bo Latt

Made by Bo Latt. CSS Facebook Homepage stories and header clone. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
<style>
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

:root{
    --primary:#2e88ff;
    --dark:#18191a;
    --semi-dark:#242526;
    --grey:#3a3b3c;
    --light-grey:#4e4f50;
    --danger:#f02849;
    --success:#45bd62;
    --warning:#f7b927;
    --text:#b7b9bd;
    --text-white:#ffffff;

}

body{
    background-color:var(--dark);   
}

.nav{
    background-color:var(--semi-dark);
    display:flex;
    color:var(--text)
}
.left{
    width:25%;
}
.left-wrapper{
    display:flex;
    padding:7px;
}
.search-box{
    display:flex;
    align-items:center;
    border-radius: 100px;
    background-color:var(--grey);
    padding:8px 20px;
}
.search-box:hover{
    background-color: var(--light-grey);
}

.logo{
    width:60px;
    display:inline-block;
}

.search-input{
    margin-left:10px;
    background:none;
    color:var(--text);
    border:none;
    outline:none;
}

/* center */ 
.center{
    width:50%;
}
.center-wrapper{
    display:flex;
    height:100%;
    justify-content: center;
    align-items: center;
}
.center-links{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100%;
    /* padding:16px 58px; */
    margin-left: 5px;
    position: relative;
    transition: 0.5s;
}
.center-links.active{
    border-bottom: 3px solid var(--primary);
}
.center-links.active .center-icon{
    color:var(--primary)
}
.center-links:hover{
    background-color: var(--grey);
    border-radius: 10px;
    border-bottom: 3px solid var(--grey);
}
.center-icon{
  font-size:22px;
}
.center .noti{
    background: var(--danger);
    padding: 2px 4px;
    border-radius: 10px;
    font-size: 12px;
    position: absolute;
    top: 11px;
    right:27px;
    font-weight: bold;
    color:var(--text)
}




/*  right */
.right{
    width:25%;
}
.right-wrapper{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}
.profile{
    display:flex;   
    align-items: center;
    margin-right: 15px;
    padding:5px;
    padding-right: 8px;
    border-radius: 15px;
    transition: 0.5s;
}
.profile:hover{
    background-color: var(--light-grey);
    padding: 5px;
    padding-right: 8px;
    border-radius: 20px;
}
.profile-pic{
    width:30px;
    height:30px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 4px;
}
.profile-name{
    font-weight: bolder;
}
.noti-box{
     display:flex; 

}
.noti-box .noti{
   font-size:18px;
   background-color:var(--grey);
   border-radius: 50%;
   padding:10px;
   margin:5px;
   display:flex;
   justify-content: center;
   align-items: center;
}

.noti-box .noti:hover{
   background-color: var(--light-grey);
   font-weight: 900;
 }


 /* fb body */ 
 .fb-body{
     display: flex;
 }
 /* left */
.fb-body-left{
    width: 25%;
}

/* center */
.fb-body-center{
    width: 50%;
}
.my-day-list{
    display:flex;
    margin-top: 20px;
    position: relative;
}
.my-day{
    height:200px;
    width:130px;
    border-radius: 20px;
    overflow:hidden;
    margin-top: 20px;
    position: relative;
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
    padding-left:5px;
    margin-left:5px;
}
.my-day-owner{
    width:40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary);
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top:15px;
    left:15px;
}
.my-day-owner.first{
    background-color: var(--primary);
    color: var(--text-white);
    font-weight: bolder;
}
.my-day-owner-img{
    width:34px;
    height:34px;
    background-size: 100%;
    background-size: cover;
    border-radius: 50%;
}
.my-day-text{
    position: absolute;
    bottom: 5px;
    color: var(--text-white)
}
.my-day-image{
    width:100%;
}
.scroll-my-day{
    width:55px;
    height: 55px;
    position: absolute;
    top:44%;
    right:-27px;
    background-color: var(--grey);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scroll-my-day .feather-chevron-right{
    color:var(--text-white);
    font-size: 30px;
}
.add-post{

}
.post-list{

}

/* right */
.fb-body-right{
    width:25%;
}
</style>
</head>
<body>
    <div class="nav">
        <div class="left">
            <div class="left-wrapper">
                <img src="https://1000logos.net/wp-content/uploads/2016/11/Facebook-logo.png" alt="" class="logo">
            
                <div class="search-box">
<i class="fas fa-search"></i>                   <input type="text" class="search-input" placeholder="Search Facebook">  
                </div>
            </div>
        </div>
        <div class="center">
            <div class="center-wrapper">
               
                <div class="center-links active">
 <i class="fas fa-home center-icon"></i>
                </div>
                <div class="center-links">
 <i class="far fa-flag center-icon"></i>
                </div>
                <div class="center-links">
 <i class="far fa-play-circle center-icon"></i>
                    <span class="noti">9</span>
                </div>
                <div class="center-links">
 <i class="fas fa-store center-icon"></i>
                    <span class="noti">9</span>
                </div>
                <div class="center-links">
                      <i class="fas fa-users center-icon"></i>
                    <span class="noti">9</span>
                </div>

               
            </div>
        </div>

        <div class="right">
            <div class="right-wrapper">
                
                <div class="profile">
                    <img src="https://wallpapercave.com/wp/YP5GJLp.png" alt="" class='profile-pic'>
                    <span class="profile-name">Goku</span>
                </div>
    
                <div class="noti-box">
                    <div class="noti">
<!--                       <i class="feather-plus"></i> -->
                        <i class="fas fa-plus"></i>
                      </div>
                    <div class="noti">
<!--                       <i class="feather-message-circle"></i>
                         -->
                      <i class="fab fa-facebook-messenger"></i>
                      </div>
                    <div class="noti">
    <i class="fas fa-bell"></i></div>
                    <div class="noti"><i class="fas fa-caret-down"></i></div>
                </div>
            </div>
          
        </div>
    </div>

    <section class="fb-body">
        <section class="fb-body-left"></section>
        <section class="fb-body-center">
            <div class="my-day-list">

                <div class="my-day" style="background-image:url(https://1.bp.blogspot.com/-pScItT2FASg/W2qHZ0C7hrI/AAAAAAAAGq8/fw-UZzI7_3M8roiU9eN2ESoC4nF-oHrzwCLcBGAs/s1600/poe_mamhe_thar_36085664_172762120259810_4854061850553221120_n.jpg)">
                    <div class="my-day-owner first">
                        <i class="fas fa-plus"></i>
                    </div>
                    <p class='my-day-text'>Add to your story</p>
    
                </div>
                <div class="my-day" style="background-image:url(https://i.pinimg.com/originals/40/6e/9a/406e9a001fc2ab6d2a6c5cd3e8e08c53.jpg)">
                    <div class="my-day-owner">
                        <img class='my-day-owner-img' src="https://m.media-amazon.com/images/M/MV5BNjk5M2Y5MjQt[email protected]._V1_.jpg" alt="">
                    </div>
                    <p class='my-day-text'>Add to your story</p>
    
                </div>
                <div class="my-day" style="background-image: url(https://m.media-amazon.com/images/M/MV5BNjk5M2Y5MjQt[email protected]._V1_.jpg);">
                    <div class="my-day-owner">
                        <img class='my-day-owner-img' src="https://m.media-amazon.com/images/M/MV5BNjk5M2Y5MjQt[email protected]._V1_.jpg" alt="">
                    </div>
                    <p class='my-day-text'>Add to your story</p>   
                </div>
                <div class="my-day" style="background-image: url(https://lh3.googleusercontent.com/-57Tq-m7PZp8/XDNKWU0JojI/AAAAAAAAKAk/3V_exDKEpqY1ROVOwfwR-FG7OnDHvf4ngCHMYCw/%255BUNSET%255D%20cursor:%20pointer;);">
                    <div class="my-day-owner">
                        <img class='my-day-owner-img' src="https://m.media-amazon.com/images/M/MV5BNjk5M2Y5MjQt[email protected]._V1_.jpg" alt="">
                    </div>
                    <p class='my-day-text'>Add to your story</p>
                </div>
                <div class="my-day" style="background-image: url(https://m.media-amazon.com/images/M/MV5BNjYzMDdkMTMt[email protected]._V1_.jpg);">
                    <div class="my-day-owner">
                        <img class='my-day-owner-img' src="https://m.media-amazon.com/images/M/MV5BNjk5M2Y5MjQt[email protected]._V1_.jpg" alt="">
                    </div>
                    <p class='my-day-text'>Poe Ma Hmi Thar</p>  
                </div>
                <div class="my-day" style="background-image: url(https://1.bp.blogspot.com/-_3yq4JdKq7s/XNEu00ZTAeI/AAAAAAAAKwk/89j7AC6SpMUvT-mqHsyUB-nZY7Dmm7A4gCLcBGAs/s1600/poe_mamhe_thar_57156323_593686497791006_1799041626567575467_n.jpg")>
                    <div class="my-day-owner">
                        <img class='my-day-owner-img' src="https://m.media-amazon.com/images/M/MV5BNjk5M2Y5MjQt[email protected]._V1_.jpg" alt="">
                    </div>
                    <p class='my-day-text'>Poe Ma Hmi Thar</p>  
                </div>
                <div class="scroll-my-day">
                   <i class="fas fa-chevron-right"></i>
               </div>
                

            </div>
            
            <div class="add-post"></div>
            <div class="post-list"></div>
        </section>
        <section class="fb-body-right"></section>
    </section>
</body>
</html>

3. By Ria Han

Made by Ria Han. Facebook Profile Clone using CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
@media screen and (min-width: 768px) {
    .btn-mobile-toggle {
        display: none;
    }
}
/* large like desktops and up */
@media screen and (min-width: 1200px) {...}

.btn-primary {
    background-color:#4065B4;
}
body {
  background-color: #E7E9ED;
  font-family: helvetica, arial, sans-serif;
  margin: 0; }
.navbar {
    	background: -webkit-linear-gradient(#647AAB, #2C467E);
    border-bottom: 1px solid #103480;
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    height: 42px;
    width: 100%; }
.navbar .navbar-brand {
  position: relative;
  top:-3px;
  }
.navbar .navbar-brand img {
  height: 25px;
  }
.navbar-form {
    margin-top: 12px;
    margin-bottom: 12px;
   box-sizing: border-box;
    position: relative;
    left: -25px;
  }
.navbar-form input {
  height: 25px;
  width: 300px;
  }
.navbar-form button {
    height: 25px;
    position: relative;
    left: -10px;
    background-color: rgb (244 245 248);
    width: 40px;
    }

  .navbar .navbar-nav h4 {
    text-shadow: 0 0 3px rgba(0,0,0, 0.8);
    color: #fff;
    font-weight: 500;
    font-size: 12px;
  }
.navbar .navbar-nav li a {
    color: #fff;
    }
.navbar .navbar-nav li a:hover {
    color:#fff;
    background-color:#334E8A;
    }
.navbar .navbar-nav li a span {
    color: #16223D;
    font-size: 20px;
    }
#main {
      margin-top: 50px;
    }
#cover {
  background: #fff;
  height: 330px;
  position: relative;
}
#cover-image {
width:100%;
}
#cover-overlay {
  position: absolute;
  bottom: 48px;
  width: 100%;
}
#profile-image {
  position: relative;
  top: 30px;
  left: 20px;
  width:200px;
}
#profile-name {
  position: relative;
  color:#ffffff;
  font-size: 11px;
  top:110px;
  text-decoration: bold;
}
#profile-buttons {
  position: relative;
  top: 130px;
}
#extra-links {
  height: 48px;
  background-color:#fff;
  width: 100%;
  border: 1px solid gray;
display:block;}

#extra-links > div {
  height:100%;
}
#extra-links .btn-group {
  height: inherit;
}
#extra-links a {
  height:inherit;
  border: none;
  border-radius: 0;
  border-left: 1px solid gray;
}
#extra-links .last-button {
  border-right: 1px solid gray;
}
#main-content{
  margin-top:20px;
}
#info{
  background-color:#fff;
  padding: 10px;
  margin-top: 8px;
  width: 270px;
  border: 1px solid #dfe3ee;
}

#photos {
  background-color:#fff;
padding: 10px;
margin-top: 8px;
width: 270px;
border: 1px solid #dfe3ee;
display: inline-block;
}
#grid {
  width: 250px;
  margin-left:3px;
}

.grid-element {
  margin-top: 3px;
  margin-bottom: 3px;
  margin-right: 8px;
  display: inline-block;
  width: 75px;
  height: 83px;
  float: left;
}
#friends {
  background-color:#fff;
  padding: 10px;
  margin-top: 8px;
  width: 270px;
  border: 1px solid #dfe3ee;
  display: inline-block;
}
h2 {
  font-weight:normal;
  font-size: 16px;
  margin-top: 0px;
}
.border-radius {
border: 1px solid;
border-color: #e5e6e9 #dfe0c4 #d0d1d5;
border-radius: 3px;
}
#new-post {
background-color: #fff;
margin-top: 14px;
padding-bottom: 10px;
overflow: auto;
width:100%;
}
#new-post .btn-group {
  background-color: #F5F6F9;
  border-bottom: 1px solid #E4E5E4;
  width: 100%;
  padding: 12px;
}
#new-post .btn-group a{
  border: none;
  background-color: none;
  padding-right: 10px;
  padding-left: 10px;
  border-left: 1px solid #E4E5E4;
  color:#345698;
  font-weight: bold;
}

#new-post .btn-group a.first-button {
  border:none;
  color: #4A4E56;
}
#new-post .btn-group a:hover {
width:100%;
border-bottom: 1px solid #DCDEE2;
}
#status {
border:none;
resize:none;
float: left;
position: relative;
left: 10px;
top: -10px;
margin-top:8px;
}
#post-button {
  margin: 10px;
}
.show-on-hover:hover > ul.dropdown-menu {
  display: block;
}

.profile-thumbnail {
  border: 1px solid #CCCDCC;
  margin-left: 4px;
  float: left;
}
.photo-profile{
    border:1px solid #DDD;
}

.anchor-username h4{
    font-weight:normal;

}

.anchor-time{
    color:#ADB2BB;
    font-size:1.2rem;
}

.post-footer-comment-wrapper{
    background-color:#F6F7F8;
}
#m-footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: -webkit-linear-gradient(#738ABA, #2C4987);
    z-index: 1;
}
</style>
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">
              <img alt="Brand" src="https://s-media-cache-ak0.pinimg.com/736x/3f/40/7d/3f407dc965335257705ea112bb3a32ce.jpg" width= "25px" height= "25px">
          </a>
        </div>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search Facebook">
          </div>
          <button type="submit" class="btn btn-default btn-xs">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
          </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><img class="thumbnail" src="https://cloud.githubusercontent.com/assets/21322120/20161693/d581d3d6-a6b5-11e6-86ea-31adaef3f1c8.jpg" height="24px" alt="Profile thumbnail"></a></li>
                <li><a href="#"><h4>Ria</h4> </a></li>
                <li><a href="#"><h4>Home</h4></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-comment"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-globe"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-lock"></span> </a></li>
                <li><a href="#"><span class="glyphicon glyphicon-align-left"></span> </a></li>
                <li><a href="#"> <span class="glyphicon glyphicon-triangle-bottom"></span></a></li>
            </ul>
          </div>
        </div>
      </nav>
<!--Cover photo, profile photo, links -->
      <div class="container" id="main">
        <div class="row">
          <div class="col-md-9">
            <div id="cover">
              <img src="https://cloud.githubusercontent.com/assets/21322120/20196266/8932be32-a75f-11e6-9fe2-37ee096b908f.jpg" height="300px" width="900px" alt=" "id="cover-image">
            <!--profile photo, name, buttons-->
            <div class="row" id="cover-overlay">
              <div class="col-md-3" id="profile-image">
                <img src="https://cloud.githubusercontent.com/assets/21322120/20161693/d581d3d6-a6b5-11e6-86ea-31adaef3f1c8.jpg" height="200px" width="200px" alt="Profile Photo" class="img-thumbnail">
              </div>
              <div class="col-md-5" id="profile-name">
                  <h1> Ria Han </h1>
              </div>
              <div class="col-md-4" id="profile-buttons">
                  <button type="button" class="btn btn-default btn-sm">Update Info</button>
                  <div class="btn-group" role="group">
                      <button type="button" class="btn btn-sm btn-default btn-sm">View Activity Log</button>
                      <button type="button" class="btn btn-sm btn default btn-sm"><span class="glyphicon glyphicon-option-horizontal"></span></button>
                  </div>
                </div>
              </div>
              <!-- Sub-nav -->
              <div class="row" id="extra-links">
                <div class="col-md-6 col-md-offset-3">
                  <div class="btn-group btn-group-justified" role="group" aria-hidden="..">
                    <a type="button" class="btn btn-default">Timeline </a>
                    <a type="button" class="btn btn-default">About </a>
                    <a type="button" class="btn btn-default">Friends</a>
                    <a type="button" class="btn btn-default">Photos</a>
                    <a type="button" class="btn btn-default last-button">More</a>
                  </div>

                </div>
              </div>
            </div><!--clsoing #cover-->
            <div class="row" id="main-content">
              <div class="col-md-4">
                <div id="info" class="border-radius">
                  <h2><span class="glyphicon glyphicon-globe"></span>Intro</h2>
                  <p><h4>Studies Philosophy-Neuroscience-Psychology at Washington University in St. Louis. Dog lover. </h4></p>
                    <li role="presentation"><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit Profile</a>
                    </li></br>
                    <li role="presentation"><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Former PR Internship at <a href="https://www.facebook.com/FleishmanHillard/?pnref=lhc"> FleishmanHillard </a></a></li>
                  </ul>
                </div>

                <div id="photos" id="border-radius">
                  <h2><span class="glyphicon glyphicon-picture"></span>Photos</h2>
                  <div id="grid">
                    <div class="grid-element">
                    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTp19-VD0XBvB4nYN-goPcjAlGxb5M7PPZVvonuCUlqTEq8I5NtyA" width="80px" height="83px">
                  </div>
                    <div class="grid-element">
                      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlk6FN0SCyjT_oiphvInkJMGhkSfLjV92kEVD8mOPkZS0JXtug"width="80px" height="83px">
                    </div>
                    <div class="grid-element">
                      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFt4Yvkk-6cqtiEDH7oVLGj_zH4NQbcH-YEvUKnSP4P4ZAVL5oBA"width="80px" height="83px">
                    </div>
                      <div class="grid-element">
                        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQz5WpW9A9rhUvxOmLUriOTK2ePu9N6sP09_34DuhlL0GkjvfosYg"width="80px" height="83px">
                      </div>
                      <div class="grid-element">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRza1ayECaQ_F-cFoFkwfaFsso6LDCbXvFh7hqc8Qbd2hnGvrAw"width="80px" height="83px">
                      </div>
                      <div class="grid-element">
                        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcReUSwHqhBTvE6EarvrtZxyZRN9UmFz1N1llb4cmLPnsOw271B5"width="80px" height="83px">
                      </div>
                      <div class="grid-element">
                      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTp19-VD0XBvB4nYN-goPcjAlGxb5M7PPZVvonuCUlqTEq8I5NtyA" width="80px" height="83px">
                    </div>
                      <div class="grid-element">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlk6FN0SCyjT_oiphvInkJMGhkSfLjV92kEVD8mOPkZS0JXtug"width="80px" height="83px">
                      </div>
                      <div class="grid-element">
                        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFt4Yvkk-6cqtiEDH7oVLGj_zH4NQbcH-YEvUKnSP4P4ZAVL5oBA"width="80px" height="83px">
                      </div>
                </div>
              </div>
                      <div id="friends" id="border-radius">
                <h2><span class="glyphicon glyphicon-user"></span>Friends </h2>
                <div id="grid">
                  <div class="grid-element">
                  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTp19-VD0XBvB4nYN-goPcjAlGxb5M7PPZVvonuCUlqTEq8I5NtyA" width="80px" height="83px">
                </div>
                  <div class="grid-element">
                    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT_PNYg12-uaKrBxS-dCm50qpOMZ-9qj4-02o8rTYZ4-H06jSPN"width="80px" height="83px">
                  </div>
                  <div class="grid-element">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYzQYloQ2uFOfoN-lR1Drsa1gq22WFb6UFG43yjWYAd5qhAJTSjw"width="80px" height="83px">
                  </div>
                    <div class="grid-element">
                      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxoiXdFPrDPjyFqfyN9lGieYr104YEiBwWoJn0BPpm-u6ZT7Fk"width="80px" height="83px">
                    </div>
                    <div class="grid-element">
                      <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSpI5bls41cLe17zJub-rdWRppiXeRWO0_EF4roWVfudtKiw8PH"width="80px" height="83px">
                    </div>
                    <div class="grid-element">
                      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSk6BVdnL60W3T8P7pF7uJwgvzClnhRd1QuJu-0zgLukfOiDL9M"width="80px" height="83px">
                    </div>
                    <div class="grid-element">
                    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTsmucR5T-EG1Fr8keHDBOItcaqIy0GV8pZO21_87-XOBLcRyJH7w" width="80px" height="83px">
                  </div>
                    <div class="grid-element">
                      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTK-O6aKXpqgicFQxdXTkP3TUdBiEfptjSfwDDfa3FOPPGkLXO56A"width="80px" height="83px">
                    </div>
                    <div class="grid-element">
                      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRD2CMFSqbbddn5WqPdmEwVrmwHzUO-cToFcXcI3tsCZ5zbQ3JBPA"width="80px" height="83px">
                    </div>
                </div>
              </div>
            </div>

              <div class="col-md-8">
                <div id="new-post" class="border-radius">
                  <div class="btn-group" role="group" aria-label="...">
                     <a type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil"></span>Status</a>
                     <a type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-camera"></span>Photo/Video</a>
                     <a type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-flag"></span>Life Event</a>
                  </div>
                  <div id="post-form">
                     <img src="https://cloud.githubusercontent.com/assets/21322120/20161693/d581d3d6-a6b5-11e6-86ea-31adaef3f1c8.jpg" height="40px"alt="profile thumbnail" class="profile-thumbnail border-radius"/>
                  <form>
                    <div class="form group">
                          <textarea id="status" cols="40" rows="10" class="form-control-message" style="height:62px; overflow: hidden;" placeholder="What's On Your Mind?"></textarea>
                    </div>
                  </form>
                </div>

                <a type="button" class="btn btn-primary btn-xs pull-right" href="#" id="post-button">Post</a>
              </div>

              <div id="new-post" class="border-radius">
                <img src="https://scontent-dft4-2.xx.fbcdn.net/v/t1.0-9/15109435_1792202844400635_7487734669041018038_n.jpg?oh=c1e7f41933c977a335735e0219bf44b7&oe=58B6CBB8" height="40px"alt="profile thumbnail" class="profile-thumbnail border-radius"/>
                <h4><a href="#">Gratia Kim</a> with <a href="#">Casey Kim</a> and <a href="#">Ria Han</a></h4>
                              <span class="postInfo">by <a href="#">Gratia Kim</a> on November 22nd 2016 with 2 comments</span>
                            </br>
                              <p>Color blindness is a mild disability through which the affected experience a decreased ability to distinguish colors from others. This can be a real drawback for anyone in the design field since color theory is an integral feature in successful design, and a lot of decisions are based on the feeling and emotion derived from...</p>
                              <a class="more" href="#">Read More</a>
                              <span class="line"></span>
                            </br>
                              <script src="https://connect.facebook.net/en_US/all.js#appId=253432341349745&amp;xfbml=1"></script>                             <a href="https://apps.facebook.com/fbtuttts" layout="button_count" width="75" show_faces="true" action="like" font="lucida grande">
                              <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-thumbs-up"></span> 12 Likes </a>
                              <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-comment"></span> 14 Comments </a>
                              <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-share-alt"></span> Share</a>

            </div>
            <div id="new-post" class="border-radius">
              <a href="#">
            <img src="https://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&d=mm&r=g" width="40" height="40" alt="..."></a>
              <h4><a href="#">Bayu Darmantra</h4></a>
                <span class="postInfo"> by <a href="#">Bayu Darmantra </a>on November 24th 2016</a>
             <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
           </br>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
                                turpis sem, dictum id bibendum eget, malesuada ut massa. Ut scel
                                erisque nulla sed luctus dapibus. Nulla sit amet mi vitae purus sol
                                licitudin venenatis. Praesent et sem urna. Integer vitae lectus nis
                                l. Fusce sapien ante, tristique efficitur lorem et, laoreet ornare lib
                                ero. Nam fringilla leo orci. Vivamus semper quam nunc, sed ornare magna dignissim sed. Etiam interdum justo quis risus
                                efficitur dictum. Nunc ut pulvinar quam. N
                                unc mollis, est a dapibus dignissim, eros elit tempor diam, eu tempus quam felis eu velit.</p>
              <a class="more" href="#">Read More</a>
              <span class="line"></span>
            </br>
            <div class="post-footer-comment-wrapper">
                <div class="comment-form">
                </div>

      <script src="https://connect.facebook.net/en_US/all.js#appId=253432341349745&amp;xfbml=1"></script>                             <a href="https://apps.facebook.com/fbtuttts" layout="button_count" width="75" show_faces="true" action="like" font="lucida grande">
      <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-thumbs-up"></span> 12 Likes </a>
      <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-comment"></span> 14 Comments </a>
      <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-share-alt"></span> Share</a>
</br>
            <div class="comment">
              <div class="media-left">
                <a href="#"><img class="media-object photo-profile" src="https://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&d=mm&r=g" width="32" height="32" alt="...">
                  </a>
                </div>
                <div class="media-body">
                  <a href="#" class="anchor-username"><h4 class="media-heading">Bayu Darmantra </h4></a>
                  <a href="#" class="anchor-time">51mins </a>
                  <p>best status I've ever seen. I love this</p>
              </div>
          </div>
        </div>
      </div>
          <div id="new-post" class="border-radius">
            <img src="https://scontent-dft4-2.xx.fbcdn.net/v/t1.0-9/15109435_1792202844400635_7487734669041018038_n.jpg?oh=c1e7f41933c977a335735e0219bf44b7&oe=58B6CBB8" height="40px"alt="profile thumbnail" class="profile-thumbnail border-radius"/>
            <h4><a href="#">Gratia Kim</a> with <a href="#">Casey Kim</a> and <a href="#">Ria Han</a></h4>
                          <span class="postInfo">by <a href="#">Gratia Kim</a> on November 25th 2016 with 2 comments</span>
                        </br>
                        <figure>
                          <img src="http://infinitelegroom.com/wp-content/uploads/2016/01/discover-the-secrets-of-new-york-citys-grand-central-terminal-feature.jpg" alt="grand central terminal" title="GrandCentral" width=450px>
                          <figcaption> Grand Central Terminal is a commuter, rapid transit railroad
                            terminal at 42nd Street and Park Avenue in Midtown Manhattan, in New York City <b>Address:</b> 89 E 42nd St. New York, NY 10017
                          </figure>
                          <span class="line"></span>
                        </br>
                          <script src="https://connect.facebook.net/en_US/all.js#appId=253432341349745&amp;xfbml=1"></script>                             <a href="https://apps.facebook.com/fbtuttts" layout="button_count" width="75" show_faces="true" action="like" font="lucida grande">
                          <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-thumbs-up"></span> 12 Likes </a>
                          <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-comment"></span> 14 Comments </a>
                          <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-share-alt"></span> Share</a>

                </div>
              </div>
            </div>
          </div> <!-- closing 9-column main area-->

          <div class="col-md-3">  Dominique Ansel Kitchen
                            <figure>
                              <img src="http://dominiqueanseljapan.com/wp/wp-content/themes/dabjp/img/contact/photo1.jpg" alt="bakery exterior" title="exterior"  width=100px />
                              <img src="https://momsandtotsmag.files.wordpress.com/2015/02/cronut-domenique-ansel.jpg" alt= "dominique ansel cronuts" title= "cronuts" width=100px/>
                              <figcaption> Dominique Ansel Kitchen is a bakery with Made-to-order French pastries & savory bites in an airy
                                bakery/cafe with outdoor tables in  <b>Address:</b>137 7th Ave S, New York, NY 10014
                              </figcaption>
                            </figure>
                          </br>
                        </br>
                            <figure>
                              Oktoberfest NYC 2016 guide | <a href="https://t.co/i8X8iq4pjF"></a>
                              <img src="https://pbs.twimg.com/media/CtSPL-OWcAAUSrE.jpg" alt="nyc october fest" title="NYC" width=100px />
                                <a href="https://t.co/Ui5kHTuvK0"></a></p> New York City (@NewYorkkcityy) <a href="https://twitter.com/NewYorkkcityy/status/780406074679631873"></a></text>

                              <script async src="//platform.twitter.com/widgets.js" charset="utf-8" width=100px ></script>
                              <figcaption> check our social media platform <a href="https://photosketchbookriahan.wordpress.com/2014/09/15/introducing-artists-sketchbook-who-i-am/">here</a> to see more updates.
                              </figure>
                  </div>
              </div>
            </div>
<footer id="m-footer">       	
                </footer>
</body>
</html>

4. By Brian Aponte

Made by Brian Aponte. A Minimalistic Facebook Clone. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  box-sizing: border-box;
}
*:focus{
  outline: none;
}
:root {
  --fb-blue: #0a86f0;
  --fb-black: #090909;
  --fb-red: #ee2340;
  --fb-green: #3db557;
  --fb-yellow: #f6b023;
  --fb-bgcolor: #cbcdd1;
  --fb-white: #ffffff;
  --fb-whitebg: #ffffff;
  --dark-color-text: #090909;
  --light-color-text: #606770;
  --button-link: #e0e2e8;
  --stories-bg: #090909;
  --icon-circle-bg: linear-gradient(0deg, rgba(65,67,69,1) 0%, rgba(107,110,114,1) 100% );
  --shadow-color:rgba(0,0,0,.25);
}
@media(prefers-color-scheme: dark){
  :root{
      --fb-blue: #7774d1;
      --fb-black: #ffffff;
      --fb-red: #ee2340;
      --fb-green: #6fcf97;
      --fb-yellow: #f6b024;
      --fb-bgcolor: #141432;
      --fb-white: #ffffff;
      --fb-whitebg: #1d1d42;
      --dark-color-text: #FFFFFF;
      --light-color-text: #d4d4dc;
      --button-link: #524eee;
      --stories-bg: #524eee;
      --icon-circle-bg: #6fcf97;   
  }
}
body{
  background: var(--fb-bgcolor);
  font-family:  Helvetica, Arial, sans-serif;
  color: var(--fb-black);
}
header{
  background: var(--fb-whitebg);
  height: 62px;
  display: flex;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-shadow: 0px 0px 5px 0px var(--shadow-color);
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
}
.header__logo-section{
  display: flex;
}
.header__logo-icon .fa-facebook{
  font-size: 40px;
  color: var(--fb-blue);
}
.header__logo-search{
  position: relative;
  margin-left: 10px;
}
.header__logo-search .fa-search{
  position: absolute;
  top: 14px;
  left: 10px;
  color: var(--light-color-text);
}
.header__logo-search input[type="text"]{
  background: var(--fb-bgcolor);
  padding: 10px;
  border-radius: 25px;
  font-size: 1.2rem;
  color: var(--light-color-text);
  padding-left: 35px;
  font-weight: 300;
  border: none;
  margin-right: 20px;
}
.header__mobile-button{
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
}
.header__menu-tabs{
  display:flex;
  max-width: 600px;
  width: 100%;
  flex: none;
}
.header__menu-tab{
  display:flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 62px;
  border-bottom: 4px solid var(--fb-whitebg);
  color: var(--light-color-text);
  cursor: pointer;
  font-size: 1.3rem;
}
.header__menu-tab--active,.header__menu-tab:hover{
border-bottom: 4px solid var(--fb-blue);
}
.header__menu-tab:hover .fas, .header__menu-tab:hover .fab{
 color:var(--fb-blue);
}
.header__menu-tab--active .fas, .header__menu-tab--active .fab{
  color:var(--fb-blue);
 }
 .header__menu-tab .fas, .header__menu-tab .fab{
   position: relative;
 }
 .header__notification-bubble{
   font-family: Arial, Helvetica, sans-serif;
   background: var(--fb-red);
   color: white;
   width: 20px;
   height: 20px;
   font-size: .8rem;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   position: absolute;
   top: -12px;
   right: -10px;
   font-weight: 700;
 }
 .header__account{
   display: flex;
 }
 .header__actions{
  display: flex;
  justify-content: center;
  align-items: center;
}
.header__user-img{
  border-radius: 50%;
  height: 35px;
  width: 35px;
  margin-right: 10px;
}
.header__user-name{
  font-size: .9rem;
  font-weight: 600;
  margin-right: 20px;
}
.header__circle-link{
  background: var(--button-link);
  height: 40px;
  width: 40px;
  display: flex;
  border-radius: 50%;
  color: var(--dark-color-text);
  display:flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  margin-right: 10px;
}
.header__circle-link .fa-sort-down{
  position: relative;
  top: -3px;
  font-size: 1.4rem;
}
.header__link-icon{
  font-size: .9rem;
}
.content-area--feed{
  padding: 90px 15px 20px;
  display: flex;
}
.sidenav{
  width: 25%;
}
.sidenav__item{
  display:flex;
  align-items: center;
  margin-bottom: 15px;
  cursor: pointer;
}
.sidenav__item-img{
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin-right: 20px;
  object-fit: cover;
  object-position: center;
}
.sidenav__item-title{
  font-size: 1rem;
  font-weight: 400;
}
.sidenav__item-icon{
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  margin-right: 20px;
}
.sidenav__item-notification{
 color: var(--fb-blue);
 margin-top: 5px;
 font-size: .75rem;
 display: block;
 font-weight: 300;
}
.sidenav__item-notification-circle{
  background: var(--fb-blue);
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
}
.sidenav__item-icon--circle{
  background: var(--button-link);
  border-radius: 50%;
  font-size: .9rem;
}
.sidenav__item-icon--circle-white{
  background: var(--icon-circle-bg);
  border-radius: 50%;
  font-size: 1rem;
  width: 35px;
  height: 35px;
}
.sidenav__item-icon .fas, .sidenav__item-icon .fab{
  color: var(--fb-blue);
}
.sidenav__item-icon--circle .fas, .sidenav__item-icon--circle .fab{
  color: var(--fb-black);
}
.sidenav__item-icon--circle-white .fas, .sidenav__item-icon--circle-white .fab{
  color: var(--fb-whitebg);
}
.sidenav__line{
  height: 3px;
  background: var(--button-link);
  margin-bottom: 15px;
  display: block;
}
.sidenav__heading-title{
  display: block;
  color:var(--light-color-text);
  font-size: 1.1rem;
  margin-bottom: 15px;
}
.feed{
  width: 50%;
  height: 200px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.stories{
  display: flex;
  max-width: 700px;
  width: 100%;
  margin-bottom: 20px;
}
.stories__video-container{
  overflow: hidden;
  width: 120px;
  height: 200px;
  border-radius: 5px;
  background: var(--stories-bg);
  position: relative;
  box-shadow: 0px 2px 2px 0px var(--fb-black);
  margin-right: 10px;
  cursor: pointer;
}
.stories__video-container:nth-last-child(1){
  margin-right: 0px;
}
.stories__bg{
  object-fit: cover;
  object-position: center;
  width: 125px;
  height: 200px;
  opacity: .2;
  transition: opacity.3s ease-in-out;
}
.stories__video-container:hover .stories__bg{
  opacity: .8;
}
.stories__title{
  position: absolute;
  bottom: 0;
  background: var(--fb-whitebg);
  width: 100%;
  color: var(--fb-black);
  padding: 20px 20px 10px;
  font-size: 1rem;
  text-align: center;
  line-height: 1.4;
}
.stories__new-btn{
  background: var(--fb-blue);
  width: 40px;
  height: 40px;
  color: var(--fb-white);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 4px solid var(--fb-white);
  position: absolute;
  top: -20px;
  left: 40px;
}
.stories__video-container--plain .stories__title{
  background: transparent;
  color: var(--fb-white);
}
.stories__user{
  border: 4px solid var(--fb-blue);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: -113px;
  left: 10px;
}
.feed__box{
  padding: 20px;
  background: var(--fb-whitebg);
  max-width: 700px;
  width: 100%;
  flex: none;
  border-radius: 5px;
  box-shadow: 0px 1px 2px 0px var(--shadow-color);
  margin-bottom: 20px;
}
.newpost{
  display: flex;
  margin-bottom: 10px;
}

.newpost__user-img{
  width: 50px;
  height: 50px;
  border-radius: 50px;
  margin-right: 10px;
}
.newpost input[type="text"]{
  background: var(--fb-bgcolor);
  padding: 10px;
  border-radius: 25px;
  border: none;
  font-size: 1.2rem;
  color: var(--light-color-text);
  padding-left: 20px;
  font-weight: 300;
  width: 100%;
}
.hline{
  height: 1px;
  background: var(--button-link);
  margin-bottom: 15px;
  display: block;
}
.post-types{
  display: flex;
  justify-content: space-between;
}
.post-types__item{
 display:flex;
 justify-content: center;
 align-items: center;
 /*text-align: center;*/
 width: 100%;
}
.post-types__item .fas, .post-types__item .far{
  margin: 10px;
  font-size: 1.5rem;
}
.post-types__item .fa-video{
  color: var(--fb-red);
}
.post-types__item .fa-photo-video{
  color: var(--fb-green);
}
.post-types__item .fa-laugh-beam{
  color: var(--fb-yellow);
}
.photopost{
  padding: 0 0 20px;
  margin-bottom: 20px;
}
.photopost__info{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 20px;
}
.photopost__left{
  display:flex;
  justify-content: center;
  align-items: center;
}
.photopost__left img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 10px 10px 10px 0px;
}
.photopost__details{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.photopost__name{
  font-size: .9rem;
  margin-bottom: 5px;
  font-weight: 400;
}
.photopost__date{
  font-size: 7.rem;
  color: var(--light-color-text)
}
.photopost__info .fa-ellipsis-h{
  color: var(--light-color-text);
}
.photopost__description{
  padding: 0 20px;
  margin-bottom: 20px;
}
.photopost__image img{
 width: 100%;
}
.photopost__stats{
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: var(--light-color-text);
  font-weight: 300;
  font-size: .9rem;
}
.photopost__stats-emojis{
  display: flex;
  justify-content: center;
  align-items: center;
}
.emoji-circle{
  display: flex;
  width: 22px;
  height: 22px;
  background: black;
  color: white;
  justify-content: center;
  align-items: center;
  font-size: .4rem;
  border-radius: 50%;
  border: 2px solid white;
  position: relative;
}
.emoji-circle:nth-child(1){
  z-index: 3;
}
.emoji-circle:nth-child(2){
  left: -5px;
  z-index: 2;
}
.emoji-circle:nth-child(3){
  left: -10px;
  z-index: 1;
}
.emoji-circle--blue{
  background: linear-gradient(0deg, rgba(4,60,108,1) 0%, rgba(10,134,240,1) 100%);
}
.emoji-circle--red{
  background: linear-gradient(0deg, rgba(92,15,26,1)0%,rgba(238,35,64,1) 100%);
}
.emoji-circle--yellow{
  background: #000000;
  overflow: hidden;
}
.emoji-circle--blue .fa-thumbs-up{
 position: relative;
 top: -1px;
}
.emoji-circle--yellow .fa-surprise{
  color: rgba(246,176,36,1);
  font-size: 1.5rem;
  position: relative;
  top: -1px;
 }
 .photopost__actions{
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 20px;
 }
 .photopost__link{
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--light-color-text);
   width: 100%;
   text-decoration: none;
 }
 .photopost__link .fas{
   margin-right: 10px;
 }
 .floatingmsg{
   position: fixed;
   bottom: 0;
   right: 20px;
 }
 .floatingmsg__bubble{
   width: 50px;
   height: 50px;
   border-radius: 50%;
   box-shadow: 0px 5px 10px 0px var(--shadow-color);
   background: var(--button-link);
   margin-bottom: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   cursor: pointer;
 }
 .floatingmsg__bubble img{
   width: 50px;
   height: 50px;
   border-radius: 50%;
 }
 .floatingmsg__bubble:hover .fa-edit{
   color: var(--fb-blue)
 }
 .floatingmsg__notification{
   background: var(--fb-red);
   color: white;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   font-size: .8rem;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   position: absolute;
   top: -5px;
   right: -5px;
   font-weight: 700;
   z-index: 3;
 }
 @media only screen and (max-width:1300px){
   .header__menu-tabs{
     display: none;
   }
   .feed{
     width:100%;
   }

 }
 @media only screen and (max-width:1000px){
  .sidenav{
    display: none;
  }
 }
 @media only screen and (max-width:768px){
  .header__user-img{
    display: none;
  }
  .header__user-name{
    display: none;
  }
  .header__logo-search .fa-search{
    left: 12px;
    top: 12px;
  }
    .header__logo-search input[type="text"]{
     width: 40px;
     height: 40px;
     padding: 0;
   }
   .header__mobile-button{
    display: flex;
   }
   
   .feed{
     display: block;
   }
   .stories{
     flex-wrap: nowrap;
     z-index: 9;
     padding-bottom: 20px;
     overflow-x: scroll;
   }
   .stories__video-container{
     flex: 1 0 auto;
   }
   .content-area--feed{
     width: 100%;
   }
 }
   
 @media only screen and (max-width:411px){
   .header__account{
   display: none;
   }
   .post-types__title{
     display: none;
   }
}
</style>
</head>
<body>
  <header class="header">
    <div class="header__logo-section">
      <div class="header__logo-icon">
       <i class="fab fa-facebook"></i>
      </div>
      <div class="header__logo-search">
        <i class="fas fa-search"></i>
        <input type="text">
      </div>   
      <div class="header__mobile-button">
        <i class="fas fa-bars"></i>
      </div>
    </div>
    <div class="header__menu-tabs">
      <div class="header__menu-tab header__menu-tab--active">
        <i class="fas fa-home"></i>
      </div>
      <div class="header__menu-tab">
        <i class="fas fa-flag"><div class="header__notification-bubble">
          3
        </div></i>
      </div>
      <div class="header__menu-tab">
        <i class="fas fa-tv"><div class="header__notification-bubble">
          9
        </div></i>
      </div>
      <div class="header__menu-tab">
        <i class="fas fa-store"></i>
      </div>
      <div class="header__menu-tab">
        <i class="fas fa-users"></i>
      </div>
    </div>
    <div class="header__account">
      <div class="header__actions">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" class="header__user-img">
        <span class="header__user-name">Jane Wong</span>
        <a href="#" class="header__circle-link">
          <i class="header__link-icon fas fa-plus"></i>
        </a>
        <a href="#" class="header__circle-link">
          <i class="header__link-icon fab fa-facebook-messenger"></i>
        </a>
        <a href="#" class="header__circle-link">
          <i class="header__link-icon fas fa-bell"></i>
        </a>
        <a href="#" class="header__circle-link">
          <i class="header__link-icon fas fa-sort-down"></i>
        </a>
      </div>
    </div>
  </header>
  <section class="content-area content-area--feed">
    <section class="sidenav">
      <div class="sidenav__item">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" class="sidenav__item-img">
        <span class="sidenav__item-title">
          Jane Wong
        </span>
      </div>
      <div class="sidenav__item">
        <div class="sidenav__item-icon">
          <i class="fas fa-user-friends"></i>
        </div>
        <span class="sidenav__item-title">
          Friends
        </span>
      </div>
      <div class="sidenav__item">
        <div class="sidenav__item-icon">
          <i class="fas fa-flag"></i>
        </div>
        <span class="sidenav__item-title">
          Pages
          <span class="sidenav__item-notification">
            <div class="sidenav__item-notification-circle">
            </div>9+ new
          </span>
        </span>
      </div>
      <div class="sidenav__item">
        <div class="sidenav__item-icon sidenav_item-icon--circle-white">
          <i class="fas fa-users"></i>
        </div>
        <span class="sidenav__item-title">
          Groups
          <span class="sidenav__item-notification">
            <div class="sidenav__item-notification-circle">
            </div>3+ new
          </span>
        </span>
      </div>
      <div class="sidenav__item">
        <div class="sidenav__item-icon">
          <i class="fas fa-store"></i>
        </div>
        <span class="sidenav__item-title">
          Marketplace
        </span>
      </div>
      <div class="sidenav__item">
        <div class="sidenav__item-icon sidenav__item-icon--circle">
          <i class="fas fa-chevron-down"></i>
        </div>
        <span class="sidenav__item-title">
          See More
        </span>
      </div>
      <div class="sidenav__line"></div>
      <span class="sidenav__heading-title">
        Your Shortcuts
      </span>
      <div class="sidenav__item">
        <div class="sidenav__item-icon sidenav__item-icon--circle-white">
          <i class="fas fa-user-friends"></i>
        </div>
        <span class="sidenav__item-title">
          CodingPhase Groups
        </span>
      </div>
      <div class="sidenav__item">
        <div class="sidenav__item-icon sidenav__item-icon--circle-white">
          <i class="fas fa-user-friends"></i>
        </div>
        <span class="sidenav__item-title">
          Click Funnels
        </span>
      </div>
      <div class="sidenav__item">
        <img src="https://www.rollingstone.com/wp-content/uploads/2018/06/rs-205437-C221B566C05730DA7CBC12A7D1509CBA.jpg" class="sidenav__item-img">
        <span class="sidenav__item-title">
          Hip Hop 
        </span>
      </div>
      <div class="sidenav__item">
        <img src="https://images.squarespace-cdn.com/content/v1/5806197ce3df2851adaf0374/1547326041984-FDPQVXON7LXOFR24GOIA/ke17ZwdGBToddI8pDm48kO2pSwHqU3dnDaXUNXguwjdZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZUJFbgE-7XRK3dMEBRBhUpx3-iA_XzaXsQ7GJosBEiIoKALCgSDkbrDCYghKxeDyFQf3-KM-xDQx6g-8IGeeXt4/600w-3.jpg" class="sidenav__item-img">
        <span class="sidenav__item-title">
          Chris Hogan Wealth Building Group 
        </span>
      </div>

    </section>
    <section class="feed">
      <div class="stories">
       <div class="stories__video-container">
         <img class="stories__bg" src="https://i.ytimg.com/vi/NlKamRgzIdk/maxresdefault.jpg">
         <div class="stories__title">
           <div class="stories__new-btn">
             <i class="fas fa-plus"></i>
           </div>
           Create a Story
         </div>
       </div>
       <div class="stories__video-container stories__video-container--plain">
        <img class="stories__bg" src="https://i.gifer.com/K3Nq.gif">
        <div class="stories__title">
          <img class="stories__user" src="https://randomuser.me/api/portraits/women/95.jpg">
          Cindy Perez
        </div>
      </div>
      <div class="stories__video-container stories__video-container--plain">
        <img class="stories__bg" src="https://i0.wp.com/christinafarley.com/wp-content/uploads/2015/01/Katy-Perry-Celebration-Dance-In-Fireworks-Music-Video-Gif.gif?fit=500%2C280">
        <div class="stories__title">
          <img class="stories__user" src="https://randomuser.me/api/portraits/women/32.jpg">
          Jenny Paige
        </div>
      </div>
      <div class="stories__video-container stories__video-container--plain">
        <img class="stories__bg" src="https://i.gifer.com/Git9.gif">
        <div class="stories__title">
          <img class="stories__user" src="https://randomuser.me/api/portraits/men/32.jpg">
          Kyle Lambert
        </div>
      </div>
      <div class="stories__video-container stories__video-container--plain">
        <img class="stories__bg" src="https://24.media.tumblr.com/47de1a89be6c51f28aa2f8ab2e2cf05d/tumblr_mhm9ijnC8G1s52276o1_500.gif">
        <div class="stories__title">
          <img class="stories__user" src="https://randomuser.me/api/portraits/men/7.jpg">
          Ryan Grant
        </div>
      </div>
      <div class="stories__video-container stories__video-container--plain">
        <img class="stories__bg" src="https://thumbs.gfycat.com/FirmGrandioseHackee-size_restricted.gif">
        <div class="stories__title">
          <img class="stories__user" src="https://randomuser.me/api/portraits/men/12.jpg">
          Paul Banks
        </div>
      </div>
      </div>
      <div class="feed__box submit-post">
        <div class="newpost">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" class="newpost__user-img">
          <input type="text" placeholder="What's on your mind Jane?">
        </div>
        <div class="hline"></div>
        <div class="post-types">
          <div class="post-types__item">
            <i class="fas fa-video"></i> <span class="post-types__title">Live Video</span>
          </div>
        <div class="post-types__item">
          <i class="fas fa-photo-video"></i> <span class="post-types__title">Photo Video</span>
        </div>
      <div class="post-types__item">
        <i class="fas fa-laugh-beam"></i> <span class="post-types__title">Feeling/Activity</span>
      </div>
    </div>
  </div>
   <div class="feed__box photopost">
     <div class="photopost__info">
      <div class="photopost__left">
        <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="">
        <div class="photopost__details">
          <span class="photopost__name">James Dope</span>
          <span class="photopost__date">December 17 at 10:45pm <i class="fas fa-user-friends"></i></span>
        </div>
      </div>
      <i class="fas fa-ellipsis-h"></i>
     </div>
     <div class="photopost__description">
        Hanging out with my squad in Venice Beach California.
     </div>
     <div class="photopost__image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Beach_bikepath_in_the_Venice_Beach_park%2C_California.jpg" alt="">
     </div>
     <div class="photopost__stats">
       <div class="photopost__stats-emojis">
         <div class="emoji-circle emoji-circle--blue">
            <i class="fas fa-thumbs-up"></i>
         </div>
         <div class="emoji-circle emoji-circle--red">
          <i class="fas fa-heart"></i>
       </div>
       <div class="emoji-circle emoji-circle--yellow">
        <i class="fas fa-surprise"></i>
      </div>
      3.3k
      </div>
      <div class="photopost__stats-share">
        788 Comments 73 Shares
      </div>   
     </div>
     <div class="hline"></div>
     <div class="photopost__actions">
       <a href="#" class="photopost__link">
         <i class="fas fa-thumbs-up"></i>Like
       </a>
       <a href="#" class="photopost__link">
        <i class="fas fa-comment"></i>Comment
      </a>
      <a href="#" class="photopost__link">
        <i class="fas fa-share"></i>Share
      </a>
     </div>
      <div class="hline"></div>
   </div>
    </section>
  </section>
  <section class="floatingmsg">
    <div class="floatingmsg__bubble">
      <img src="https://randomuser.me/api/portraits/women/14.jpg" alt="">
      <div class="floatingmsg__notification">1</div>
    </div>
    <div class="floatingmsg__bubble">
      <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="">
      
    </div>
    <div class="floatingmsg__bubble">
      <img src="https://randomuser.me/api/portraits/women/34.jpg" alt="">
      <div class="floatingmsg__notification">3</div>
    </div>
    <div class="floatingmsg__bubble">
      <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="">
      <div class="floatingmsg__notification">1</div>
    </div>
    <div class="floatingmsg__bubble">
      <img src="https://randomuser.me/api/portraits/men/64.jpg" alt="">
      <div class="floatingmsg__notification">1</div>
    </div>
    <div class="floatingmsg__bubble">
      <i class="fas fa-edit"></i>
    </div>
  </section>
</body>
</html>

5. By Om Nigam

Made by Om Nigam. Light theme Facebook Clone with Hover effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  padding: 0;
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f0f2f5;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* overflow-y: auto; */
}

#navbarHz {
  /* position: fixed; */
  top: 3rem;
  /* top: 0; */
  bottom: 0;
  position: fixed;
  overflow: hidden;
  /* overflow-x: hidden; */
  /* transition: all 0.5s ease-in-out; */
}

#navbarHz:hover {
  /* transition: visibility 0.2s; */
  overflow-y: scroll;
}

#navbarHz > ul {
  display: flex;
  width: 22vw;
  flex-direction: column;
  list-style: none;
  /* height: auto; */
  /* overflow-y: auto; */
}

#navbarHz > ul > li {
  padding: 10px;
  display: none;
  align-items: center;
  font-size: 18px;
}

#navbarHz > ul > li > i {
  /* width: 40px; */
  /* margin-left: 12px; */
  padding: 8px;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  /* margin-left: 12px; */
}

#navbarHz > ul > li > a {
  text-decoration: none;
  color: black;
}

#navbarHz > ul > li > img,
#navbarHz > ul > div > li > img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 12px;
}

#navbarHz > ul > li:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

#vtLogo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 12px;
}

.right {
  display: flex;
  align-items: center;
  font-weight: 600;
}

.right > li {
  align-items: center;
  display: flex;
}

.right > i {
  padding: 10px;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.1);
  margin-left: 15px;
  font-size: 24px;
  display: block;
}

#navbarVt {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 10;
}

#navbarVt > ul {
  display: flex;
  list-style: none;
  align-items: center;
}

#navbarVt > ul > .centerIcons {
  display: flex;
  /* justify-content: center; */
  margin: auto;
}

#search {
  outline: none;
  padding: 10px;
  border-radius: 34px;
  font-size: 17px;
  width: 12rem;
  border: none;
  background-color: rgba(0, 0, 0, 0.05);
  /* font-family: Arial, Helvetica, sans-serif; */
}

#searchInp {
  outline: none;
  font-size: 20px;
  width: 10rem;
  /* font-family: Arial, Helvetica, sans-serif; */
  border: none;
  background: none;
}

.container {
  display: flex;
  justify-content: center;
  margin: auto;
  flex-direction: column;
  width: 40vw;
}

.containerBox {
  background-color: white;
  margin: 10px 0;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.pfp {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 3px;
  border: 2px solid blue;
  margin: 6px 7px;
}

.name {
  float: right;
  width: 50vw;
}

iframe {
  width: 100%;
  min-height: 15rem;
  height: auto;
}

.like {
  width: 25px;
  padding: 12px;
}

.likeTxt {
  font-size: 18px;
  position: absolute;
  margin-top: 16px;
}

hr {
  width: 90%;
  margin: auto;
  /* margin-bottom: 12px; */
}

.btn {
  background: none;
  outline: none;
  font-size: 20px;
  border: none;
  padding: 0.5rem 37px;
  color: black;
  /* padding-bottom: 0.5rem; */
}

.picture {
  min-width: 100%;
}

.btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.nameUd {
  text-decoration: none;
  color: black;
}

.nameUd:hover {
  text-decoration: underline;
}

.tdots {
  float: right;
  margin: auto;
  width: 2rem;
  height: 1.3rem;
  margin-right: 6px;
  outline: none;
  border: none;
  background: none;
  font-size: 16px;
}

.top {
  display: flex;
  align-items: center;
}

.tdots:hover {
  background-color: rgba(0, 0, 0, 0.12);
  border-radius: 50%;
}

.icons {
  opacity: 0.4;
  padding: 13px 64px;
  font-size: 1rem;
  /* height: 1.4rem; */
  color: black !important;
}

.icons:hover {
  color: #1877f2 !important;
  background-color: rgba(0, 0, 0, 0.05);
  border-bottom: 4px solid #1877f2;
  opacity: 1;
}

.card {
  width: 9vw;
  height: 210px;
  padding: 0 4px;
  margin-top: 4rem;
  padding-bottom: 12px;
}

.card > img {
  border-radius: 12px;
  width: 100%;
  height: 100%;
}

.cards {
  justify-content: center;
  display: flex;
}

#navbarHz > ul > li.hidden {
  display: none;
}

#navbarHz > ul > li.unhidden,
#navbarHz > ul > div > li.unhidden {
  font-weight: 600;
  display: flex;
}

#navbarHz > ul > div > li.unhidden {
  padding: 10px 4px;
}

::-webkit-scrollbar {
  /* // Width of vertical scroll bar */
  width: 8px;
  /* Height of horizontal scroll bar */
  height: auto;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #c2c9d2;
}

#navbarHz > ul > div > li > img.shortImg {
  height: auto;
  width: 60px;
}

.shortBold {
  font-size: 24px;
}

.likeIcon {
  color: black;
}

.liked {
  color: #3b5998 !important;
}

.actionFlex {
  display: flex;
  justify-content: center;
}

.right > i:hover {
  cursor: pointer;
}

.text {
  font-size: 16px;
  padding: 5px 10px;
}

#more {
  display: none;
}

.promoContainer {
  top: 3rem;
  bottom: 0;
  position: fixed;
  overflow: hidden;
  right: 0;
  width: 300px;
  margin-right: 1rem;
}

.promoContainer:hover {
  overflow-y: auto;
}

.promoContainer > h3 {
  padding: 10px 0;
  padding-right: 32px;
}

.promoContainer > div > li > img {
  height: 110px;
  width: 110px;
  border-radius: 12px;
  padding: 10px 0;
  padding-right: 20px;
}

.promoContainer > div > li {
  padding: 0 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  word-break: break-word;
  font-weight: 600;
}

#promoHr {
  width: 100%;
  margin: 10px 0;
}

.promoContainer > h6:hover {
  background-color: rgb(0, 0, 0, 0.1);
  padding: 10px 6px;
}

.promoContainer > h6 {
  padding: 10px 6px;
  border-radius: 12px;
}

#editDiv {
  float: right;
}

#editDiv > a {
  text-decoration: none;
  color: blue;
  /* display: none; */
}

#editDiv {
  display: none;
}

.downHr:hover + #editDiv {
  display: block;
}

.downHr > li:hover {
  background-color: rgb(0, 0, 0, 0.1);
}
.promoContainer > li:hover {
  background-color: rgb(0, 0, 0, 0.1);
}

.down {
  margin: 4px 8px;
  font-size: 20px;
}
</style>
</head>
  <body>
        <script src="https://kit.fontawesome.com/d15b0544c5.js" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link rel="shortcut icon"
                href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/1200px-Facebook_Logo_%282019%29.png"
                type="image/x-icon">
        <nav id="navbarVt">
                <ul>
                        <li><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/1200px-Facebook_Logo_%282019%29.png"
                                                style="height: auto;
                width: 40px;
                padding: 9px;"></a></li>
                        <li id="search"><i class="fa fa-search" style="padding-right: 7px; opacity: 0.4;"></i><input
                                        type="text" placeholder="Search Facebook" id="searchInp"></li>
                        <div class="centerIcons">
                                <li><a href="#" class="icons"><i class="fa fa-home"></i></a></li>
                                <li><a href="#" class="icons"><i class="fa fa-flag-o"></i></a></li>
                                <li><a href="#" class="icons"><i class="fa fa-television"></i></a></li>
                                <li><a href="#" class="icons"><i class="fa fa-shopping-cart"></i></a></li>
                        </div>
                        <div class="right">
                                <li><img src="https://i.pinimg.com/originals/71/fc/47/71fc472790aa43f44555d08f4d4904c2.jpg"
                                                id="vtLogo">Mr. X</li>
                                <i class="fa fa-th"></i>
                                <i class="fa fa-comment"></i>
                                <i class="fa fa-bell-o"></i>
                                <i class="fa fa-caret-down"></i>
                        </div>
                </ul>
        </nav>
        <nav id="navbarHz">
                <ul>
                        <li class="unhidden"><img
                                        src="https://i.pinimg.com/originals/71/fc/47/71fc472790aa43f44555d08f4d4904c2.jpg"><a
                                        href="#">Mr. X</a></li>
                        <li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/yx/r/5rR6LRpNc5u.png"><a
                                        href="#">COVID-19 Information
                                        Center</a></li>
                        <li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y8/r/S0U5ECzYUSu.png"><a
                                        href="#">Friends</a></li>
                        <li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/yU/r/D2y-jJ2C_hO.png"><a
                                        href="#">Market Place</b></a>
                        </li>
                        <li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y9/r/DHBHg9MEeSC.png"><a
                                        href="#">Ads</a></li>
                        <li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y5/r/duk32h44Y31.png"><a
                                        href="#">Watch</a></li>
                        <li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y8/r/he-BkogidIc.png"><a
                                        href="#">Memories</a>
                        </li>
                        <li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y5/r/PrjLkDYpYbH.png"><a
                                        href="#">Groups</a></li>
                        <li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a
                                        href="#">Events</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/y8/r/p1ZJABzCAAS.png"
                                        class="hidden"><a href="#">Blood Donations</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yK/r/Wmkho44tBFC.png"
                                        class="hidden"><a href="#">Business Manager</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/y3/r/Jr0q8qKF2-Y.png"
                                        class="hidden"><a href="#">Climate Science Information Center</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yN/r/9s7nhm949yb.png"
                                        class="hidden"><a href="#">Community Help</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/y5/r/vxMUnHhu6Do.png"
                                        class="hidden"><a href="#">Emotional Health</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yK/r/mAnT0r8GSOm.png"
                                        class="hidden"><a href="#">Favourites</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yj/r/n2vd2VduYc1.png"
                                        class="hidden"><a href="#">Fund Raisers</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yy/r/9bekmF_PzNp.png"
                                        class="hidden"><a href="#">Gaming Videos</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yo/r/DO-SN-shaZL.png"
                                        class="hidden"><a href="#">Jobs</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yG/r/Nl9CPY6q_n-.png"
                                        class="hidden"><a href="#">Live Videos</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/y5/r/4Y9Xi2D3hJv.png"
                                        class="hidden"><a href="#">Messenger</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yu/r/1Xvrz50fHMF.png"
                                        class="hidden"><a href="#">Messenger Kids</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/ye/r/w-vdKCGzCy1.png"
                                        class="hidden"><a href="#">Most Recent</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/y_/r/NYOGcd-z-qs.png"
                                        class="hidden"><a href="#">Offers</a></li>
                        <li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/yH/r/kyCAf2jbZvF.png"
                                        class="hidden"><a href="#">Pages</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yt/r/PObY9OA5lvJ.png"
                                        class="hidden"><a href="#">Play Games</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yj/r/8OasGoQgQgF.png"
                                        class="hidden"><a href="#">Recent Ad Activity</a></li>
                        <li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/yD/r/lVijPkTeN-r.png"
                                        class="hidden"><a href="#">Saved</a></li>
                        <li class="hidden"><img src="https://static.xx.fbcdn.net/rsrc.php/v3/yC/r/bo0Zt72NIra.png"
                                        class="hidden"><a href="#">Weather</a></li>
                        <li class="unhidden" onclick="showHidden();"><i class="fa fa-chevron-down"
                                        id="buttonArrow"></i><a href="#" style="padding-left: 12px;"><b
                                                id="elementText">See More</b></a></li>
                        <hr style="margin: 10px 4px;">

                        <div class="downHr">
                                <h4 style="padding: 6px 10px; opacity: 0.6;">Your Shortcuts <div id="editDiv"><a
                                                        href="#">Edit</a></div>
                                </h4>
                                <li class="unhidden"><img
                                                src="https://banner2.cleanpng.com/20180509/khq/kisspng-nbc-news-correspondent-news-presenter-graffiti-in-violation-of-morality-5af28a5f092c58.5744812215258445750376.jpg"
                                                class="shortImg">HBC NEWS</li>
                                <li class="unhidden"><img
                                                src="https://www.adgully.com/img/400/201910/india-today.png.jpg"
                                                class="shortImg">India Today</li>
                                <div class="down">
                                        Privacy ยท Terms ยท Advertising ยท Ad choices ยท Cookies ยท More ยท Facebook ยฉ 2021
                                </div>
                        </div>
                </ul>
        </nav>
        <div class=" cards">
                <div class="card card1"><img src="https://www.imagesjunction.com/images/img/aesthetic_profile_pics.jpg">
                </div>
                <div class="card card2"><img src="https://www.imagesjunction.com/images/img/aesthetic_profile_pics.jpg">
                </div>
                <div class="card card3"><img src="https://www.imagesjunction.com/images/img/aesthetic_profile_pics.jpg">
                </div>
                <div class="card card4"><img src="https://www.imagesjunction.com/images/img/aesthetic_profile_pics.jpg">
                </div>
                <div class="card card5"><img src="https://www.imagesjunction.com/images/img/aesthetic_profile_pics.jpg">
                </div>
        </div>
        <section class="container" id="containerData">
        </section>
        <section class="promoContainer">
                <h3 style="opacity: 0.4;">Sponsored</h3>
                <div id="promo">
                        
                </div>
                <hr id="promoHr">
                <h3 style="opacity: 0.4;">Your Pages</h3>
                <h6 style="opacity: 0.6;"><i class="fa fa-bullhorn"></i>&nbsp; Create Promotion</h6>
        </section>
</body>
      <script>
function showHidden() {
  // i = 0;
  let items = document.getElementsByClassName("hidden");
  for (i = 0; i < items.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    items[i].classList.toggle("unhidden");
  }window.CP.exitedLoop(0);
  var arrow = document.getElementById("buttonArrow");
  arrow.classList.toggle("fa-chevron-down");
  arrow.classList.toggle("fa-chevron-up");
  var text = document.getElementById("elementText");
  if (text.innerHTML == "See More") {
    text.innerHTML = "See Less";
    // console.log(text.innerHTML);
  } else {
    text.innerHTML = "See More";
    // console.log(text.innerHTML);
  }
}

function liked(id) {
  var likeColor = document.getElementById(id);
  // var thumb = document.getElementById("likeicon")
  // likeColor.classList.toggle("btn");
  likeColor.classList.toggle("liked");
}

function more() {
  var item = document.getElementById("more");
  if (item.style.display == "block") {
    item.style.display = "none";
    moreLess.innerHTML = "Read More";
  } else {
    item.style.display = "block";
    moreLess.innerHTML = "Read Less";
  }
}

var index = 0;

const Data = [
{
  pfp: `https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500`,
  name: "Rohan Singh",
  text:
  "Lorem ipsum dolor sit amet consecteturadipisicing elit. Dolore incidunt ducimusin voluptates et quo magni voluptatum esse?Numquam unde rerum sapiente dicta excepturi.Recusandae quidem nemo minus doloremqueaccusamus?",
  likes: "78",
  data: `<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqp8kDJWL6H5tJS2_Cu0lP6BflkXH7YyUBfQ&usqp=CAU"
        class="picture">` },

{
  pfp:
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbGxuUEX2iT0PAHOvg5iHxPg6q2MUx2kcRgg&usqp=CAU",
  name: "Arti Singh",
  text:
  "Lorem ipsum dolor sit amet consecteturadipisicing elit. Dolore incidunt ducimusin voluptates et quo magni voluptatum esse?Numquam unde rerum sapiente dicta excepturi.Recusandae quidem nemo minus doloremqueaccusamus?",
  likes: "29",
  data: `<iframe width="560" height="315" src="https://www.youtube.com/embed/yTRTAenYbh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>` },

{
  pfp:
  "https://i.pinimg.com/736x/95/9e/0a/959e0a748e7b239b40d44c2d5cd1cbae.jpg",
  name: "PP-ParrotParadise",
  text:
  "Lorem ipsum dolor sit amet consecteturadipisicing elit. Dolore incidunt ducimusin voluptates et quo magni voluptatum esse?Numquam unde rerum sapiente dicta excepturi.Recusandae quidem nemo minus doloremqueaccusamus?",
  likes: "29K",
  data: `<iframe width="560" height="315" src="https://www.youtube.com/embed/Xs6vgwFKO-Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>` }];



function Template(element) {
  return `<div class="containerBox">
        <div class="top"><img
                        src="${element.pfp}"
                        alt="" class="pfp">
                <h5 class="name"><a href="#" class="nameUd">${element.name}</a>
                </h5>
                <button class="tdots"><i class="fa fa-ellipsis-h"></i></button>
        </div>
        <p class="text">${
  element.text
  }<span id="more"></span><a onclick="more();"
                        style="text-decoration: none; color: blue; cursor: pointer;" id="moreLess">Read
                        More</a></p>
        ${element.data}
        <div><img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 16'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='0%25' y2='100%25'%3e%3cstop offset='0%25' stop-color='%2318AFFF'/%3e%3cstop offset='100%25' stop-color='%230062DF'/%3e%3c/linearGradient%3e%3cfilter id='c' width='118.8%25' height='118.8%25' x='-9.4%25' y='-9.4%25' filterUnits='objectBoundingBox'%3e%3cfeGaussianBlur in='SourceAlpha' result='shadowBlurInner1' stdDeviation='1'/%3e%3cfeOffset dy='-1' in='shadowBlurInner1' result='shadowOffsetInner1'/%3e%3cfeComposite in='shadowOffsetInner1' in2='SourceAlpha' k2='-1' k3='1' operator='arithmetic' result='shadowInnerInner1'/%3e%3cfeColorMatrix in='shadowInnerInner1' values='0 0 0 0 0 0 0 0 0 0.299356041 0 0 0 0 0.681187726 0 0 0 0.3495684 0'/%3e%3c/filter%3e%3cpath id='b' d='M8 0a8 8 0 00-8 8 8 8 0 1016 0 8 8 0 00-8-8z'/%3e%3c/defs%3e%3cg fill='none'%3e%3cuse fill='url(%23a)' xlink:href='%23b'/%3e%3cuse fill='black' filter='url(%23c)' xlink:href='%23b'/%3e%3cpath fill='white' d='M12.162 7.338c.176.123.338.245.338.674 0 .43-.229.604-.474.725a.73.73 0 01.089.546c-.077.344-.392.611-.672.69.121.194.159.385.015.62-.185.295-.346.407-1.058.407H7.5c-.988 0-1.5-.546-1.5-1V7.665c0-1.23 1.467-2.275 1.467-3.13L7.361 3.47c-.005-.065.008-.224.058-.27.08-.079.301-.2.635-.2.218 0 .363.041.534.123.581.277.732.978.732 1.542 0 .271-.414 1.083-.47 1.364 0 0 .867-.192 1.879-.199 1.061-.006 1.749.19 1.749.842 0 .261-.219.523-.316.666zM3.6 7h.8a.6.6 0 01.6.6v3.8a.6.6 0 01-.6.6h-.8a.6.6 0 01-.6-.6V7.6a.6.6 0 01.6-.6z'/%3e%3c/g%3e%3c/svg%3e"
                        class="like"><span class="likeTxt">${
  element.likes
  }</span></div>
        <hr>
        <div class="actionFlex">
                <button class="btn" onclick="liked(this.id);" id="likeBtn${index++}">
                        <i class="fa fa-thumbs-o-up" id="likeIcon"></i> <b>Like</b>
                </button>
                <button class="btn">
                        <i class="fa fa-comment-o"></i><b>
                                Comment</b>
                </button>
                <button class="btn">
                        <i class="fa fa-share-square-o"></i><b>
                                Share</b>
                </button>
        </div>
</div> `;
}
// console.log(`${Data.map(catlogTemplate).join("")}`)
document.getElementById("containerData").innerHTML = `${Data.map(Template).join(
"")
}`;

function genRand(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

var promoNum = genRand(0, 3);
let promoSection = document.getElementById("promo");
if (promoNum == 0) {
  promoSection.innerHTML = `<li><img src="https://scontent.fdel52-1.fna.fbcdn.net/v/t45.1600-4/cp0/q75/spS444/p296x100/213500240_23847581715730126_8264936113505586491_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=67cdda&_nc_ohc=7W3WgAkYrQcAX9XlR8F&_nc_ht=scontent.fdel52-1.fna&oh=7fe321efbdaf425741923bd7f4120fd7&oe=60F8C2AE">How To Start Your Food Business Fro...</li>
<li><img src="https://scontent.fdel52-1.fna.fbcdn.net/v/t45.1600-4/cp0/q75/spS444/p296x100/186101677_6255049889601_1810786449573518094_n.jpg?_nc_cat=103&ccb=1-3&_nc_sid=67cdda&_nc_ohc=pfRTCvPljG8AX9zvphS&_nc_ht=scontent.fdel52-1.fna&oh=c950d4dec3714252ff0f31530084693f&oe=60F93CAE">Learn
        Character Design and ...</li>`;
} else if (promoNum == 1) {
  promoSection.innerHTML = `<li><img src="https://scontent.fdel52-1.fna.fbcdn.net/v/t45.5328-4/c0.120.960.960a/p960x960/159517255_5374579349248996_3700873510111989516_n.jpg?_nc_cat=1&ccb=1-3&_nc_sid=c48759&_nc_ohc=GyvJvpOv0kQAX_IhIqe&_nc_ht=scontent.fdel52-1.fna&oh=24e14c1847bfc93b422e1d1610ef4841&oe=60F9CD10">Bombay
        Shirt Company</li>
<li><img src="https://scontent.fdel52-1.fna.fbcdn.net/v/t45.1600-4/cp0/q75/spS444/p296x100/186101677_6255049889601_1810786449573518094_n.jpg?_nc_cat=103&ccb=1-3&_nc_sid=67cdda&_nc_ohc=pfRTCvPljG8AX9zvphS&_nc_ht=scontent.fdel52-1.fna&oh=c950d4dec3714252ff0f31530084693f&oe=60F93CAE">Learn
        Character Design and ...</li>`;
} else
promoSection.innerHTML = `<li><img src="https://scontent.fdel52-1.fna.fbcdn.net/v/t45.1600-4/cp0/q90/spS444/c0.11.526.274a/p526x296/30553904_23842839024980289_5113066992890281984_n.png.jpg?_nc_cat=111&ccb=1-3&_nc_sid=67cdda&_nc_ohc=4LKqMJC2J6cAX-HnSmd&_nc_ht=scontent.fdel52-1.fna&oh=c6298d2cc6d3f95ba410dd56f929e849&oe=60F9A63B">Amazing Experiment Fidgit Spi...</li>
<li><img src="https://external.fdel52-1.fna.fbcdn.net/safe_image.php?d=AQH_acxKbO1rHhk9&w=500&h=261&url=https%3A%2F%2Fm.media-amazon.com%2Fimages%2FI%2F41THE0EvUEL._SR600%252c315_PIWhiteStrip%252cBottomLeft%252c0%252c35_SCLZZZZZZZ_FMpng_BG255%252c255%252c255.jpg&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQHtAZjcp44kXa7s">Headphone by OlsenMark...</li>`;
//# sourceURL=pen.js
    </script>
</body>
</html>

6. By Mahesh Muttinti

Made by Mahesh Muttinti. Facebook Mobile Version Clone. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.10.0/css/all.css'>
<style>
:root {
  height: 100%;
  width: 100%;
  --primary-dark: black;
  --primary-light: white;
  font-family: sans-serif;
}

body {
  min-height: 100%;
  min-width: 100%;
  background-color: var( --primary-dark );
  margin: 0;
  padding: 0;
  position: relative;
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

.facebook-mobile-version-container {
  height: max-content;
  width: max-content;
  margin: auto;
  border-radius: 12px;
  position: relative;
}

.facebook-mobile-version-container > div {
  background-color: #454545;
}

header.top-header {
  font-family: tahoma,verdana;
  color: var( --primary-light );
  padding: 7px 0 0 12px;
  margin: auto 15px;
  border-bottom: 1px solid grey;
}

.top-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

header.top-header > .top-app-bar > h1 {
  padding-right: 70px;
  cursor: pointer;
}

header >.top-app-bar > i {
  font-size: 1.5em;
  background-color: grey;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: auto 7px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

header > .header-options-bar {
  padding: 23px 4px 12px;
  font-size: 1.5em;
  display: flex;
  justify-content: space-between;
  margin: auto 7px;
}

header > .header-options-bar > i {
  cursor: pointer;
}

.profile-option-bar {
  position: relative;
  border-bottom: .5px solid grey;
}

.profile-option-bar > .top-option-bar {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 12px auto;
}

.profile-option-bar > .top-option-bar > .avatar {
  border-radius: 50%;
  cursor: pointer;
  width: 45px;
  height: 45px;
  position: relative;
}

.profile-option-bar > .top-option-bar > .avatar::after {
  content: '';
  position: absolute;
  height: 7px;
  width: 7px;
  background-color: lime;
  border-radius: 50%;
  bottom: 5%;
  left: 75%;
}

.profile-option-bar > .top-option-bar > .avatar img {
  border-radius: 50%;
  width: inherit;
  border: 1px solid grey;
}

.profile-option-bar > .top-option-bar > .post-field {
  height: 45px;
  width: 55%;
}

.profile-option-bar > .top-option-bar > .post-field input {
  height: 100%;
  width: 100%;
  padding: 0 5px 0 7px;
  font-size: 1.1em;
  cursor: pointer;
  border-radius: 5px;
  border: 0;
  outline: 0;
  background-color: inherit;
  color: whitesmoke;
}

.profile-option-bar > .top-option-bar > .post-field input:hover {
  outline: 0;
}

.media-upload > i.fal.fa-images {
  color: white;
  font-size: 1.5em;
  cursor: pointer;
}

.post-features-bar {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  margin: 12px auto;
}

.post-features-bar > div {
  color: white;
  cursor: pointer;
  padding: 7px;
}

.post-features-bar > div:not(.room) {
  border-right: 1px solid grey;
  padding-right: 25px;
}

.post-features-bar > .text > i {
  color: blue;
}

.post-features-bar > .live-video > i {
  color: #ff4572;
}

.post-features-bar > .room > i {
  color: inherit;
}

.stories {
    display: flex;
    position: relative;
}

.stories > div {
    height: 105px;
    width: 65px;
    border-radius: 7px;
    margin: 3px 12px;
}

.stories > div img {
    height: 100%;
    width: 100%;
    border-radius: inherit;
}

.posts > div {
    display: flex;
    align-items: center;
    margin: 5px 12px;
    color: white;
    padding-top: 12px;
}

.posts > div .gravatar {
    height: 55px;
    width: 55px;
}

.posts > .post1 .gravatar img {
    height: inherit;
    width: inherit;
    border-radius: 50%;
}

.posts > div  h2 {
    margin-right: 35%;
    padding-left: 12px;
    font-size: large;
}

.posts > .large-image {
    width: 100%;
    height: auto;
    margin: 12px 0;
    
    
}

.posts > .large-image img {
    width: inherit;
    height: inherit;
}

i:hover {
    color: #77ff34;
    filter: drop-shadow( 0 0 5px #77ff45);
}
</style>
</head>
<body>
  <div class="facebook-mobile-version-container">
      
      <!-- 1st container -->
      
      <header class="top-header">
        <div class="top-app-bar">
          <h1>facebook</h1>
<!--       <i class="fab fa-facebook-f"></i> -->
          <i class="fas fa-search"></i>
          <i class="fas fa-bars"></i>
        </div>
        <div class="header-options-bar">
          <i class="far fa-home-alt"></i>
          <i class="far fa-user-friends"></i>
          <i class="fab fa-facebook-messenger"></i>
          <i class="far fa-tv"></i>
          <i class="far fa-bell"></i>
          <i class="fas fa-map-marker-alt"></i>
        </div>
      </header>
      
      <!-- 2nd container -->
      
      <div class="profile-option-bar">
        <div class="top-option-bar">
          <div class="avatar">
            <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="profile_pic" />
          </div>
          <div class="post-field">
            <input type="text" name="post-feed" placeholder="Write something here..." />
          </div>
          <div class="media-upload">
            <i class="fal fa-images"></i>
          </div>
        </div>
      </div>
      
      <!-- 3rd container -->
      
      <div class="post-features-bar">
        <div class="text">
          <i class="far fa-edit"></i>
          <span class="text">Text</span>
        </div>
        <div class="live-video">
          <i class="fas fa-video"></i>
          <span class="text">Live Video</span>
        </div>
        <div class="room">
          <i class="fas fa-video-plus"></i>
          <span class="text">Room</span>
        </div>
      </div>
      
      <!-- 4th container -->
      
      <div class="stories">
          <div class="card-1">
              <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="pic1" />
          </div>
          <div class="card-2">
              <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="pic1" />
          </div>
          <div class="card-3">
              <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="pic1" />
          </div>
          <div class="card-4">
              <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="pic1" />
          </div>
          
      </div>
      
      <div class="posts">
          <div class="post1">
              <div class="gravatar">
                  <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="gravatar" />
              
              </div>
              <h2>Mahesh Muttinti</h2>
              <i class="fa fa-ellipsis-h"></i>
          </div>
          <div class="large-image">
              <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="gravatar" />
          </div>
      </div>
      
      <div class="posts">
          <div class="post1">
              <div class="gravatar">
                  <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="gravatar" />
              
              </div>
              <h2>Mahesh Muttinti</h2>
              <i class="fa fa-ellipsis-h"></i>
          </div>
          <div class="large-image">
              <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="gravatar" />
          </div>
      </div>
      
      <div class="posts">
          <div class="post1">
              <div class="gravatar">
                  <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="gravatar" />
              
              </div>
              <h2>Mahesh Muttinti</h2>
              <i class="fa fa-ellipsis-h"></i>
          </div>
          <div class="large-image">
              <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="gravatar" />
          </div>
      </div>
      
      <div class="posts">
          <div class="post1">
              <div class="gravatar">
                  <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg/profile-displayphoto-shrink_200_200/0?e=1611187200&v=beta&t=-IC-uiY8DCCavT23yjg41jCqZHGHfR3MyRRzN19zqMM" alt="gravatar" />
              
              </div>
              <h2>Mahesh Muttinti</h2>
              <i class="fa fa-ellipsis-h"></i>
          </div>
          <div class="large-image">
              <img src="https://media-exp1.licdn.com/dms/image/C4E03AQEWnUNs9nBCHg" alt="gravatar" />
          </div>
      </div>
    </div>
</body>
</html>