Update wirframe: add article images with alt text and fix footer styling

Author: Zadri415

Module-Onboarding

@@ -0,0 +1 @@
+Subproject commit 72fe02ba5885d4f58923a041e9a4f6ffca1b99e5

Wireframe/index.html

@@ -14,7 +14,7 @@ <h1>Project Essentials Explained</h1>
 
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
+        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="Github README editor with 'README' in green outline."/>
         <h2>What is a README file?</h2>
         <p>
           A README file is an essential component of many software projects, especially those hosted on platforms like GitHub.
@@ -23,7 +23,7 @@ <h2>What is a README file?</h2>
       </article>
 
       <article>
-        <img src="placeholder.svg" alt="" />
+        <img src="https://cdn.sanity.io/images/599r6htc/regionalized/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.png?q=75&fit=max&auto=format&dpr=2" alt="what is a wireframe cover photo"/>
         <h2>What is a Wireframe?</h2>
         <p>
           A wireframe is a visual blueprint of a website or application's layout, focusing on structure and functionality without the distraction of design elements.
@@ -32,13 +32,14 @@ <h2>What is a Wireframe?</h2>
       </article>
 
       <article>
-        <img src="placeholder.svg" alt="" />
+        <img src="https://i0.wp.com/digitalvarys.com/wp-content/uploads/2019/06/image-6.png?fit=640%2C257&ssl=1" alt="" />
         <h2>What is a Branch in Git?</h2>
         <p>
           In Git, a branch is an independent line of development that allows you to work on new features or fixes without affecting the main codebase.
         </p>
         <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
       </article>
+      
     </main>
 
 

Wireframe/style.css

@@ -60,10 +60,13 @@ header p {
 a {
   padding: var(--space);
   border: var(--line);
-  max-width: fit-content;
+  align-items: center;
+  gap: .5rem;
+  display: inline-flex;
   text-decoration: none;
-  color: inherit;
-  transition: all 0.3s ease;
+   border-color: currentColor;;
+  border-radius: .5rem;
+  transition: transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
 }
 
 a:hover {
@@ -88,11 +91,12 @@ main {
   gap: var(--space);
 }
 footer {
-  position: fixed;
-  bottom: 0;
   text-align: center;
-  border-top: 1px solid black;
-  width: 100%;
+  inset-inline: 0;
+  bottom: 0;
+  position: fixed;
+  background-color: rgb(148, 228, 228);
+  
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.