This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
The challenge requires you to build a preview card component for an NFT marketplace. You need to implement the design provided in Figma, which includes several interactive elements, such as hover effects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Semantic HTML5 markup
- CSS
- Flexbox
Through this challenge, I learnt how to create more complex designs using CSS. I also learnt how to implement interactive elements such as hover effects.
I experimented using the CSS @import rule to import Google fonts.
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap");I also learnt how to create an overlay image icon on hover.
.img-view {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: hsla(178, 100%, 50%, 0.5);
display: none;
}
.img-view img {
position: absolute;
width: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}I plan to continue practicing my CSS skills by completing more Frontend Mentor challenges. For my upcoming projects, I need to concentrate on using advanced CSS to create effects, especially with box-shadows. There are undoubtedly several quick generators that I could investigate.
MDN Web Docs - This is my go-to resource for web development documentation.
How to Import Google Fonts in CSS File - Tried something new with using the CSS @import rule to import Google fonts, rather than adding a link to the <head> of my HTML.
Learn how to style an hr element with CSS - This tutorial helped me to figure out how to style the <hr> element in CSS.
How To Create an Overlay Image Icon on Hover - This helped me to add an overlay to the image on hover.
Using only CSS, show div on hover over another element - This Stack Overflow question helped me to figure out how to show the view icon on hover.
- Website - Max Lockwood
- Frontend Mentor - @Max88-git
- Twitter - @maxlockwood88