freeCodeCamp.org

HTML-CSS
1

Hi i can’t manage to find how to make the cards looking in different colors
My objective = 2 red cards and 2 black cards, can you help me please?

<body>
<main id="playing-cards">
  <div class="card">
    <div class="left Pique">A
      </div>
      <div class="middle Pique">
        </div>
        <div class="right Pique">♦
         </div> 
         </div>
         <hr>
           <div class="card">
              <div class="left cœurs">3
                </div>
                <div class="middle cœurs">
</div>
                  <div class="right cœurs">♥
</div>
</div>
<hr>
    <div class="card">
      <div class="left red">Q
</div>
        <div class="middle red">
</div>
          <div class="right red">♥
</div>
</div>
<hr>
      <div class="card">
        <div class="left black">J
</div>
          <div class="middle black">
</div>
            <div class="right black">♥
</div>
      </div>
      <hr>          
      </main> 


body {
  background: linear-gradient(#00FA9A, #71F53E, #3CB371);
}

#playing-cards {
  gap: 20px;
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
justify-content: center;  
}

.card {
  display:flex;
justify-content:space-between;
background:gainsboro;
  width:160px;
  height:270px;
 border: 2px solid fuchsia;
  border-radius: 5px;
  min-width: 250px;
  max-width: 250px;
}

.left {
  display:flex;
  align-self:flex-start;
     margin:2px auto;
     flex-direction: column;

}

.middle {
  display:flex;
   align-self:center;
      margin:2px auto;
flex-direction: column;
}

.right {
    display:flex;
flex-flow: column wrap-reverse;  
 align-self:flex-end;
   margin:2px auto;
}

Pique, black{
background-color: black;
}

cœurs, red{
background-color: red
}

thank you and sorry if i inserted the code in the wrong formatting type

2

The syntax is not correct for class selectors.

3 
`Preformatted text`.Pique, black{
background-color: black;
}

Thank you, is this the correct syntax?

4

for .Pique, yes. But black, red, and cœurs are also being referenced in class attributes, are they not? So you will need to use the same syntax for those class selectors.

1 Like
5

thank you i tried and it worked as i was hoping, with a minor change. This accounts of the problem of having a black background, instead i used red for optimal contrast :laughing: :man_technologist:

  background:
{ linear-gradient(#00FA9A, #71F53E, #3CB371); }

#playing-cards {
  gap: 20px;
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
justify-content: center;  
}

.card {
  display:flex;
justify-content:space-between;
background:gainsboro;
  width:160px;
  height:270px;
 border: 2px solid fuchsia;
  border-radius: 5px;
  min-width: 250px;
  max-width: 250px;
}

.left {
  display:flex;
  align-self:flex-start;
     margin:2px auto;
     flex-direction: column;

}

.middle {
  display:flex;
   align-self:center;
      margin:2px auto;
flex-direction: column;
}

.right {
    display:flex;
flex-flow: column wrap-reverse;  
 align-self:flex-end;
   margin:2px auto;
}

.Pique, .black{
background-color: red

}

.cœurs, .red{
background-color: red
}