From 155397d1a86f5f113877c97b1bd8f0bed9515a65 Mon Sep 17 00:00:00 2001
From: dona-shehu <shehu.donna@gmail.com>
Date: Fri, 29 May 2026 20:30:39 +0100
Subject: [PATCH 1/9] Add Article for Read me,Wireframe,Git Branch.

---
 Wireframe/index.html | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..40cd7732a 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -16,13 +16,38 @@ <h1>Wireframe</h1>
     <main>
       <article>
         <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <h2>Read Me File</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+        A README file explains what a project is and how to use it. It’s usually the first file people read when they open a
+        project, especially in software development.
         </p>
         <a href="">Read more</a>
       </article>
+      <article>
+        <img src="" alt=""/>
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A wireframe is a simple visual layout of a website, app, or software interface. Its purpose is to show the structure and
+          arrangement of content before detailed design and development begin.
+        </p>
+        <a href="">Read More</a>
+      </article>
+      <article>
+        <img src="" alt=""/>
+        <h2>What is a branch in Git?</h2>
+        <p>
+        A branch in Git is a separate line of development that lets you work on changes without affecting the main project.
+        
+        Think of it like creating a copy of your project where you can safely:<br>
+        
+        Add new features<br>
+        Fix bugs<br>
+        Test ideas<br>
+        
+        while the original code remains unchanged.
+        </p>
+        <a href="">Read More</a>
+      </article>
     </main>
     <footer>
       <p>

From dbf7cc4bd8548fb34564fdd816ee1ad36f6d5556 Mon Sep 17 00:00:00 2001
From: dona-shehu <shehu.donna@gmail.com>
Date: Sat, 30 May 2026 11:32:29 +0100
Subject: [PATCH 2/9] Add img and link for each article

---
 Wireframe/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 40cd7732a..440bf755a 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -15,25 +15,25 @@ <h1>Wireframe</h1>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
+        <img src="https://docs.github.com/assets/cb-69181/images/help/repository/headings-toc.png" alt="read.md img"/>
         <h2>Read Me File</h2>
         <p>
         A README file explains what a project is and how to use it. It’s usually the first file people read when they open a
         project, especially in software development.
         </p>
-        <a href="">Read more</a>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
       </article>
       <article>
-        <img src="" alt=""/>
+        <img src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png" alt="wireframe img"/>
         <h2>What is the purpose of a wireframe?</h2>
         <p>
           A wireframe is a simple visual layout of a website, app, or software interface. Its purpose is to show the structure and
           arrangement of content before detailed design and development begin.
         </p>
-        <a href="">Read More</a>
+        <a href="https://balsamiq.com/blog/what-are-wireframes/">Read More</a>
       </article>
       <article>
-        <img src="" alt=""/>
+        <img src="https://nulab.com/static/2b1b3450c0069d0cbd97d70e48c7a81c/5a190/02.png" alt="Git Branch img"/>
         <h2>What is a branch in Git?</h2>
         <p>
         A branch in Git is a separate line of development that lets you work on changes without affecting the main project.
@@ -46,7 +46,7 @@ <h2>What is a branch in Git?</h2>
         
         while the original code remains unchanged.
         </p>
-        <a href="">Read More</a>
+        <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read More</a>
       </article>
     </main>
     <footer>

From b3e66b7123cd0c3107503bda2d381c3679189d24 Mon Sep 17 00:00:00 2001
From: dona-shehu <shehu.donna@gmail.com>
Date: Sat, 30 May 2026 12:22:24 +0100
Subject: [PATCH 3/9] Fixed position of footer

---
 Wireframe/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..946f0a6ca 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -52,6 +52,7 @@ main {
 footer {
   position: fixed;
   bottom: 0;
+  width:100%;
   text-align: center;
 }
 /* ====== Articles Grid Layout ====

From 0242aa31c53b8070d16152b2206241ecbd111596 Mon Sep 17 00:00:00 2001
From: dona-shehu <shehu.donna@gmail.com>
Date: Sat, 30 May 2026 23:57:56 +0100
Subject: [PATCH 4/9] Centered the page title and text beneath

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 440bf755a..2f7f7fff9 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -9,8 +9,8 @@
   <body>
     <header>
       <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+      <p class="header_paragraph">
+        A wireframe is a basic sketch of a webpage that helps plan the layout and organization of content before building the final design.
       </p>
     </header>
     <main>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 946f0a6ca..5f6d06200 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -31,6 +31,14 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+
+h1 {
+  text-align: center;
+}
+.header_paragraph{
+    text-align: center;
+}
+
 a {
   padding: var(--space);
   border: var(--line);

From 50259d1fd0cd95d339ccd57a3ef70dbcbc23157f Mon Sep 17 00:00:00 2001
From: dona-shehu <shehu.donna@gmail.com>
Date: Sun, 31 May 2026 23:41:09 +0100
Subject: [PATCH 5/9] Centered title and text beneath it . Make the title of
 articles 2 and 3 fully aligned horizontally. Prevent the footer and article
 content overlap. Added a list

---
 Wireframe/index.html | 18 +++++++++---------
 Wireframe/style.css  | 21 ++++++++++++++++++---
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 2f7f7fff9..780d2f677 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -25,7 +25,7 @@ <h2>Read Me File</h2>
       </article>
       <article>
         <img src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png" alt="wireframe img"/>
-        <h2>What is the purpose of a wireframe?</h2>
+        <h2>Purpose of a wireframe?</h2>
         <p>
           A wireframe is a simple visual layout of a website, app, or software interface. Its purpose is to show the structure and
           arrangement of content before detailed design and development begin.
@@ -34,24 +34,24 @@ <h2>What is the purpose of a wireframe?</h2>
       </article>
       <article>
         <img src="https://nulab.com/static/2b1b3450c0069d0cbd97d70e48c7a81c/5a190/02.png" alt="Git Branch img"/>
-        <h2>What is a branch in Git?</h2>
+        <h2 class="git_header">What is a branch in Git?</h2>
         <p>
         A branch in Git is a separate line of development that lets you work on changes without affecting the main project.
         
-        Think of it like creating a copy of your project where you can safely:<br>
+        Think of it like creating a copy of your project where you can safely:
+        <ul>
+          <li> Add new features</li>
+          <li>Fix bugs</li>
+          <li>Test ideas</li>
+        </ul>
         
-        Add new features<br>
-        Fix bugs<br>
-        Test ideas<br>
-        
-        while the original code remains unchanged.
         </p>
         <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read More</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        © 2026 CYF. All rights reserved.
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 5f6d06200..fbb13e8af 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,25 +30,35 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  padding-bottom: 60px;
 }
 
 h1 {
   text-align: center;
 }
+
 .header_paragraph{
     text-align: center;
 }
+.git_header{
+      margin-top: 90px;
+      margin-bottom: 90px;
+}
 
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
-img,
-svg {
+img {
   width: 100%;
+  height: 450px;
   object-fit: cover;
+  display: block;
+  
 }
+
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -56,12 +66,16 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+ 
 }
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
   width:100%;
   text-align: center;
+  height: 60px;
+  background-color: rgb(192, 187, 187);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -73,7 +87,7 @@ https://gridbyexample.com/learn/
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--space);
+  gap: 0;
   > *:first-child {
     grid-column: span 2;
   }
@@ -94,5 +108,6 @@ article {
   }
   > img {
     grid-column: span 3;
+    
   }
 }

From 051d836d6d9a996d583d6b05f088663d3230f05c Mon Sep 17 00:00:00 2001
From: dona-shehu <shehu.donna@gmail.com>
Date: Sun, 31 May 2026 23:56:25 +0100
Subject: [PATCH 6/9] improved img alt text

---
 Wireframe/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 780d2f677..f4ba621a3 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -15,7 +15,7 @@ <h1>Wireframe</h1>
     </header>
     <main>
       <article>
-        <img src="https://docs.github.com/assets/cb-69181/images/help/repository/headings-toc.png" alt="read.md img"/>
+        <img src="https://docs.github.com/assets/cb-69181/images/help/repository/headings-toc.png" alt="Read me file GitHub Doc image"/>
         <h2>Read Me File</h2>
         <p>
         A README file explains what a project is and how to use it. It’s usually the first file people read when they open a
@@ -24,7 +24,7 @@ <h2>Read Me File</h2>
         <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
       </article>
       <article>
-        <img src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png" alt="wireframe img"/>
+        <img src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png" alt="Wireframe showing head line,top story,other top stories,news and buzz,featured,add "/>
         <h2>Purpose of a wireframe?</h2>
         <p>
           A wireframe is a simple visual layout of a website, app, or software interface. Its purpose is to show the structure and
@@ -33,7 +33,7 @@ <h2>Purpose of a wireframe?</h2>
         <a href="https://balsamiq.com/blog/what-are-wireframes/">Read More</a>
       </article>
       <article>
-        <img src="https://nulab.com/static/2b1b3450c0069d0cbd97d70e48c7a81c/5a190/02.png" alt="Git Branch img"/>
+        <img src="https://nulab.com/static/2b1b3450c0069d0cbd97d70e48c7a81c/5a190/02.png" alt="Git branch diagram"/>
         <h2 class="git_header">What is a branch in Git?</h2>
         <p>
         A branch in Git is a separate line of development that lets you work on changes without affecting the main project.

From c5c03fdd9a820587cc304604da81f335cb322ce3 Mon Sep 17 00:00:00 2001
From: dona-shehu <shehu.donna@gmail.com>
Date: Sun, 31 May 2026 23:57:21 +0100
Subject: [PATCH 7/9] Add padding to header paragraph

---
 Wireframe/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index fbb13e8af..99d8be2a5 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -39,6 +39,7 @@ h1 {
 
 .header_paragraph{
     text-align: center;
+    padding: 30px;
 }
 .git_header{
       margin-top: 90px;

From 3441f195916cbc030053390dd37b2dd91c78fc5d Mon Sep 17 00:00:00 2001
From: dona-shehu <shehu.donna@gmail.com>
Date: Mon, 1 Jun 2026 00:07:15 +0100
Subject: [PATCH 8/9] Changed the footer background.

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

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 99d8be2a5..9ae72f722 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -76,7 +76,7 @@ footer {
   width:100%;
   text-align: center;
   height: 60px;
-  background-color: rgb(192, 187, 187);
+  background-color: rgb(255, 255, 255);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.

From c6988db110c5d9fecd26ee671fd9f0bc5a90f873 Mon Sep 17 00:00:00 2001
From: dona-shehu <shehu.donna@gmail.com>
Date: Mon, 1 Jun 2026 21:51:12 +0100
Subject: [PATCH 9/9] removed the <p>   tag error

---
 Wireframe/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index f4ba621a3..0279689d7 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <header>
+   <header>
       <h1>Wireframe</h1>
       <p class="header_paragraph">
         A wireframe is a basic sketch of a webpage that helps plan the layout and organization of content before building the final design.
@@ -37,15 +37,15 @@ <h2>Purpose of a wireframe?</h2>
         <h2 class="git_header">What is a branch in Git?</h2>
         <p>
         A branch in Git is a separate line of development that lets you work on changes without affecting the main project.
-        
         Think of it like creating a copy of your project where you can safely:
+        </p>
+
         <ul>
           <li> Add new features</li>
           <li>Fix bugs</li>
           <li>Test ideas</li>
         </ul>
         
-        </p>
         <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read More</a>
       </article>
     </main>