Skip to content
Submitted about 2 months ago

HTML CSS

André•80
@psandre
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

As descobertas sobre diretórios, subdiretório, caminhos relativos e caminhos absolutos

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

tive dificuldade em encontrar o caminho do arquivo de imagem e ícone, dentro do git para exibição no https://psandre.github.io/blog-preview-card-main/.

Declarando sem o (.) não aparecia as imagens <img src="/assets/images/csshtml.png" alt="imgpc" class="imgpc" >

Declarando como (.) aparecia as imagens <img src="./assets/images/csshtml.png" alt="imgpc" class="imgpc" >

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

A princípio eu não encontrei a imagem original do card, sendo assim substitui por outra imagem, acabei gostando e mantendo a então imagem. No entanto, minha dúvida seria esta.

Community feedback

  • Juan Trujillo•180
    @jdtb4Posted about 2 months ago

    Hi Andre 👋, first of all good job, you finished the challenge.

    Your code is good but it would better if you use semantic Html.

    I use a extension in my VS code editor that make easier to find the route to the files, is Path Intellisense, it would help you with the image. You only need to write "./" and navigate in to the folders.

    In this challenges you have to be as more faithful to the design as possible.

    • Add more radius on the card, like 20px
    • Change the px for rem in the font-size propperty
    • Use h2:hover to change the background color when the cursor hovers the tittle
    • Try to use the weights in the fonts: 500, 800 in the font-weight insted of bold.
    • On the body add min-height: 100vh and gap: 20px that separates the card from the top and add space between the body and the footer.
    Marked as helpful
    1
    André•80
    @psandrePosted about 2 months ago

    @jdtb4 Muito obrigado pelas dicas de melhorias, está sendo muito útil para mim. Vou tentar seguir o máximo possível nos próximo desafio.

    0
  • justvelio•60
    @justvelioPosted about 2 months ago

    Very good

    Marked as helpful
    1
  • Awa Sylla•40
    @awamakhtarPosted about 2 months ago

    vos contributions sont les bienvenu

    1

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