From 32ddece48e50d56896da65a4e526352edee40abe Mon Sep 17 00:00:00 2001
From: Oussama Mouggal <oussama.mouggal@gmail.com>
Date: Mon, 2 Feb 2026 12:22:15 +0000
Subject: [PATCH] Completed wireframe task

---
 Wireframe/index.html | 34 +++++++++++++++++++++++++++-------
 Wireframe/style.css  |  5 +++++
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..5b23baf52 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.
+        This is an article explaining the wireframe structure of a webpage.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="https://markdown.land/wp-content/uploads/2022/01/VSCode-markdown-preview-1024x470.png" alt="Readme file picture" />
+        <h2>What is the purpose of a Readme file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A Readme file serves as a guide for users and developers, providing
+          essential information about a project, including its purpose,
+          installation instructions, usage guidelines, and contribution
+          protocols.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.reddit.com/r/cs50/comments/x8965j/what_is_the_purpose_of_readme/">Read more</a>
+      </article>
+      <article>
+        <img src="https://images.edrawsoft.com/articles/wireframe/wireframe-1.jpg" alt="Wireframe picture" />
+        <h2>What is the purpose of a wireframe?
+        </h2>
+        <p>
+          The purpose of a wireframe is to provide a visual guide that represents the skeletal framework of a website or application, helping to plan layout and functionality.
+        </p>
+        <a href="https://balsamiq.com/blog/what-are-wireframes/">Read more</a>
+      </article>
+      <article>
+        <img src="https://git-scm.com/images/logos/downloads/Git-Logo-2Color.png" alt="Git logo" />
+        <h2>What is a branch in Git?
+        </h2>
+        <p>
+          A branch in Git is a separate line of development that allows multiple people to work on different features or fixes simultaneously without affecting the main codebase.
+        </p>
+        <a href="https://medium.com/@jacoblogan98/understanding-git-branching-5d01f3dda541">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Codeyourfuture Jan26 - Wireframe assignment
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..0761837b3 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -51,7 +51,11 @@ main {
 }
 footer {
   position: fixed;
+  left: 0;
   bottom: 0;
+  width: 100%;
+  background-color: #4b3a3a;
+  color: white;
   text-align: center;
 }
 /* ====== Articles Grid Layout ====
@@ -87,3 +91,4 @@ article {
     grid-column: span 3;
   }
 }
+header {text-align: center;}
\ No newline at end of file