From 0ea07581f5bc217edbd2713e4561b170a899dce6 Mon Sep 17 00:00:00 2001
From: "alpe@pc" <almeidavs@yahoo.com.br>
Date: Sun, 29 Oct 2023 02:59:24 -0300
Subject: [PATCH] Update 'news-homepage/' - counter for ".cards" now uses CSS
 to automatically number them, instead of manually on HTML.

---
 news-homepage/README.md         | 12 ++++++++++++
 news-homepage/index.html        |  6 +++---
 news-homepage/src/css/style.css |  5 +++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/news-homepage/README.md b/news-homepage/README.md
index f87e350..468e4e3 100644
--- a/news-homepage/README.md
+++ b/news-homepage/README.md
@@ -57,4 +57,16 @@ padding:
     );
 ```
 
+Learned how to add a counter with css.
+
+```css
+main .cards article {
+    counter-increment: cardscount 1;
+}
+
+main .cards article .content .count::before {
+    content: counter(cardscount, decimal-leading-zero);
+}
+```
+
 Also learned more about how to use grid. Still a lot to learn though.
\ No newline at end of file
diff --git a/news-homepage/index.html b/news-homepage/index.html
index 907c086..939dfbd 100644
--- a/news-homepage/index.html
+++ b/news-homepage/index.html
@@ -63,7 +63,7 @@ <h3><a href="">Is VC Funding Drying Up?</a></h3>
             <article>
                 <img src="./src/images/image-retro-pcs.jpg" alt="">
                 <div class="content">
-                    <span class="count">01</span>
+                    <span class="count"></span>
                     <h4><a href="">Reviving Retro PCs</a></h4>
                     <p>What happens when old PCs are given modern upgrades?</p>
                 </div>
@@ -71,7 +71,7 @@ <h4><a href="">Reviving Retro PCs</a></h4>
             <article>
                 <img src="./src/images/image-top-laptops.jpg" alt="">
                 <div class="content">
-                    <span class="count">02</span>
+                    <span class="count"></span>
                     <h4><a href="">Top 10 Laptops of 2022</a></h4>
                     <p>Our best picks for various needs and budgets.</p>
                 </div>
@@ -79,7 +79,7 @@ <h4><a href="">Top 10 Laptops of 2022</a></h4>
             <article>
                 <img src="./src/images/image-gaming-growth.jpg" alt="">
                 <div class="content">
-                    <span class="count">03</span>
+                    <span class="count"></span>
                     <h4><a href="">The Growth of Gaming</a></h4>
                     <p>How the pandemic has sparked fresh opportunities.</p>
                 </div>
diff --git a/news-homepage/src/css/style.css b/news-homepage/src/css/style.css
index 285921d..b96ff3a 100644
--- a/news-homepage/src/css/style.css
+++ b/news-homepage/src/css/style.css
@@ -194,9 +194,9 @@ main .cards {
 main .cards article {
     display: flex;
     gap: 1.5rem;
+    counter-increment: cardscount 1;
 }
 
-
 main .cards article img {
     max-height: 127px;
 }
@@ -207,7 +207,8 @@ main .cards article .content {
     justify-content: space-between;
 }
 
-main .cards article .content .count {
+main .cards article .content .count::before {
+    content: counter(cardscount, decimal-leading-zero);
     font-size: 2rem;
     color: var(--grayish-blue);
     font-weight: 800;