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

only html and css

@gustavobilia

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


I couldn't break the edge down a little, like on the model. Any help please?

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Fala Gustavo! Beleza?

Seu projeto ficou bom, mas suas imagens não estão carregando.

Esse aqui é seu código:

<img class="main__img" src="/assets/images/illustration-article.svg" alt="">

Quando o arquivo de imagem está numa pasta separada, você precisa colocar o ponto antes da barra no caminho especificado na tag img, desse jeito:

<img class="main__img" src="./assets/images/illustration-article.svg" alt="">

Fazendo isso, as imagens aparecem 😊

Espero que ajude!

E o que você quis dizer com essa pergunta:

  • I couldn't break the edge down a little, like on the model. Any help please?

Me responde aqui que eu te ajudo!

Marked as helpful

0

@gustavobilia

Posted

@danielmrz-dev Opa irmão, tudo tranquilo e com vc? Muito obrigado pelo toque! Arrumei aqui. Então cara, no live server aqui da minha máquina estava carregando normalmente, achava que o ponto fosse opcional por estarmos no diretório principal. Quando dei o deploy no github page as imagens realmente não carregaram mas pensei que fosse só uma demora para renderizar, pois já havia acontecido de demorar coisa de quase 1 dia todo para a página do github renderizar o projeto bonitinho, é normal isso?

Quanto a essa pergunta: "I couldn't break the edge down a little, like on the model. Any help please?". Me refiro a sombra na verdade, não a borda, parece que no design modelo a sombra da direita começa "quebrada" um pouco para baixo do card e a sombra de baixo um pouco mais pra direta, saca?

Grato pelo feedback, obrigado! abraços

1
Ahlam 300

@AhlamAb22

Posted

Which edge do you mean?

1

@gustavobilia

Posted

@AhlamAb22 I'm actually referring to the shadow, it seems to me that in the model design the shadows on the right and bottom are not 100% aligned with the beginning. Which gives a cool effect.

0
Ahlam 300

@AhlamAb22

Posted

Box-shadow will do the job @gustavobilia

Marked as helpful

0
Daniel 🛸 44,230

@danielmrz-dev

Posted

@gustavobilia

Gustavo, os deploys no Github não costumam demorar tanto assim não...

Sobre a sombra, coloca só o afastamento vertical e o horizontal, mas sem o espalhamento, dessa forma:

box-shadow: 10px 10px 0 black;

Ah, se puder marcar meu primeiro comentário como helpful, agradeço! Me ajuda com os pontos aqui na plataforma 😁

Qualquer dúvida, pode me marcar que eu ajudo!

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