From 981380493738f40d9797f609a0f4cb9ad3bc13c4 Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Thu, 2 Oct 2025 22:07:12 +0100
Subject: [PATCH 01/11] Initial commit

---
 Form-Controls/index.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..3b19571f8 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
+    <title>My form exercise for selling T-shirts</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
@@ -17,10 +17,19 @@ <h1>Product Pick</h1>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
+        <!-- Writing that out as a series of questions to ask yourself: -->
+
+        <!-- 1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -->
+
+        <!-- 2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -->
+
+        <!-- 3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -->
+
+        <!-- 4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
+      <p>Mariia Serhiienko</p>
       <h2>By HOMEWORK SOLUTION</h2>
     </footer>
   </body>

From 83232b4b483f1a2634f61ac93c1ca15e927b334f Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Fri, 3 Oct 2025 01:20:45 +0100
Subject: [PATCH 02/11] Addedinput for client's name in the form

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 3b19571f8..6ba8ada34 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,36 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise for selling T-shirts</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-->
-        <!-- 
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>My form exercise for selling T-shirts</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-->
-        <!-- Writing that out as a series of questions to ask yourself: -->
+      <!-- Writing that out as a series of questions to ask yourself: -->
+
+      <!-- 1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -->
+      <label for="customer-name">Customer's name</label>
+      <input type="text" id="customer-name" name="customer-name" required minlength="2" placeholder="Enter your name"
+        autocomplete="name">
+
 
-        <!-- 1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -->
+      <!-- 2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -->
 
-        <!-- 2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -->
+      <!-- 3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -->
 
-        <!-- 3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -->
+      <!-- 4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
+    </form>
+  </main>
+  <footer>
+    <p>Mariia Serhiienko</p>
+    <h2>By HOMEWORK SOLUTION</h2>
+  </footer>
+</body>
 
-        <!-- 4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
-      </form>
-    </main>
-    <footer>
-      <p>Mariia Serhiienko</p>
-      <h2>By HOMEWORK SOLUTION</h2>
-    </footer>
-  </body>
-</html>
+</html>
\ No newline at end of file

From 2b2623555279a9746f0a5e3ee5ccefecd7cd43ff Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Fri, 3 Oct 2025 01:30:24 +0100
Subject: [PATCH 03/11] Addedinput for client's email in the form

---
 Form-Controls/index.html | 94 +++++++++++++++++++++++-----------------
 1 file changed, 54 insertions(+), 40 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 6ba8ada34..00fa15e3b 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,43 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>My form exercise for selling T-shirts</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
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>My form exercise for selling T-shirts</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-->
-      <!-- Writing that out as a series of questions to ask yourself: -->
-
-      <!-- 1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -->
-      <label for="customer-name">Customer's name</label>
-      <input type="text" id="customer-name" name="customer-name" required minlength="2" placeholder="Enter your name"
-        autocomplete="name">
-
-
-      <!-- 2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -->
-
-      <!-- 3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -->
-
-      <!-- 4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
-    </form>
-  </main>
-  <footer>
-    <p>Mariia Serhiienko</p>
-    <h2>By HOMEWORK SOLUTION</h2>
-  </footer>
-</body>
-
-</html>
\ No newline at end of file
+        <!-- Writing that out as a series of questions to ask yourself: -->
+
+        <!-- 1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -->
+        <label for="customer-name">Customer's name</label>
+        <input
+          type="text"
+          id="customer-name"
+          name="customer-name"
+          required
+          minlength="2"
+          placeholder="Enter your name"
+          autocomplete="name"
+        />
+
+        <!-- 2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -->
+        <p id="email-hint">Please use your account email.</p>
+        <label for="customer-email">Email</label>
+        <input
+          type="email"
+          id="customer-email"
+          name="customer-email"
+          required
+          autocomplete="email"
+          aria-describedby="email-hint"
+          placeholder="name@example.com"
+        />
+
+        <!-- 3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -->
+
+        <!-- 4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
+      </form>
+    </main>
+    <footer>
+      <p>Mariia Serhiienko</p>
+      <h2>By HOMEWORK SOLUTION</h2>
+    </footer>
+  </body>
+</html>

From 0d262d2de9741fc19a42db6d3c97d3e4641daba1 Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Fri, 3 Oct 2025 01:48:56 +0100
Subject: [PATCH 04/11] Added fieldset for choosing 1 of 3 colours

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 00fa15e3b..89e39dbd8 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -45,6 +45,37 @@ <h1>Product Pick</h1>
         />
 
         <!-- 3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -->
+        <fieldset>
+          <legend>Choose your T-shirt color</legend>
+          <div>
+            <input
+              type="radio"
+              id="color-red"
+              name="tshirt-color"
+              value="red"
+              required
+            />
+            <label for="color-red">Red</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              id="color-green"
+              name="tshirt-color"
+              value="green"
+            />
+            <label for="color-green">Green</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              id="color-blue"
+              name="tshirt-color"
+              value="blue"
+            />
+            <label for="color-blue">Blue</label>
+          </div>
+        </fieldset>
 
         <!-- 4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
       </form>

From e93148177acdaeedb1ace0cc196bf5300e3d36ce Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Fri, 3 Oct 2025 02:01:40 +0100
Subject: [PATCH 05/11] Added dropdown menu for choosing T-shirt size

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 89e39dbd8..13066d281 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -78,6 +78,18 @@ <h1>Product Pick</h1>
         </fieldset>
 
         <!-- 4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
+        <label for="tshirt-size">Choose your size, please</label>
+        <select id="tshirt-size" name="tshirt-size" required>
+          <option value="" selected disabled>Pick a size, please.</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 type="submit">Confirm order</button>
       </form>
     </main>
     <footer>

From 7d7bb057932ff8f6a57d08f4b166ec7c3b0dc55d Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Fri, 3 Oct 2025 02:05:55 +0100
Subject: [PATCH 06/11] Added autofocus for the first input - name

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 13066d281..d01d57739 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -29,6 +29,7 @@ <h1>Product Pick</h1>
           minlength="2"
           placeholder="Enter your name"
           autocomplete="name"
+          autofocus
         />
 
         <!-- 2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -->

From 4ad327487edfea2b203fb4826ed4f85fc54cb1e7 Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Fri, 3 Oct 2025 02:33:16 +0100
Subject: [PATCH 07/11] Fixed size for choosing colours - for 100% accesibility

---
 Form-Controls/index.html | 41 +++++++++++++---------------------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index d01d57739..7a8e279f6 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -14,11 +14,6 @@ <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-->
-        <!-- Writing that out as a series of questions to ask yourself: -->
-
         <!-- 1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -->
         <label for="customer-name">Customer's name</label>
         <input
@@ -47,34 +42,24 @@ <h1>Product Pick</h1>
 
         <!-- 3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -->
         <fieldset>
-          <legend>Choose your T-shirt color</legend>
+          <legend>Choose your T-shirt colour, please</legend>
           <div>
-            <input
-              type="radio"
-              id="color-red"
-              name="tshirt-color"
-              value="red"
-              required
-            />
-            <label for="color-red">Red</label>
+            <label>
+              <input type="radio" name="tshirt-color" value="red" required />
+              <font size="24">Red</font>
+            </label>
           </div>
           <div>
-            <input
-              type="radio"
-              id="color-green"
-              name="tshirt-color"
-              value="green"
-            />
-            <label for="color-green">Green</label>
+            <label>
+              <input type="radio" name="tshirt-color" value="green" />
+              <font size="24">Green</font>
+            </label>
           </div>
           <div>
-            <input
-              type="radio"
-              id="color-blue"
-              name="tshirt-color"
-              value="blue"
-            />
-            <label for="color-blue">Blue</label>
+            <label>
+              <input type="radio" name="tshirt-color" value="blue" />
+              <font size="24">Blue</font>
+            </label>
           </div>
         </fieldset>
 

From 40d1368f183f607584638ced598bee1776f0e9a8 Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Fri, 3 Oct 2025 03:19:55 +0100
Subject: [PATCH 08/11] Fixed size for choosing colours with style

---
 Form-Controls/index.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 7a8e279f6..1f90ac3f6 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -6,6 +6,11 @@
     <title>My form exercise for selling T-shirts</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      .color-label {
+        font-size: 24px;
+      }
+    </style>
   </head>
 
   <body>
@@ -44,21 +49,21 @@ <h1>Product Pick</h1>
         <fieldset>
           <legend>Choose your T-shirt colour, please</legend>
           <div>
-            <label>
+            <label class="color-label">
               <input type="radio" name="tshirt-color" value="red" required />
-              <font size="24">Red</font>
+              Red
             </label>
           </div>
           <div>
-            <label>
+            <label class="color-label">
               <input type="radio" name="tshirt-color" value="green" />
-              <font size="24">Green</font>
+              Green
             </label>
           </div>
           <div>
-            <label>
+            <label class="color-label">
               <input type="radio" name="tshirt-color" value="blue" />
-              <font size="24">Blue</font>
+              Blue
             </label>
           </div>
         </fieldset>

From c492ec7c41f566758512a722453dcdbd1bd93e5c Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Fri, 3 Oct 2025 19:46:11 +0100
Subject: [PATCH 09/11] Fixed closing tags

---
 Form-Controls/index.html | 155 ++++++++++++++++++---------------------
 1 file changed, 71 insertions(+), 84 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 1f90ac3f6..2b343f83b 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,91 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise for selling T-shirts</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style>
-      .color-label {
-        font-size: 24px;
-      }
-    </style>
-  </head>
 
-  <body>
-    <header>
-      <h1>Product Pick</h1>
-    </header>
-    <main>
-      <form>
-        <!-- 1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -->
-        <label for="customer-name">Customer's name</label>
-        <input
-          type="text"
-          id="customer-name"
-          name="customer-name"
-          required
-          minlength="2"
-          placeholder="Enter your name"
-          autocomplete="name"
-          autofocus
-        />
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>My form exercise for selling T-shirts</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    .color-label {
+      font-size: 24px;
+    }
+  </style>
+</head>
 
-        <!-- 2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -->
-        <p id="email-hint">Please use your account email.</p>
-        <label for="customer-email">Email</label>
-        <input
-          type="email"
-          id="customer-email"
-          name="customer-email"
-          required
-          autocomplete="email"
-          aria-describedby="email-hint"
-          placeholder="name@example.com"
-        />
+<body>
+  <header>
+    <h1>Product Pick</h1>
+  </header>
+  <main>
+    <form>
+      <!-- 1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -->
+      <label for="customer-name">Customer's name</label>
+      <input type="text" id="customer-name" name="customer-name" required minlength="2" placeholder="Enter your name"
+        autocomplete="name" autofocus>
 
-        <!-- 3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -->
-        <fieldset>
-          <legend>Choose your T-shirt colour, please</legend>
-          <div>
-            <label class="color-label">
-              <input type="radio" name="tshirt-color" value="red" required />
-              Red
-            </label>
-          </div>
-          <div>
-            <label class="color-label">
-              <input type="radio" name="tshirt-color" value="green" />
-              Green
-            </label>
-          </div>
-          <div>
-            <label class="color-label">
-              <input type="radio" name="tshirt-color" value="blue" />
-              Blue
-            </label>
-          </div>
-        </fieldset>
+      <!-- 2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -->
+      <p id="email-hint">Please use your account email.</p>
+      <label for="customer-email">Email</label>
+      <input type="email" id="customer-email" name="customer-email" required autocomplete="email"
+        aria-describedby="email-hint" placeholder="name@example.com">
 
-        <!-- 4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
-        <label for="tshirt-size">Choose your size, please</label>
-        <select id="tshirt-size" name="tshirt-size" required>
-          <option value="" selected disabled>Pick a size, please.</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>
+      <!-- 3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -->
+      <fieldset>
+        <legend>Choose your T-shirt colour, please</legend>
+        <div>
+          <label class="color-label">
+            <input type="radio" name="tshirt-color" value="red" required>
+            Red
+          </label>
+        </div>
+        <div>
+          <label class="color-label">
+            <input type="radio" name="tshirt-color" value="green">
+            Green
+          </label>
+        </div>
+        <div>
+          <label class="color-label">
+            <input type="radio" name="tshirt-color" value="blue">
+            Blue
+          </label>
+        </div>
+      </fieldset>
 
-        <button type="submit">Confirm order</button>
-      </form>
-    </main>
-    <footer>
-      <p>Mariia Serhiienko</p>
-      <h2>By HOMEWORK SOLUTION</h2>
-    </footer>
-  </body>
-</html>
+      <!-- 4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
+      <label for="tshirt-size">Choose your size, please</label>
+      <select id="tshirt-size" name="tshirt-size" required>
+        <option value="" selected disabled>Pick a size, please.</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 type="submit">Confirm order</button>
+    </form>
+  </main>
+  <footer>
+    <p>Mariia Serhiienko</p>
+    <h2>By HOMEWORK SOLUTION</h2>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file

From b28e5c6304fd3165f1832177bdee3080e3898ea3 Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Sat, 4 Oct 2025 12:15:49 +0100
Subject: [PATCH 10/11] Fixed problem accessibility

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 2b343f83b..2f47108f5 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -7,11 +7,6 @@
   <title>My form exercise for selling T-shirts</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <style>
-    .color-label {
-      font-size: 24px;
-    }
-  </style>
 </head>
 
 <body>
@@ -37,18 +32,21 @@ <h1>Product Pick</h1>
         <div>
           <label class="color-label">
             <input type="radio" name="tshirt-color" value="red" required>
+            <svg width="20" height="20"></svg>
             Red
           </label>
         </div>
         <div>
           <label class="color-label">
             <input type="radio" name="tshirt-color" value="green">
+            <svg width="20" height="20"></svg>
             Green
           </label>
         </div>
         <div>
           <label class="color-label">
             <input type="radio" name="tshirt-color" value="blue">
+            <svg width="20" height="20"></svg>
             Blue
           </label>
         </div>

From 907d6a64eaaee02db90d1052d7ae6605687ccf05 Mon Sep 17 00:00:00 2001
From: Konvaly <konvaly@gmail.com>
Date: Sat, 4 Oct 2025 14:04:24 +0100
Subject: [PATCH 11/11] Added few lines for better readability web-page

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 2f47108f5..44900aa09 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -19,12 +19,14 @@ <h1>Product Pick</h1>
       <label for="customer-name">Customer's name</label>
       <input type="text" id="customer-name" name="customer-name" required minlength="2" placeholder="Enter your name"
         autocomplete="name" autofocus>
+      <hr>
 
       <!-- 2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -->
       <p id="email-hint">Please use your account email.</p>
       <label for="customer-email">Email</label>
       <input type="email" id="customer-email" name="customer-email" required autocomplete="email"
         aria-describedby="email-hint" placeholder="name@example.com">
+      <hr>
 
       <!-- 3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -->
       <fieldset>
@@ -51,19 +53,22 @@ <h1>Product Pick</h1>
           </label>
         </div>
       </fieldset>
+      <hr>
 
       <!-- 4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -->
-      <label for="tshirt-size">Choose your size, please</label>
-      <select id="tshirt-size" name="tshirt-size" required>
-        <option value="" selected disabled>Pick a size, please.</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 for="tshirt-size">Choose your size, please</label>
+        <select id="tshirt-size" name="tshirt-size" required>
+          <option value="" selected disabled>Pick a size, please.</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>
+      <hr>
       <button type="submit">Confirm order</button>
     </form>
   </main>
