Submitted 6 months ago

Blog preview card, using html and css

Larry Ivan Villegas Costas•100

@LarryIVC

Preview site View code

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?

The next code:

article:hover {
  -webkit-box-shadow: 15px 15px 0px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 15px 15px 0px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 15px 15px 0px 0px rgba(0, 0, 0, 0.75);
}

footer h2 {
  font-size: 0.8rem;
  color: #1b1b1b;
  font-weight: 700;
  transition: all 0.3s ease-in-out;
}

footer a:hover &gt; h2 {
  color: #f6d050;
}

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

None

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

None

Community feedback

Aneta Kaczmarek•90
@NullishKoalaPosted 6 months ago
The solution code looks very good, the html is well structured. For accessibility it has 1 h1 and well divided sections, images have alt atributes. The desktop layout could be a bit bigger, there are some differences between the project and the original design: in spacing between text elements, card's border colour, image padding and card's padding.
Marked as helpful
0

Please log in to post a comment

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