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 page with Sass

@Caiqueoak

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


I couldn't match the color of "why us" section.

Community feedback

P
tediko• 6,500

@tediko

Posted

Hello, Caique Carvalho da Silva! 👋

Good job on this one! 🎉 Your solution responds well and overall looks good. Here's my suggestions:

  • The div element has no special meaning at all. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. For .header-title use heading <h1> - <h6> element. For .header-subtitle you can use paragraph <p> element. This also applies to text in other sections.
  • On mobile resolution add width: 100% to .main-container and remove max-width: 400px so your container will stretch across different screen sizes. Keep max-width: 660px on 660px media query to prevent it for stretching too much.
  • Use unordered list <ul> for .reasons-list. HTML lists are used to present list of information in well formed and semantic way.

Good luck with that, have fun coding! 💪

Marked as helpful

1
Ahmed Faisal• 5,095

@afrussel

Posted

Use color picker add on to pick color from images file

Marked as helpful

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