@andreasremdt
Posted
Hey @RayAsh37,
Congrats on solving this challenge! I'd love to see how you tackle the responsive part :-) Your solution looks really good, here are a couple of layout tips I can give you:
- Try using the correct web font. You used Roboto Condensed, but the challenge uses other font families. This would make the design match even closer.
- I love that you used
mix-blend-mode
on the buttons and didn't hard-code the color for each button individually. - You used
margin-top: 5rem
to push the buttons down. However, this can look weird if the text doesn't have the same length across all three cards. You can observe this issue by resizing your browser's viewport, once you reach smaller screen sizes the buttons won't be aligned horizontally anymore. To fix this, utilize flexbox. On your cards.sub-card
, applydisplay: flex; flex-direction: column; align-items: start;
. Then, on the buttons, replacemargin-top: 5rem
withmargin-top: auto
. This will push the buttons to the very bottom, no matter how big your screen is. - You could use
article
elements instead ofdiv
elements for the cards, to make them more semantic.
Hope this feedback helps, let me know if you have any questions :-)
Marked as helpful