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

Blog Preview Card

Bunchydo 70

@Bunchydo

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

Adriano 36,730

@AdrianoEscarabote

Posted

Hi Bunchydo, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

I noticed that your component is growing a lot at higher resolutions, this is happening due to the use of width: 24.5%;, what can you do to improve the appearance:

.main-container {
    background-color: white;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 370px;
    height: 620px;
    align-items: flex-start;
    justify-content: space-evenly;
    padding-left: 30px;
    font-family: "Figtree";
    border-radius: 10px;
}

The rest is fantastic.

Hopefully, you'll find it helpful. 👍

Marked as helpful

1

Bunchydo 70

@Bunchydo

Posted

Hi Adriano, thank you for this suggestion. It was really helpful. 👍

0

@Trianapetit

Posted

Hola, Falto la sombra ingresa este codigo en tu Css. box-shadow: 10px 6px var(--Gray950);

Marked as helpful

1

Bunchydo 70

@Bunchydo

Posted

Hi Trianapetit, thank you for the reminder. I have added it now.👍

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