Build a Page of Playing Cards - Build a Page of Playing Cards

HTML-CSS
1

Tell us what’s happening:

I completed every step, i have even passed the whole lab, but there is no thing displayed on screen

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Playing Cards</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="playing-cards">
    <div class="card">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </main>
</body>

</html>

/* file: styles.css */
#playing-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;

}
.card {
    display: flex;
    width: 40vw;
    height: 60vw;
    justify-content: space-between;
}
.left {
    align-self: flex-start;
    
}
.middle {
    align-self: center;
    flex-direction: column;
}
.right {
    align-self: flex-end;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Page of Playing Cards - Build a Page of Playing Cards

2

Your div elements are all empty:

You could make them visible by giving them some content (as suggested in the instructions):

Here are some characters you can copy and paste to use in your cards if you want: ♠ ♣ ♥ ♦

You could also give each of your cards a border property for instance, so that you can see the edges of the cards.