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:amaechina.tobias@gmail.com">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;
  }
-}
+}