Skip to content
Submitted 8 months ago

Foure card feature section - master

Biskup85•220
@Biskup85
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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

  • Anton Vasilache•580
    @AntonvasilachePosted 8 months ago

    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
    @Biskup85Posted 8 months ago

    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

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