Tell us what’s happening:
Hello, I completed the entire Build a Page of Playing Cards exercise but I am not satisfied with the final product. How do I make it look more like the given example. Some things I would like to include are having the suit fit more precisely in the corners. Also, I would like to have card number ie. 5 have 5 spades neatly organized in the card.
Thank you
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">
<p>♣</p>
</div>
<div class="middle">
<p>7</p>
</div>
<div class="right">
<p>♣</p>
</div>
</div>
<div class="card">
<div class="left">
<p>♠</p>
</div>
<div class="middle">
<p>5</p>
</div>
<div class="right">
<p>♠</p>
</div>
</div>
<div class="card">
<div class="left">
<p>♥</p>
</div>
<div class="middle">
<p>8</p>
</div>
<div class="right">
<p>♥</p>
</div>
</div>
</main>
</body>
</html>
/* file: styles.css */
#playing-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.card {
display: flex;
justify-content: space-between;
width: 50px;
height: 100px;
border: solid black 2px;
}
.left {
align-self: flex-start;
}
.middle {
display: flex;
align-self: center;
flex-direction: column;
}
.right {
align-self: flex-end;
}
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.5 Safari/605.1.15
Challenge Information:
Build a Page of Playing Cards - Build a Page of Playing Cards