CodeYourFuture · burhan-mustafa · May 31, 2026 · May 31, 2026 · May 31, 2026 · May 31, 2026
diff --git a/Wireframe/README.html b/Wireframe/README.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css">
+    <title>README Files</title>
+    </head>
+    <body>
+        <header>
+      <h1>README Files</h1>
+    </header>
+    <main>
+      <article>
+        <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.
+        </p>
+        <a rel="html" href="index.html">Back</a>
+        </article>
+        </main>
+    </body>
+</html>
diff --git a/Wireframe/branch.html b/Wireframe/branch.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css">
+    <title>Git Branches</title>
+    </head>
+    <body>
+        <header>
+      <h1>Git Branches</h1>
+    </header>
+    <main>
+      <article>
+        <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.
+        </p>
+        <a rel="html" href="index.html">Back</a>
+        </article>
+        </main>
+    </body>
+</html>
diff --git a/Wireframe/images/branch.png b/Wireframe/images/branch.png
diff --git a/Wireframe/images/readme.png b/Wireframe/images/readme.png
diff --git a/Wireframe/images/wireframes.png b/Wireframe/images/wireframes.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -4,29 +4,46 @@
     <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="style.css"/>
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Web Development</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A series of articles to help you on your journey of web development
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="./images/branch.png" alt="">
+        <h2>Git Branches </h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          In this article we will cover the purpose of a branch in git
         </p>
-        <a href="">Read more</a>
+        <a rel="html" href="branch.html">Read more</a>
+        </article>
+
+      <article>
+        <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 ="./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>
-        This is the default, provided code and no changes have been made yet.
+        &copy; 2026: Contact us on
+        telephone: 07489763234 or
+        email: usersupport@hotmail.com
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -16,25 +16,39 @@ As well as useful links to learn more */
  https://web.dev/articles/min-max-clamp
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
+
+@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
+
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 system-ui;
+  --font: 100%/1.5 "Permanent Marker", bold;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
   --container: 1280px;
 }
+
+h1,
+header p
+{
+  text-align: center;
+}
+
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
-body {
+body{
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  text-transform: uppercase;
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  color: var(--color)
+
 }
 img,
 svg {
@@ -49,11 +63,13 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
-footer {
-  position: fixed;
-  bottom: 0;
+footer,
+footer hr {
+  margin-top: auto;
   text-align: center;
+  min-width: span 2 ;
 }
+
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
 Inspect this in Devtools and click the "grid" button in the Elements view
@@ -65,7 +81,7 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
-  > *:first-child {
+  > *:nth-child(1) {
     grid-column: span 2;
   }
 }
@@ -87,3 +103,11 @@ article {
     grid-column: span 3;
   }
 }
+
+article h2{
+  margin-bottom:0px;
+}
+
+article p {
+  margin-top:4px;
+}
diff --git a/Wireframe/wireframe.html b/Wireframe/wireframe.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css">
+    <title>Wireframes</title>
+    </head>
+    <body>
+        <header>
+      <h1>Wireframes</h1>
+    </header>
+    <main>
+      <article>
+        <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.
+        </p>
+        <a rel="html" href="index.html">Back</a>
+        </article>
+        </main>
+    </body>
+</html>