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

box-shadow, display: flex, width, border-radius, background-color

Desktop design screenshot for the Blog preview card 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?

Não sabia que no box-shadow podia deixar a sombra muito em negrito, achei esse estilo de card diferente. De diferente que eu faria era adicionar uma cor gradiente combinando com o fundo amarelo e a sombra do card.

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

Os desafios que passei foi acertar o tamanho da imagem do card com os texto em baixo, mas com a ajuda do chatGPT, eu consegui ajustar o tamanho.

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

Queria entender melhor sobre como funciona o "transform" e o "translate" na parte do CSS.

Community feedback

@weldu0

Posted

👋🏻 Hey @Carmo22b I have a few suggestions for your solution.

  1. Avoid Using Margins for Alignment: Instead of using margin to align items, as you did in .Learning{}, it's generally not the best practice to use margins for alignment. One solution could be to set text-align: start to align the text properly. Another option is to make use of the Flexbox properties you have already set on the parent container. For example, you can use align-items and justify-content

  2. instead of manually adding margin you could use properties like gap to manage spacing between items .

Other than that it looks perfect! 👍 I hope you find this helpful 😊

0

@muriloviscondi

Posted

Great job!

Only a few inconsistence about font size and text color, but your html and css are very organized

0

@MrBradley815

Posted

This looks really close! Only thing I would watch out for is your font. Your font sizing and line heights are a little off. Straighten those out and this will be great!

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