From dda35eb377a95c0c2e3b42fd4c56e3967d6c7148 Mon Sep 17 00:00:00 2001
From: RobinB27 <robin.bacher1@gmail.com>
Date: Tue, 7 Oct 2025 17:13:53 +0200
Subject: [PATCH] Task3

---
 task_1_html_css/src/contact.html | 50 ++++++++++++++++++++-
 task_1_html_css/src/layout.css   | 75 ++++++++++++++++++++++++++++++--
 2 files changed, 120 insertions(+), 5 deletions(-)

diff --git a/task_1_html_css/src/contact.html b/task_1_html_css/src/contact.html
index ab6b587..3cafd40 100644
--- a/task_1_html_css/src/contact.html
+++ b/task_1_html_css/src/contact.html
@@ -5,6 +5,7 @@
     <meta content="IE=edge" http-equiv="X-UA-Compatible" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
     <title>Document</title>
+    <link href="default.css" rel="stylesheet" />
     <link href="layout.css" rel="stylesheet" />
 
     <script src="./main.ts" type="module"></script>
@@ -40,7 +41,54 @@
     </section>
 
     <main>
-<!--      TODO add form here-->
+      <form>
+        <ul>
+          <li>
+            <h2>Name</h2>
+          </li>
+          <li>
+            <input type="text" placeholder="Jane Doe">
+          </li>
+          <li>
+            <h2>Email address</h2>
+          </li>
+          <li>
+            <input type="email" placeholder="jane.doe@example.com">
+          </li>
+          <li>
+            <h2>Birthday</h2>
+          </li>
+          <li>
+            <input type="date" placeholder="">
+          </li>
+          <li>
+            <h2>Do you consent to our terms?</h2>
+          </li>
+          <li>
+            <div>
+              <input type="radio">
+              <label>Yes</label>
+            </div>
+            <div>
+              <input type="radio">
+              <label>Yes</label>
+            </div>
+          </li>
+          <li>
+            <h2>Please provide a joke:</h2>
+          </li>
+          <li>
+            <input type="text" placeholder="Go on, get creative.">
+          </li>
+          <li>
+            
+          </li>
+          <li>
+            <button class="bluebutton">Submit</button>
+            <button>Reset</button>
+          </li>
+        </ul>
+      </form>
     </main>
 
     <footer>
diff --git a/task_1_html_css/src/layout.css b/task_1_html_css/src/layout.css
index 56b1d33..d4d984f 100644
--- a/task_1_html_css/src/layout.css
+++ b/task_1_html_css/src/layout.css
@@ -14,10 +14,27 @@ body {
 
 }
 
-/*  I only found out using the "large" display as a base is  
- *  a bad practice after writing this. I realize this is suboptimal.
- */ 
-@media screen and (width <= 500px) {
+ul {
+  /* hide dot on all ul's */
+  list-style-type: none;
+}
+
+/*  I only found out using the "large" display as a base is bad while doing this.
+ *  So yes, this is very janky.
+ */  
+@media screen and (width > 1000px) {
+  form {
+    width: 60%
+  }
+}
+
+@media screen and (width <= 1000px) {
+  form {
+    width: 80%;
+  }
+}
+
+@media screen and (width <= 700px) {
   /* new sidebar size for small display */
   body {
     grid-template-columns: 12% 1fr;
@@ -26,6 +43,56 @@ body {
   body > section > ul > li > a > span {
     display: none;
   }
+  form {
+    width: 100%;
+  }
+}
+
+
+.bluebutton {
+  background-color: rgb(173, 115, 250);
+  color: white;
+}
+
+.bluebutton:hover {
+  background-color: rgb(187, 149, 233)
+}
+
+body > main > form {
+
+  & ul {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+    grid-auto-flow: row;
+    & li {
+      display: flex;
+      flex-direction: column;
+      margin: 1rem;
+      & h2 {
+        font-size: large;
+        color: cornflowerblue;
+        font-weight: normal;
+      }
+      & input {
+        padding: 5px;
+        border-width: 2px;
+        border-style: solid;
+        border-color: rgb(219, 207, 207);
+        border-radius: 5px;
+      }
+      & button {
+        width: 10rem;
+        margin: 5px;
+        padding: 10px;
+        border: none;
+        border-radius: 10px;
+      }
+      & div {
+        padding: 0.5rem;
+      }
+    }
+  }
 }