Added two bottom articles with images and summaries

Author: ChinweP

Wireframe/index.html

@@ -23,14 +23,37 @@ <h2>What is the purpose of a README file?</h2>
         <a href="https://www.makeareadme.com/" target="_blank">Read more</a>
       </article>
 
-      
+      <!--Bottom two articles side -by-side-->
 
+    <section class="bottom-articles">
+
+      <articles id="wireframe-article">
+        <img src="images/wireframe.png" alt="Example of a webpage wireframe"/>
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A wireframe is a simple layout plan that shows where content will go on a webpage before you start designing or coding.
+        </p>
+
+        <a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe/" target="_blank">Read more</a>
+      </article>
+
+      <article id="branch-article">
+        <img src="images/git-branch.png" alt="Diagram showing Git branches"/>
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A Git baranch lets developers work on new features without affecting the main project. When finished, the branch can be merged back in.
+        </p>
+        <a href="https://www.atlassian.com/git/tutorials/using-branches" target="_blank">Read more</a>
+      </article>
+
+    </section>
 
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+
       </p>
+        
     </footer>
   </body>
 </html>