Address review feedback and improve CSS structure

Author: YoditE

Wireframe/02-newspaper-site-wireframe-example.webp

@@ -13,23 +13,23 @@ <h1>Web Development Concepts</h1>
     </header>
     <main>
       <article>
-        <img src="image_thumb10.png" alt="README file example">
+        <img src="readme-images.png" alt="README file example">
         <h2>README.md File</h2>
         <p>
           A README file explains what a project does, how to install it, and how to use it. It helps other developers understand the project quickly. </p>
          <a href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/" target="_blank">Read more</a>
       </article>
 
       <article>
-        <img src="02-newspaper-site-wireframe-example.webp" alt="Wireframe example">
+        <img src="wireframe-images.png" alt="Wireframe example">
         <h2>Wireframe</h2>
         <p>
           A wireframe is a simple visual plan of a webpage. It shows the layout and structure before the website is built.
         </p>
         <a href="https://www.productplan.com/glossary/wireframe/" target="_blank">Read more</a>
       </article>
       <article>
-       <img src="GIT-Branchand-its-Operations.webp" alt="Git branch workflow">
+       <img src="Git-branch-images.png" alt="Git branch workflow">
         <h2>Git Branch</h2>
         <p>
           A Git branch allows developers to work on new features without changing the main version of a project. Changes can be merged later when they are ready.

Wireframe/GIT-Branchand-its-Operations.webp

@@ -27,15 +27,11 @@ As well as useful links to learn more */
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
-  background: var(--paper);
+  background-color: #d6d0d0;
   color: var(--ink);
   font: var(--font);
 }
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
-}
+
 img,
 svg {
   width: 100%;
@@ -45,10 +41,7 @@ svg {
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
-main {
-  max-width: var(--container);
-  margin: 0 auto;
-}
+ 
 footer {
 
   text-align: center;
@@ -61,6 +54,8 @@ https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
 main {
+  max-width: var(--container);
+  margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
@@ -86,8 +81,11 @@ article {
     grid-column: span 3;
   }
 }
+
+/* ====== Custom Styling ====== */
+
 h1 {
-  color: rgb(47, 159, 174);
+  color: #006d77;
   text-align: center;
 
 }
@@ -100,34 +98,28 @@ header {
 }
 a {
   background-color: black;
-color: white;
-text-decoration: none;
-border-radius: 8px;
-transition: 0.3s;
+  color: white;
+  text-decoration: none;
+  border-radius: 8px;
+  transition: 0.3s;
+  padding: 8px 16px;
+  width: 100px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  display: inline-block;
+  max-width: fit-content;
 }
-a:hover{
+ a:hover {
    background-color: teal;}
 
-
-article {
-  border: var(-- line);
-  padding-bottom: var(--space);
-  text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  border-radius: 12px;
-  overflow: hidden;
-  padding: 16px;
+article:hover { 
+  transform: scale(1.02);
 }
 
-article:hover { transform: scale(1.02);}
-
-body { background-color: #d6d0d0;}
-
-h1 { color: rgb(47, 120, 120); }
-
-p { color:  #333333; }
-a { background-color: black;
-color: white;
-
+p { 
+  color:  #333333; 
+}
+article:last-child a {
+  margin-top: 30px;
 }