feat:added firstname, lastname, email and shirt color.

Author: d-odumosu

Form-Controls/index.html

@@ -17,6 +17,48 @@ <h1>Product Pick</h1>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
+
+<!--        first and lastname (ensure it contains at least two non-space characters.)-->
+<!--        email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
+<!--        shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
+<!--        shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
+      <div class="form">
+
+        <div class="form-group">
+          <label for="firstname">First Name</label>
+          <input type="text" id="firstname" name="firstname" required>
+        </div>
+
+        <div class="form-group">
+          <label for="lastname">Last Name</label>
+          <input type="text" id="lastname" name="lastname" required>
+        </div>
+
+        <div class="form-group">
+          <label for="email">Email</label>
+          <input type="email" id="email" name="email" required>
+        </div>
+
+        <div class="form-group">
+          <fieldset>
+            <legend>Choose a shirt color:</legend>
+            <div class="form-group-fieldset">
+              <input type="radio" id="choice1" name="shirt" value="blue">
+              <label for="choice1">Blue</label>
+            </div>
+
+            <div class="form-group-fieldset">
+              <input type="radio" id="choice2" name="shirt" value="green">
+              <label for="choice2">Green</label>
+            </div>
+
+            <div class="form-group-fieldset">
+              <input type="radio" id="choice3" name="shirt" value="yellow">
+              <label for="choice3">Yellow</label>
+            </div>
+          </fieldset>
+        </div>
+      </div>
       </form>
     </main>
     <footer>