Refactor index.html for improved readability and update style.css for better layout and footer alignment

adedolapo · adedolapo · commit 121df04201be · 2026-02-09T11:12:06.000Z
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,52 +9,48 @@
 
 <body>
   <header>
-    <h1>
-      Wireframe
-    </h1>
-    <p>
-      An article about webpages and their purpose
-    </p>
+    <h1>Wireframe</h1>
+    <p>An article about webpages and their purpose</p>
   </header>
+
   <main>
     <article>
-      <img src="placeholder.svg" alt="an image depicting wireframe " />
-
-
-      <h2>READme</h2>
+      <img src="placeholder.svg" alt="An image depicting a wireframe" />
+      <h2>README</h2>
       <p>
-        The purpose of a READme file is to provide information about a project, including how to instructions and tasks
-        to be done.
+        The purpose of a README file is to provide information about a project,
+        including how-to instructions and tasks to be done.
       </p>
-      <div>
-        <a href="">Read more</a>
-      </div>
+      <a href="#">Read more</a>
     </article>
 
     <article>
-      <img src="placeholder.svg" alt="an image depicting wireframe " />
+      <img src="placeholder.svg" alt="An image depicting a wireframe" />
       <h2>Wireframe</h2>
-      <p>A wireframe is a visual guide that represents the skeletal framework of a website or application, outlining the
-        layout and structure of its content and functionality.</p>
-
-      <a href="">Read more</a>
+      <p>
+        A wireframe is a visual guide that represents the skeletal framework of
+        a website or application, outlining the layout and structure of its
+        content and functionality.
+      </p>
+      <a href="#">Read more</a>
     </article>
 
     <article>
-      <img src="placeholder.svg" alt="an image depicting wireframe " />
-
-      <h2>Git branch</h2>
-      <p>A branch in a git, is a perosnal workspace to work on tasks independently.</p>
-
-      <a href="">Read more</a>
+      <img src="placeholder.svg" alt="An image depicting a wireframe" />
+      <h2>Git Branch</h2>
+      <p>
+        A branch in Git is a personal workspace used to work on tasks independently.
+      </p>
+      <a href="#">Read more</a>
     </article>
   </main>
-  <footer>
-    if you have any questions follow this link to my <a
-      href="https://www.productplan.com/glossary/wireframe/">Wireframe</a>
 
+  <footer>
     <p>
-      Adedolapo January 2026
+      If you have any questions, follow this link to the
+      <a href="https://www.productplan.com/glossary/wireframe/">Wireframe glossary</a>.
     </p>
+    <p>Adedolapo — January 2026</p>
   </footer>
-</body>
+</body>
+</html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -48,21 +48,32 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: 80px;
 }
 header {
   text-align: center;
-  width: 100%;
 }
+header p{
+  text-align: center;
+ }
 p {
   margin: var(--space) 0;
   text-align: justify;
 }
 
+
 footer {
   position: fixed;
   bottom: 0;
+  width: 100%;
   text-align: center;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
+
 /* ====== 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
