comment css

static/css/simple-blog-template.css

@@ -138,3 +138,52 @@ nav {
   pointer-events: none; /* VERY IMPORTANT: allows you to select text "over" the SVG */
   opacity: 0.6; /* Makes it subtle so it doesn't distract from the blog */
 }
+
+/* Modernizing the container */
+.comment-card {
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  margin-top: 30px;
+}
+
+.comment-card h4 {
+  margin-top: 0;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+/* Styling the inputs */
+.comment-card .form-control {
+  border-radius: 6px;
+  border: 1px solid #d1d5da;
+  box-shadow: none;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+  padding: 10px 12px;
+}
+
+.comment-card .form-control:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+  outline: none;
+}
+
+/* Making the button pop */
+.comment-card .btn-primary {
+  background-color: #007bff;
+  border: none;
+  padding: 8px 20px;
+  font-weight: 500;
+  border-radius: 6px;
+  margin-top: 15px;
+  transition: background 0.2s;
+}
+
+.comment-card .btn-primary:hover {
+  background-color: #0056b3;
+}

templates/leave_comment.html

@@ -1,5 +1,5 @@
-<div class="well">
-  <h4>Leave a Comment:</h4>
+<div class="comment-card">
+  <h4>Leave a Comment</h4>
   <form
     role="form"
     method="POST"
@@ -12,7 +12,7 @@
         class="form-control"
         placeholder="Your Name"
         required
-        style="margin-bottom: 10px"
+        style="margin-bottom: 15px"
       />
 
       <input
@@ -26,11 +26,12 @@
       <textarea
         name="content"
         class="form-control"
-        rows="3"
-        placeholder="Write something..."
+        rows="4"
+        placeholder="Write your thoughts..."
         required
       ></textarea>
     </div>
-    <button type="submit" class="btn btn-primary">Submit</button>
+
+    <button type="submit" class="btn btn-primary">Post Comment</button>
   </form>
 </div>