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

HTML-CSS
1

Tell us what’s happening:

Last night I completed the assignment and passed. However, I did not do certain things that were in the demo, like my 3 middle pictures weren’t going downwards (vertically) like the demo . Today I decided to go back and fix the middle cards going downwards thing. I got the cards to go vertically down but only by putting
in my html. I am pretty sure this isn’t the right way to go about it. Can you look at my new updated code to tell me where I’m going wrong.

Your code so far

HTML

<main id="playing-cards">
  <div class="card">
      <div class="left">
        2<BR>♠</div>
      <div class="middle">♠</div>
      <div class="right">2<br>♠</div>
  </div>
 <div class="card">
      <div class="left">3<br>♣</div>
   <div class="middle">♣<BR><span>♣</span></div>
      <div class="right">3<br>♣</div>
  </div>
        <div class="card">
      <div class="left">4<br>♦</div>
      <div class="middle">♦<BR>♦</div>
          <div class="right">4<br>♦</div>
  </div>
  </main>

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);
}
5

Hello! @maricoder If this is a freeCodeCamp project, go to it, and create a forum there, so we know what your on, and so we can test our edits to the code before, giving you a problem to fix.

6

This was a free code camp project the css project on building playing cards. But it looks like this was too easy no one else asked about it. …that I can see. Please tell me the spot you mean by “go to it.”

7

So when you fail a test three times, a ask for help button appears, click it it will give you two options check those, and fill in the information, when you click create a forum button.

8

What if you passed the test but have a question about how to improve your coding skills?

9

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

10

Thank you. I will remember that next time I paste code.