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 Landing Using Flexboox

@aDevMister

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


All Feedbacks Is Welcome. :)

Community feedback

@javascriptor1

Posted

Hi AbdulQudus Ajape ,

Here are some quick observations for your solution :

1- You have set a breakpoint at 900px to switch to desktop design which I guess is too much. I think 820px for the mobile view is a good option to consider.

2- The color for why us section needs to be changed to better match the design. If you are having a problem with colors and/or lighting ( like me sometimes ), and are unable to work with colors provided with the challenge, then I strongly advise using powertoys color picker utility. You can activate it by pressing [ ctrl + win + c ]. It will read the color and you have the option to copy it directly and paste it into your code.

3- for the desktop view, you kept the main control flow and take full width which is not the same as the design. You can set a max-width for the container ( ex. 620px) so it does not stretch further with large screens.

4- There is a box shadow applied to the main container which I think you forgot to do.

5- Apply some margin between the button and the text on top of it.

6- You have used 2 h1 tags in your design which is not what we should. Every web page should only contain 1 h1 tag for the biggest title on the page.

Hope these would help.

Keep coding 🚀

0

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