From 91a087acfb7dbbacaee1f96d6db3a0acebbbe0ac Mon Sep 17 00:00:00 2001
From: Keenan Powell <keenanpowell@gmail.com>
Date: Sat, 10 May 2025 20:42:33 +0200
Subject: [PATCH 1/4] Article header update

---
 Wireframe/index.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..7dd6024b5 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,16 +10,19 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Redefine the as is with the end in mind with a wireframe that is simple,
+        easy to use, and easy to understand.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="https://unsplash.com/photos/text-0tSiofevpUs" alt="" />
+        <h2>What is a wireframe? A guide for non-designers</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A wireframe is a visual blueprint or outline of a website or application page, focusing on structure, layout, 
+          and functionality rather than aesthetics. It serves as a foundation for the design, 
+          helping to plan content placement, navigation, and user flow before diving into visual elements. 
+.
         </p>
         <a href="">Read more</a>
       </article>

From c2e79d68c463a1a3fab1f70234b83cf96ec33e01 Mon Sep 17 00:00:00 2001
From: Keenan Powell <keenanpowell@gmail.com>
Date: Sat, 10 May 2025 20:43:39 +0200
Subject: [PATCH 2/4] Article url update

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 7dd6024b5..dded41eb5 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -24,7 +24,7 @@ <h2>What is a wireframe? A guide for non-designers</h2>
           helping to plan content placement, navigation, and user flow before diving into visual elements. 
 .
         </p>
-        <a href="">Read more</a>
+        <a href="https://balsamiq.com/learn/articles/what-are-wireframes/">Read more</a>
       </article>
     </main>
     <footer>

From b3b3b04c5447a09c300780766fd99d426c4f4e39 Mon Sep 17 00:00:00 2001
From: Keenan Powell <keenanpowell@gmail.com>
Date: Sat, 10 May 2025 20:47:02 +0200
Subject: [PATCH 3/4] Footer update

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index dded41eb5..e46f86017 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -29,7 +29,7 @@ <h2>What is a wireframe? A guide for non-designers</h2>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Wireframes are your blueprint: a simple, visual guide to quickly lay out your ideas and show how everything fits together.
       </p>
     </footer>
   </body>

From 1c40083a1f3a140836505a9c9f9d59abb545e891 Mon Sep 17 00:00:00 2001
From: Keenan Powell <keenanpowell@gmail.com>
Date: Sat, 10 May 2025 21:48:53 +0200
Subject: [PATCH 4/4] Form html code update

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

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..c016e4472 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -13,7 +13,45 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
+        <fieldset>
+    <legend>Order Your T-Shirt</legend>
+
+    <!-- Customer Name -->
+    <label for="name">Name:</label>
+    <input type="text" id="name" name="name" required pattern="[A-Za-z\s\-']{2,50}" title="Name must be 2–50 characters, letters only">
+    <br><br>
+
+    <!-- Email -->
+    <label for="email">Email:</label>
+    <input type="email" id="email" name="email" required>
+    <br><br>
+
+    <!-- T-shirt Colour -->
+    <label for="colour">Choose a colour:</label>
+    <select id="colour" name="colour" required>
+      <option value="">--Please choose--</option>
+      <option value="black">Black</option>
+      <option value="white">White</option>
+      <option value="red">Red</option>
+    </select>
+    <br><br>
+
+    <!-- Size -->
+    <label for="size">Size:</label>
+    <select id="size" name="size" required>
+      <option value="">--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>
+    <br><br>
+
+    <!-- Submit Button -->
+    <button type="submit">Submit</button>
+  </fieldset><!-- write your html here-->
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->