From a18892fb0a92ea5bbbd1dfeb9bd82e164dfd8d7f Mon Sep 17 00:00:00 2001
From: Martin Mwaka <martinmwaka@hotmail.com>
Date: Sat, 9 May 2026 21:11:25 +0100
Subject: [PATCH 1/5] add fields to form

---
 Form-Controls/index.html | 44 ++++++++++++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 9 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 74b591ffc..deb07fd37 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,11 +1,11 @@
 <!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>
-    <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" >
   </head>
   <body>
     <header>
@@ -13,15 +13,41 @@ <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-->
+        <!-- Add input for name - required and validate -->
+        <label>
+          Name
+          <input type="text" name="name" required>
+        </label>
+        <label>
+        <!-- Add input for email - required and validate -->
+          Email
+          <input type="email" name="email" required>
+        </label>
+        <!-- Drop down list of 3 colours (green, blue, red) - required -->
+        <label for="colour">Choose a colour:</label>
+        <select name="colour" id="colour" required>
+          <option value="" disabled selected>Select a colour</option>
+          <option value="red">Red</option>
+          <option value="green">Green</option>
+          <option value="blue">Blue</option>
+        </select>
+        <!-- Drop down list of 6 sizes (XS, S, M, L, XL, XXL) - required -->
+        <label for="size">Choose a size:</label>
+        <select name="size" id="size" required>
+          <option value="" disabled selected>Select a size</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">Submit</button>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Martin Mwaka</p>
     </footer>
   </body>
 </html>

From ef44f77c2614ddfb548fef2730743d06d8ec3fd7 Mon Sep 17 00:00:00 2001
From: Martin Mwaka <martinmwaka@hotmail.com>
Date: Sun, 10 May 2026 06:54:40 +0100
Subject: [PATCH 2/5] update html and add style.css

---
 Form-Controls/index.html | 69 +++++++++++++++++++++++-----------------
 Form-Controls/style.css  | 66 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 105 insertions(+), 30 deletions(-)
 create mode 100644 Form-Controls/style.css

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index deb07fd37..d6e53b198 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -6,43 +6,52 @@
     <title>My form exercise</title>
     <meta name="description" content="" >
     <meta name="viewport" content="width=device-width, initial-scale=1" >
+    <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <header>
       <h1>Product Pick</h1>
     </header>
     <main>
-      <form>
-        <!-- Add input for name - required and validate -->
-        <label>
-          Name
-          <input type="text" name="name" required>
-        </label>
-        <label>
+      <form> 
+        <div class="form-group">
+           <!-- Add input for name - required and validate -->
+          <label for="name">Name</label>
+          <input type="text" id="name" placeholder="Joe Bloggs" required>
+        </div>
+        <div class="form-group">
         <!-- Add input for email - required and validate -->
-          Email
-          <input type="email" name="email" required>
-        </label>
-        <!-- Drop down list of 3 colours (green, blue, red) - required -->
-        <label for="colour">Choose a colour:</label>
-        <select name="colour" id="colour" required>
-          <option value="" disabled selected>Select a colour</option>
-          <option value="red">Red</option>
-          <option value="green">Green</option>
-          <option value="blue">Blue</option>
-        </select>
-        <!-- Drop down list of 6 sizes (XS, S, M, L, XL, XXL) - required -->
-        <label for="size">Choose a size:</label>
-        <select name="size" id="size" required>
-          <option value="" disabled selected>Select a size</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">Submit</button>
+          <label for="email">Email</label>
+          <input type="email" id="email" required>
+        </div>
+        <div class="form-group">
+          <!-- Drop down list of 3 colours (green, blue, red) - required -->
+          <label for="colour">Choose a colour:</label>
+          <select name="colour" id="colour" required>
+            <option value="" disabled selected>Select a colour</option>
+            <option value="red">Red</option>
+            <option value="green">Green</option>
+            <option value="blue">Blue</option>
+          </select>
+        </div>
+
+       <div class="form-group">
+         <!-- Drop down list of 6 sizes (XS, S, M, L, XL, XXL) - required -->
+          <label for="size">Choose a size:</label>
+          <select name="size" id="size" required>
+            <option value="" disabled selected>Select a size</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>
+        <button type="submit" id="submit-btn">Submit</button>
       </form>
     </main>
     <footer>
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
new file mode 100644
index 000000000..9f2028757
--- /dev/null
+++ b/Form-Controls/style.css
@@ -0,0 +1,66 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+input,
+button,
+select,
+textarea {
+  font: inherit;
+}
+
+input {
+  width: 100%;
+  /* height: 3rem; */
+}
+
+form button {
+  margin-top: 1rem;
+  grid-column: 1 / -1;
+  justify-self: center;
+  width: 100%;
+  @media(width > 550px) {
+    width: 50%;
+  }
+}
+
+form {
+  display: grid;
+  gap: 1rem;
+  border: 2px solid green;
+  padding: 2rem;
+  border-radius: 10px;
+
+  @media (width > 720px) {
+    grid-template-columns: 1fr 1fr;
+
+    #submit-btn, header, footer {
+      align-items: center;
+    }
+
+  }
+}
+
+.form-group {
+  display: grid;
+  gap: 0.5em;
+}
+
+body {
+  font-family: "Poppins", sans-serif;
+  /* font-weight: 00; */
+  font-style: normal;
+}
+
+main, header, footer {
+  margin: auto;
+  width: 90%;
+  max-width: 750px;
+}
+
+header h1, footer p {
+  text-align: center;
+  margin: 1.5rem;
+}
+

From 62005c60f040083fba27654b92350a5adc98ef3b Mon Sep 17 00:00:00 2001
From: Martin Mwaka <martinmwaka@hotmail.com>
Date: Tue, 12 May 2026 09:05:17 +0100
Subject: [PATCH 3/5] add colour styles

---
 Form-Controls/index.html |  6 +++---
 Form-Controls/style.css  | 42 ++++++++++++++++++++++++++++++++++------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index d6e53b198..567df10e6 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -25,11 +25,11 @@ <h1>Product Pick</h1>
         <div class="form-group">
         <!-- Add input for email - required and validate -->
           <label for="email">Email</label>
-          <input type="email" id="email" required>
+          <input type="email" id="email" placeholder="joe@me.com" required>
         </div>
         <div class="form-group">
           <!-- Drop down list of 3 colours (green, blue, red) - required -->
-          <label for="colour">Choose a colour:</label>
+          <label for="colour">Choose colour</label>
           <select name="colour" id="colour" required>
             <option value="" disabled selected>Select a colour</option>
             <option value="red">Red</option>
@@ -40,7 +40,7 @@ <h1>Product Pick</h1>
 
        <div class="form-group">
          <!-- Drop down list of 6 sizes (XS, S, M, L, XL, XXL) - required -->
-          <label for="size">Choose a size:</label>
+          <label for="size">Choose size</label>
           <select name="size" id="size" required>
             <option value="" disabled selected>Select a size</option>
             <option value="xs">XS</option>
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
index 9f2028757..0f82f2a78 100644
--- a/Form-Controls/style.css
+++ b/Form-Controls/style.css
@@ -3,32 +3,62 @@
   margin: 0;
 }
 
+:root {
+  /* font colours */
+  --clr-font-base: #DCE1DE;
+  /* background colours */
+  --clr-bg-base: #216869;
+  --clr-bg-accent1: #3B8C88; /* 20% lighter */
+  --clr-bg-accent2: #55AFAF; /* 40% lighter */
+  --clr-bg-accent3: #70D2D2; /* 60% lighter */
+  --clr-bg-dark1: #1A5354; /* 40% darker */
+}
+
 input,
 button,
-select,
-textarea {
+select {
   font: inherit;
 }
 
-input {
+label {
+  text-transform: uppercase;
+  color: var(--clr-font-base);
+  font-weight: 500;
+}
+
+input, select {
   width: 100%;
-  /* height: 3rem; */
+  height: 2rem;
+  background-color: var(--clr-bg-accent2);
 }
 
 form button {
+  text-transform: uppercase;
+  background-color: var(--clr-bg-accent2);
+  color: var(--clr-font-base);
+  font-weight: 500;
   margin-top: 1rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 5px;
   grid-column: 1 / -1;
   justify-self: center;
   width: 100%;
+
   @media(width > 550px) {
     width: 50%;
   }
 }
 
+form button:hover {
+  background-color: var(--clr-bg-accent3);
+}
+
 form {
   display: grid;
+  min-width: 350px;
   gap: 1rem;
-  border: 2px solid green;
+  background-color: var(--clr-bg-base);
   padding: 2rem;
   border-radius: 10px;
 
@@ -49,8 +79,8 @@ form {
 
 body {
   font-family: "Poppins", sans-serif;
-  /* font-weight: 00; */
   font-style: normal;
+  background-color: var(--clr-bg-accent3);
 }
 
 main, header, footer {

From 03dd0c21fd6cc7dabfd6c8bdd767e05fe748b4ae Mon Sep 17 00:00:00 2001
From: Martin Mwaka <martinmwaka@hotmail.com>
Date: Tue, 12 May 2026 09:27:02 +0100
Subject: [PATCH 4/5] update button background colour

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

diff --git a/Form-Controls/style.css b/Form-Controls/style.css
index 0f82f2a78..ffd03aff3 100644
--- a/Form-Controls/style.css
+++ b/Form-Controls/style.css
@@ -34,7 +34,7 @@ input, select {
 
 form button {
   text-transform: uppercase;
-  background-color: var(--clr-bg-accent2);
+  background-color: var(--clr-bg-dark1);
   color: var(--clr-font-base);
   font-weight: 500;
   margin-top: 1rem;
@@ -51,12 +51,12 @@ form button {
 }
 
 form button:hover {
-  background-color: var(--clr-bg-accent3);
+  background-color: var(--clr-bg-accent1);
 }
 
 form {
   display: grid;
-  min-width: 350px;
+  min-width: 0px;
   gap: 1rem;
   background-color: var(--clr-bg-base);
   padding: 2rem;

From eb46639a04a77798a95f4ff1630c04e4b157b65a Mon Sep 17 00:00:00 2001
From: Martin Mwaka <martinmwaka@hotmail.com>
Date: Wed, 13 May 2026 06:57:41 +0100
Subject: [PATCH 5/5] update min width of form

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

diff --git a/Form-Controls/style.css b/Form-Controls/style.css
index ffd03aff3..715e5bd44 100644
--- a/Form-Controls/style.css
+++ b/Form-Controls/style.css
@@ -56,7 +56,7 @@ form button:hover {
 
 form {
   display: grid;
-  min-width: 0px;
+  min-width: 350px;
   gap: 1rem;
   background-color: var(--clr-bg-base);
   padding: 2rem;
