add and style article images

Author: edinakurdi

Wireframe/index.html

@@ -17,7 +17,7 @@ <h1>Developer essentials</h1>
   </header>
   <main>
     <article>
-      <img src="placeholder.svg" alt="" />
+      <img src="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frb46gni0wl2759llb6xs.png" alt="readme file" />
       <h2>What is a README file?</h2>
       <p>
         A README is ...
@@ -26,7 +26,7 @@ <h2>What is a README file?</h2>
     </article>
 
     <article>
-      <img src="placeholder.svg" alt="" />
+      <img src="https://live.staticflickr.com/2154/5734993652_d4a2ee8778_b.jpg" alt="" />
       <h2>What is the purpose of a wireframe?</h2>
       <p>
         A wireframe is ...
@@ -35,7 +35,7 @@ <h2>What is the purpose of a wireframe?</h2>
     </article>
 
     <article>
-      <img src="placeholder.svg" alt="" />
+      <img src="https://blog.nobledesktop.com/_next/image?url=%2Fimages%2Fblog%2Fgit-branches%2Fgit-branches-merge.png&w=750&q=75" alt="git branching diagram" />
       <h2>What is a branch in Git?</h2>
       <p>
         A branch in Git is ...

Wireframe/style.css

@@ -38,11 +38,13 @@ a {
   border: var(--line);
   max-width: fit-content;  
   text-decoration: none;
+  font-weight: bold;
 }
-img,
-svg {
+img {
   width: 100%;
   object-fit: cover;
+  height: 350px;
+  filter: grayscale(70%) ;
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions