From 9b80dc57f7c5533f8b883dcb8e76dbb67d38b00f Mon Sep 17 00:00:00 2001
From: Samual-Hu <h2206506@gmail.com>
Date: Sat, 24 Jan 2026 15:57:36 +0000
Subject: [PATCH 1/3] Changed the header

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..41cb7d18b 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,7 +10,7 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This page talks about wireframe.
       </p>
     </header>
     <main>

From 0a5863d9533db15ad668abeb5ee8233a8693e785 Mon Sep 17 00:00:00 2001
From: Samual-Hu <h2206506@gmail.com>
Date: Wed, 4 Feb 2026 15:49:03 +0000
Subject: [PATCH 2/3] Completed Exercise

---
 Wireframe/index.html | 36 ++++++++++++++++++++++++++----------
 Wireframe/style.css  | 15 +++++++++++++++
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 41cb7d18b..710d73d40 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -13,16 +13,32 @@ <h1>Wireframe</h1>
         This page talks about wireframe.
       </p>
     </header>
-    <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
-      </article>
+<main>
+      
+      <!-- Article 1: Questions 1 -->
+       <article>
+          <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="GitHub README image" />
+          <h2>1. What is the purpose of a README file?</h2>
+          <p>A README file provides essential information about a project, including its purpose, usage instructions, and setup requirements.</p>
+          <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank">Read more</a>
+        </article>
+
+       <!-- Article 2: Question 2 -->
+        <article>
+          <img src="https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg?auto=format,compress" alt="Wireframe example image" />
+          <h2>2. What is the purpose of a wireframe?</h2>
+          <p>A wireframe is a visual guide that represents the skeletal framework of a website or application, used to plan layout and functionality.</p>
+          <a href="https://balsamiq.com/blog/what-are-wireframes/" target="_blank">Read more</a>
+        </article>
+
+        <!-- Article 3: Question 3 -->
+        <article>
+          <img src="https://miro.medium.com/v2/1*K9scAx1Ezd-KJFabaYseCw.jpeg" alt="GitHub Branch explanation image" />
+          <h2>3. What is a branch in Git?</h2>
+          <p>A branch in Git is a separate line of development that allows you to work on different versions of a project simultaneously without affecting the main codebase.</p>
+          <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches" target="_blank">Read more</a>
+        </article>
+
     </main>
     <footer>
       <p>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..684e17c07 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -87,3 +87,18 @@ article {
     grid-column: span 3;
   }
 }
+
+header {
+text-align: center;
+}
+
+footer {
+position: fixed;
+bottom: 0;
+text-align: center;
+font-weight: 500;
+border: solid black 2px;
+width: 100%;
+background-color: white;
+color: black;
+}
\ No newline at end of file

From b7bb5c141ff52c8081ec68cccff292dfa07dec55 Mon Sep 17 00:00:00 2001
From: Samual-Hu <h2206506@gmail.com>
Date: Sat, 7 Feb 2026 10:32:09 +0000
Subject: [PATCH 3/3] fixed issues

---
 Wireframe/index.html |  2 +-
 Wireframe/style.css  | 26 +++++++++++++++++---------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 710d73d40..6548d12cd 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -13,7 +13,7 @@ <h1>Wireframe</h1>
         This page talks about wireframe.
       </p>
     </header>
-<main>
+    <main>
       
       <!-- Article 1: Questions 1 -->
        <article>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 684e17c07..f12b8ff1f 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -88,17 +88,25 @@ article {
   }
 }
 
+article:nth-of-type(2) img,
+article:nth-of-type(3) img {
+  height: 400px;
+  width: 100%;
+  object-fit: cover;
+}
+
 header {
-text-align: center;
+  text-align: center;
 }
 
 footer {
-position: fixed;
-bottom: 0;
-text-align: center;
-font-weight: 500;
-border: solid black 2px;
-width: 100%;
-background-color: white;
-color: black;
+  position: fixed;
+  bottom: 0;
+  text-align: center;
+  font-weight: 500;
+  border: solid black 2px;
+  left: 0;
+  right: 0;
+  background-color: white;
+  color: black;
 }
\ No newline at end of file