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

HTML-CSS
1

Tell us what’s happening:

The single rotated heart and spade in my 8 and 10 cards will not center. please advise.

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 red">
      <div class="left">A<br>♥</div>
      <div class="middle">♥</div>
      <div class="right">A<br>♥</div>
    </div>
    <div class="card">
      <div class="left">3<br>♠</div>
      <div class="middle">♠<br>♠<br><span class="rotate">♠</span></div>
      <div class="right">3<br>♠</div>
    </div>
    <div class="card red">
      <div class="left">5<br>♦</div>
      <div class="middle">♦ ♦<br><span class="center">♦</span><br>♦ ♦</div>
      <div class="right">5<br>♦</div>
    </div>
    <div class="card">
      <div class="left">7<br>♣</div>
      <div class="middle">♣ ♣<br><span class="center">♣</span><br>♣ ♣<br><span class="rotate">♣ ♣</span></div>
      <div class="right">7<br>♣</div>
    </div>
    <div class="card red">
      <div class="left">8<br>♥</div>
      <div class="middle">♥ ♥<br><span class="center">♥</span><br>♥ ♥<br><span class="center rotate">♥</span><br><span class="rotate">♥ ♥</span></div>
      <div class="right">8<br>♥</div>
    </div>
    <div class="card">
      <div class="left">10<br>♠</div>
      <div class="middle">♠ ♠<br><span class="center">♠</span><br>♠ ♠<br><span class="rotate">♠ ♠</span><br><span class="rotate center">♠</span><br><span class="rotate">♠ ♠</span></div>
      <div class="right">10<br>♠</div>
    </div>


  </main>

</body>

</html>

/* file: styles.css */
main {
  width: 800px;
  height: 900px;
  background-color: lavender;
}
#playing-cards {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.card {
  width: 200px;
  height: 300px;
  background-color: white;
  border: 2px solid black;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-shadow: 3px 3px 10px black;
}
.left {
  font-size: 30px;
}
.middle {
  font-size: 60px;
  align-self: center;
  line-height: 50px;
}
.right {
  font-size: 30px;
  align-item: flex-end;
  transform: rotate(180deg);
}
.red{
  color: red;
}
.rotate {
  display: inline-block;
  transform: rotate(180deg);
}
.center {
  display: inline-block;
  padding-left: 25px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.1 Safari/605.1.15

Challenge Information:

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

Screenshot 2025-11-21 at 10.52.30 AM
Screenshot 2025-11-21 at 10.52.30 AM1570×1756 200 KB

2

Congrats on tackling some of the more difficult playing card designs!

I notice a lot of br elements in your code to force alignment. Have you considered using flex and grid to control alignment instead?

3

I know this is not the best way to code the cards. I definitely am having some trouble with the flex and grid control and have to practice at them more., but the question still remains. why can I give the div element two different classes .card .red and they will work but when I give the span element two classes .rotate .center only one at a time will work and the .rotate over rules the .center if I apply both? THANKS!

4

I’m not exactly a CSS expert, and definitely think you should pursue a full flex/grid solution without all those br elements, but to solve your problem continuing with your current approach you could create a new class that uses relative positioning and a transform: translate() rotate() to move the item to the right by 25px and then rotate it.

5

I did solve the problem with the correct flexbox coding

6

I saw that post…and responded.

7

Tell us what’s happening:

So my code passes but I still have a few issues I need to work out.

  1. The space between the top and bottom row of cards after the flex wrap is too big. how do I fix this?
  2. I have created a center class to force centering on some of the icons in the middle of the card. I know this is not the best way but I’m have trouble figuring out how too center them properly.
  3. how do I fix the over lap of the rotated icons on the 7 and 10 cards?

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 red">
      <div class="left">A ♥</div>
      <div class="middle">♥</div>
      <div class="right">A ♥</div>
    </div>
    <div class="card">
      <div class="left">3 ♠</div>
      <div class="middle"><span class="center">♠</span><span class="rotate center">♠</span><span class="rotate center">♠</div>
      <div class="right">3 ♠</div>
    </div>
    <div class="card red">
      <div class="left">5 ♦</div>
      <div class="middle">♦ ♦<span class="center">♦</span>♦ ♦</div>
      <div class="right">5 ♦</div>
    </div>
    <div class="card">
      <div class="left">7 ♣</div>
      <div class="middle">♣ ♣<span class="center">♣</span>♣ ♣<span class="rotate">♣ ♣</span></div>
      <div class="right">7 ♣</div>
    </div>
    <div class="card red">
      <div class="left">8 ♥</div>
      <div class="middle">♥ ♥<span class="center">♥</span>♥ ♥<span class="rotate center">♥</span><span class="rotate">♥ ♥</span></div>
      <div class="right">8 ♥</div>
    </div>
    <div class="card">
      <div class="left">10 ♠</div>
      <div class="middle">♠ ♠<span class="center">♠</span>♠ ♠<span class="rotate">♠ ♠</span><span class="rotate center">♠</span><span class="rotate">♠ ♠</span></div>
      <div class="right">10  ♠</div>
    </div>


  </main>

</body>

</html>

/* file: styles.css */
main {
  width: 800px;
  height: 900px;
  background-color: lavender;
}
#playing-cards {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.card {
  width: 200px;
  height: 300px;
  background-color: white;
  border: 2px solid black;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-shadow: 3px 3px 10px black;
}
.left {
  display: flex;
  flex-direction: column;
  font-size: 30px;
  align-self: flex-start;
  width: 10px;
}
.middle {
  display: flex;
  flex-direction: column;
  font-size: 60px;
  align-self: center;
  line-height: 30px;
  padding-top: 100px;
  padding-bottom: 100px;
}
.right {
  display: flex;
  flex-direction: column;
  font-size: 30px;
  align-self: flex-end;
  transform: rotate(180deg);
  width: 10px;
}
.red{
  color: red;
}
.rotate {
  display: inline-block;
  transform: rotate(180deg);
}
.center {
  padding: 25px
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.1 Safari/605.1.15

Challenge Information:

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

Screenshot 2025-11-22 at 11.01.53 AM
Screenshot 2025-11-22 at 11.01.53 AM1588×1792 199 KB

8

Glad to see you’re moving forward with a full flex solution. But your HTML needs to be refactored a bit more to enclose each set of items in a span element (e.g. <div class="middle"><span>♣ ♣</span>…) Otherwise, flex can’t know what your items are. Then, in your CSS, add the correct property to your .middle selector to center the items and adjust the line height so the items aren’t cramped together.

9

I have merged your two topics on the Playing Cards, please open only one topic per challenge