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

Mobile first approach with Css Grid for Layout.

@gbabohernest

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


Hi Guys, I would appreciate it if you were to give me some advice of any kind. Your feedback is important for my journey. Thanks :)

Community feedback

Naveen Gumasteβ€’ 10,460

@NaveenGumaste

Posted

Hello Ernest Push Gbaboh ! Congo πŸ‘ on completing this challenge

Let's look at some of your issues, shall we:

  • The background color is given in style-guide.md

  • Why us section color is too much light and i know it was not given in style-guide so use color-zilla chrome extension. and you will get the color

  • This is color i used for my solution --light-cyan: hsl(179, 45%, 52%); check my solution here if needed

  • To center the card vertically

max-height: 100vh;
display: flex;
justify-content: center
align-item: center;

happy CodingπŸ˜€

Marked as helpful

0
Shashree Samuelβ€’ 9,260

@shashreesamuel

Posted

Hey gbabohernest, good job on completing this challenge. Keep up the good work.

Your design looks good however I think your card needs some space on the margin-top. This can be achieved using the margin-top css property.

In terms of your accessibility issues simply wrap all your content between <main> tags.

I hope this helps

Cheers, Happy coding πŸ‘

Marked as helpful

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