Freecodcamp CSS Project “Build a Page of Playing Cards”
A
♥
♥
♥
A
♥
♥
K
♠
♠
♠
K
♠
♠
Q
♣
♣
♣
Q
♣
♣
J
♦
♦
♦
J
♦
♦
10
♥
♥
♥
10
♥
♥
Live Check: https://saideresearch.github.io/playingcards/
Code:
<!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>
<style>
#playing-cards {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
min-height: 100vh;
padding: 20px;
background-color: #2e7d32;
}
.card {
display: flex;
justify-content: space-between;
width: 200px;
height: 280px;
background-color: white;
border-radius: 12px;
padding: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
font-size: 28px;
}
.left {
align-self: flex-start;
color: #d32f2f;
}
.middle {
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
font-size: 48px;
}
.right {
align-self: flex-end;
transform: rotate(180deg);
color: #d32f2f;
}
.suit {
font-size: 32px;
}
</style>
</head>
<body>
<main id="playing-cards">
<!-- Ace of Hearts -->
<div class="card">
<div class="left">
A<br>♥
</div>
<div class="middle">
<div class="suit">♥</div>
</div>
<div class="right">
A<br>♥
</div>
</div>
<!-- King of Spades -->
<div class="card">
<div class="left">
K<br>♠
</div>
<div class="middle">
<div class="suit">♠</div>
</div>
<div class="right">
K<br>♠
</div>
</div>
<!-- Queen of Clubs -->
<div class="card">
<div class="left">
Q<br>♣
</div>
<div class="middle">
<div class="suit">♣</div>
</div>
<div class="right">
Q<br>♣
</div>
</div>
<!-- Jack of Diamonds -->
<div class="card">
<div class="left">
J<br>♦
</div>
<div class="middle">
<div class="suit">♦</div>
</div>
<div class="right">
J<br>♦
</div>
</div>
<!-- 10 of Hearts -->
<div class="card">
<div class="left">
10<br>♥
</div>
<div class="middle">
<div class="suit">♥</div>
</div>
<div class="right">
10<br>♥
</div>
</div>
</main>
</body>
</html>Try in your own way