add featured card

Author: LiyemaMfengwana

Wireframe/index.html

@@ -16,16 +16,22 @@ <h1 class="page-title">Wireframe</h1>
         Learn about README files, wireframes, and Git branches.
       </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.
+    <main class="container">
+    <!-- Featured card (full width) -->
+    <article class="card card--featured">
+      <div class="card__media fake-img" aria-hidden="true">
+        <div class="diag left"></div>
+        <div class="diag right"></div>
+      </div>
+      <div class="card__body">
+        <h2 class="card__title">What is the purpose of a README file?</h2>
+        <p class="card__summary">
+          A README introduces a project: what it is, why it exists, and how to use, install, run, and contribute to it. It orients new users and contributors, sets expectations (requirements, license, roadmap), and centralizes quick-start commands and links. In short, it’s the project’s front door and owner’s manual.
         </p>
-        <a href="">Read more</a>
-      </article> 
+        <a class="btn" href="#readme-details">Read More</a>
+      </div>
+    </article>
+    
     </main>
     <footer>
       <p>