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

HTML-CSS
1

Tell us what’s happening:

Hey everyone, I am stuck. Please can you help me clean this up? I got a little stuck around stage 5 so decided to follow a youtube video from Rob at precodecodecamp to help guide me through. All of his tests pass but mine don’t. Error is " there must be at least 3 divs within each “card” element. I’ve tried using closing tags etc, copied code like for like, and then copied and pasted to duplicate the other cars and change the tags, numbers, reverse symbols etc. I really can’t see my error here!

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">
    <div>A</div>
    <div>♠</div>
  </div>
 <div class="middle">
  <div>♠</div>
  </div>
 <div class="right">
  <div class="flip">♠</div>
  <div class="flip">A</div>
  </div>
 <div class="card">
   <div class="left">
    <div>2</div>
    <div>♣</div>
  </div>
 <div class="middle">
  <div>♣</div>
  <div>♣</div>
  </div>
 <div class="right">
  <div class="flip">♣</div>
  <div class="flip">2</div>
  </div>
<div class="card red">
   <div class="left">
    <div>3</div>
    <div>♥</div>
  </div>
 <div class="middle">
  <div>♥</div>
  <div>♥</div>
  <div class="flip">♥</div>
  </div>
 <div class="right">
  <div class="flip">♥</div>
  <div class="flip">3</div>
  </div>
 </main>
</body>
</html>

/* file: styles.css */
body{
  background-color: #d8bfd8;
}

#playing-cards{
  margin-top: 100px;
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  display: flex;
  justify-content: space-between;
  min-width: 250px;
  max-width: 250px;
  height: 350px;
  font-size: 30px;
  background-color: white;
  border: 2px solid black;
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 3px 3px 3px gray;
  border-radius: 15px;
  text-align: center;
}

.left{
  align-self: flex-start;
}

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

  .right{
    align-self: flex-end;
  }

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

  .red{
    color: red;
  }

Your browser information:

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

Challenge Information:

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

2

Hi @Andi,

Please focus on User Story #3. It says you should have 3 div elements with a class of card.

Format your code so it’s easier to read.

Remember, a complete HTML element has both an opening tag and a closing tag.

Happy coding!

3

the language is a bit to cryptic for me. Does this mean that the left middle and right divs should also have a class of card?

4

No. It means your .card divs are incomplete.

5

thanks for your replies - however unless someone tells me how to correct my mistake i will not learn. I cannot see how it is not complete

6

for each <div>, there must be one </div>, you can use a tool like an html validator like The W3C Markup Validation Service (paste your HTML there and use the Check button)

for how to fix, take the first <div class="card">, where should it close? what should it contain? add the closing tag so that it has inside only what it should have

an other thing you can use to individuate closing tags, is that when you put the cursor in the opening tag, the closing tag is highlighted:

image
image762×292 25.2 KB

(it does also the opposite, cursor in closing tag, the opening tag is highlighted)

if you put the cursos on the ones with the class card, there isn’t a closing tag highlighted

7

Thanks so much for your guidance. I don’t know how I made so many mistakes with the DIVS. I ended up restarting the whole thing to clean it up. Thanks again, problem solved! :smile: