Submitted 5 months ago

NFT Preview Card Component built with HTML and SCSS

sass/scss

Shakira Reid - Thomas•150

@KaeTheDev

A solution to the NFT preview card component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of my ability to use Figma to understand how the styles should work. In previous projects, the Figma files included a detailed style guide, but this one was more limited. This challenged me to improve my skills in interpreting a Figma file and translating it into a functional design.

What challenges did you encounter, and how did you overcome them?

This project was fairly simple, and I chose it intentionally to get more practice with HTML and SCSS while studying responsive design in more depth. However, implementing the hover effects—especially the overlay—presented a learning opportunity. I overcame this challenge through trial and error, as well as by reading through documentation to better understand how to achieve the desired effect.

What specific areas of your project would you like help with?

I would appreciate any and all feedback. I’ve been learning so much from the community here and would love to hear suggestions on how I can improve further.

Code

Please log in to post a comment

Community feedback

Marzia Jalili•9,710
@MarziaJalili
Posted 5 months ago
Awesome work!

A cherry on the top?
- For the smoother color of the heading and the link you can use the transition property:
Take the code below as an example:
```
transition: color 0.5s; /* or .5s for short */
```
This ensures that the colors will change after 500 milliseconds which makes it look even better.

Great job overall, keep up the grind!

😁😁😁
Marked as helpful

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