articles section contains three distinct articles, each with its own unique image, title, summary, and link

Author: hackertainment

Wireframe/image/article_mermaid.png

@@ -16,35 +16,32 @@ <h1>Wireframe</h1>
     <main class="main">
       <section class="content">
         <article class="article">
-          <img src="placeholder.svg" alt="" />
-          <h2>Title</h2>
+          <img src="image/article_readme.png" alt="a readme file" />
+          <h2>The purpose of a README file</h2>
           <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+            You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it...
           </p>
-          <a href="">Read more</a>
+          <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
         </article>
       </section>
 
       <section class="content">
         <article class="article">
-          <img src="placeholder.svg" alt="" />
-          <h2>Title</h2>
+          <img src="image/article_wireframe.png" alt="a wireframe" />
+          <h2>The purpose of a wireframe</h2>
           <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+            A wireframe is a basic, two-dimensional visual representation of a web page, app interface, or product layout. You can think of it as a low-fidelity, functional sketch...
           </p>
-          <a href="">Read more</a>
+          <a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
         </article>
 
         <article class="article">
-          <img src="placeholder.svg" alt="" />
-          <h2>Title</h2>
+          <img src="image/article_mermaid.png" alt="a git branch" />
+          <h2>A branch in Git</h2>
           <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+            In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code...
           </p>
-          <a href="">Read more</a>
+          <a href="https://www.w3schools.com/git/git_branch.asp?remote=github">Read more</a>
         </article>
       </section>
     </main>

Wireframe/image/article_readme.png

@@ -65,9 +65,14 @@ p {
   flex: 1;
 }
 
+.article img {
+  width: 100%;
+}
+
 .article h2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  font-size: 1rem;
 }
 
 .article p {
@@ -77,7 +82,7 @@ p {
 
 .article a {
   background-color: var(--grey-light);
-  color: var(--black);
+  color: var(--grey-dark);
   border-style: solid;
   border-width: 1px;
   border-color: var(--grey-dark);
@@ -88,7 +93,7 @@ p {
 
 .article a:hover {
   background-color: var(--grey-dark);
-  color: var(--white);
+  color: var(--grey-light);
   border-color: var(--grey-light);
 }