From 1d878de3cd153e3cbeb4bb9b11b9f40af083bdbc Mon Sep 17 00:00:00 2001
From: Eddie050 <Shannond050@outlook.com>
Date: Sun, 1 Feb 2026 19:23:54 +0200
Subject: [PATCH 1/3] full layout html and css application

---
 Wireframe/index.html | 36 ++++++++++++++++++++++++++++--------
 Wireframe/style.css  |  8 +++++++-
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..bbe2345e6 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,23 +10,43 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A wireframe is a basic ,two-dimensional visual representation of a webpage, app interface or product layout.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+      
+         <img src="https://www.makeareadme.com/images/open-graph-logo.png?v=20181203" alt="a README file example because no one can read your mind" />
+        <h2>What is the purpose of a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+        <p>
+         Its purpose is to provide essential information about the project's purpose, functionality, installation instructions,
+          and usage guidelines, making it easier for users and developers to understand and work with the project.
+        </p>
+        <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://view.subpage.app/app/company/C532b8873cc5442e2b1f2265b77a7d7dc/domain/MTiT0jFlGh/page/Ma9aQb2DGh/article/Maffd7e05c5e94448c5048e0d714b87ff1692177804516/file/Me2a48f994fcf54fe72b4d16884e2d7a51692180126734.webp" alt="a mock up webpage in a wireframe view" />
+        <h2>What is the purpose of a Wireframe?</h2>
+        <p>
+          The primary purpose of a wireframe is to establish the basic structure and functionality of a website, app, or other
+          digital product before diving into visual design and content. It serves as a blueprint or skeletal framework,
+          visualizing how elements will be arranged and how users will navigate the interface.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.geeksforgeeks.org/purpose-of-wireframing-in-web-design-process/">Read more</a>
+      </article>
+      <article>
+        <img src="https://miro.medium.com/v2/resize:fit:650/1*K9scAx1Ezd-KJFabaYseCw.jpeg" alt="a branch in GIT connecting the dots showing main branch and feature updates " />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main
+          project. Think of it as a "parallel universe" for your code.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+      <p>Wire frame layout Design by Shannon Davids
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..b691ed0f9 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -39,7 +39,7 @@ a {
 img,
 svg {
   width: 100%;
-  object-fit: cover;
+  height:400px;
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
@@ -53,6 +53,9 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  background-color: bisque;
+  width:100%;
+  font-weight: bold;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -87,3 +90,6 @@ article {
     grid-column: span 3;
   }
 }
+header {
+  text-align: center;
+}
\ No newline at end of file

From d9eeb838d175cab25d02e1508ee1ce3958b7a11a Mon Sep 17 00:00:00 2001
From: Eddie050 <Shannond050@outlook.com>
Date: Tue, 3 Feb 2026 19:05:16 +0200
Subject: [PATCH 2/3] error fix

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index bbe2345e6..b4d56a73d 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -18,7 +18,6 @@ <h1>Wireframe</h1>
       
          <img src="https://www.makeareadme.com/images/open-graph-logo.png?v=20181203" alt="a README file example because no one can read your mind" />
         <h2>What is the purpose of a README file?</h2>
-        <p>
         <p>
          Its purpose is to provide essential information about the project's purpose, functionality, installation instructions,
           and usage guidelines, making it easier for users and developers to understand and work with the project.

From d294893f45fbf4c7819010bdfaef548bae256f33 Mon Sep 17 00:00:00 2001
From: Eddie050 <Shannond050@outlook.com>
Date: Thu, 5 Feb 2026 18:28:50 +0200
Subject: [PATCH 3/3] typo fix

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

diff --git a/Wireframe/index.html b/Wireframe/index.html
index b4d56a73d..24c577933 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,7 +10,7 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        A wireframe is a basic ,two-dimensional visual representation of a webpage, app interface or product layout.
+        A wireframe is a basic, two-dimensional visual representation of a webpage, app interface or product layout.
       </p>
     </header>
     <main>
@@ -45,7 +45,7 @@ <h2>What is a branch in Git?</h2>
       </article>
     </main>
     <footer>
-      <p>Wire frame layout Design by Shannon Davids
+      <p>Wireframe layout Design by Shannon Davids
       </p>
     </footer>
   </body>