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

Three Column Preview Card Component with animations and semantic HTML

Zascu 140

@ZascuOfficial

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, everyone!

I have a really small question regarding the animations I used in this project. (Just for some context - this is the first time I've ever used animations for something in HTML and CSS.) Is there any way to make the animations 'stagger' a bit? Like complete the first set for the first card, wait a few milliseconds and then move on to the next, etc?

If anyone knows the answers and decides to respond, thank you in advance! I hope you all have an amazing day / night.

Community feedback

Hassia Issah 50,650

@Hassiai

Posted

The html must have <h1> to fix the accessibility issues.

Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

To center .cards on the page using grid, add min-height: 100vh to the body .

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

1

Zascu 140

@ZascuOfficial

Posted

@Hassiai Thank you for addressing the accessibility issue, but the cards are already centered on the page using min-height: 100vh on the body. That line of CSS is in another file I use to overwrite some default browser styles, called reset.css. It's in my repository.

Anyways, I appreciate the advice!

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