change the html and css to look same to wireframe

Author: lintsang

Wireframe/index.html

@@ -23,10 +23,28 @@ <h2>Title</h2>
         </p>
         <a href="">Read more</a>
       </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>
+      </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>
+      </article>  
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        By Lin Tsang
       </p>
     </footer>
   </body>

Wireframe/style.css

@@ -26,10 +26,15 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
-body {
+
+ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  justify-items: center;
+  text-align: center;
+  display: grid;
+
 }
 a {
   padding: var(--space);
@@ -41,6 +46,9 @@ svg {
   width: 100%;
   object-fit: cover;
 }
+p {
+  padding: 0 0 30px 0;
+}
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -50,9 +58,9 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
-  bottom: 0;
+  width: 100%;
   text-align: center;
+  background-color: #ccc;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.