added the modal for adding a new post plus a floating button

src/main/resources/static/css/feed/feed.css

@@ -4,15 +4,16 @@
     padding: 0;
 }
 
+
 .feed-container {
     font-family: "Inter", sans-serif;
-    padding: 20px 100px;
+    padding: 40px 16px;
 }
 
 .feed-hero >  h1 {
     text-align: center;
-    font-size: 32px;
-    margin-bottom: 30px;
+    font-size: 36px;
+    margin-bottom: 32px;
 }
 
 .post-feed {
@@ -23,11 +24,11 @@
 }
 
 .post {
-    padding: 30px;
+    padding: 24px;
     border: 1px solid var(--border-color);
     border-radius: 10px;
     flex: 1;
-    width: 100%;
+    width: 80%;
     display: flex;
     flex-direction: column;
     gap: 20px;
@@ -47,23 +48,24 @@
 }
 
 .text-details > h5 {
-    font-size: 20px;
+    font-size: 16px;
     margin-bottom: 2px;
     font-weight: 450;
 }
 
 .text-details > p {
     color: var(--secondary-text-color);
+    font-size: 14px;
 }
 
 .post-details {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 8px;
 }
 
 .post-details > h3 {
-    font-size: 22px;
+    font-size: 24px;
 }
 
 .post-details > p {
@@ -111,6 +113,7 @@
 .post-meta{
     display: flex;
     font-size: 14px;
+    color: var(--secondary-text-color) !important;
 }
 
 .post-actions{
@@ -131,4 +134,101 @@
 .timestamp {
     flex: 2;
     text-align: right;
+}
+
+.add-post {
+    height: 56px;
+    width: 56px;
+    border-radius: 50%;
+    font-size: 24px;
+    position: fixed;
+    cursor: pointer;
+    right: 40px;
+    bottom: 30px;
+    background-color: var(--primary-color);
+    color: var(--alternate-text);
+}
+
+/*
+using the same styles used for the create new category modal, since we did not use classnames
+we just copy paste in order not to affect other form styles.
+*/
+
+.create-new-modal {
+    /*display: none; !* initially hidden *!*/
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+    overflow: auto;
+}
+
+.modal-content {
+    background: var(--background-color);
+    padding: 24px;
+    border-radius: 10px;
+}
+
+.modal-header {
+    display: flex;
+    margin-bottom: 20px;
+}
+.modal-title-desc{
+    flex: 1;
+}
+
+.modal-title-desc> h3 {
+    font-size: 16px;
+}
+
+.modal-title-desc > p{
+    color: #757575;
+    margin-top: 8px;
+    font-size: 14px;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px
+}
+
+form > label {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    font-size: 14px;
+}
+
+form > label > input,textarea {
+    padding: 10px;
+    border-radius: 10px;
+    border: 1px solid var(--border-color);
+}
+
+
+.submit-button {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    justify-content: center;
+    padding: 10px 15px;
+    border: none;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 5px;
+    background-color: var(--primary-color);
+    color: var(--alternate-text);
+}
+
+
+#closeModalBtn {
+    cursor: pointer;
 }
\ No newline at end of file

src/main/resources/templates/feed/feed.html

@@ -59,5 +59,43 @@
             </div>
         </template>
     </div>
+
+    <button class="add-post" id="add-post">
+        <i class="bi bi-plus"></i>
+    </button>
+    <div id="create-new-modal" class="create-new-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title-desc">
+                    <h3>Create a New Post</h3>
+                    <p>Share your thoughts, ideas, or news with the community.</p>
+                </div>
+                <span class="close-modal" id="closeModalBtn"><i class="bi bi-x-lg"></i></span>
+            </div>
+            <form id="post-form">
+                <label for="postTitle">Post Title
+                    <input type="text" id="postTitle" name="postTitle"
+                           placeholder="Post Title"
+                           required>
+                </label>
+                <label for="postDescription">Description
+                    <textarea  id="postDescription" name="postDescription"
+                               placeholder="What's on your mind ?"
+                               rows="6"
+                               required></textarea>
+                </label>
+
+                <label for="postTags">Tags
+                    <input  id="postTags" name="postTags"
+                               placeholder="Tags (comma-separated)"
+                               required></input>
+                </label>
+
+                <div class="form-buttons">
+                    <button class="submit-button" type="submit"><i class="bi bi-send"></i> <p>Post</p></button>
+                </div>
+            </form>
+        </div>
+    </div>
 </section>
 </html>
\ No newline at end of file