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

HTML-CSS
1

Tell us what’s happening:

No matter what I put in the styles.css, none of the checkboxes get checked. I think this lab is bugged? Can anyone help. My first 7 steps are checked, which is the HTML portion. I’m following these instructions to a tee:

  1. You should build a webpage that displays at least three playing cards.
  2. You should have a main element with an ID of playing-cards.
  3. Within your #playing-cards element, you should have at least three div elements, each with a class of card.
  4. Within each .card element, you should have three div elements, the first with a class of left, the second with a class of middle, and the third with a class of right.
  5. Your #playing-cards element should use flexbox to horizontally center its children, allow them to wrap, and put a 20px space between them.
  6. Each of your .card elements should use flexbox to justify its children using space-between.
  7. Each of your .left elements should use flexbox item properties to align itself at the start of its’ parent container.
  8. Each of your .middle elements should use flexbox item properties to align itself in the center of its’ parent container.
  9. Each of your .right elements should use flexbox item properties to align itself at the end of its parent container.
  10. Each of your .middle elements should use flexbox to display its children in a column.
    1. You should have a main element with an id of playing-cards.

  • Passed:2. You should have at least three div elements with a class of card within your #playing-cards element.

  • Passed:3. Each of your .card elements should have a width and height.

  • Passed:4. Each of your .card elements should have exactly three div elements as children.

  • Passed:5. You should have a div with a class of left within each .card element.

  • Passed:6. You should have a div with a class of middle within each .card element.

  • Passed:7. You should have a div with a class of right within each .card element.

    1. You should have a #playing-cards selector that sets its elements’ display to flex.

  • Failed:9. You should have a #playing-cards selector that sets its elements’ justify-content to center.

  • Failed:10. You should have a #playing-cards selector that sets its elements’ flex-wrap to wrap.

  • Failed:11. You should have a #playing-cards selector that sets its elements’ gap to 20px.

  • Failed:12. You should have a .card selector that sets its elements’ display to flex.

  • Failed:13. You should have a .card selector that sets its elements’ justify-content to space-between.

  • Failed:14. You should have a .left selector that sets its elements’ align-self to flex-start.

  • Failed:15. You should have a .middle selector that sets its elements’ align-self to center.

  • Failed:16. You should have a .right selector that sets its elements’ align-self to flex-end.

  • Failed:17. You should have a .middle selector that sets its elements’ flex-direction to column.

Your code so far

body {
background-color: Thistle;
min-height: 100vh;
}

.red {
color: red;
}

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

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

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

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

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

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

.middle-section {
display: flex;
justify-content: center;
}

<!-- 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>

</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 */
* {
  box-sizing: border-box;
}

#playing-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 10px;
 }

 #playing-cards::after {
  content: "";
  width: 180px;
}

.card {
justify-content: space-between;
height: 300px;
border: 2px solid black;
width: 180px;
display: flex;
line-height: .8em
}

#playing-cards::after {
  content: "";
  width: 380px;              
}


.left {
align-self: flex-start; 
vertical-align: top;
font-size: 40px;
flex-wrap: wrap;
line-height: .8em;
  padding: 5px;

}

.middle {
display: flex;
align-self: center;
flex-direction: column;
color: red;
font-size: 40px;
align-items: center;
line-height: .8em;
 }

.right {
align-self: flex-end;
font-size: 40px;
line-height: .8em;
transform: rotate(180deg);
  padding: 5px;
}

span {
transform: rotate(180deg);
}

Your browser information:

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

Challenge Information:

Build a Page of Playing Cards - Build a Page of Playing Cards
https://www.freecodecamp.org/learn/full-stack-developer/lab-page-of-playing-cards/build-a-page-of-playing-cards

2

Looks like your CSS isn’t even linked to your HTML. Now that I’ve mentioned it, I’m sure you can figure out what you’re missing lol. Your page looks pretty otherwise.

1 Like
3

I had that linked in the actual code, but my cut and paste sorta screwed up.

<!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="styles.css" rel="stylesheet">

</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>
4

Hi @gregory.teng

image
image562×106 3.54 KB

The syntax highlighting is showing there is a syntax error.
The other element start with an orange tag, have blue for the attribute property, and a light green for the attribute property value.

Your link element is completely white, so start debugging there.

I edited your post directly above so the code correctly formats on the forum.

Happy coding

1 Like
5

<link=“styles.css” rel=“stylesheet”> is the wrong syntax.
There is no = after link, correct the syntax and it would work. Hope this helps

1 Like
6

Thank you!! I’ll take a look. Appreciate your help.

2 Likes
7

Thank you all! I forgot the href. Oops! Appreciate you all looking at my code. Love you guys!

2 Likes
8

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