From d5fd617045614f786804d47102bb9ef0814f11fb Mon Sep 17 00:00:00 2001
From: Sayeed Hussain <hussainsahid980@gmail.com>
Date: Wed, 6 May 2026 17:59:50 +0100
Subject: [PATCH 1/6] Added Name input with two non-space characters

---
 Form-Controls/index.html | 63 ++++++++++++++++++++++++----------------
 1 file changed, 38 insertions(+), 25 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..79933ee2f 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,27 +1,40 @@
 <!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" />
-  </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-->
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
-    </footer>
-  </body>
-</html>
+
+<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" />
+</head>
+
+<body>
+
+  <!-- This is a header section -->
+  <header class="hd">
+    <h1>Product Pick</h1>
+  </header>
+
+
+
+  <main>
+    <form>
+
+      <!-- This is a customer name input -->
+       
+      <div>
+        <label class="blk" for="nam">First Name* </label>
+        <input type="text" id="nam" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
+      </div>
+
+
+    </form>
+  </main>
+  <footer>
+    <!-- change to your name-->
+    <p>By HOMEWORK SOLUTION</p>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file

From 21ad88bd4e42055596b527467cf46604d74893e4 Mon Sep 17 00:00:00 2001
From: Sayeed Hussain <hussainsahid980@gmail.com>
Date: Wed, 6 May 2026 18:39:45 +0100
Subject: [PATCH 2/6] Added email input

---
 Form-Controls/index.html | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 79933ee2f..7cfbf359e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -22,12 +22,29 @@ <h1>Product Pick</h1>
     <form>
 
       <!-- This is a customer name input -->
-       
+
       <div>
         <label class="blk" for="nam">First Name* </label>
         <input type="text" id="nam" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
       </div>
 
+      <br>
+
+      <div>
+        <label class="blk" for="nams">Last Name* </label>
+        <input type="text" id="nams" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
+      </div>
+
+      <br>
+
+         
+      <!-- This is a customer email input -->
+      <div>
+        <label class="blk" for="mail">Email* </label>
+        <input type="email" id="mail" placeholder="Enter Your Email" name="Email" required>
+      </div>
+
+      <br>
 
     </form>
   </main>

From d80f4a6c158c4fa3015e11ced041c2a93658b3a8 Mon Sep 17 00:00:00 2001
From: Sayeed Hussain <hussainsahid980@gmail.com>
Date: Wed, 6 May 2026 18:42:43 +0100
Subject: [PATCH 3/6] Added color option

---
 Form-Controls/index.html | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 7cfbf359e..36183a5b8 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -37,7 +37,7 @@ <h1>Product Pick</h1>
 
       <br>
 
-         
+
       <!-- This is a customer email input -->
       <div>
         <label class="blk" for="mail">Email* </label>
@@ -46,6 +46,19 @@ <h1>Product Pick</h1>
 
       <br>
 
+      <!-- This is a color section -->
+      <div class="AllClr">
+        <label class="blk" for="clr"> T-shirt Color*</label>
+        <select name="Color" id="clr" required>
+          <option value="">-- Select a color -- </option>
+          <option value="red">Red</option>
+          <option value="blue"> Blue</option>
+          <option value="yellow">Yellow</option>
+        </select>
+      </div>
+
+      <br>
+
     </form>
   </main>
   <footer>

From d7465694764d55c571ad610efd8b2ba277b5045a Mon Sep 17 00:00:00 2001
From: Sayeed Hussain <hussainsahid980@gmail.com>
Date: Wed, 6 May 2026 18:45:47 +0100
Subject: [PATCH 4/6] Added size option

---
 Form-Controls/index.html | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 36183a5b8..2327f9e65 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -47,6 +47,7 @@ <h1>Product Pick</h1>
       <br>
 
       <!-- This is a color section -->
+       
       <div class="AllClr">
         <label class="blk" for="clr"> T-shirt Color*</label>
         <select name="Color" id="clr" required>
@@ -59,6 +60,24 @@ <h1>Product Pick</h1>
 
       <br>
 
+
+        <!-- This is a size option -->
+
+      <div>
+        <label class="blk" for="sz"> T-shirt Size*</label>
+        <select name="Size" id="sz" required>
+          <option value="">-- Select a color -- </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>
+
+        <button class="btn" type="submit"> Submit </button>
+      </div>
+
     </form>
   </main>
   <footer>

From a69bb98781de00cab2ef0316cad9d9f91d2cf399 Mon Sep 17 00:00:00 2001
From: Sayeed Hussain <hussainsahid980@gmail.com>
Date: Wed, 6 May 2026 18:59:02 +0100
Subject: [PATCH 5/6] Complete project

---
 Form-Controls/index.html | 132 ++++++++++++++++++++++-----------------
 Form-Controls/style.css  |  82 ++++++++++++++++++++++++
 2 files changed, 158 insertions(+), 56 deletions(-)
 create mode 100644 Form-Controls/style.css

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 2327f9e65..842874610 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -7,83 +7,103 @@
   <title>My form exercise</title>
   <meta name="description" content="" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <!-- this is a google font link -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+
+
+  <!-- This is a css link -->
+  <link rel="stylesheet" href="style.css">
 </head>
 
-<body>
+<body class="font">
+
+  <div class="form">
+
+    <!-- This is a header section -->
+    <header class="hd">
+      <h1>Product Pick</h1>
+    </header>
+
+
 
-  <!-- This is a header section -->
-  <header class="hd">
-    <h1>Product Pick</h1>
-  </header>
+    <main>
+      <form>
 
+        <fieldset>
+          <div class="all">
 
+            <!-- This is a customer name input -->
 
-  <main>
-    <form>
+            <div>
+              <label class="blk" for="nam">First Name* </label>
+              <input type="text" id="nam" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
+            </div>
 
-      <!-- This is a customer name input -->
+            <br>
 
-      <div>
-        <label class="blk" for="nam">First Name* </label>
-        <input type="text" id="nam" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
-      </div>
+            <div>
+              <label class="blk" for="nams">Last Name* </label>
+              <input type="text" id="nams" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
+            </div>
 
-      <br>
+            <br>
 
-      <div>
-        <label class="blk" for="nams">Last Name* </label>
-        <input type="text" id="nams" name="name" placeholder="Enter Your Name" pattern=".*\S.*\S.*" required>
-      </div>
 
-      <br>
+            <!-- This is a customer email input -->
+            <div>
+              <label class="blk" for="mail">Email* </label>
+              <input type="email" id="mail" placeholder="Enter Your Email" name="Email" required>
+            </div>
 
+            <br>
 
-      <!-- This is a customer email input -->
-      <div>
-        <label class="blk" for="mail">Email* </label>
-        <input type="email" id="mail" placeholder="Enter Your Email" name="Email" required>
-      </div>
+            <!-- This is a color section -->
 
-      <br>
+            <div class="AllClr">
+              <label class="blk" for="clr"> T-shirt Color*</label>
+              <select name="Color" id="clr" required>
+                <option value="">-- Select a color -- </option>
+                <option value="red">Red</option>
+                <option value="blue"> Blue</option>
+                <option value="yellow">Yellow</option>
+              </select>
+            </div>
 
-      <!-- This is a color section -->
-       
-      <div class="AllClr">
-        <label class="blk" for="clr"> T-shirt Color*</label>
-        <select name="Color" id="clr" required>
-          <option value="">-- Select a color -- </option>
-          <option value="red">Red</option>
-          <option value="blue"> Blue</option>
-          <option value="yellow">Yellow</option>
-        </select>
-      </div>
+            <br>
 
-      <br>
 
+            <!-- This is a size option -->
 
-        <!-- This is a size option -->
+            <div>
+              <label class="blk" for="sz"> T-shirt Size*</label>
+              <select name="Size" id="sz" required>
+                <option value="">-- Select a color -- </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>
-        <label class="blk" for="sz"> T-shirt Size*</label>
-        <select name="Size" id="sz" required>
-          <option value="">-- Select a color -- </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>
+              <button class="btn" type="submit"> Submit </button>
+            </div>
 
-        <button class="btn" type="submit"> Submit </button>
-      </div>
+          </div>
+        </fieldset>
 
-    </form>
-  </main>
-  <footer>
-    <!-- change to your name-->
-    <p>By HOMEWORK SOLUTION</p>
-  </footer>
+      </form>
+    </main>
+    <footer>
+      <!-- change to your name-->
+      <p>By Sayeed Hussain </p>
+    </footer>
+  </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..9b83f9608
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,82 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+
+/* this is a google font */
+.font {
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
+
+
+/* This is a whole form's class */
+.form{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh; 
+}
+
+
+select{
+    width: 212px;
+    height: 35px;
+    border-radius: 5px;
+    border: solid 1px black;
+    padding: 5px;
+}
+
+fieldset{
+    width: 314px;
+    height: 470px;
+    border-radius: 5px;
+}
+
+
+/* all input fields position class */
+.all{
+    margin-top: 15px;
+    margin-left: 20px;
+}
+
+
+input{
+    height: 35px;
+    width: 210px;
+    border-radius: 5px;
+    border: solid 1px black;
+    padding: 10px;
+}
+
+
+/* This is whole font weight class name */
+.blk{
+    display: block;
+    font-weight: 500;
+    margin-bottom: 6px;
+   
+}
+
+/* This is header class name */
+.hd{
+  margin-right: 5%;
+  margin-bottom: 5px;
+}
+
+.btn{
+    display: block;
+    margin-top: 10px;
+    width: 90px;
+    height: 40px;
+    border-radius: 10px;
+    border: none;
+    background-color:rgb(42, 104, 236);
+    color: white;
+    font-weight: bold;
+}
\ No newline at end of file

From 2c7682aff0bb6acb3f6411b444434ac1ad9e3773 Mon Sep 17 00:00:00 2001
From: Sayeed Hussain <hussainsahid980@gmail.com>
Date: Wed, 6 May 2026 20:13:04 +0100
Subject: [PATCH 6/6] Element error updated

---
 Form-Controls/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 842874610..2b481e3cf 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <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" />
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <!-- this is a google font link -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
