html passes w3 validator

Author: d-odumosu

Wireframe/index.html

@@ -20,7 +20,6 @@
 
 <header class="header">
     <div class="container header__content">
-
         <div class="header__branding">
             <h1 class="header__title">The Blog</h1>
             <p class="header__tagline">A blog on learning programming</p>
@@ -32,7 +31,7 @@ <h1 class="header__title">The Blog</h1>
 <div class="container">
     <main>
         <article class="article-feature">
-            <img src="./images/readme.png" alt="illustration of a readme.md file">
+            <img src="./images/readme.png" alt="illustration of a README.md file" loading="lazy" decoding="async">
             <div class="article-feature-text">
                 <h2>What is the purpose of a README file</h2>
                 <p>
@@ -54,7 +53,8 @@ <h2>What is the purpose of a README file</h2>
 
         <div class="article-secondary-flex">
             <article class="article-sec">
-                <img src="./images/wireframe-hero.png" alt="illustration of a man showing a wireframe">
+                <img src="./images/wireframe-hero.png" alt="illustration of a man showing a wireframe" loading="lazy"
+                     decoding="async">
                 <h2>What is the purpose of a wireframe</h2>
                 <p>
                     A wireframe is a simple visual representation of a website or application's layout. It acts as a
@@ -68,7 +68,8 @@ <h2>What is the purpose of a wireframe</h2>
             </article>
 
             <article class="article-sec">
-                <img src="./images/git.webp" alt="illustration of a git tree branching out">
+                <img src="./images/git.webp" alt="illustration of a git tree branching out" loading="lazy"
+                     decoding="async">
                 <h2>What is a branch in Git?</h2>
                 <p>Git documentation explains that branches allow developers to diverge from the main line of
                     development
@@ -86,7 +87,7 @@ <h2>What is a branch in Git?</h2>
     </main>
 </div>
 
-<footer class="site-footer index-footer">
+<footer class="site-footer">
     <div class="container">
         <p>&copy; 2026 The Blog. All rights reserved.</p>
     </div>

Wireframe/style.css

@@ -15,25 +15,25 @@ img {
 
 /* ====== Layout ====== */
 .container {
-  width: 80%;
+  width: 70%;
   max-width: 1200px;
   margin: 0 auto;
 }
 
 /* ====== Header ====== */
-.site-header {
+.header__content {
   text-align: center;
   padding: 20px;
 }
 
-.site-title {
+.header__title {
   font-weight: 900;
   font-style: italic;
   color: #c1121f;
   margin-bottom: 0;
 }
 
-.site-tagline {
+.header__tagline {
   color: #780000;
   margin-top: 0;
   font-size: 18px;
@@ -42,7 +42,7 @@ img {
 
 /* ====== Articles ====== */
 article {
-  border: 1px solid #fb8500;
+  border: 1px solid #ced4da;
 }
 
 .article-feature-text {
@@ -62,18 +62,18 @@ article {
 }
 
 /* ====== Buttons / Links ====== */
-.article-read-more {
+.article__link {
   text-decoration: none;
-  border: 1px solid #03045e;
+  border: 1px solid #ced4da;
   padding: 0.7em 1.2em;
   color: #fff;
   background: #e76f51;
   border-radius: 2px;
   display: inline-block;
 }
 
-.article-read-more:hover,
-.article-read-more:focus {
+.article__link:hover,
+.article__link:focus {
   background: #ffc300;
   color: black;
 }
@@ -85,12 +85,13 @@ article {
 }
 
 /* ====== Responsive ====== */
-@media (max-width: 768px) {
+@media (max-width: 750px) {
   .article-secondary-flex {
     flex-direction: column;
   }
 
-  .article-sec {
-    width: 100%;
+  .article-sec{
+    width: 90%;
   }
+
 }