diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..1502984e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,28 +1,106 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>My form exercise</title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <header>
-    <h1>Product Pick</h1>
-  </header>
-  <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
-  </form>
-
-  </main>
-  <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
-  </footer>
-</body>
-
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>My form exercise</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Product Pick</h1>
+    </header>
+
+    <main>
+      <form>
+        <!-- write your html here-->
+        <!-- try writing out the requirements first-->
+
+        <!-- make sure to take valid input for customer name and email id,
+          let the customer choose any one t-shirt colour by using drop down box,
+          select t-shirt size by using radio button and select delivery date by using 
+          date input box and make sure delivery date is within the next 4 weeks of current date.
+     -->
+
+     <div class="input">
+      <label for="name">Customer Name</label>
+      <input
+        type="text"
+        name="name"
+        id="name"
+        required
+        
+        placeholder="Enter your full name"
+      />
+    </div>
+    
+    <div class="input">
+      <label for="email">Email</label>
+      <input
+        type="email"
+        name="email"
+        id="email"
+        required
+        placeholder="Enter your email"
+      />
+    </div>
+    
+        <div class="input">
+          <label for="tshirtColor">T-shirt Color</label>
+          <select name="tshirtColor" id="tshirtColor" required>
+            <option value="" disabled selected>Select a color</option>
+            <option value="Black">Black</option>
+            <option value="White">White</option>
+            <option label="Red">Red</option>
+          </select>
+        </div>
+        
+        <div class="tshirtSize" class="input">
+          T-shirt Size
+          <div class="input">
+            <label for="XS">XS</label>
+            <input type="radio" name="tshirtSize" id="XS" value="XS" required />
+
+            <label for="S">S</label>
+            <input type="radio" name="tshirtSize" id="S" value="S" />
+
+            <label for="M">M</label>
+            <input type="radio" name="tshirtSize" id="M" value="M" />
+
+            <label for="L">L</label>
+            <input type="radio" name="tshirtSize" id="L" value="L" />
+
+            <label for="XL">XL</label>
+            <input type="radio" name="tshirtSize" id="XL" value="XL" />
+
+            <label for="XXL">XXL</label>
+            <input type="radio" name="tshirtSize" id="XXL" value="XXL" />
+          </div>
+        </div>
+
+        <div class="input">
+          <label for="date">DeliveryDate</label>
+          <input
+            type="date"
+            name="date"
+            id="date"
+            min="2024-11-03"
+            max="2024-11-30"
+            required
+          />
+        </div>
+
+        <div class="input">
+          <button type="submit">Submit</button>
+          <button type="reset">Reset</button>
+        </div>
+      </form>
+    </main>
+    <footer>
+      <!-- change to your name-->
+      <h2>&copy; 2024 Chaitra's Tech Guide. All rights reserved.</h2>
+    </footer>
+  </body>
+</html>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..011c3b6c 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,76 @@
+body {
+  background-color: #4070f4;
+}
+
+header {
+  text-align: center;
+  color: burlywood;
+  font-family: "Courier New", Courier, monospace;
+  font-size: larger;
+}
+
+.tshirtSize input {
+  width: 15px;
+}
+
+main {
+  background-color: #fff;
+  width: 500px;
+  height: 500px;
+  margin: 45px auto;
+}
+
+.input {
+  padding: 10px;
+}
+
+form {
+  margin-left: 20px;
+  border-radius: 10px;
+  padding: 20px;
+}
+
+input {
+  width: 240px;
+  height: 10px;
+  margin: 10px;
+  background-color: lavender;
+  border: 0px;
+  padding: 10px;
+  font-size: 20px;
+}
+
+button {
+  width: 200px;
+  height: 50px;
+  background-color: darkblue;
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+footer {
+  text-align: center;
+  color: black;
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: cadetblue;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+select:focus,
+input[type="radio"]:focus,
+input[type="date"]:focus {
+  outline: 2px solid #005fcc;  
+  border: 2px solid #005fcc;  
+  background-color: #f0f8ff;   
+}
+
+button:focus {
+  outline: 2px solid #005fcc;  
+
+  background-color: rgb(228, 132, 6);
+}
\ No newline at end of file
