Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 column preview card component using HTML & CSS

ALAS 30

@ALAS08

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All feedbacks are welcome!

Community feedback

@nenadmne

Posted

I like your coding style, you kept it pretty simple. I noticed few things that you may consider in future coding.

1.What would made it even simplier is that, if you have more classes with same attribute, you can wrap them all like this .sedans, .suv, .luxury { width: 202px; height:350px}. So instead repeating 3 times, you got their box dimensions on one spot. Easier to change them after, if need.

2.Also this line @media screen and (min-width: 992px) { .main-container {display: flex;} is not needed becuz you already stated that display:flex; in mobile version.

Nice solution, keep up =)

Marked as helpful

0

ALAS 30

@ALAS08

Posted

@nenadmne

Thank you!

Your suggestions are very helpful. I didn't know that you can wrap classes like that. Guess I'll try using it since it's really much easier to use especially if I do have a lot of attributes I needed to change.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord