diff --git a/static/css/simple-blog-template.css b/static/css/simple-blog-template.css index 4edf6dc..557ee8b 100644 --- a/static/css/simple-blog-template.css +++ b/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; +} diff --git a/templates/leave_comment.html b/templates/leave_comment.html index 5032339..e5c47cf 100644 --- a/templates/leave_comment.html +++ b/templates/leave_comment.html @@ -1,5 +1,5 @@ -
Leave a Comment