Submitted almost 2 years ago

Single price grid component

Agelita eMe• 170

@agelitaeme

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi!

As recommended I used grid to solve this challenge. Which has made me want to use it even more.
I didn't make any changes, except for a little hover effect on the "Sign up" button.
I'm always trying to reduce the amount of code. So, if you have any ideas about it, I would be more than glad to hear them.

Thank you and have a nice day!

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey there! 👋 Here are some suggestions to help improve your code:

The purpose of the Main Element is to identify the main content of your page. It is not the container of you component. After the main element, you want add a container to wrap you separate components in.
The “30-day, hassle-free money back guarantee” is not a heading. It should instead be wrapped in a Paragraph Element.

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

Hi Agelita eMe, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

The rest is great!

I hope it helps... 👍

Please log in to post a comment

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