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

RESPONSIVE LANDING PAGE USING CSS FLEX BOX

@Grahamocean

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

HaDo Dev 160

@hadodev

Posted

Hi @Grahamocean!

  • Nice pulse animation.
  • Try to acheive better the space between the elements.
  • Also pay attention to the font weight of the author. It's must be higher.
  • For the Learning label you might give it a better style. Here is an example:
.label {
        display: block;
        width: 12ch;
        padding: .5rem;

        font-weight: var(--fw-bold);
        font-size: .875rem;
        text-align: center;

        background-color: var(--clr-yellow);
        border-radius: .25rem;
        padding-inline: .75rem;
}

The custom properties used at :root are the following:

--fw-bold: 800;
--clr-yellow: hsl(47, 88%, 63%);
  • For a better accesibility, use rem unit instead of px for fonts, border-radius, padding, etc...

Good job! Keep going :-)

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