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

Responsive Single Price Grid Component

Edwin Mugoโ€ข 170

@EdwinMugo

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey all! ๐ŸŒŸ In this fantastic project, an eye-catching pricing component was crafted using the dynamic duo of HTML and CSS. ๐Ÿš€ Leveraging the power of CSS Grid, the layout elegantly organizes sections, with the first card cleverly spanning two rows for a visually striking effect. ๐ŸŽจ ๐Ÿงน The project showcases a savvy use of selectors, with the introduction of the span + span selector for targeted styling. This allows for cool effects like enlarging the price while gracefully fading the "per month" text. ๐ŸŒˆ

The implementation embraces responsive design principles, gracefully adjusting to different screen sizes for a seamless user experience. Kudos to the creator for blending creativity, functionality, and newfound CSS techniques! ๐Ÿ‘โœจ

Community feedback

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