Added more semantic HTML tags to the index.html file

Author: JorvanW

Wireframe/index.html

@@ -10,24 +10,26 @@
     <header>
       <h1>Wireframe Task</h1>
     </header>
+    <div id="container">
     <main>
-      <article>
+      <article id="readme-article">
         <img src="https://user-images.githubusercontent.com/6750572/90517585-e483a280-e165-11ea-8945-3d289eeeaa1d.png" alt=" example of Readme" />
-        <h2>README file</h2>
+        <h2 id="Article Heading">README file</h2>
         <p>
-          ReadME file is a plain text document that is used as a user manual or official document for a project. This file is useful because it helps communicate important information to those using or collaborating on the project. 
+          ReadME file is a plain text document that is used as a user manual or official document for a project. 
+          This file is useful because it helps communicate important information to those using or collaborating on the project. 
         </p>
         <a href="https://www.makeareadme.com" target="_blank" rel="noopener noreferrer">Read more</a>
       </article>
-      <article>
+      <article id="Wireframe-article">
         <img src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png" alt="Wireframe" />
         <h2>Wireframe</h2>
         <p>
          A wireframe is a minimal skeletal blueprint of a website or app interface. It is important in order to plan a project in advance.
         </p>
         <a href="https://balsamiq.com/blog/what-are-wireframes/" target="_blank" rel="noopener noreferrer">Read more</a>
       </article>
-      <article>    
+      <article id="Git-Branch-article">    
         <img src="https://miro.medium.com/v2/resize:fit:1100/format:webp/1*nQXC89lqQnqvICtb3J6XWw.png" alt="GitBranch" />
         <h2>Git Branch </h2>
         <p>
@@ -36,6 +38,7 @@ <h2>Git Branch </h2>
         <a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github" target="_blank" rel="noopener noreferrer">Read more</a>
       </article>
     </main>
+    </div>
     <footer>
       <p>London | May-2026 | Jorvan White | Wireframe Task </p>
     </footer>

Wireframe/style.css

@@ -24,6 +24,19 @@ As well as useful links to learn more */
   --line: 1px solid;
   --container: 1280px;
 }
+
+H1 {
+  display: flex;
+  justify-content: center;  
+}
+
+
+.Wireframe-article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  bottom: 40px  ;
+}
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {