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

[V2] Hover Effect - NFT Preview Card Component

Malloryā€¢ 90

@mallory-cvlh

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


Hello šŸ‘‹

This is my second version of this challenge. I added some hover effect and I tried to improve the readability of my code.

You can find my first version in my GitHub repository -> Old version.

Any suggestions on how I can improve are welcome! šŸ™‚

Community feedback

Matjazā€¢ 230

@rubuz

Posted

Hi Mallory,

if you want the footer to be on the bottom, and you still want to use the grid on body, you need to make 2 rows in your grid. First row is for the main content and the second row is for the footer.

To the body element add: grid-template-rows: 1fr auto;

To the footer element add: grid-row-start: 2; grid-row-end: 3; and remove the position and bottom.

This will force footer to the bottom of the page.

Regards, Matjaz

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