London10 - Khalil Alhaydr - HTML-CSS challenges

Form-Controls/index.html

@@ -13,15 +13,46 @@
     <h1>Product Pick</h1>
   </header>
   <main>
-  <form>
+  <form id="TShirtForm" class="contianer">
     <!-- write your html here-->
     <!-- try writing out the requirements first-->
+    <label for="firstName">First Name</label>
+    <input type="text" id="firstName" placeholder="First name" required><br><br>
+    <label for="lastName">Last Name</label>
+    <input type="text" id="lastName" placeholder="Last name" required><br><br>
+    <label for="email">Email address</label>
+    <input type="email" id="email" placeholder="Insert your email address" required><br><br>
+
+    <label for="deliveryDate">Select the delivery date</label>
+    <input type="date" id="deliveryDate" min="5/5/2023" max="5/6/2023" required><br><br>
+
+    <label for="colors">Select your colour</label>
+    <select id="colors" form="TShirtForm">
+      <option value="green">Green</option>
+      <option value="black">Black</option>
+      <option value="red">Red</option>
+    </select><br><br>
+
+    <label for="size">Select your size</label>
+    <select id="size" form="TShirtForm">
+      <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><br><br>
+
+    <input type="submit" id="submit">
+
   </form>
+
 
   </main>
   <footer>
     <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <h2>By Khalil Alhaydr</h2>
   </footer>
 </body>
 

Form-Controls/styles.css

@@ -0,0 +1,21 @@
+* {
+    background-color: rgb(247, 244, 244);
+}
+#submit {
+    background-color: green;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+input[type=text], input[type=email], input[type=date], select, textarea {
+    width: 25%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-top: 6px;
+    margin-bottom: 16px;
+    resize: vertical
+}