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

HTML-CSS
1

Tell us what’s happening:

  1. The flexbox layout on my middle class selector is not fully centered ,both vertically and horizontally.
    2.I am trying to embed a span with the class ‘red’ to change the color into another span with the class ‘rotate’ to change the position, where both are embedded in the same div (class ‘middle’), but nothing happens.
    Please explain, seniors.

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">
  <link rel="stylesheet" href="styles.css">
  <title>Playing Cards</title>

</head>

<body>
  <main id="playing-cards">
  <div class="card">
    <div class="left">A<br>♠</div>
    <div class="middle">♠</div>
    <div class="right">A<br>♠</div>
  </div>
  <div class="card">
    <div class="left">2<br>♣</div>
    <div class="middle">♣<br><span class="span">♣</span></div>
    <div class="right">2<br><span class="rotate">♣</span></div>
  </div>
  <div class="card">
    <div class="left">5<br><span class="red">♦<span></div>
    <div class="middle"><span class="red">♦♦<br>♦<br>♦♦<span></div>
    <div class="right">5<br><span class="rotate"><span class="red">♦<span></span></div>
  </div>
  <div class="card">
    <div class="left">3<br><span class="red">♥<span></div>
    <div class="middle"><span class="red">♥<br>♥<br><span class="rotate">♥</span></span></div>
    <div class="right">3<br><span class="red">♥<span></div>
  </div>
  <div class="card">
    <div class="left">4<br>♣</div>
    <div class="middle">♣♣<br><span class="rotate">♣♣<span></div>
    <div class="right">4<br>♣</div>
  </div>
  
  </main>

</body>

</html>

/* file: styles.css */
body{
  background-color:#d7c6;

}
*{
  box-sizing: border-box;
}
#playing-cards{
  margin: 20px auto;
  Display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1001px;
}

.card{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width:100%;
  max-width:301px;
  height:449px;
  border: 2px solid black;
  border-radius: 9px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  background-color: #f9f8f9;
  
}
.left{
  align-self: flex-start;
  padding: 9px;
  font-size: 47px;

}
.middle{
  display:flex;
  align-self: center;
  font-size:69px;
  flex-direction: column;
  justify-content: center;
}
.right{
  align-self : flex-end;
  padding: 9px;
  font-size: 47px;
  transform: rotate(180deg);
}
.rotate{
  transform: rotate(180deg);
}
.red{
  color:red;
}
#playing-cards::after{
  content: "";
  width: 301px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36 Edg/140.0.0.0

Challenge Information:

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

https://www.freecodecamp.org/learn/full-stack-developer/lab-page-of-playing-cards/build-a-page-of-playing-cards

Cuplikan layar 2025-09-11 073806
Cuplikan layar 2025-09-11 0738061920×1200 61 KB

2

Welcome to the forum @azharir90

Try using relative units for the card height and width

I resized the cards, see below.

image
image351×344 6.64 KB

You could also use relative units for the card symbols.

Happy coding

3

Can we put a span inside another span within 1 div?

ex:

♥
♥
♥
4

The default displayproperty of span elements is in-line.

So height and width properties will not have any effect, unless the display property is changed.

Try using a block level element instead.

5

thanks for solution , i try to add class “red” to class “rotate”, and it work.

i still have a trouble with my 5 diamond card , I have tried to center the diamond, both horizontally and vertically (justify-content and align-items set to center). Why is it not working??

6

To help you troubleshoot, try placing a border around the element containing the diamonds / symbols.

Happy coding