Four cards

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!

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.

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