Four cards

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 12 months ago

  Hello there 👋. Good job on completing the challenge !

  • The issue is that the nth-child selectors are not working as expected because each .card is nested within a different .container, and the nth-child is based on the immediate parent.

    One solution: Instead of relying on nth-child to select specific cards, create separate classes for each color and apply them directly to the cards. This approach helps avoid complex and error-prone CSS selectors.

    You can add a specific class for each color to the cards like:

    <div class="card card-cyan">...</div>
    <div class="card card-orange">...</div>
    <div class="card card-red">...</div>
    <div class="card card-blue">...</div>
    

    css

    .card-red:after {
      border-top-color: var(--red-color);
    }
    .card-red:after {
      border-top-color: var(--blue-color);
    }
    ...
    

  • Another solution: Instead of having a separate .container for each .card, you can simplify your structure and use a single .container for all cards, but you need to change all the styles for the cards.

  • There's a lot of repeated code in your CSS. Consider consolidating common styles to make your code more concise and easier to maintain.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  0

  ---

  

  JulienLach•260

  @JulienLachPosted 12 months ago

  @MelvinAguilar Ok thank you !!

  0
• 

  MaximilianoDanielGarcia•2,000

  @MaximilianoDanielGarciaPosted 12 months ago

  Hi Julien, good job!

  I think you should put the cards in the same container. After that you can organize them with a CSS grid.

  Marked as helpful

  0
• 

  sanju321GH•270

  @sanju321GHPosted 12 months ago

  yo hi, can i know your problem i couldn't understand what you were saying.

  0

  ---

  

  JulienLach•260

  @JulienLachPosted 12 months ago

  @sanju321GH Hello ! Thanks for your reply, my issue is : how to call one by one the cards for one color for each ? i've used the nth:child css property but didn't work , have you checked the code ?

  0