CodeYourFuture · Christelle-b · May 23, 2026 · May 23, 2026 · May 23, 2026 · May 23, 2026
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,30 +3,55 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="An introduction to wireframe, Git branches, and README files."/>
     <title>Wireframe</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Wireframe, Git Branches and README File</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This short article talks about wireframe, Git branches and README File
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="wireframePicture.avif" alt="wireframe example layout" />
+        <h2>Wireframe</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A Wireframe is a basic, two-dimensional visual representation of a web page, app interface, or product layout. You can think of it as a low-fidelity, functional sketch.
+          Wireframes typically depict only functionality, not the true style and visual elements of the final product.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.productplan.com/glossary/wireframe"
+        target="_blank">
+        Wireframe</a>
+      </article>
+
+      <article>
+        <img src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*K9scAx1Ezd-KJFabaYseCw.jpeg" alt="git branching diagram" />
+        <h2>Git Branches</h2>
+        <p>
+          A Git branch is like a separate work space that allows developers to make changes without affecting the main repository.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp"
+        target="_blank">
+        Git Branch</a>
+      </article>
+
+      <article>
+        <img src="https://media.licdn.com/dms/image/v2/D5612AQF_jGTodjhpiQ/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1690540082500?e=2147483647&v=beta&t=1pDD2reY31U4rxxGXjDcd-IFNknrqQtE42SJFJb65to" alt="README File illustration" />
+        <h2>README File</h2>
+        <p>
+          Developers use README files to explain their projects to others. It communicates important information about your project.
+        </p>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
+        target="_blank">
+        README File</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        End of Article
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -53,6 +53,9 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  width: 100%;
+  background-color: #0F172A;
+  color: #F8FAFC;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -87,3 +90,24 @@ article {
     grid-column: span 3;
   }
 }
+article:first-child img {
+  height: 100%;
+}
+
+article:not(:first-child) img {
+  height: 400px;
+}
+article img {
+  width: 100%;
+  height: 250px;
+  object-fit: cover;
+  display: block;
+}
+header {
+  text-align: center;
+}
+h2{
+  text-align: center;
+}
+
+
diff --git a/Wireframe/wireframePicture.avif b/Wireframe/wireframePicture.avif