Submitted about 2 years ago

Single Price Grid Component

gustavo•40

@machadogustavo

Preview site View code

This is a solution for...Single price grid component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi there, I’m Gustavo and this is my solution for this challenge. 👍🌐

I followed a tip from the last project to start with mobile first, I found it more challenging and it ended up working, I only had a difficulty with the colors issue, because I couldn't apply the cyan variation in one of the sections, i accept help!

I added two hover effects in this project: Hover in Anchor

.monthly a:hover {
    background-color: var(--Light-Gray);
    color: var(--Cyan);
}

Hover in Price

.monthly .price #price-number:hover {
    transform: scale(1.2);
}

I am open to any feedback!

Community feedback

バレンタイン 😈•64,170
@VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:

The “30-day, hassle-free money back guarantee” is not a heading. It should instead be wrapped in a Paragraph Element.

For the button you can only use on or another, you can't combine them. For this challenge, you want to use the Anchor Element.

The “Why Us” list needs to be created using an Unordered List Element along with the List Items Element.

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

Happy Coding! 👻🎃
0

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