<!-- create modal -->
<div class="modal fade" id="modalForPost" tabindex="-1" aria-labelledby="createModalLabel"
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="exampleModalLabel">
Create Post
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- here form start -->
<form action="" method="post">
<!-- body -->
<div class="modal-body">
<div class="my-1 p-1">
<div class="d-flex flex-column">
<!-- name -->
<div class="d-flex align-items-center">
<div class="p-2">
<img src="https://source.unsplash.com/collection/happy-people" alt="from fb"
class="rounded-circle" style="
width: 38px;
height: 38px;
object-fit: cover;
" />
</div>
<div>
<p class="m-0 fw-bold">Rohit</p>
</div>
</div>
<!-- text -->
<div>
<textarea cols="30" rows="2" placeholder="heading for your news ..."
class="form-control border-1 " required></textarea>
</div>
<label class="mt-1" >Upload images/videos</label>
<!-- drag and drop -->
<div
class="d-flex my-2 py-4 border rounded d-flex-row align-items-center justify-content-center bg-gray">
<div class="d-block align-items-center justify-content-center">
<input type="file" multiple>
<!-- media icon -->
</div>
</div>
<!-- location -->
<div>
<div class="form-floating">
<input type="text"
class="form-control my-3 "
id="city"
name="dgsh"
placeholder="Select City"
autocomplete="city"
required
>
<label name="djkldsl" for="city">Select City</label>
</div>
</div>
</div>
</div>
<!-- end -->
</div>
<!-- footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary w-100">
Post
</button>
</form>
</div>
</div>
</div>