CodeYourFuture · Tobias-Amaechina · May 31, 2026 · May 31, 2026 · May 31, 2026 · May 31, 2026
diff --git a/Wireframe/Readme.png b/Wireframe/Readme.png
diff --git a/Wireframe/Wireframe1.png b/Wireframe/Wireframe1.png
diff --git a/Wireframe/git_branch.png b/Wireframe/git_branch.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -4,30 +4,53 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Article about,Wireframe, Readme file and git branch</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        An Article about the purpose of a readme file ,and a wireframe,
+        and also on what a Git branch is and how to use it.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="Readme.png" alt="A readme diagram"/>
+        <h2>What is the Purpose of a Readme File?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          The purpose of a readme file is to provide,
+           information about a project.
         </p>
-        <a href="">Read more</a>
+        <a href="https://en.wikipedia.org/wiki/README">Read more</a>
+      </article>
+      <article>
+        <img src="Wireframe1.png" alt="A Wireframe diagram"/>
+        <h2>What is the Purpose of a Wireframe?</h2>
+        <p>
+         <strong>In short</strong>, a wireframe’s purpose is to visualize the skeleton of a digital product,
+          helping teams plan, test, and communicate ideas efficiently before moving to detailed design.
+        </p>
+        <a href="https://www.productplan.com/glossary/wireframe">Read more</a>
+      </article>
+      <article>
+        <img src="git_branch.png" alt="A Git branch diagram"/>
+        <h2>What Is a Git Branch?</h2>
+        <p>
+            In Git, a <em>branch</em> 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?remote=github">Read more</a>
       </article>
     </main>
     <footer>
+
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Written by Tobias Amaechina.
       </p>
+      <address>
+        <a href="mailto:[email protected]">Contact Tobias</a>
+      </address>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css → Wireframe/styles.css b/Wireframe/style.css → Wireframe/styles.css
@@ -31,11 +31,27 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+
 a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+   padding: var(--space);
+
+   border: var(--line);
+
+   border-radius: 5px;
+
+   text-decoration: none;
+
+   color: var(--ink);
+
+   background: color-mix(in oklab, var(--paper) 70%, white);
+   max-height:2rem;
+   max-width:4.52rem;
+  }
+
+a:hover {
+  background: color-mix(in oklab, var(--paper) 50%, white);
 }
+
 img,
 svg {
   width: 100%;
@@ -49,10 +65,25 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
-footer {
-  position: fixed;
-  bottom: 0;
+footer p  {
+  font-size: 0.875rem;
+  color: #666;
   text-align: center;
+  margin-bottom: 2rem;
+}
+footer address  {
+  font-size: 0.875rem;
+  color: #666;
+  text-align: center;
+  margin-bottom: 2rem;
+}
+header h1  {
+  text-align: center;
+  margin-bottom: var(--space);
+}
+header p  {
+  text-align: center;
+  margin-bottom: var(--line);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -86,4 +117,4 @@ article {
   > img {
     grid-column: span 3;
   }
-}
+}