add main article card

Author: tomdu3

Wireframe/index.html

@@ -14,14 +14,18 @@ <h1>GitHub Web Project Essentials</h1>
     <p>A quickstart guide to building, documenting and maintaining web projects with GitHub.</p>
   </header>
   <main>
-    <article>
-      <img src="placeholder.svg" alt="" />
-      <h2>Title</h2>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-        voluptates. Quisquam, voluptates.
+    <article class="card" id="main-article">
+      <img src="./assets/readme.png" alt="" class="article-img" />
+      <h2 class="article-title">What Is the Purpose of a README</h2>
+      <p class="article-text">
+        A good README file serves as a project's "front door," acting as a crucial piece of documentation that explains
+        what an application does, why the specific technologies were chosen, and how it differentiates a high-quality
+        project to both users and potential employers. At a minimum, an effective layout must include the project title,
+        a descriptive overview, clear instructions on installation and usage, collaborator credits, and an appropriate
+        open-source license.
       </p>
-      <a href="">Read more</a>
+      <a href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/" class="article-link" target="_blank"
+        aria-label="Read more about README files">Read more</a>
     </article>
   </main>
   <footer>