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/4] 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/4] 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/4] 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/4] 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>