Flexbox, css, html5

Hi Yann! Your solution looks great, well done! Everything looks responsive, although I am not sure about setting a width of the container in column to 300px - you can get viewports that are less than that, but the issue would be just visual in this case (the user would still be able to click the buttons). I would just set a max-width instead, I think. And a few more tips:

• Adding a transition to your hover states makes the design look more polished and professional

• Instead of adding the rounded corners on end cards individually, you can set border-radius on the container, just make sure to add overflow: hidden as well - it's a good trick to know :)

• Some people consider using ids in CSS to be a bad practice (but then again, others disagree and say it's perfectly fine). Another way to add the background colors to your card would be to add helper classes, like .yellow {background-color: yellow;} or to use a pseudo selector nth-of-type(n) This is a good article that explains it, I think

Hope this helps :)

Congrats on submitting your first solution, Yann! I hope you enjoyed the challenge. Here's some feedback on your solution:

• You've currently got multiple h1 elements. Although this is valid HTML it's generally still considered a bad practice, as it can cause accessibility issues with the content hierarchy. As this challenge is for a component that would typically be a small part of a larger page I'd say h2 headings would be good options here.
• You could imagine that the "Learn More" call-to-actions would link through to other pages on a real site. So I'd go with anchor elements here instead of buttons.
• Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.

I hope that's helpful. Keep up the great work!