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

HTML-CSS
1

Tell us what’s happening:

I’m not to sure how to describe what I’m struggling with here but I’ll do my best to explain. As you can see i have little to no issues figuring out how to get the first 3 cards of each suite to look correct but once i get to the 4th card in the series i can’t seem to get the symbols to sit correctly on top of one another. With 2 of the suite symbols on the top and 2 on the bottom.

Your code so far

<!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 ace hearts">
      <div class="left">A ♥</div>
      <div class="middle">♥</div>
      <div class="right"><span>A ♥</span></div>
    </div>
    <div class="card two hearts">
      <div class="left">2 ♥</div>
      <div class="middle">♥ <span>♥</span></div>
      <div class="right"><span>♥</span> 2</div>
    </div>
    <div class="card three hearts">
      <div class="left">3 ♥</div>
      <div class="middle">♥ ♥ <span>♥</span></div>
      <div class="right"><span>3 ♥</span></div>
    </div>
    <div class="card four hearts">
      <div class="left">4 ♥</div>
      <div class="middle">♥ ♥ <span>♥ ♥</span></div>
      <div class="right"><span>4 ♥</span> </div>
    </div>
    <div class="card five hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card six hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card seven hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card eight hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card nine hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card ten hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card jack hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card queen hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card king hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <hr>
    <div class="card ace clubs">
      <div class="left">A ♣</div>
      <div class="middle">♣</div>
      <div class="right"><span>A ♣</span></div>
    </div>
    <div class="card two clubs">
      <div class="left">2 ♣</div>
      <div class="middle">♣ <span>♣</span></div>
      <div class="right"><span>2 ♣</span></div>
    </div>
    <div class="card three clubs">
      <div class="left">3 ♣</div>
      <div class="middle">♣ ♣ <span>♣</span></div>
      <div class="right"><span>3 ♣</span></div>
    </div>
    <div class="card four clubs">
      <div class="left">4 ♣</div>
      <div class="middle">♣ ♣ <span>♣ ♣</span></div>
      <div class="right"><span>4 ♣</span></div>
    </div>
    <div class="card five clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card six clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card seven clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card eight clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card nine clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card ten clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card jack clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card queen clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card king clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <hr>
    <div class="card ace diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card two diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card three diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card four diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card five diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card six diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card seven diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card eight diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card nine diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card ten diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card jack diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card queen diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card king diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <hr>
    <div class="card ace spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card two spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card three spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card four spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card five spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card six spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card seven spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card eight spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card nine spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card ten spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card jack spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card queen spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card king spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <hr>
  </main>
</body>

</html>


#playing-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 20px;
}

.card {
  display: flex;
  justify-content: space-between;
  width: 100px;
  height: 150px;
  background-color: ghostwhite;
  border: 2px solid dimgrey;
  border-radius: 5px;
  box-shadow: -2px -2px 0 darkgray;
}

.left {
  display: flex;
  align-self: flex-start;
  flex-direction: column;
  font-weight: bold;
  width: 10px;
}

.middle {
  display: flex;
  align-self: center;
  flex-direction: column;
  width: 10px;
}

.right {
  display: flex;
  align-self: flex-end;
  flex-direction: column;
  font-weight: bold;
  width: 10px;
}

.hearts, .diamonds{
  color: red;
}

.clubs, .spades {
  color: black;
}

span {
  transform: rotate(180deg);
}

Your browser information:

User Agent is: Mozilla/5.0 (iPad; CPU OS 18_6_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Brave/1 Mobile/15E148 Safari/604.1

Challenge Information:

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

2

I recommend removing the width property setting in your CSS and creating a class selector for the rotation so you can apply it incrementally rather than applying it to all span elements.

3

Thank you so much for your help i did as you suggested and removed the width property from the middle class selector but while my 4’s look correct, my 3’s have a new issue where they don’t sit correctly now ill post the code in the following lines.

<!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 ace hearts">

<div class="left">A ♥</div>

<div class="middle">♥</div>

<div class="right"><span class="flip">A ♥</span></div>

</div>

<div class="card two hearts">

<div class="left">2 ♥</div>

<div class="middle">♥ <span class="flip">♥</span></div>

<div class="right"><span class="flip">♥</span> 2</div>

</div>

<div class="card three hearts">

<div class="left">3 ♥</div>

<div class="middle">♥ ♥ <span class="flip">♥</span></div>

<div class="right"><span class="flip">3 ♥</span></div>

</div>

<div class="card four hearts">

<div class="left">4 ♥</div>

<div class="middle">♥ ♥ <span class="flip">♥ ♥</span></div>

<div class="right"><span class="flip">4 ♥</span> </div>

</div>

<div class="card five hearts">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card six hearts">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card seven hearts">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card eight hearts">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card nine hearts">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card ten hearts">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card jack hearts">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card queen hearts">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card king hearts">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<hr>

<div class="card ace clubs">

<div class="left">A ♣</div>

<div class="middle">♣</div>

<div class="right"><span>A ♣</span></div>

</div>

<div class="card two clubs">

<div class="left">2 ♣</div>

<div class="middle">♣ <span>♣</span></div>

<div class="right"><span>2 ♣</span></div>

</div>

<div class="card three clubs">

<div class="left">3 ♣</div>

<div class="middle">♣ ♣ <span>♣</span></div>

<div class="right"><span>3 ♣</span></div>

</div>

<div class="card four clubs">

<div class="left">4 ♣</div>

<div class="middle">♣ ♣ <span>♣ ♣</span></div>

<div class="right"><span>4 ♣</span></div>

</div>

<div class="card five clubs">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card six clubs">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card seven clubs">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card eight clubs">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card nine clubs">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card ten clubs">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card jack clubs">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card queen clubs">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card king clubs">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<hr>

<div class="card ace diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card two diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card three diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card four diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card five diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card six diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card seven diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card eight diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card nine diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card ten diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card jack diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card queen diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card king diamonds">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<hr>

<div class="card ace spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card two spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card three spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card four spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card five spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card six spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card seven spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card eight spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card nine spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card ten spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card jack spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card queen spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<div class="card king spades">

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</div>

<hr>

</main>

</body>

</html>

#playing-cards {

display: flex;

justify-content: center;

flex-wrap: wrap;

flex-direction: row;

gap: 20px;

}

.card {

display: flex;

justify-content: space-between;

width: 100px;

height: 150px;

background-color: ghostwhite;

border: 2px solid dimgrey;

border-radius: 5px;

box-shadow: -2px -2px 0 darkgray;

}

.left {

display: flex;

align-self: flex-start;

flex-direction: column;

font-size: 18px;

font-weight: bold;

width: 10px;

padding: 4px;

}

.middle {

display: flex;

align-self: center;

flex-direction: column;

flex-wrap: wrap;

justify-content: center;

padding: 4px;

}

.right {

display: flex;

align-self: flex-end;

flex-direction: column;

font-size: 18px;

font-weight: bold;

width: 10px;

padding: 4px;

}

.hearts, .diamonds{

color: red;

}

.clubs, .spades {

color: black;

}

.flip {

transform: rotate(180deg);

}
4

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

have you tried wrapping the second ♥ in a span tag without .flip?

1 Like
6

Look up the difference between justify-content and align-items.

1 Like
7 

<!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 ace hearts">
      <div class="left">A ♥</div>
      <div class="middle">♥</div>
      <div class="right">
        <span class="flip">A ♥</span>
      </div>
    </div>
    <div class="card two hearts">
      <div class="left">2 ♥</div>
      <div class="middle">♥ 
        <span class="flip">♥</span>
      </div>
      <div class="right">
        <span class="flip">2 ♥</span>
      </div>
    </div>
    <div class="card three hearts">
      <div class="left">3 ♥</div>
      <div class="middle">♥
        <span>♥</span>
        <span class="flip">♥</span>
      </div>
      <div class="right">
        <span class="flip">3 ♥</span>
      </div>
    </div>
    <div class="card four hearts">
      <div class="left">4 ♥</div>
      <div class="middle">♥ ♥ 
        <span class="flip">♥ ♥</span>
      </div>
      <div class="right">
        <span class="flip">4 ♥</span>
      </div>
    </div>
    <div class="card five hearts">
      <div class="left">5 ♥</div>
      <div class="middle">
        <span>♥ ♥</span>
        <span class="center">♥</span>
        <span>♥ ♥</span>
      </div>
      <div class="right"></div>
    </div>
    <div class="card six hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card seven hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card eight hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card nine hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card ten hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card jack hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card queen hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card king hearts">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <hr>
    <div class="card ace clubs">
      <div class="left">A ♣</div>
      <div class="middle">♣</div>
      <div class="right"><span>A ♣</span></div>
    </div>
    <div class="card two clubs">
      <div class="left">2 ♣</div>
      <div class="middle">♣ <span>♣</span></div>
      <div class="right"><span>2 ♣</span></div>
    </div>
    <div class="card three clubs">
      <div class="left">3 ♣</div>
      <div class="middle">♣<span>♣</span>♣</div>
      <div class="right"><span>3 ♣</span></div>
    </div>
    <div class="card four clubs">
      <div class="left">4 ♣</div>
      <div class="middle">♣ ♣ <span>♣ ♣</span></div>
      <div class="right"><span>4 ♣</span></div>
    </div>
    <div class="card five clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card six clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card seven clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card eight clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card nine clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card ten clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card jack clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card queen clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card king clubs">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <hr>
    <div class="card ace diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card two diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card three diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card four diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card five diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card six diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card seven diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card eight diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card nine diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card ten diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card jack diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card queen diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card king diamonds">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <hr>
    <div class="card ace spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card two spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card three spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card four spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card five spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card six spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card seven spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card eight spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card nine spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card ten spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card jack spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card queen spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="card king spades">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <hr>
  </main>
</body>

</html>



#playing-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 20px;
}

.card {
  display: flex;
  justify-content: space-between;
  width: 100px;
  height: 150px;
  background-color: ghostwhite;
  border: 2px solid dimgrey;
  border-radius: 5px;
  box-shadow: -2px -2px 0 darkgray;
}

.left {
  align-self: flex-start;
  font-size: 18px;
  font-weight: bold;
  width: 10px;
  padding: 5px;
}

.middle {
  display: flex;
  align-self: center;
  flex-direction: column;
  font-size: 25px;
}

.right {
  align-self: flex-end;
  font-size: 18px;
  font-weight: bold;
  width: 10px;
  padding: 5px;
  transform: rotate(180deg)
}

.hearts, .diamonds{
  color: red;
}

.clubs, .spades {
  color: black;
}

.flip {
  transform: rotate(180deg);
}

.center {
  align-self: center;
}

I believe I’ve gotten the hang of things now after reviewing my notes on the topics suggested this is my progress so far. I’m pretty sure i understand what i should be doing now at this point but if im still missing anything please feel free to let me know! :smiley: