London | 26-Sep-ITP| Frumentius Tesfay | Sprint 1 | Form-controls

Form-Controls/index.html

@@ -6,22 +6,58 @@
     <title>My form exercise</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <header>
       <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+        <div>
+          <label for="name">Name:</label>
+          <input type="text" name="name" id="name" pattern=".*\S.*\S.*" required>
+        </div>
+
+        <div>
+          <label for="email">Email:</label>
+          <input type="email" name="email" id="email" placeholder="cyftrainee@gmail.com" required>
+        </div>
+
+        <fieldset>
+          <legend>T-Shirt Colour</legend>
+
+            <label for="white">White</label>
+            <input type="radio" name="colour" id="white" value="white" required>
+
+            <label for="black">Black</label>
+            <input type="radio" name="colour" id="black" value="black" required>
+
+            <label for="blue">Blue</label>
+            <input type="radio" name="colour" id="blue" value="blue" required>
+
+        </fieldset>  
+
+        <div>
+          <label for="size">T-shirt Size</label>
+          <select name="size" id="size" required>
+
+            <option value=""disabled selected>Choose</option>
+            <option value="xs">XS</option>
+            <option value="s">S</option>
+            <option value="m">M</option>
+            <option value="l">L</option>
+            <option value="xl">XL</option>
+            <option value="xxl">XXL</option>
+
+          </select>
+        </div>
+
+        <button type="Submit">Submit</button>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Frumentius-Rev</p>
     </footer>
   </body>
 </html>

Form-Controls/style.css

@@ -0,0 +1,58 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    max-width: 340px;
+    margin: 40px auto;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background: #f5f5f5;
+    padding: 20px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
+    border-radius: 12px;
+}
+
+input[type="text"],
+input[type="email"] {
+    width: 280px;
+
+}
+
+fieldset {
+    width: 280px;
+    padding: 10px;
+    border-radius: 8px;
+}
+
+input,
+select {
+    padding: 10px;
+    margin-top: 5px;
+
+}
+
+button {
+    width: 120px;
+    padding: 10px;
+    border-radius: 6px;
+    display: block;
+    margin: 8px auto 0;
+    border:none;
+    background-color: rgb(44, 44, 247);
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+}
+
+button:hover {
+    background-color: rgb(65, 74, 206);
+
+}