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 using SCSS

Fred Campoβ€’ 330

@fredcamp

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


Note: This is a 2-year old ago project solution πŸ˜€

You can't add a pseudo-element selector on an <img> tag for the hover state. You can use a work-around by wrapping it inside a <div> or targeting its parent element to do the CSS styling. It's best to wrap the image description inside a div (especially if it consists alot of contents e.g. texts and buttons). But for this one, I didn't use it since there's only a single icon that needs to be displayed.

Community feedback

Finneyβ€’ 3,030

@Finney06

Posted

Hello there πŸ‘‹. Great job completing the challenge this time😊

I have a suggestion about your code that might interest you.

HTML 🏷️: Wrap the attribution content in the <footer> tag. this should help in fixing the Accessibility report

I hope you find it useful! πŸ˜„ Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

0

Fred Campoβ€’ 330

@fredcamp

Posted

@Finney06 Hello.. Yes, That would be the right thing to do, I shouldve wrapped my attribution using the footer tag. Though I would love to do that but this solution of mine was actually a 2-year old solution, and I just dont want to update my source code since they're quite alot now and I just only decided to upload the solutions today. But I'm still very grateful for the feedback. ☺

1
Finneyβ€’ 3,030

@Finney06

Posted

@fredcamp okay You're welcome 😊

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