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

HTML-CSS
1

Tell us what’s happening:

I’ve completed this lab but, I’m still unsure how to get my spades symbol to center like the example. Please provide some feedback on how I could clean up my code and get the desired result, would be greatly appreciated! (Hopefully this post helps someone out in the future) Happy coding :]

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">
        <span>A</span>
        <span>♠</span>
        </div>
      <div class="middle">♠
      </div>
      <div class="right">
        <span id="trans">A</span>
        <span id="trans">♠</span>
      </div>
    </div>
    <div class="card">
      <div class="left">
        <span>2</span>
        <span>♣</span>
      </div>
      <div class="middle clubs">
        <span>♣</span>
        <span id="trans">♣</span>
      </div>
      <div class="right">
        <span id="trans">2</span>
        <span id="trans">♣</span>
      </div>
    </div>
    <div class="card">
      <div class="left">
        <span>3</span>
        <span>♥</span>
      </div>
      <div class="middle">
        <span>♥</span>
        <span>♥</span>
                <span id="trans">♥</span>       
      </div>
      <div class="right">
        <span id="trans">
          3
        </span>
        <span id="trans">
          ♥
        </span>
      </div>
    </div>
    </div>
  </main>
</body>

</html>

/* file: styles.css */
#playing-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  border: 2px solid black;
  max-width: 1100px;
  height: 85vh;
  margin: 30px auto;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: 250px;
  max-height: 350px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 2px 2px 5px;
}

.left {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  font-weight: bold;
  padding: 7px;
  font-size: 1.9rem;
  border: 1px solid black;
  height: 100%;
  width: 94%;
  min-height: 0;
  max-height: 70px;
}

.middle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: center;
  font-size: 4.5rem;
  border: 1px solid black;
  width: 60px;
  height: 100%;
  max-height: 100%;
  
}

.right {
  display: flex;
  flex-direction: column-reverse;
  align-self: flex-end;
  border: 1px solid black;
  padding: 5px;
  font-size: 1.9rem;
  font-weight: bold;
  height: 30%;
  width: 96%;
  min-height: 40px;
  
}

#trans {
  transform: rotate(180deg);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

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

2

Just realized that the span element is an inline element. I just learned something!

3 Likes
3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.