Add wireframe, README, and Git branch articles

Author: Harini Arunkumar

Wireframe/index.html

@@ -14,7 +14,34 @@ <h1>Understanding Git and Wireframes</h1>
       </p>
     </header>
     <main>
-      
+      <section>
+      <article class="card">
+        <img src="placeholder.svg" alt="Wireframe illustration" />
+        <div class="card-content">
+        <h2>Purpose of a Wireframe</h2>
+        <p> A wireframe is a simple visual guide used to plan layout and structure
+      before adding design and content.</p>
+        <a href="">Read more</a>
+        </div>
+      </article>
+      <article class="card">
+        <img src="placeholder.svg" alt="Git illustration" />
+        <div class="card-content">
+          <h2>Purpose of a README File</h2>
+          <p>A README file explains what a project is about, how to set it up, and how to use it. It helps other developers understand the project quickly without reading all the code.</p>
+          <a href="">Read more</a>
+        </div>
+      </article>
+      <article class="card">
+        <img src="placeholder.svg" alt="Git illustration" />
+        <div class="card-content">
+          <h2>What is a Git Branch</h2>
+          <p>A Git branch is a separate version of the code that allows developers to work on new features or fixes without affecting the main codebase. Once the work is complete, the branch can be merged back into the main branch safely.</p>
+          <a href="">Read more</a>
+        </div>
+      </article>
+      </section>
+
     </main>
     <footer>
      <nav>
@@ -24,8 +51,8 @@ <h1>Understanding Git and Wireframes</h1>
     <a href="https://github.com/arunkumarakilan" target="_blank" rel="noopener">GitHub</a>
     <a href="https://www.linkedin.com/in/arunkumar-akilan-0a87aa3a1/" target="_blank" rel="noopener">LinkedIn</a>
   </nav>
-
   <p>© 2026 Arunkumar Akilan</p>
-    </footer>
+
+    </footer> 
   </body>
 </html>