Blog preview card using HTML & CSS

Solution retrospective
The ease that I have had when creating HTML, I have also been quite good with CSS, since it was something that cost me a lot in the previous challenge.
What challenges did you encounter, and how did you overcome them?Problem with the Black Shadow:
One of the problems I have had has been with the black shadow that the card has. It made a shadow, but it came out like a normal shadow. To fix this, I had to look at another colleague's solution. Finally, I used:
filter: drop-shadow(8px 8px 0px rgba(0, 0, 0, 1));
Problem with author picture and text:
I had trouble trying to align the author's image with the text. Finally I tried to make a fix with margin-top
What specific areas of your project would you like help with?How could I align the text with the author's image?
How could I align the text with the author's image without having to resort to margin-top:-25px?
.card-author { display: flex; justify-content: flex-start; align-items: center; gap: 14px; /* Espaciado uniforme entre la imagen y el texto */ margin-top: 25px; margin-bottom: -20px; } .card-author img { width: 35px; height: 35px; } .card-author span{ font-size: 15px; /* Tamaño del texto */ font-weight: 800; /* Peso del texto */ margin-top: -25px; /* Elimina márgenes predeterminados del texto */ } ```css # & design I don't know why '&' it's cut
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Juanka's solution.
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