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

used transitions, transform, position, flexbox and other css tools

@matheuzeba

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I found it quite difficult to make the animations, any tips on that? What would be the best way to write semantic css?

Thank you for checking out my submission :D

Community feedback

Matheus• 240

@MatheusVSN

Posted

Hello Matheus, congratulations on completing the challenge 🎉

I have a suggestion about your centering method. Instead of setting the .page element padding-top, you could use the display: grid , place-content: center and min-height: 100vh on the body element, example:

.body {
	display: grid;
	place-content: center;
	min-height: 100vh;
}

Using the method above would suit your solution very well as it will align your card to the center of the screen without the need for using padding-top on the .page element

Happy coding 😊

Marked as helpful

1

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