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

Foure card feature section - master

Biskup85 220

@Biskup85

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm happy because my solution grid that I improved.

What challenges did you encounter, and how did you overcome them?

I recommend these challenges for everybody. It's an entry level stand for working with grid.

What specific areas of your project would you like help with?

Which areas I can improve, anything feedback.

Community feedback

P

@Antonvasilache

Posted

Hello there! 👋

Nice work with the challenge.

A few suggestions which I think could improve the solution, if you are interested:

The header should have a bigger font to stand out from the rest. You could also adjust the font weight using the values in the style guide, like so:

.title__header {
    font-size: 2.4rem;
    padding-bottom: 0.2em;
}
.title__header--dark {
    color: var(--VeryDarkBlue);
    font-weight: 200;
}
.title__header--light {
    color: var(--VeryDarkBlue);
    font-weight: 600;
}

Another easy win is to add border radius to the cards:

.section__content {
    margin-bottom: 1.5em;
    box-shadow: 0.25em 0.25em 0.75em rgba(0, 0, 0, 0.25);
    padding: 1.5em;
    border-radius: 0.4rem;
}

Good job otherwise, I like the mobile responsiveness.

Hope you find this useful. Cheers!

Marked as helpful

0

Biskup85 220

@Biskup85

Posted

Yes, I really thank you for your suggestions @Antonvasilache, and I'm using these next time.

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