NFT preview card

Please log in to post a comment
Log in with GitHubCommunity feedback
- Account deleted
Hey there! 👋 Here are some suggestions to help improve your code:
-
Apply the recommendations that the other member mentioned, before moving on to the next challenge, so you do not make the same mistakes.
-
To center you content to your page, add the following to your Body Element:
body { min-height: 100vh; display: grid; place-content: center; }
-
The NFT Alt Tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.
-
The Icons serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.
-
Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site.
-
Reduce the
box-shadow
to better match the FEM example. -
Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
-
- @correlucas
👾Hello @KryptoGhost, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
1.Add the website favicon inserting the svg image inside the
<head>
.<link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">
2.The colors you’ve used are a little bit different from the original colors.When you download the project files there’s a file called
style-guide.md
where you can find information such asfont-family
,hsl color codes
, device sizes and thefont-size
for the headings.3.Here's how you can add the hover effect:
Container needed to position the overlay. Adjust the width as needed
.container { position: relative; width: 100%; max-width: 340px; }
Make the image to responsive
.image { width: 100%; height: auto; }
The overlay effect (full height and width) - lays on top of the container and over the image
.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .3s ease; background-color: red; }
When you mouse over the container, fade in the overlay icon
.container:hover .overlay { opacity: 1; }
The icon inside the overlay is positioned in the middle vertically and horizontally .icon { color: white; font-size: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }
When you move the mouse over the icon, change color
.icon-eye:hover { color: hsl(178, 100%, 50%, 0.5);; }
👨💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX
✌️ I hope this helps you and happy coding!
- @Clement1kalu-okereke
@kryptoGhost Great Solution and great design You can use wrap your card content in a main element to get rid of the accessibility issues and give your images a useful
alt
textAnd try to use the fonts specified in the
style guide.md
fileHappy Coding
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