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

Peter Hannellโ€ข 200

@peterhannell

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


My solution to this challenge. I'm not 100% satisfied with it but I think it's close.

Any feedback and suggestions much appreciated.

Community feedback

Moโ€ข 130

@mo-rob-1

Posted

Good job dude, looks great! Also noticed in your code that you used the BEM technique and CSS custom properties.

Keep up the good work :)

Marked as helpful

1
Rio Cantreโ€ข 9,710

@RioCantre

Posted

Hello there! Good job in this challenge. Viewing the solution, I think you should consider the following as wellโ€ฆ

  • Adjust the border radius of the buttons into border-radius: 30px;
  • Add border-bottom-left-radius: 10px; and border-top-left-radius: 10px; in .col--one rule set
  • Add border-bottom-right-radius: 10px; and border-top-right-radius: 10px; in .col--three
  • Apply the same borders in the responsive design but on different side.

Above all, Well done! Keep it up and Hope this is helpful!

Marked as helpful

1
Hexerโ€ข 3,680

@Phalcin

Posted

Nice work man.

Marked as helpful

1
Mayur Maliโ€ข 810

@Mayurtm29

Posted

Border radius is missing. overall good work. happy coding

Marked as helpful

1

Peter Hannellโ€ข 200

@peterhannell

Posted

@Mayurtm29 oops! thank you.

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