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

NFT preview card component

@kylekasprzyk

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 👋,

I had quite a time learning how to position the icon on the image :hover 🙃.

I am unsure of the quality of my CSS, but as I continue learning, I will revisit these first few projects.

Any tips on where to improve my work would be greatly appreciated.

Going to keep doing the challenges to improve my skills.

Thank you for taking the time to view my solution!

Community feedback

Aaron 110

@ag7621

Posted

Hello!

Although I'm pretty new to web dev, I think your project looks great! One tip if I may suggest is centering your card using something like flex or grid instead of setting a margin-top on the body so that it remains responsive.

The method I use is setting a html, body { height: 100%} on a css reset. Next is setting the body { display: flex; align-items: center; } to center it vertically on the page.

The issue I've come across using an attribution and flex is that it centers both the content and attribution together. To combat that I've been setting mine as a footer with the following

.attribution {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}

the bottom: 0; and left: 0; pushes it to the bottom, and left with width: 100%; allowing it to take the full width of the page. Lastly text-align: center; to allow it to center within the width. This resource has helped me in learning how to use flex CSS Tricks - Flexbox

Hope that helps some. Happy Coding!

-Aaron

Marked as helpful

0

@kylekasprzyk

Posted

@ag7621, thank you for the help! I will try this and check out the article on how to use flex. Thanks!

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