West Midlands | May 2026 | Muhammad-Burhan Mustafa | Sprint 2 | Wireframe

put img's in folder and updated broken links in a elements
changed the font to aria

Author: burhan-mustafa

Wireframe/README.html

@@ -12,7 +12,7 @@ <h1>README Files</h1>
     </header>
     <main>
       <article>
-        <img src="readme.png" alt="">
+        <img src="./images/readme.png" alt="">
         <h2>What is the purpose of a README file? </h2>
         <p>
           A README file is used to give information so a user can ascertain key details of a program such as its function, how it works, how to set it up and general updates.

Wireframe/branch.html

@@ -12,7 +12,7 @@ <h1>Git Branches</h1>
     </header>
     <main>
       <article>
-        <img src="Branch.png" alt="">
+        <img src="./images/branch.png" alt="">
         <h2>What is a branch in Git? </h2>
         <p>
           A branch in Git is a seperate workspace used to experiment or make changes without affecting the main project.

Wireframe/Branch.png Wireframe/images/branch.pngWireframe/Branch.png renamed to Wireframe/images/branch.png

@@ -15,7 +15,7 @@ <h1>Web Development</h1>
     </header>
     <main>
       <article>
-        <img src="Branch.png" alt="">
+        <img src="./images/branch.png" alt="">
         <h2>Git Branches </h2>
         <p>
           In this article we will cover the purpose of a branch in git
@@ -24,23 +24,24 @@ <h2>Git Branches </h2>
         </article>
 
       <article>
-        <img src="wireframes.png" alt="">
+        <img src="./images/wireframes.png" alt="">
         <h2>Wireframes</h2>
         <p>This article will cover the importance of a Wireframe</p>
         <a rel="html" href="wireframe.html">Read more</a>
       </article> 
 
       <article>
-        <img src ="readme.png" alt="">
+        <img src ="./images/readme.png" alt="">
        <h2>README files</h2>
        <p>We shall look at the purpose of a README file</p>
        <a rel="html" href="README.html">Read more</a>
       </article>
     </main>
+
     <footer>
       <hr>
       <p>
-        Contact us on
+        &copy; 2026: Contact us on
         telephone: 07489763234 or
         email: usersupport@hotmail.com
       </p>

Wireframe/readme.png Wireframe/images/readme.pngWireframe/readme.png renamed to Wireframe/images/readme.png

@@ -22,7 +22,7 @@ As well as useful links to learn more */
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 "Permanent Marker", bold;
+  --font: 100%/1.5 "Arial", bold;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
   --container: 1280px;

Wireframe/wireframes.png Wireframe/images/wireframes.pngWireframe/wireframes.png renamed to Wireframe/images/wireframes.png

@@ -12,7 +12,7 @@ <h1>Wireframes</h1>
     </header>
     <main>
       <article>
-        <img src="wireframes.png" alt="">
+        <img src="./images/wireframes.png" alt="">
         <h2>What is the purpose of a Wireframe?</h2>
         <p>
           A wireframe is used as a structural blueprint that allows a developer to envision how a project will look.