From f0f6330076b0e3b3372b089b7d34b05ea0fdc35e Mon Sep 17 00:00:00 2001
From: Rawan Almutairi <almutairi.rawan01@gmail.com>
Date: Tue, 29 Sep 2026 00:42:49 +0100
Subject: [PATCH 01/16] created forms and styled them

---
 Form-Controls/index.html | 62 ++++++++++++++++++++++++++++++++++++----
 Form-Controls/style.css  | 17 +++++++++++
 2 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 Form-Controls/style.css

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..ce676ea05 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>My form exercise</title>
+    <link rel="stylesheet" href="style.css"/>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
@@ -13,15 +14,64 @@ <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-->
+  <!-- write your html here-->
+        Enter your name:
+      <input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>
+
+<!-- the size attribute control how wide the text box, "how many characters it can control-->
+<!-- the minlength attribute control the minimum number of characters required-->
+<!-- the maxlength attribute control the maximum number of characters required-->
+<!-- the placeholder attribute provide a hint for the user on what to enter-->
+ <!-- the required attribute ensures the user fills out the field-->
+<p>Choose your T-shirt color:</p>
+<!-- choosing the radio buttons for color selection-->
+<p>please select a color:</p>
+<p>
+<input type="radio" name="color" id="red" value="Red" placeholder="Red" required>
+<label for="red"label>Red</label><br>
+<input type="radio" name="color" id="brown" value="Brown" placeholder="Brown" required>
+<label for="brown">Brown</label><br>
+<input type="radio" name="color" id="black" value="Black" placeholder="Black" required>
+<label for="black">Black</label><br>
+</p>
+
+<!-- a list of suggestions using the list attribute and the datalist element -->
+ <!-- I need to fix the labels to increase accessbility to 100%-->
+ <label> 
+Select your T-shirt size: 
+<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br> 
+</label>
+<datalist id="SizeList">
+
+<option value="XS">
+  <option value="S">
+    <option value="M">
+      <option value="L">
+        <option value="XL">
+          <option value="XXL">
+        
+</datalist>
+
       </form>
+
+<p>
+       <style>
+input:invalid{background: rgb(253, 251, 253);}
+input:valid{background: rgb(253, 251, 253);}
+ </style>
+ Enter your email:
+<input type="email" placeholder="Enter your email" required>
+</p>
+<!--The input type="email" is used so the browser can validatae the email address format-->
+<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
+
+<form> <label> <input type="submit"> <input type="resit">
+  </label>
+</form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>Rawan@</p>
     </footer>
   </body>
-</html>
+</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..9b733c991
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,17 @@
+body { color: #141414; 
+  
+    background-color: #6aa57e; 
+
+     font-family: Georgia; 
+     
+    
+
+h1{
+
+font-family: sans-serif;
+color:  rgba(15, 15, 15, 0.267); 
+background-color: #f5eeda;  
+text-align: center;
+font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
+}
\ No newline at end of file

From 2842943cb6081bfaaf9f73ad044aac50f080ad9e Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 11:26:52 +0100
Subject: [PATCH 02/16] fixing errors

Updated input field for name to include pattern validation.
---
 Form-Controls/index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index ce676ea05..ee267528c 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -16,8 +16,8 @@ <h1>Product Pick</h1>
       <form>
   <!-- write your html here-->
         Enter your name:
-      <input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>
-
+      <input type="text" placeholder="Enter your name  " name="aName" size="16" minlength="2" maxlength="16" PATTERN = ".*\S.*\S.*" required>
+ 
 <!-- the size attribute control how wide the text box, "how many characters it can control-->
 <!-- the minlength attribute control the minimum number of characters required-->
 <!-- the maxlength attribute control the maximum number of characters required-->
@@ -52,7 +52,7 @@ <h1>Product Pick</h1>
         
 </datalist>
 
-      </form>
+      
 
 <p>
        <style>
@@ -65,7 +65,7 @@ <h1>Product Pick</h1>
 <!--The input type="email" is used so the browser can validatae the email address format-->
 <!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
 
-<form> <label> <input type="submit"> <input type="resit">
+ <label> <input type="submit"> <input type="resit">
   </label>
 </form>
     </main>
@@ -74,4 +74,4 @@ <h1>Product Pick</h1>
       <p>Rawan@</p>
     </footer>
   </body>
-</html> 
\ No newline at end of file
+</html> 

From 6530a832dbbd788a1cdce178e6b1d2cdece59724 Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 11:28:20 +0100
Subject: [PATCH 03/16] Clean up style.css formatting

Fix CSS formatting and remove unnecessary whitespace.
---
 Form-Controls/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Form-Controls/style.css b/Form-Controls/style.css
index 9b733c991..bfdfb8bcf 100644
--- a/Form-Controls/style.css
+++ b/Form-Controls/style.css
@@ -3,7 +3,7 @@ body { color: #141414;
     background-color: #6aa57e; 
 
      font-family: Georgia; 
-     
+     }
     
 
 h1{
@@ -14,4 +14,4 @@ background-color: #f5eeda;
 text-align: center;
 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 
-}
\ No newline at end of file
+}

From d6df8af4f8d74f23d4dde925b0f1f243890d9922 Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 11:31:08 +0100
Subject: [PATCH 04/16] Change footer name in index.html

Updated footer name from 'Rawan@' to 'Rawan0-0'.
---
 Form-Controls/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index ee267528c..58fb018b5 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -14,7 +14,7 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-  <!-- write your html here-->
+  
         Enter your name:
       <input type="text" placeholder="Enter your name  " name="aName" size="16" minlength="2" maxlength="16" PATTERN = ".*\S.*\S.*" required>
  
@@ -70,8 +70,8 @@ <h1>Product Pick</h1>
 </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>Rawan@</p>
+      
+      <p>Rawan0-0</p>
     </footer>
   </body>
 </html> 

From 1b55bf17427bf9372a1c8752729bebdd065a9788 Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 11:48:35 +0100
Subject: [PATCH 05/16] fixing errors in the form size list

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 58fb018b5..f92522d9c 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -36,25 +36,26 @@ <h1>Product Pick</h1>
 </p>
 
 <!-- a list of suggestions using the list attribute and the datalist element -->
- <!-- I need to fix the labels to increase accessbility to 100%-->
+ 
  <label> 
 Select your T-shirt size: 
-<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br> 
+   <p>please select a size:</p>
+<p>
+<input type="radio" name="T-shirt_Size" id="XS" value="XS" placeholder="XS" required>
+<label for="XS"label>xs</label><br>
+<input type="radio" name="T-shirt_Size" id="S" value="S" placeholder="S" required>
+<label for="S"label>s</label><br>
+<input type="radio" name="T-shirt_Size" id="M" value="M" placeholder="M" required>
+<label for="M"label>M</label><br>
+  <input type="radio" name="T-shirt_Size" id="L" value="L" placeholder="L" required>
+<label for="L"label>L</label><br>
+  <input type="radio" name="T-shirt_Size" id="XL" value="XL" placeholder="XL" required>
+<label for="XL"label>XL</label><br>
+  <input type="radio" name="T-shirt_Size" id="XXL" value="XXL" placeholder="XXL" required>
+<label for="XXL"label>xXXL/label><br>
+</p>
 </label>
-<datalist id="SizeList">
-
-<option value="XS">
-  <option value="S">
-    <option value="M">
-      <option value="L">
-        <option value="XL">
-          <option value="XXL">
-        
-</datalist>
 
-      
-
-<p>
        <style>
 input:invalid{background: rgb(253, 251, 253);}
 input:valid{background: rgb(253, 251, 253);}

From b3b1bc871055d376076199ccfa1c6e21fb4f43ef Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 11:54:53 +0100
Subject: [PATCH 06/16] fixing errors

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index f92522d9c..0a565a194 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -59,13 +59,14 @@ <h1>Product Pick</h1>
        <style>
 input:invalid{background: rgb(253, 251, 253);}
 input:valid{background: rgb(253, 251, 253);}
- </style>
+ </style> 
+        <label>
  Enter your email:
 <input type="email" placeholder="Enter your email" required>
 </p>
 <!--The input type="email" is used so the browser can validatae the email address format-->
 <!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
-
+</label>
  <label> <input type="submit"> <input type="resit">
   </label>
 </form>

From 7ec221f3d7240d65b8b71548772e0ca49e445567 Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 13:33:12 +0100
Subject: [PATCH 07/16] used a validator for HTML

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 0a565a194..49f763077 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <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>
-    <link rel="stylesheet" href="style.css"/>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="style.css">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
     <header>
@@ -16,7 +16,7 @@ <h1>Product Pick</h1>
       <form>
   
         Enter your name:
-      <input type="text" placeholder="Enter your name  " name="aName" size="16" minlength="2" maxlength="16" PATTERN = ".*\S.*\S.*" required>
+      <input type="text" placeholder="Enter your name  " name="aName" size="16" minlength="2" maxlength="16" pattern=".*\S.*\S.*" required>
  
 <!-- the size attribute control how wide the text box, "how many characters it can control-->
 <!-- the minlength attribute control the minimum number of characters required-->
@@ -27,47 +27,46 @@ <h1>Product Pick</h1>
 <!-- choosing the radio buttons for color selection-->
 <p>please select a color:</p>
 <p>
-<input type="radio" name="color" id="red" value="Red" placeholder="Red" required>
-<label for="red"label>Red</label><br>
-<input type="radio" name="color" id="brown" value="Brown" placeholder="Brown" required>
+<input type="radio" name="color" id="red" value="Red" required>
+<label for="red">Red</label>
+<input type="radio" name="color" id="brown" value="Brown"  required>
 <label for="brown">Brown</label><br>
-<input type="radio" name="color" id="black" value="Black" placeholder="Black" required>
+<input type="radio" name="color" id="black" value="Black"  required>
 <label for="black">Black</label><br>
 </p>
 
 <!-- a list of suggestions using the list attribute and the datalist element -->
  
- <label> 
-Select your T-shirt size: 
-   <p>please select a size:</p>
-<p>
-<input type="radio" name="T-shirt_Size" id="XS" value="XS" placeholder="XS" required>
-<label for="XS"label>xs</label><br>
-<input type="radio" name="T-shirt_Size" id="S" value="S" placeholder="S" required>
-<label for="S"label>s</label><br>
-<input type="radio" name="T-shirt_Size" id="M" value="M" placeholder="M" required>
-<label for="M"label>M</label><br>
-  <input type="radio" name="T-shirt_Size" id="L" value="L" placeholder="L" required>
-<label for="L"label>L</label><br>
-  <input type="radio" name="T-shirt_Size" id="XL" value="XL" placeholder="XL" required>
-<label for="XL"label>XL</label><br>
-  <input type="radio" name="T-shirt_Size" id="XXL" value="XXL" placeholder="XXL" required>
-<label for="XXL"label>xXXL/label><br>
-</p>
-</label>
+<p>Select your T-shirt size:</p>
+ 
+<input type="radio" name="T-shirt_Size" id="XS" value="XS" required>
+<label for="XS">XS</label><br>
+ 
+<input type="radio" name="T-shirt_Size" id="S" value="S">
+<label for="S">S</label><br>
+ 
+<input type="radio" name="T-shirt_Size" id="M" value="M">
+<label for="M">M</label><br>
+ 
+<input type="radio" name="T-shirt_Size" id="L" value="L">
+<label for="L">L</label><br>
+ 
+<input type="radio" name="T-shirt_Size" id="XL" value="XL">
+<label for="XL">XL</label><br>
+ 
+<input type="radio" name="T-shirt_Size" id="XXL" value="XXL">
+<label for="XXL">XXL</label><br>
 
-       <style>
-input:invalid{background: rgb(253, 251, 253);}
-input:valid{background: rgb(253, 251, 253);}
- </style> 
-        <label>
+
+    
+   <label>     
  Enter your email:
 <input type="email" placeholder="Enter your email" required>
-</p>
+
 <!--The input type="email" is used so the browser can validatae the email address format-->
 <!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
 </label>
- <label> <input type="submit"> <input type="resit">
+ <label> <input type="submit"> 
   </label>
 </form>
     </main>

From d415f57de6336d1174d3826e3dbf30f1a94860c7 Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 14:58:44 +0100
Subject: [PATCH 08/16] Added label for name input in the form

Added a label for the name input field in the form.
---
 Form-Controls/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 49f763077..7e5517385 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -14,10 +14,10 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-  
+    <label>
         Enter your name:
       <input type="text" placeholder="Enter your name  " name="aName" size="16" minlength="2" maxlength="16" pattern=".*\S.*\S.*" required>
- 
+    </label>
 <!-- the size attribute control how wide the text box, "how many characters it can control-->
 <!-- the minlength attribute control the minimum number of characters required-->
 <!-- the maxlength attribute control the maximum number of characters required-->

From e8f3f7de270cd5d26c23b6c41bcc542204216128 Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 15:03:27 +0100
Subject: [PATCH 09/16]  footer with author information

Added footer with author name.
---
 Form-Controls/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 7e5517385..6464917c2 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -69,8 +69,10 @@ <h1>Product Pick</h1>
  <label> <input type="submit"> 
   </label>
 </form>
-    </main>
+    </main> 
     <footer>
+      <p>Rawan Almutairi</p>
+    </footer>
       
       <p>Rawan0-0</p>
     </footer>

From 8d485582ad55b5c49241a53ae98e435288ec4fa0 Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 15:09:37 +0100
Subject: [PATCH 10/16] fixed bugs

---
 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 6464917c2..42c6de347 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -74,7 +74,7 @@ <h1>Product Pick</h1>
       <p>Rawan Almutairi</p>
     </footer>
       
-      <p>Rawan0-0</p>
+      
     </footer>
   </body>
 </html> 

From 16bae40f5cb0dda0ca04a2171bb9d1ace285c5ba Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 15:16:22 +0100
Subject: [PATCH 11/16] Removed duplicate font-family from style.css

Removed redundant font-family declaration.
---
 Form-Controls/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Form-Controls/style.css b/Form-Controls/style.css
index bfdfb8bcf..b6c19008c 100644
--- a/Form-Controls/style.css
+++ b/Form-Controls/style.css
@@ -12,6 +12,5 @@ font-family: sans-serif;
 color:  rgba(15, 15, 15, 0.267); 
 background-color: #f5eeda;  
 text-align: center;
-font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 
 }

From 50919b2a5112ac38127bb6455f354a6468fe918b Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 15:31:35 +0100
Subject: [PATCH 12/16] I fixed the color ratio for h1

---
 Form-Controls/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Form-Controls/style.css b/Form-Controls/style.css
index b6c19008c..a2f4a243e 100644
--- a/Form-Controls/style.css
+++ b/Form-Controls/style.css
@@ -9,8 +9,8 @@ body { color: #141414;
 h1{
 
 font-family: sans-serif;
-color:  rgba(15, 15, 15, 0.267); 
-background-color: #f5eeda;  
+color:  rgba(22, 14, 14, 0.74); 
+background-color: #f0ece8;  
 text-align: center;
 
 }

From a7ddac7df1b659b9755e48dc2974d50bff05aecb Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 15:42:12 +0100
Subject: [PATCH 13/16] Fix formatting issues in index.html

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 42c6de347..4b2b34407 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -78,3 +78,4 @@ <h1>Product Pick</h1>
     </footer>
   </body>
 </html> 
+

From 56985251f4e03e92f1b8a2b769b0d83e2cbd6cc8 Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 15:43:44 +0100
Subject: [PATCH 14/16] formatting with prettier

---
 Form-Controls/style.css | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/Form-Controls/style.css b/Form-Controls/style.css
index a2f4a243e..894e23e4d 100644
--- a/Form-Controls/style.css
+++ b/Form-Controls/style.css
@@ -1,16 +1,14 @@
-body { color: #141414; 
-  
-    background-color: #6aa57e; 
+body {
+  color: #141414;
 
-     font-family: Georgia; 
-     }
-    
+  background-color: #6aa57e;
 
-h1{
-
-font-family: sans-serif;
-color:  rgba(22, 14, 14, 0.74); 
-background-color: #f0ece8;  
-text-align: center;
+  font-family: Georgia;
+}
 
+h1 {
+  font-family: sans-serif;
+  color: rgba(22, 14, 14, 0.74);
+  background-color: #f0ece8;
+  text-align: center;
 }

From e5a8744f97adfee4050468ef28fe855e9266e498 Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 16:07:22 +0100
Subject: [PATCH 15/16] Fix duplicate footer closing tag in index.html

Removed duplicate closing footer tag.
---
 Form-Controls/index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4b2b34407..c60c41c53 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -74,8 +74,7 @@ <h1>Product Pick</h1>
       <p>Rawan Almutairi</p>
     </footer>
       
-      
-    </footer>
+    
   </body>
 </html> 
 

From e782c04ec1431aa8fd34d3bd53290c3b68f5cfb1 Mon Sep 17 00:00:00 2001
From: Rawan0-0 <Almutairi.rawan01@gmail.com>
Date: Tue, 6 Oct 2026 16:09:39 +0100
Subject: [PATCH 16/16] Refactor HTML structure and improve formatting

---
 Form-Controls/index.html | 127 ++++++++++++++++++++-------------------
 1 file changed, 65 insertions(+), 62 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index c60c41c53..80875ba27 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <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>
-    <link rel="stylesheet" href="style.css">
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style.css" />
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
     <header>
@@ -14,67 +14,70 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-    <label>
-        Enter your name:
-      <input type="text" placeholder="Enter your name  " name="aName" size="16" minlength="2" maxlength="16" pattern=".*\S.*\S.*" required>
-    </label>
-<!-- the size attribute control how wide the text box, "how many characters it can control-->
-<!-- the minlength attribute control the minimum number of characters required-->
-<!-- the maxlength attribute control the maximum number of characters required-->
-<!-- the placeholder attribute provide a hint for the user on what to enter-->
- <!-- the required attribute ensures the user fills out the field-->
-<p>Choose your T-shirt color:</p>
-<!-- choosing the radio buttons for color selection-->
-<p>please select a color:</p>
-<p>
-<input type="radio" name="color" id="red" value="Red" required>
-<label for="red">Red</label>
-<input type="radio" name="color" id="brown" value="Brown"  required>
-<label for="brown">Brown</label><br>
-<input type="radio" name="color" id="black" value="Black"  required>
-<label for="black">Black</label><br>
-</p>
+        <label>
+          Enter your name:
+          <input
+            type="text"
+            placeholder="Enter your name  "
+            name="aName"
+            size="16"
+            minlength="2"
+            maxlength="16"
+            pattern=".*\S.*\S.*"
+            required
+          />
+        </label>
+        <!-- the size attribute control how wide the text box, "how many characters it can control-->
+        <!-- the minlength attribute control the minimum number of characters required-->
+        <!-- the maxlength attribute control the maximum number of characters required-->
+        <!-- the placeholder attribute provide a hint for the user on what to enter-->
+        <!-- the required attribute ensures the user fills out the field-->
+        <p>Choose your T-shirt color:</p>
+        <!-- choosing the radio buttons for color selection-->
+        <p>please select a color:</p>
+        <p>
+          <input type="radio" name="color" id="red" value="Red" required />
+          <label for="red">Red</label>
+          <input type="radio" name="color" id="brown" value="Brown" required />
+          <label for="brown">Brown</label><br />
+          <input type="radio" name="color" id="black" value="Black" required />
+          <label for="black">Black</label><br />
+        </p>
 
-<!-- a list of suggestions using the list attribute and the datalist element -->
- 
-<p>Select your T-shirt size:</p>
- 
-<input type="radio" name="T-shirt_Size" id="XS" value="XS" required>
-<label for="XS">XS</label><br>
- 
-<input type="radio" name="T-shirt_Size" id="S" value="S">
-<label for="S">S</label><br>
- 
-<input type="radio" name="T-shirt_Size" id="M" value="M">
-<label for="M">M</label><br>
- 
-<input type="radio" name="T-shirt_Size" id="L" value="L">
-<label for="L">L</label><br>
- 
-<input type="radio" name="T-shirt_Size" id="XL" value="XL">
-<label for="XL">XL</label><br>
- 
-<input type="radio" name="T-shirt_Size" id="XXL" value="XXL">
-<label for="XXL">XXL</label><br>
+        <!-- a list of suggestions using the list attribute and the datalist element -->
 
+        <p>Select your T-shirt size:</p>
+         
+        <input type="radio" name="T-shirt_Size" id="XS" value="XS" required />
+        <label for="XS">XS</label><br />
+         
+        <input type="radio" name="T-shirt_Size" id="S" value="S" />
+        <label for="S">S</label><br />
+         
+        <input type="radio" name="T-shirt_Size" id="M" value="M" />
+        <label for="M">M</label><br />
+         
+        <input type="radio" name="T-shirt_Size" id="L" value="L" />
+        <label for="L">L</label><br />
+         
+        <input type="radio" name="T-shirt_Size" id="XL" value="XL" />
+        <label for="XL">XL</label><br />
+         
+        <input type="radio" name="T-shirt_Size" id="XXL" value="XXL" />
+        <label for="XXL">XXL</label><br />
 
-    
-   <label>     
- Enter your email:
-<input type="email" placeholder="Enter your email" required>
+        <label>
+          Enter your email:
+          <input type="email" placeholder="Enter your email" required />
 
-<!--The input type="email" is used so the browser can validatae the email address format-->
-<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
-</label>
- <label> <input type="submit"> 
-  </label>
-</form>
-    </main> 
+          <!--The input type="email" is used so the browser can validatae the email address format-->
+          <!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
+        </label>
+        <label> <input type="submit" /> </label>
+      </form>
+    </main>
     <footer>
       <p>Rawan Almutairi</p>
     </footer>
-      
-    
   </body>
-</html> 
-
+</html>