From c00430738829a215801e7a69b485d17db9387860 Mon Sep 17 00:00:00 2001
From: Divine <divinemankrado1@hotmail.com>
Date: Mon, 26 Jan 2026 14:05:58 +0000
Subject: [PATCH 01/10] I changed the header for the body

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..e636f0563 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 is a webpage developed by Divine.
       </p>
     </header>
     <main>

From 6529e7109edee6e62cfa0a3d8c46b0c89bf88f73 Mon Sep 17 00:00:00 2001
From: Divine <divinemankrado1@hotmail.com>
Date: Mon, 26 Jan 2026 14:29:20 +0000
Subject: [PATCH 02/10] Finished the content for article 2 and 3

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index e636f0563..16d0a9ae8 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -14,14 +14,23 @@ <h1>Wireframe</h1>
       </p>
     </header>
     <main>
-      <article>
+      <article class = "Article-One">
+        <h2>Article One: The Purpose of a README file</h2>
         <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          It displays an overview to the repository and provides instructions on how to use.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeareadme.com/">Read more</a>
+      </article>
+      <article class = "Article-Two">
+        <h2>Article Two: The Purpose of a Wireframe</h2>
+        <p>The wireframe gives the structural layout of a page - it defines where elements (buttons, images, etc.) go</p>
+        <a> href = "https://balsamiq.com/blog/what-are-wireframes/">Read more</a>
+      </article>
+      <article class = "Article-Three">
+        <h2>Article Three: What are branches in Git?</h2>
+        <p>A branch is like a separate workspace where you can make changes and try new ideas without affecting the main project.</p>
+        <a href = "https://www.w3schools.com/git/git_branch.asp"> Read More</a>
       </article>
     </main>
     <footer>

From c51d6cc984f0f5fcce989df424a24e362da586ee Mon Sep 17 00:00:00 2001
From: Divine <divinemankrado1@hotmail.com>
Date: Mon, 26 Jan 2026 14:30:46 +0000
Subject: [PATCH 03/10] Added a hash instead of a link in html

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 16d0a9ae8..e30530720 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -20,17 +20,17 @@ <h2>Article One: The Purpose of a README file</h2>
         <p>
           It displays an overview to the repository and provides instructions on how to use.
         </p>
-        <a href="https://www.makeareadme.com/">Read more</a>
+        <a href="#">Read more</a>
       </article>
       <article class = "Article-Two">
         <h2>Article Two: The Purpose of a Wireframe</h2>
         <p>The wireframe gives the structural layout of a page - it defines where elements (buttons, images, etc.) go</p>
-        <a> href = "https://balsamiq.com/blog/what-are-wireframes/">Read more</a>
+        <a href="#">Read more</a>
       </article>
       <article class = "Article-Three">
         <h2>Article Three: What are branches in Git?</h2>
         <p>A branch is like a separate workspace where you can make changes and try new ideas without affecting the main project.</p>
-        <a href = "https://www.w3schools.com/git/git_branch.asp"> Read More</a>
+        <a href = "#"> Read More</a>
       </article>
     </main>
     <footer>

From 91de83ba6e08e4e911327a40ceb345d9024e554e Mon Sep 17 00:00:00 2001
From: Divine <divinemankrado1@hotmail.com>
Date: Mon, 26 Jan 2026 14:45:03 +0000
Subject: [PATCH 04/10] I added images to the background.

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

diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..819792e4d 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -87,3 +87,10 @@ article {
     grid-column: span 3;
   }
 }
+.article-one {
+  background-image: url("https://unsplash.com/photos/turned-on-macbook-pro-wit-programming-codes-display-f77Bh3inUpE");
+  background-image: url("https://unsplash.com/photos/black-flat-screen-computer-monitor-oXlXu2qukGE");
+}
+.article-three {
+  background-image: url("https://unsplash.com/photos/turned-on-monitor-displaying-programming-language-u2Ru4QBXA5Q");
+}

From cd44d17cc2f7363097d3eafdebd293caa1b6d2f8 Mon Sep 17 00:00:00 2001
From: Divine <divinemankrado1@hotmail.com>
Date: Mon, 26 Jan 2026 14:48:20 +0000
Subject: [PATCH 05/10] Corrected CSS

---
 Wireframe/index.html | 1 -
 Wireframe/style.css  | 6 ++++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index e30530720..193da0eef 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -16,7 +16,6 @@ <h1>Wireframe</h1>
     <main>
       <article class = "Article-One">
         <h2>Article One: The Purpose of a README file</h2>
-        <img src="placeholder.svg" alt="" />
         <p>
           It displays an overview to the repository and provides instructions on how to use.
         </p>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 819792e4d..292a6a313 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -87,10 +87,12 @@ article {
     grid-column: span 3;
   }
 }
-.article-one {
+.Article-One{
   background-image: url("https://unsplash.com/photos/turned-on-macbook-pro-wit-programming-codes-display-f77Bh3inUpE");
+}
+.Article-Two{
   background-image: url("https://unsplash.com/photos/black-flat-screen-computer-monitor-oXlXu2qukGE");
 }
-.article-three {
+.Article-Three {
   background-image: url("https://unsplash.com/photos/turned-on-monitor-displaying-programming-language-u2Ru4QBXA5Q");
 }

From 23b9781f70a54ef6ba0a067dd0e0e60e1d468ecf Mon Sep 17 00:00:00 2001
From: Divine <divinemankrado1@hotmail.com>
Date: Mon, 26 Jan 2026 14:50:30 +0000
Subject: [PATCH 06/10] Corrected image address

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 193da0eef..848d0314b 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -34,7 +34,7 @@ <h2>Article Three: What are branches in Git?</h2>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This is the changed code
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 292a6a313..a3ab003e0 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -88,11 +88,11 @@ article {
   }
 }
 .Article-One{
-  background-image: url("https://unsplash.com/photos/turned-on-macbook-pro-wit-programming-codes-display-f77Bh3inUpE");
+  background-image: url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
 }
 .Article-Two{
-  background-image: url("https://unsplash.com/photos/black-flat-screen-computer-monitor-oXlXu2qukGE");
+  background-image: url("https://images.unsplash.com/photo-1607706189992-eae578626c86?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
 }
 .Article-Three {
-  background-image: url("https://unsplash.com/photos/turned-on-monitor-displaying-programming-language-u2Ru4QBXA5Q");
+  background-image: url("https://images.unsplash.com/photo-1518773553398-650c184e0bb3?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
 }

From fdfaf6da17fe304b937e7b28f6bcb07030b3055f Mon Sep 17 00:00:00 2001
From: Divine <divinemankrado1@hotmail.com>
Date: Mon, 26 Jan 2026 14:51:31 +0000
Subject: [PATCH 07/10] Changed text to white

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

diff --git a/Wireframe/style.css b/Wireframe/style.css
index a3ab003e0..d8a579e1c 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -80,6 +80,7 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
+  text-color: white;
   > * {
     grid-column: 2/3;
   }

From 04fa1ee81fa6046689d03dcd7b4dde251fc079d3 Mon Sep 17 00:00:00 2001
From: Divine <divinemankrado1@hotmail.com>
Date: Mon, 26 Jan 2026 14:53:09 +0000
Subject: [PATCH 08/10] Changed text to white

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

diff --git a/Wireframe/style.css b/Wireframe/style.css
index d8a579e1c..2c8478d45 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -18,7 +18,7 @@ As well as useful links to learn more */
 ====== Design Palette ====== */
 :root {
   --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --ink: color-mix(in oklab, var(--color) 5%, rgb(253, 250, 250));
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
@@ -80,7 +80,6 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
-  text-color: white;
   > * {
     grid-column: 2/3;
   }

From 038d24e9bbe168b48393f3f3097e3d0e113f1f5f Mon Sep 17 00:00:00 2001
From: Divine <divinemankrado1@hotmail.com>
Date: Mon, 26 Jan 2026 14:56:23 +0000
Subject: [PATCH 09/10] Text change to white

---
 Wireframe/style.css | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 2c8478d45..803d47acb 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -18,12 +18,13 @@ As well as useful links to learn more */
 ====== Design Palette ====== */
 :root {
   --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, rgb(253, 250, 250));
+  --ink: color-mix(in oklab, var(--color) 5%, black);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
   --container: 1280px;
 }
+
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
@@ -31,16 +32,19 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -49,11 +53,13 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
 footer {
   position: fixed;
   bottom: 0;
   text-align: center;
 }
+
 /* ====== 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
@@ -65,10 +71,12 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
-  > *:first-child {
+
+  >*:first-child {
     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.
@@ -80,19 +88,27 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
-  > * {
+  color: white;
+  background-size: cover;
+  background-position: center;
+
+  >* {
     grid-column: 2/3;
   }
-  > img {
+
+  >img {
     grid-column: span 3;
   }
 }
-.Article-One{
+
+.Article-One {
   background-image: url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
 }
-.Article-Two{
+
+.Article-Two {
   background-image: url("https://images.unsplash.com/photo-1607706189992-eae578626c86?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
 }
+
 .Article-Three {
   background-image: url("https://images.unsplash.com/photo-1518773553398-650c184e0bb3?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
-}
+}
\ No newline at end of file

From baef6b364e993bf1c9f7be51322447fa453d3cd4 Mon Sep 17 00:00:00 2001
From: Divine <divinemankrado1@hotmail.com>
Date: Mon, 26 Jan 2026 15:01:45 +0000
Subject: [PATCH 10/10] Fixed background

---
 Wireframe/style.css | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 803d47acb..c56f53288 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -91,16 +91,26 @@ article {
   color: white;
   background-size: cover;
   background-position: center;
+  position: relative;
+}
 
-  >* {
-    grid-column: 2/3;
-  }
+article::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
 
-  >img {
-    grid-column: span 3;
-  }
+article > * {
+  grid-column: 2 / 3;
+  position: relative;
 }
 
+article > img {
+  grid-column: span 3;
+}
+
+
 .Article-One {
   background-image: url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
 }