CodeYourFuture
diff --git a/‎Wireframe/index.html‎
Lines changed: 26 additions & 16 deletions b/‎Wireframe/index.html‎
Lines changed: 26 additions & 16 deletions
@@ -3,31 +3,41 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Readme, branch and wireframe</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+  
+    <h1>Readme, branch and wireframe</h1>
+      <p>Brief definitions</p>
     </header>
     <main>
+      <!-- Featured Article -->
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
+          <img src="https://docs.github.com/assets/cb-2058/mw-1440/images/help/branches/pr-retargeting-diagram1.webp" alt="Branch image" />
+        <h2>Branch</h2>
+        <p>A branch is basically a pointer to a snapshot of your code so you can experiment with it without affecting the main codebase. It isn't a full copy because repos with multiple branches could get huge. Then you can merge your changes to the main codebase. It's like a sandbox.</p>
+        <a href="https://en.wikipedia.org/wiki/Branching_(version_control)">Read More</a>
       </article>
-    </main>
+
+      <!-- Secondary Articles -->
+      <article>
+        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="Readme image" />
+        <h2>Readme</h2>
+        <p>A readme is particularly important on GitHub since the code is in textual form and the user may need to compile it. The readme tells you what the project is for and how to use it, amongst other things.</p>
+        <a href="https://en.wikipedia.org/wiki/README">Read More</a>
+      </article>
+
+      <article>
+        <img src="https://support.microsoft.com/images/en-us/ae7333a6-5681-45ea-b482-e0de7c81cabd" alt="Wireframe image" />
+        <h2>Wireframe</h2>
+        <p>A wireframe is a sketch of a website that shows where the title, subtitles, text, pictures and buttons are going to go but without real pictures and it has dummy text.</p>
+      </article>
+    </main>  
+    
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+         <p>Code Your Future</p>
     </footer>
   </body>
 </html>