additional styles + responsiveness

UoaWDCC · Sep 16, 2024 · 100af76 · 100af76
1 parent 7c32f2e
commit 100af76
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 7 deletions.
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
@@ -125,14 +125,14 @@ const form_token = import.meta.env.WEBFORMS_TOKEN || 'fallback-string';
                 <div class="contacts-left">
                     <IndexHeading>Contact us</IndexHeading>
                     <div class="contacts-card">
-                        <form action="https://api.web3forms.com/submit" method="POST">
+                        <form action="https://api.web3forms.com/submit" method="POST" class="form-wrapper">
                             <input type="hidden" name="access_key" value={form_token}>
                             <div class="form-group">
-                                <label for="full-name">Full Name</label> <br>
+                                <label for="full-name">Your name</label> <br>
                                 <input type="text" id="full-name" name="Name" required><br>
                             </div>
                             <div class="form-group">
-                                <label for="school">School</label><br>
+                                <label for="school">School or organisation <em>(optional)</em></label><br>
                                 <input type="text" id="school" name="School" required><br>
                             </div>
                             <div class="form-group">
@@ -143,17 +143,16 @@ const form_token = import.meta.env.WEBFORMS_TOKEN || 'fallback-string';
                                 <label for="message">Message</label><br>
                                 <textarea id="message" name="Message" required></textarea>
                             </div>
+                            <div class="h-captcha" data-captcha="true"></div>
                             <div class="form-group">
                                 <button type="submit"> Submit</button>
                             </div>
-                            <div class="h-captcha" data-captcha="true"></div>
                         </form>
                     </div>
                 </div>
                 <div class="contacts-right">
                     <div class="image-container">
                         <img id="contact-image" src="/Contact Page Images/contact-us-stock-image.png" alt="contact us stock image">
-                        <img id="pattern" src="/Contact Page Images/bottom-right-pattern.png"alt = "pattern">
                     </div>
                 </div>
             </div>

diff --git a/src/styles/contacts.css b/src/styles/contacts.css
@@ -28,5 +28,71 @@
 .contacts-card{
     padding: 36px;
     border-radius: 16px;
-    background: rgba(241, 255, 246, 0.65);
-}
+
+    background: rgba(241, 255, 246, 0.6);
+    backdrop-filter: blur(12px);
+}
+
+.form-wrapper{
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.form-group{
+    width: 100%;
+}
+
+.form-group label{
+    color: #2F2F2F;
+    font-weight: bold;
+}
+
+.form-group input{
+    width: 100%;
+    height: 45px;
+    border-radius: 8px;
+    border: 1px solid #C8C8C8;
+}
+
+.form-group textarea{
+    width: 100%;
+    min-height: 150px;
+
+    border-radius: 8px;
+    border: 1px solid #C8C8C8;
+}
+
+.form-group button{
+    display: flex;
+    width: 100%;
+    padding: 18px 0 13px;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 8px;
+    background: var(--YOO-Blue-Darkest);
+    box-shadow: 4px 4px 6px 0px rgba(110, 172, 109, 0.15);
+
+    color: white;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1;
+
+    transition: all 400ms;
+}
+
+.form-group button:hover{
+    opacity: 0.9;
+    box-shadow: 4px 4px 8px -2px hsl(188deg 100% 16% / 0.1), 12px 12px 18px -3px hsl(188deg 100% 16% / 0.1);
+    transform: translate(-3px, -3px);
+
+    transition: all 200ms;
+    will-change: transform, box-shadow;
+}
+
+@media(max-width: 1024px){
+    .contacts-content{
+        flex-direction: column;
+    }
+}