From 1e83f33f2c66b9c274bea0061b758623ee209db0 Mon Sep 17 00:00:00 2001
From: Abayie <jonathanboahene@gmail.com>
Date: Fri, 9 May 2025 01:22:05 +0100
Subject: [PATCH 1/5] added two new articles

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..5c91c6458 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -23,6 +23,24 @@ <h2>Title</h2>
         </p>
         <a href="">Read more</a>
       </article>
+      <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>
+      <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>
     <footer>
       <p>

From 2242ee54cbe3d9213af69e1d57ca81cbedbd3589 Mon Sep 17 00:00:00 2001
From: Abayie <jonathanboahene@gmail.com>
Date: Sat, 10 May 2025 08:51:40 +0100
Subject: [PATCH 2/5] added definition for terms

---
 Wireframe/index.html | 22 +++++++++++-----------
 Wireframe/style.css  |  7 ++++++-
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 5c91c6458..530493c5d 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,41 +10,41 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A simple way to explain how a website will look and work before adding all the fancy details.
       </p>
     </header>
     <main>
       <article>
         <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <h2>README</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          README is a guidebook for a project. Imagine you get a new toy, and it comes with a small booklet that explains what the toy is, how to use it, and how to take care of it.
+          A README file does the same for a project, it tells people what the project is about, how to use it, and any important details they need to know.
         </p>
         <a href="">Read more</a>
       </article>
       <article>
         <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <h2>Wireframe</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A Wireframe is like a blueprint for a website. Imagine you're drawing a plan for a house before building it. You sketch where the rooms, doors, and windows will go, but you don't add colors,
+          furniture, or decorations yet. <br/> A <em>Wireframe</em> does the same for a website, it shows where pictures, buttons, and texts will go, all the while doesn't worry about making it look pretty yet. 
         </p>
         <a href="">Read more</a>
       </article>
       <article>
         <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <h2>Git</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          Git is like a magic notebook for your project. It's similar to when you're drawing a picture, and every time you make a change, the notebook saves a copy of your work. If you make a mistake, you can go back to an earlier
+          version and fix it. <br/> <em>Git</em> does the same for your code, it keeps track of all the changes you make so you can go back if something goes wrong.
         </p>
         <a href="">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        © 2025 Abayie
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..391fb2398 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -50,9 +50,14 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
+  /* position: fixed; */
   bottom: 0;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  padding: 5px;
+  background-color: #f2f4f7;
+  color: #1b1919;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.

From b033e62a5f3d9faa33773eaabf64f6ccf339824b Mon Sep 17 00:00:00 2001
From: Abayie <jonathanboahene@gmail.com>
Date: Fri, 23 May 2025 07:15:27 +0100
Subject: [PATCH 3/5] added links and fix footer and centre header

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 530493c5d..1cdac774a 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -21,7 +21,7 @@ <h2>README</h2>
           README is a guidebook for a project. Imagine you get a new toy, and it comes with a small booklet that explains what the toy is, how to use it, and how to take care of it.
           A README file does the same for a project, it tells people what the project is about, how to use it, and any important details they need to know.
         </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="placeholder.svg" alt="" />
@@ -30,7 +30,7 @@ <h2>Wireframe</h2>
           A Wireframe is like a blueprint for a website. Imagine you're drawing a plan for a house before building it. You sketch where the rooms, doors, and windows will go, but you don't add colors,
           furniture, or decorations yet. <br/> A <em>Wireframe</em> does the same for a website, it shows where pictures, buttons, and texts will go, all the while doesn't worry about making it look pretty yet. 
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.coursera.org/gb/articles/wireframe">Read more</a>
       </article>
       <article>
         <img src="placeholder.svg" alt="" />
@@ -39,7 +39,7 @@ <h2>Git</h2>
           Git is like a magic notebook for your project. It's similar to when you're drawing a picture, and every time you make a change, the notebook saves a copy of your work. If you make a mistake, you can go back to an earlier
           version and fix it. <br/> <em>Git</em> does the same for your code, it keeps track of all the changes you make so you can go back if something goes wrong.
         </p>
-        <a href="">Read more</a>
+        <a href="https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F">Read more</a>
       </article>
     </main>
     <footer>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 391fb2398..4afd88fa6 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -49,16 +49,13 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
 footer {
-  /* position: fixed; */
+  position: fixed;
   bottom: 0;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  padding: 5px;
-  background-color: #f2f4f7;
-  color: #1b1919;
 }
+
+
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
 Inspect this in Devtools and click the "grid" button in the Elements view
@@ -66,6 +63,8 @@ Play with the options that come up.
 https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
+
+
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -74,11 +73,13 @@ main {
     grid-column: span 2;
   }
 }
+
 /* ====== Article Layout ====== 
 Setting the rules for how elements are placed in the article. 
 Now laying out just the INSIDE of the repeated card/article design.
 Keeping things orderly and separate is the key to good, simple CSS.
 */
+
 article {
   border: var(--line);
   padding-bottom: var(--space);
@@ -92,3 +93,7 @@ article {
     grid-column: span 3;
   }
 }
+
+header {
+  text-align: center;
+}

From 9911904098b57d67a072d60273ebc0c2ee767cf3 Mon Sep 17 00:00:00 2001
From: Jonathan Boahene <jonathanboahene@gmail.com>
Date: Sat, 4 Oct 2025 14:06:29 +0100
Subject: [PATCH 4/5] included css style with a sticky footer with flexbox, so
 text doesn't overlap with footer

---
 Wireframe/style.css | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 4afd88fa6..f271648f2 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -26,7 +26,15 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+html, body {
+  height: 100%;
+  margin: 0;
+ 
+}
 body {
+  display: flex;
+  flex-direction: column;
+  min-height:100vh;
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
@@ -46,13 +54,18 @@ Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
 main {
+  flex: 1;
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 
 footer {
-  position: fixed;
-  bottom: 0;
+  background: #f5f5f5;
+  text-align: center;
+  padding: 10px;
+  border-top: 1px solid #ccc;
+  /*position: fixed;
+  bottom: 0;*/
 }
 
 

From 7e90ed865b8436eab809df8bbdd7f20b6872fcd8 Mon Sep 17 00:00:00 2001
From: Jonathan Boahene <jonathanboahene@gmail.com>
Date: Sat, 4 Oct 2025 16:45:26 +0100
Subject: [PATCH 5/5] fixed viewport to show

---
 Wireframe/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index f271648f2..f90065220 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -64,8 +64,8 @@ footer {
   text-align: center;
   padding: 10px;
   border-top: 1px solid #ccc;
-  /*position: fixed;
-  bottom: 0;*/
+  position: fixed;
+  bottom: 0;
 }