diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..2a21e961 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -16,12 +16,67 @@ <h1>Product Pick</h1>
   <form>
     <!-- write your html here-->
     <!-- try writing out the requirements first-->
+   
+    <!--1.ask customer to fill full name-->
+     <fieldset>
+      <legend>* Enter Your Useranme</legend>
+       <label for="useranme">useranme between 3 and 15 characters:</label>
+       <input id="useranme" type="text" name="useranme" minlength="3" maxlength="15" required><br>
+     </fieldset>
+
+    <!--2.ask customer to fill email address-->
+    <fieldset>
+      <legend>* Enter Your Email Address:</legend>
+     <label for="email">Valid Email is required:</label>
+     <input id="email" type="email" required>
+     <br>
+    </fieldset>
+    <!--3.ask customer to choose a T-shirt colour -->
+    <fieldset>
+     <legend>* select a colour</legend>
+     <input class="colour" id="red" type="radio" name="colour" >
+     <label for="red">Red</label>
+     <input class="colour" id="yellow" type="radio" name="colour">
+     <label for="yellow">yellow</label>
+     <input class="colour" id="blue" type="radio" name="colour">
+     <label for="blue">blue</label>
+    </fieldset>
+
+    <!--4.ask customer to choose a T-shirt size-->
+    <fieldset>
+      <legend>* select a size</legend>
+      <input class="size" id="xs" type="radio" name="size">
+      <label for="xs">XS</label>
+      <input class="size" id="s" type="radio" name="size">
+      <label for="s">S</label>
+      <input class="size" id="m" type="radio" name="size">
+      <label for="m">M</label>
+      <input class="size" id="l" type="radio" name="size">
+      <label for="l">L</label>
+      <input class="size" id="xl" type="radio" name="size">
+      <label for="xl">XL</label>
+      <input class="size" id="xxl" type="radio" name="size">
+      <label for="xxl">XXL</label>
+    </fieldset>
+  
+   <!-- 5.ask customer to choose delivery date -->
+     <fieldset>
+      <legend>* Select a delivery date</legend>
+      <label for="date">valid date only within next four weeks:</label>
+      <input id="date" type="date" required>
+      
+     </fieldset>
+    
+     <br>
+    <button>Submit</button>
+
+
   </form>
 
   </main>
   <footer>
     <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <h2>By Howard</h2>
   </footer>
 </body>
 
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..6cc385ab 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,70 @@
+button,
+input,
+text,
+radio,
+label {
+  font-family: inherit;
+  font-size: 100%;
+
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+header {
+    background-color: blanchedalmond;
+    height: 80px;
+    padding-top: 20px;
+}
+
+h1 {
+    text-align: center;
+    color: blue;
+    
+}
+
+form {
+    margin: 80px 50px 50px 110px;
+    padding-bottom: 30px;
+    border-bottom: 1px solid gray;
+    
+    
+}
+
+fieldset {
+    border: none;
+    margin-bottom: 30px;
+    
+}
+
+legend {
+    font-weight: 200;
+    font-size: 1.2em;  
+    margin-bottom: 10px;  
+}
+
+.colour {
+    margin-left: 15px;
+}
+
+.size {
+    margin-left: 15px;
+}
+
+footer {
+    text-align: center;
+    background-color: blanchedalmond;
+    height: 80px;
+    padding-top: 30px;
+}
+
+button {
+    margin-left: 350px;
+    padding: 10px 20px;
+    background-color: brown;
+    border: none;
+    border-radius: 5%;
+}
\ No newline at end of file