Thanks for checking out my front-end coding challenge. My goal is to practice my CSS skills, especially the correct use of flexbox techniques. If you'd like to test your Front-End knowledge, please, check Frontend Mentor challenges that help you improve your coding skills by building realistic projects. This is a solution to the NFT preview card component challenge on Frontend Mentor.
The challenge was about build out this preview card component and get it looking as close to the design as possible.
The users should be able to:
✅ View the optimal layout depending on their device's screen size;
✅ See hover states for interactive elements;
My task was to build out the project to the designs inside the /design folder. The designs are in JPG static format. Using JPGs will mean that I used my best judgment for styles such as font-size, padding and margin. Also information such as color palete and fonts can be found in style-guide.md.
- Solution URL: Repository
- Live Site URL: Deploy
You can read about my process of building this project on my blog:NFT Preview Card Component Challenge from Frontend Mentor
- Semantic HTML5 markup;
- CSS custom properties;
- Flexbox.
The most challenge part to me was at the .produt-image hover. When the user hovers over the element it changes to image opacity, adds a background color, and shows an icon on top of the product image, so it's a little bit more complex and requires more attention and understanding of properties such as position, overflow, opacity, transition and the ::after selector.
- DEV Community (blog) - Thaísa Vieira
- Frontend Mentor - @thaisavieira
- Mastodon - @thaisavieira