From f21d9eb1e6d2102d82a1b7ac9729045b41560510 Mon Sep 17 00:00:00 2001
From: Monsur Abdulrahman <monsuromotunde.abdulrahman@gmail.com>
Date: Sat, 11 Apr 2026 15:38:27 +0100
Subject: [PATCH 1/5] What is a REAADME File?

---
 Wireframe/index.html | 14 +++++++-------
 Wireframe/style.css  | 18 ++++++++++++++++--
 2 files changed, 23 insertions(+), 9 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..2658cc13d 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,22 +8,22 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+      <h1 class="center">Wireframe & Git Commits</h1>
+      <p class="center">
+        Practicing commits in Git
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg" alt="" />
+        <h2>README File</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README File explains what the project is, how to use it and why it exists.
         </p>
         <a href="">Read more</a>
       </article>
     </main>
+    
     <footer>
       <p>
         This is the default, provided code and no changes have been made yet.
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..3bd5d7e0c 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -50,7 +50,6 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
   bottom: 0;
   text-align: center;
 }
@@ -68,6 +67,7 @@ main {
   > *:first-child {
     grid-column: span 2;
   }
+
 }
 /* ====== Article Layout ====== 
 Setting the rules for how elements are placed in the article. 
@@ -80,10 +80,24 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
+ 
   > * {
     grid-column: 2/3;
   }
   > img {
-    grid-column: span 3;
+    grid-column: span 2;
+    
   }
+ 
+  
 }
+
+article img {
+  width: 100%;
+  height: 300px;
+  object-fit: fill;
+}
+
+.center {
+  text-align: center;
+}
\ No newline at end of file

From 473598880b9220930595477b2388cb4a59e85e19 Mon Sep 17 00:00:00 2001
From: Monsur Abdulrahman <monsuromotunde.abdulrahman@gmail.com>
Date: Sat, 11 Apr 2026 15:51:07 +0100
Subject: [PATCH 2/5] Purpose of a Wireframe

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 2658cc13d..95664285f 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -23,6 +23,19 @@ <h2>README File</h2>
         <a href="">Read more</a>
       </article>
     </main>
+
+    <div>
+      <article>
+         <img src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg" alt="" />
+        <h2>The purpose of a Wireframe</h2>
+        <p>
+          A wireframe is a basic visual layout of a website or application. It shows structure of the project.
+        </p>
+        <a href="">Read more</a>
+
+        
+      </article>
+    </div>
     
     <footer>
       <p>

From 2c16dc367094ba7d680bc0f0e081dfa9b8693640 Mon Sep 17 00:00:00 2001
From: Monsur Abdulrahman <monsuromotunde.abdulrahman@gmail.com>
Date: Sat, 11 Apr 2026 16:39:30 +0100
Subject: [PATCH 3/5] What is branch in Git?

---
 Wireframe/index.html | 20 ++++++++++++++++----
 Wireframe/style.css  |  9 +++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 95664285f..a44a6ce68 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -13,7 +13,7 @@ <h1 class="center">Wireframe & Git Commits</h1>
         Practicing commits in Git
       </p>
     </header>
-    <main>
+    <div class="container">
       <article>
         <img src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg" alt="" />
         <h2>README File</h2>
@@ -22,9 +22,10 @@ <h2>README File</h2>
         </p>
         <a href="">Read more</a>
       </article>
-    </main>
+    </div>
 
-    <div>
+    <div class="article-row">
+      
       <article>
          <img src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg" alt="" />
         <h2>The purpose of a Wireframe</h2>
@@ -34,12 +35,23 @@ <h2>The purpose of a Wireframe</h2>
         <a href="">Read more</a>
 
         
+      </article>
+
+       <article>
+         <img src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg" alt="" />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A branch is a separate line of development. It allows developers to work on changes without affecting the main codebase.
+        </p>
+        <a href="">Read more</a>
+
+        
       </article>
     </div>
     
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Designed with love by Monsur Abdulrahman - 2026
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 3bd5d7e0c..a400d34c1 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,6 +30,7 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  margin: 50px;
 }
 a {
   padding: var(--space);
@@ -98,6 +99,14 @@ article img {
   object-fit: fill;
 }
 
+.article-row {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-top: 30px;
+  gap: var(--space);
+}
+
 .center {
   text-align: center;
 }
\ No newline at end of file

From e5260c4901c860d68e1e0f8071cd00c7bc0c4ee4 Mon Sep 17 00:00:00 2001
From: Monsur Abdulrahman <monsuromotunde.abdulrahman@gmail.com>
Date: Sat, 11 Apr 2026 16:56:09 +0100
Subject: [PATCH 4/5] Features/Wireframe updated

---
 Wireframe/index.html | 43 +++++++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index a44a6ce68..ce903fa78 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -9,50 +9,53 @@
   <body>
     <header>
       <h1 class="center">Wireframe & Git Commits</h1>
-      <p class="center">
-        Practicing commits in Git
-      </p>
+      <p class="center">Practicing commits in Git</p>
     </header>
     <div class="container">
       <article>
-        <img src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg" alt="" />
+        <img
+          src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg"
+          alt=""
+        />
         <h2>README File</h2>
         <p>
-          A README File explains what the project is, how to use it and why it exists.
+          A README File explains what the project is, how to use it and why it
+          exists.
         </p>
         <a href="">Read more</a>
       </article>
     </div>
 
     <div class="article-row">
-      
       <article>
-         <img src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg" alt="" />
+        <img
+          src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg"
+          alt=""
+        />
         <h2>The purpose of a Wireframe</h2>
         <p>
-          A wireframe is a basic visual layout of a website or application. It shows structure of the project.
+          A wireframe is a basic visual layout of a website or application. It
+          shows structure of the project.
         </p>
         <a href="">Read more</a>
-
-        
       </article>
 
-       <article>
-         <img src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg" alt="" />
+      <article>
+        <img
+          src="https://img.freepik.com/premium-vector/wireframe-icon_933463-14328.jpg"
+          alt=""
+        />
         <h2>What is a branch in Git?</h2>
         <p>
-          A branch is a separate line of development. It allows developers to work on changes without affecting the main codebase.
+          A branch is a separate line of development. It allows developers to
+          work on changes without affecting the main codebase.
         </p>
         <a href="">Read more</a>
-
-        
       </article>
     </div>
-    
+
     <footer>
-      <p>
-        Designed with love by Monsur Abdulrahman - 2026
-      </p>
+      <p>Designed with love by Monsur Abdulrahman - 2026</p>
     </footer>
   </body>
 </html>

From aaa453c88fb634a1de0d2a390f421322a374d4a1 Mon Sep 17 00:00:00 2001
From: Monsur Abdulrahman <monsuromotunde.abdulrahman@gmail.com>
Date: Sat, 11 Apr 2026 17:42:21 +0100
Subject: [PATCH 5/5] What is branch in Git updated

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index ce903fa78..f071c5f19 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -55,7 +55,7 @@ <h2>What is a branch in Git?</h2>
     </div>
 
     <footer>
-      <p>Designed with love by Monsur Abdulrahman - 2026</p>
+      <p>Designed with love by Monsur Abdulrahman 2026</p>
     </footer>
   </body>
 </html>
