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

HTML-CSS
1

Tell us what’s happening:

i think somthing is wrong, the aperance din’t seem to change

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Playing Cards</title>

</head>

<body>
<main id="playing-cards">
<div class="card">
<div class="left">♠</div>
<div class="middle">♠</div>
<div class="right">♠</div>
</div>
<div class="card">
<div class="left">♣</div>
<div class="middle">♣</div>
<div class="right">♣</div>
</div>
<div class="card">
<div class="left">♦</div>
<div class="middle">♦</div>
<div class="right">♦</div>
</div>

</main>
</body>

</html>

/* file: styles.css */
#playing-cards{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
}
.card{display:flex;
justify-content:space-between;
}
.left{align-self:flex-start;}
.middle{align-self:center;
flex-direction:column;
}
.right{align-self:flex-end}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

image
image1366×641 34.3 KB

Challenge Information:

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

2

First, set the width and height properties on your card. Then add a border and background color to make it visually different.