From 98350a3f8fe6c719f8c3642d66abc664af7aec84 Mon Sep 17 00:00:00 2001
From: Jestavo1 <gonjestavo1@gmail.com>
Date: Thu, 17 Sep 2026 17:55:05 +0100
Subject: [PATCH 1/9] adding form contents  to index.html

---
 Form-Controls/index.html | 63 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 56 insertions(+), 7 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..54091c9bc 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -12,16 +12,65 @@
       <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>
+        <fieldset>
+          <legend>Customer Information</legend>
+          <p>
+            <label for="customerName">Customer Name</label>
+            <input
+              id="customerName"
+              name="customerName"
+              type="text"
+              pattern=".*\S.*\S.*"
+              placeholder="username"
+              required
+            />
+          </p>
+          <p>
+            <label for="emailAddress">Email Address</label>
+            <input
+              id="emailAddress"
+              name="emailAddress"
+              type="email"
+              placeholder="email"
+              required
+            />
+          </p>
+        </fieldset>
+        <fieldset>
+          <legend>T-shirt Colour and Size</legend>
+          <p>
+            <input type="radio" id="red" name="colour" value="red" required />
+            <label for="red">Red</label>
+          </p>
+          <p>
+            <input type="radio" id="green" name="colour" value="green" />
+
+            <label for="green">Green</label>
+          </p>
+          <p>
+            <input type="radio" id="blue" name="colour" value="blue" />
+            <label for="blue">Blue</label>
+          </p>
+          <p>
+            <label for="size">T-shirt Size</label>
+            <select id="size" name="size" required>
+              <option value="" disabled selected>Select Size</option>
+              <option value="Xsmall">XS</option>
+              <option value="Small">S</option>
+              <option value="Medium">M</option>
+              <option value="Large">L</option>
+              <option value="XLarge">XL</option>
+              <option value="XXLarge">XXL</option>
+            </select>
+          </p>
+        </fieldset>
+        <input type="submit" value="Submit" />
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      
+      <p>By Gustarv Nchitu</p>
     </footer>
   </body>
 </html>

From 8b382736ea52f3b002e570316d9c270a9499ea96 Mon Sep 17 00:00:00 2001
From: Jestavo1 <gonjestavo1@gmail.com>
Date: Thu, 17 Sep 2026 18:33:07 +0100
Subject: [PATCH 2/9] adding css file

---
 Form-Controls/styel.css | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 Form-Controls/styel.css

diff --git a/Form-Controls/styel.css b/Form-Controls/styel.css
new file mode 100644
index 000000000..e69de29bb

From 38f5f5942c211d80bb8ccae164211a8364640886 Mon Sep 17 00:00:00 2001
From: Jestavo1 <gonjestavo1@gmail.com>
Date: Thu, 17 Sep 2026 18:42:40 +0100
Subject: [PATCH 3/9] adding properties

---
 Form-Controls/styel.css | 112 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)

diff --git a/Form-Controls/styel.css b/Form-Controls/styel.css
index e69de29bb..d32cc53b7 100644
--- a/Form-Controls/styel.css
+++ b/Form-Controls/styel.css
@@ -0,0 +1,112 @@
+```css
+body {
+  font-family: "Segoe UI", Tahoma, sans-serif;
+  background: linear-gradient(135deg, #e8f0ff, #f8faff);
+  color: #243447;
+  margin: 0;
+  min-height: 100vh;
+}
+
+header {
+  background: linear-gradient(120deg, #4a69bd, #6a89cc);
+  color: #ffffff;
+  text-align: center;
+  padding: 35px 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+header h1 {
+  margin: 0;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}
+
+main {
+  max-width: 700px;
+  margin: 45px auto;
+  padding: 0 25px;
+}
+
+fieldset {
+  background-color: #ffffff;
+  border: none;
+  border-left: 5px solid #4a69bd;
+  border-radius: 12px;
+  padding: 28px;
+  margin-bottom: 25px;
+  box-shadow: 0 8px 20px rgba(74, 105, 189, 0.12);
+}
+
+legend {
+  font-weight: 700;
+  color: #4a69bd;
+  padding: 0 12px;
+  font-size: 1.1rem;
+}
+
+fieldset p {
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+input[type="text"],
+input[type="email"] {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 13px 15px;
+  margin-top: 8px;
+  border: 2px solid #d9e2f3;
+  border-radius: 8px;
+  background-color: #f9fbff;
+  color: #243447;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+select {
+  display: block;
+  margin-top: 8px;
+  padding: 13px 15px;
+  border: 2px solid #d9e2f3;
+  border-radius: 8px;
+  background-color: #f9fbff;
+  color: #243447;
+  cursor: pointer;
+}
+
+input[type="submit"] {
+  background: linear-gradient(120deg, #4a69bd, #3867d6);
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 1rem;
+  padding: 13px 26px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  box-shadow: 0 5px 12px rgba(56, 103, 214, 0.25);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+input[type="submit"]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(56, 103, 214, 0.3);
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="radio"]:focus,
+input[type="submit"]:focus,
+select:focus {
+  outline: none;
+  border-color: #4a69bd;
+  box-shadow: 0 0 0 4px rgba(74, 105, 189, 0.2);
+}
+
+footer {
+  text-align: center;
+  font-weight: 600;
+  color: #65748b;
+  padding: 20px;
+  margin-top: 20px;
+}
+```

From 57f8663ad02c0b666f04e8f8863df9311b4a174d Mon Sep 17 00:00:00 2001
From: Jestavo1 <gonjestavo1@gmail.com>
Date: Thu, 17 Sep 2026 18:43:21 +0100
Subject: [PATCH 4/9] linking css to html

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 54091c9bc..7e83ee413 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -6,6 +6,7 @@
     <title>My form exercise</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styel.css" />
   </head>
   <body>
     <header>

From ba865a1dc8c0d2cee9a61d28eb1d2d1af522b775 Mon Sep 17 00:00:00 2001
From: Jestavo1 <gonjestavo1@gmail.com>
Date: Wed, 23 Sep 2026 18:24:47 +0100
Subject: [PATCH 5/9] refactor: separate T-shirt colour and size fields in the
 form

---
 Form-Controls/index.html | 64 +++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 7e83ee413..39547f453 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -38,34 +38,44 @@ <h1>Product Pick</h1>
             />
           </p>
         </fieldset>
-        <fieldset>
-          <legend>T-shirt Colour and Size</legend>
-          <p>
-            <input type="radio" id="red" name="colour" value="red" required />
-            <label for="red">Red</label>
-          </p>
-          <p>
-            <input type="radio" id="green" name="colour" value="green" />
+        ```html
+<fieldset>
+  <legend>T-shirt Colour</legend>
+
+  <p>
+    <input type="radio" id="red" name="colour" value="red" required />
+    <label for="red">Red</label>
+  </p>
+
+  <p>
+    <input type="radio" id="green" name="colour" value="green" />
+    <label for="green">Green</label>
+  </p>
+
+  <p>
+    <input type="radio" id="blue" name="colour" value="blue" />
+    <label for="blue">Blue</label>
+  </p>
+</fieldset>
+
+<fieldset>
+  <legend>T-shirt Size</legend>
+
+  <p>
+    <label for="size">Choose a size</label>
+    <select id="size" name="size" required>
+      <option value="" disabled selected>Select Size</option>
+      <option value="Xsmall">XS</option>
+      <option value="Small">S</option>
+      <option value="Medium">M</option>
+      <option value="Large">L</option>
+      <option value="XLarge">XL</option>
+      <option value="XXLarge">XXL</option>
+    </select>
+  </p>
+</fieldset>
+```
 
-            <label for="green">Green</label>
-          </p>
-          <p>
-            <input type="radio" id="blue" name="colour" value="blue" />
-            <label for="blue">Blue</label>
-          </p>
-          <p>
-            <label for="size">T-shirt Size</label>
-            <select id="size" name="size" required>
-              <option value="" disabled selected>Select Size</option>
-              <option value="Xsmall">XS</option>
-              <option value="Small">S</option>
-              <option value="Medium">M</option>
-              <option value="Large">L</option>
-              <option value="XLarge">XL</option>
-              <option value="XXLarge">XXL</option>
-            </select>
-          </p>
-        </fieldset>
         <input type="submit" value="Submit" />
       </form>
     </main>

From 231d9dba56a0d44015a6728c1a273f77db48a8ae Mon Sep 17 00:00:00 2001
From: Jestavo1 <gonjestavo1@gmail.com>
Date: Wed, 23 Sep 2026 18:25:39 +0100
Subject: [PATCH 6/9] fix: remove extraneous code block from index.html

---
 Form-Controls/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 39547f453..30e501a7a 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -74,7 +74,7 @@ <h1>Product Pick</h1>
     </select>
   </p>
 </fieldset>
-```
+
 
         <input type="submit" value="Submit" />
       </form>

From 7dccd6ad96e15317819524c7be1816b4528e05ad Mon Sep 17 00:00:00 2001
From: Jestavo1 <gonjestavo1@gmail.com>
Date: Wed, 23 Sep 2026 18:26:39 +0100
Subject: [PATCH 7/9] fix: remove extraneous code block from index.html

---
 Form-Controls/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 30e501a7a..d03210ad6 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -38,7 +38,7 @@ <h1>Product Pick</h1>
             />
           </p>
         </fieldset>
-        ```html
+        
 <fieldset>
   <legend>T-shirt Colour</legend>
 

From 26fd7f456185beb22ddd757cdb97b1fc1ab52b85 Mon Sep 17 00:00:00 2001
From: Jestavo1 <gonjestavo1@gmail.com>
Date: Fri, 25 Sep 2026 18:24:05 +0100
Subject: [PATCH 8/9] renaming CSS  file for form controls

---
 Form-Controls/style.css | 112 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 Form-Controls/style.css

diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..d32cc53b7
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,112 @@
+```css
+body {
+  font-family: "Segoe UI", Tahoma, sans-serif;
+  background: linear-gradient(135deg, #e8f0ff, #f8faff);
+  color: #243447;
+  margin: 0;
+  min-height: 100vh;
+}
+
+header {
+  background: linear-gradient(120deg, #4a69bd, #6a89cc);
+  color: #ffffff;
+  text-align: center;
+  padding: 35px 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+header h1 {
+  margin: 0;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}
+
+main {
+  max-width: 700px;
+  margin: 45px auto;
+  padding: 0 25px;
+}
+
+fieldset {
+  background-color: #ffffff;
+  border: none;
+  border-left: 5px solid #4a69bd;
+  border-radius: 12px;
+  padding: 28px;
+  margin-bottom: 25px;
+  box-shadow: 0 8px 20px rgba(74, 105, 189, 0.12);
+}
+
+legend {
+  font-weight: 700;
+  color: #4a69bd;
+  padding: 0 12px;
+  font-size: 1.1rem;
+}
+
+fieldset p {
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+input[type="text"],
+input[type="email"] {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 13px 15px;
+  margin-top: 8px;
+  border: 2px solid #d9e2f3;
+  border-radius: 8px;
+  background-color: #f9fbff;
+  color: #243447;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+select {
+  display: block;
+  margin-top: 8px;
+  padding: 13px 15px;
+  border: 2px solid #d9e2f3;
+  border-radius: 8px;
+  background-color: #f9fbff;
+  color: #243447;
+  cursor: pointer;
+}
+
+input[type="submit"] {
+  background: linear-gradient(120deg, #4a69bd, #3867d6);
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 1rem;
+  padding: 13px 26px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  box-shadow: 0 5px 12px rgba(56, 103, 214, 0.25);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+input[type="submit"]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(56, 103, 214, 0.3);
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="radio"]:focus,
+input[type="submit"]:focus,
+select:focus {
+  outline: none;
+  border-color: #4a69bd;
+  box-shadow: 0 0 0 4px rgba(74, 105, 189, 0.2);
+}
+
+footer {
+  text-align: center;
+  font-weight: 600;
+  color: #65748b;
+  padding: 20px;
+  margin-top: 20px;
+}
+```

From e0c578058f029eec4b61b7768fde67de6b154680 Mon Sep 17 00:00:00 2001
From: Jestavo1 <gonjestavo1@gmail.com>
Date: Fri, 25 Sep 2026 18:26:13 +0100
Subject: [PATCH 9/9] chore: remove unused stylesheet for form controls

---
 Form-Controls/styel.css | 112 ----------------------------------------
 1 file changed, 112 deletions(-)
 delete mode 100644 Form-Controls/styel.css

diff --git a/Form-Controls/styel.css b/Form-Controls/styel.css
deleted file mode 100644
index d32cc53b7..000000000
--- a/Form-Controls/styel.css
+++ /dev/null
@@ -1,112 +0,0 @@
-```css
-body {
-  font-family: "Segoe UI", Tahoma, sans-serif;
-  background: linear-gradient(135deg, #e8f0ff, #f8faff);
-  color: #243447;
-  margin: 0;
-  min-height: 100vh;
-}
-
-header {
-  background: linear-gradient(120deg, #4a69bd, #6a89cc);
-  color: #ffffff;
-  text-align: center;
-  padding: 35px 20px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-header h1 {
-  margin: 0;
-  font-size: 2rem;
-  letter-spacing: 1px;
-}
-
-main {
-  max-width: 700px;
-  margin: 45px auto;
-  padding: 0 25px;
-}
-
-fieldset {
-  background-color: #ffffff;
-  border: none;
-  border-left: 5px solid #4a69bd;
-  border-radius: 12px;
-  padding: 28px;
-  margin-bottom: 25px;
-  box-shadow: 0 8px 20px rgba(74, 105, 189, 0.12);
-}
-
-legend {
-  font-weight: 700;
-  color: #4a69bd;
-  padding: 0 12px;
-  font-size: 1.1rem;
-}
-
-fieldset p {
-  margin-bottom: 20px;
-  line-height: 1.5;
-}
-
-input[type="text"],
-input[type="email"] {
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 13px 15px;
-  margin-top: 8px;
-  border: 2px solid #d9e2f3;
-  border-radius: 8px;
-  background-color: #f9fbff;
-  color: #243447;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-select {
-  display: block;
-  margin-top: 8px;
-  padding: 13px 15px;
-  border: 2px solid #d9e2f3;
-  border-radius: 8px;
-  background-color: #f9fbff;
-  color: #243447;
-  cursor: pointer;
-}
-
-input[type="submit"] {
-  background: linear-gradient(120deg, #4a69bd, #3867d6);
-  color: #ffffff;
-  font-weight: 700;
-  font-size: 1rem;
-  padding: 13px 26px;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  box-shadow: 0 5px 12px rgba(56, 103, 214, 0.25);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-input[type="submit"]:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 16px rgba(56, 103, 214, 0.3);
-}
-
-input[type="text"]:focus,
-input[type="email"]:focus,
-input[type="radio"]:focus,
-input[type="submit"]:focus,
-select:focus {
-  outline: none;
-  border-color: #4a69bd;
-  box-shadow: 0 0 0 4px rgba(74, 105, 189, 0.2);
-}
-
-footer {
-  text-align: center;
-  font-weight: 600;
-  color: #65748b;
-  padding: 20px;
-  margin-top: 20px;
-}
-```