add resultado dos jogos dos dias 20 e 21/11

main.js

@@ -3,9 +3,11 @@ function createGame(player1, hour, player2) {
   let player2alt = player2.slice(-1) === "a" ? "da" : "do"
   return `
     <li>
-      <img src="./assets/${player1}.svg" alt="Bandeira ${player1alt} ${player1}" />
-      <strong>${hour}</strong>
-      <img src="./assets/${player2}.svg" alt="Bandeira ${player2alt} ${player2}" />
+      <div class="jogo">
+        <img src="./assets/${player1}.svg" alt="Bandeira ${player1alt} ${player1}" />
+        <strong>${hour}</strong>
+        <img src="./assets/${player2}.svg" alt="Bandeira ${player2alt} ${player2}" />
+      </div>
     </li>
     <div class="nome-times">
       <h1>${player1}</h1>
@@ -31,11 +33,14 @@ document.getElementById("botao").onclick = function () {
 }
 
 let delay = -0.15
-function createCard(date, day, games) {
+function createCard(date, day, games, finished) {
   delay = delay + 0.15
   return `
     <div class="card" style="animation-delay: ${delay}s">
       <h2>${date} <span>${day}</span></h2>
+      <div class="finalizado">
+        <h3>${finished}</h3>
+      </div>
       <ul>
         ${games}
       </ul>
@@ -44,99 +49,99 @@ function createCard(date, day, games) {
 }
 
 document.querySelector("#cards").innerHTML =
-  createCard("20/11", "domingo", createGame("catar", "13:00", "equador")) +
+  createCard("20/11", "domingo", createGame("catar", "0 x 2", "equador"), "finalizado") +
   createCard(
     "21/11",
     "segunda",
-    createGame("inglaterra", "10:00", "irã") +
-      createGame("senegal", "13:00", "holanda") +
-      createGame("estados unidos", "16:00", "país de gales")
+    createGame("inglaterra", "6 x 2", "irã") +
+      createGame("senegal", "0 x 2", "holanda") +
+      createGame("estados unidos", "1 x 1", "país de gales"), "finalizados"
   ) +
   createCard(
     "22/11",
     "terça",
     createGame("argentina", "07:00", "arábia saudita") +
       createGame("dinamarca", "10:00", "tunísia") +
       createGame("méxico", "13:00", "polônia") +
-      createGame("frança", "16:00", "austrália")
+      createGame("frança", "16:00", "austrália"), "próximos jogos"
   ) +
   createCard(
     "23/11",
     "quarta",
     createGame("marrocos", "07:00", "croácia") +
       createGame("alemanha", "10:00", "japão") +
       createGame("espanha", "13:00", "costa rica") +
-      createGame("bélgica", "16:00", "canadá")
+      createGame("bélgica", "16:00", "canadá"), "próximos jogos"
   ) +
   createCard(
     "24/11",
     "quinta",
     createGame("suíça", "07:00", "camarões") +
       createGame("uruguai", "10:00", "coreia do sul") +
       createGame("portugal", "13:00", "gana") +
-      createGame("brasil", "16:00", "sérvia")
+      createGame("brasil", "16:00", "sérvia"), "próximos jogos"
   ) +
   createCard(
     "25/11",
     "sexta",
     createGame("país de gales", "07:00", "irã") +
       createGame("catar", "10:00", "senegal") +
       createGame("holanda", "13:00", "equador") +
-      createGame("inglaterra", "16:00", "estados unidos")
+      createGame("inglaterra", "16:00", "estados unidos"), "próximos jogos"
   ) +
   createCard(
     "26/11",
     "sábado",
     createGame("tunísia", "07:00", "austrália") +
       createGame("polônia", "10:00", "arábia saudita") +
       createGame("frança", "13:00", "dinamarca") +
-      createGame("argentina", "16:00", "méxico")
+      createGame("argentina", "16:00", "méxico"), "próximos jogos"
   ) +
   createCard(
     "27/11",
     "domingo",
     createGame("japão", "07:00", "costa rica") +
       createGame("bélgica", "10:00", "marrocos") +
       createGame("croácia", "13:00", "canadá") +
-      createGame("espanha", "16:00", "alemanha")
+      createGame("espanha", "16:00", "alemanha"), "próximos jogos"
   ) +
   createCard(
     "28/11",
     "segunda",
     createGame("camarões", "07:00", "sérvia") +
       createGame("coreia do sul", "10:00", "gana") +
       createGame("brasil", "13:00", "suíça") +
-      createGame("portugal", "16:00", "uruguai")
+      createGame("portugal", "16:00", "uruguai"), "próximos jogos"
   ) +
   createCard(
     "29/11",
     "terça",
     createGame("equador", "12:00", "senegal") +
       createGame("holanda", "12:00", "catar") +
       createGame("irã", "16:00", "estados unidos") +
-      createGame("inglaterra", "16:00", "país de gales")
+      createGame("inglaterra", "16:00", "país de gales"), "próximos jogos"
   ) +
   createCard(
     "30/11",
     "quarta",
     createGame("tunísia", "12:00", "frança") +
       createGame("austrália", "12:00", "dinamarca") +
       createGame("arábia saudita", "16:00", "méxico") +
-      createGame("polônia", "16:00", "argentina")
+      createGame("polônia", "16:00", "argentina"), "próximos jogos"
   ) +
   createCard(
     "01/12",
     "quinta",
     createGame("croácia", "12:00", "bélgica") +
       createGame("marrocos", "12:00", "canadá") +
       createGame("costa rica", "16:00", "alemanha") +
-      createGame("japão", "16:00", "espanha")
+      createGame("japão", "16:00", "espanha"), "próximos jogos"
   ) +
   createCard(
     "02/12",
     "sexta",
     createGame("coreia do sul", "12:00", "portugal") +
       createGame("gana", "12:00", "uruguai") +
       createGame("sérvia", "16:00", "suíça") +
-      createGame("camarões", "16:00", "brasil")
+      createGame("camarões", "16:00", "brasil"), "próximos jogos"
   )

style.css

@@ -110,7 +110,7 @@ header {
 
   width: fit-content;
   margin-inline: auto;
-  margin-bottom: 53px;
+  margin-bottom: 32px;
 
   color: #f7dd43;
 }
@@ -124,17 +124,40 @@ header {
 .card ul {
   display: flex;
   flex-direction: column;
-  gap: 17px;
+  gap: 18px;
 
   width: 270px;
 }
 
 .card ul li {
+  display: flex;
+  flex-direction: column;
+}
+
+.card ul li .jogo {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
+.finalizado {
+  display: flex;
+
+  padding: 8px 16px;
+  border: 1px solid var(--card-title-border-color);
+  border-radius: 6px;
+
+  width: fit-content;
+  margin-inline: auto;
+  margin-bottom: 24px;
+}
+
+.finalizado h3 {
+  color: #e1e1e6;
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
 .card ul li img {
   width: 50px;
   height: 50px;
@@ -154,6 +177,7 @@ header {
 }
 
 #botao:hover,
+.finalizado:hover,
 .nome-times h1:hover,
 .card h2:hover,
 .card ul li strong:hover,
@@ -162,6 +186,7 @@ header {
 }
 
 #botao,
+.finalizado,
 .nome-times h1,
 .card h2,
 .card ul li strong,