HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!-- ======================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. • 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! • 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!. • 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. • 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. • 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> • <a href="#"
class="text-decoration-none text-muted fs-7">Terms</a> • <a href="#"
class="text-decoration-none text-muted fs-7">Advertising</a> • <a href="#"
class="text-decoration-none text-muted fs-7">Ad choices</a> • <a href="#"
class="text-decoration-none text-muted fs-7">Cookies</a> • <a href="#"
class="text-decoration-none text-muted fs-7">More</a> • Meta © 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> • <a href="#"
class="text-decoration-none text-muted fs-7">Terms</a> • <a href="#"
class="text-decoration-none text-muted fs-7">Advertising</a> • <a href="#"
class="text-decoration-none text-muted fs-7">Ad choices</a> • <a href="#"
class="text-decoration-none text-muted fs-7">Cookies</a> • <a href="#"
class="text-decoration-none text-muted fs-7">More</a> • Meta © 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">❤</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"> 👍</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">😆</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 • 🌎
</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">❤</div>
<div class="d-flex fs-6 position-relative" type="button" data-bs-toggle="tooltip"
data-bs-placement="top" title="John and 2k others"> 👍</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">😆</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">❤</div>
<div class="d-flex fs-6 position-relative" type="button" data-bs-toggle="tooltip"
data-bs-placement="top" title="John and 2k others"> 👍</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">😆</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">😆</div>
<div class="d-flex fs-6 position-relative" type="button" data-bs-toggle="tooltip"
data-bs-placement="top" title="John and 2k others"> 👍</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">😆</div>
<div class="d-flex fs-6 position-relative" type="button" data-bs-toggle="tooltip"
data-bs-placement="top" title="John and 2k others"> 👍</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/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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{
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);
}
// GEnder select
if (window.location.pathname === "/") {
const radioBtn1 = document.querySelector("#flexRadioDefault1");
const radioBtn2 = document.querySelector("#flexRadioDefault2");
const radioBtn3 = document.querySelector("#flexRadioDefault3");
const genderSelect = document.querySelector("#genderSelect");
radioBtn1.addEventListener("change", () => {
genderSelect.classList.add("d-none");
});
radioBtn2.addEventListener("change", () => {
genderSelect.classList.add("d-none");
});
radioBtn3.addEventListener("change", () => {
genderSelect.classList.remove("d-none");
});
}
Also see: Tab Triggers