diff --git a/blog.html b/blog.html index fce19094..a3d2c975 100644 --- a/blog.html +++ b/blog.html @@ -684,41 +684,48 @@
${comment.name}
max-width: 48rem; margin: 0 auto; } - + .section-title { - font-size: 2.25rem; - font-weight: 800; - text-align: center; - color: #111827; - margin-bottom: 48px; -} + font-size: 2.25rem; + font-weight: 800; + text-align: center; + color: #111827; + margin-bottom: 48px; + +} + .title-text { background-clip: text; -webkit-background-clip: text; color: #f4978e; /* background-image: linear-gradient(to right, #f4978e); */ } - + .comment-form { - margin-bottom: 64px; - background-color: white; - padding: 24px; - border-radius: 0.75rem; - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - transition: all 0.3s; -} + margin: 64px auto; + background-color: transparent; + padding: 24px; + border-radius: 0.75rem; + box-shadow: 0 10px 20px var(--text-color); + transition: all 0.3s; + +} + .comment-form:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } - + .form-title { - font-size: 1.5rem; - font-weight: 700; - color: #1f2937; - margin-bottom: 24px; + + font-size: 1.5rem; + font-weight: 700; + color: #3498db; + margin-bottom: 24px; + } + .form-content { display: flex; @@ -730,6 +737,17 @@
${comment.name}
position: relative; } +.input-field { + + width: 100%; + padding: 12px 16px; + border: 2px solid #d1d5db; + border-radius: 0.5rem; + transition: border-color 0.3s; + margin-top: 7px; + +} + .input-field { width: 100%; padding: 12px 16px; @@ -758,18 +776,21 @@
${comment.name}
top: -10px; color: #f4978e; } - + .submit-button { - width: 100%; - color: #f4978e; - font-weight: 600; - padding: 12px 24px; - border-radius: 0.5rem; - border: none; - cursor: pointer; - transition: all 0.3s; -} + width: 100%; + color: #ffffff; + font-weight: 600; + padding: 12px 24px; + border-radius: 0.5rem; + border: none; + cursor: pointer; + transition: all 0.3s; + background-color: #3498db; + +} + .submit-button:hover { color: #f4978e; transform: scale(1.05);