Design comparison
Community feedback
- @VCaramesPosted about 2 years ago
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! 👻🎃
0 -
- @correlucasPosted about 2 years ago
👾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!
0@KryptoGhostPosted about 2 years ago@correlucas thank you for your feedback although i do not know how to implement some of your corrections but I am sure I will figure it out
0 - @Clement1kalu-okerekePosted about 2 years ago
@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
0
Please log in to post a comment
Log in with GitHubJoin 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