Skip to content
Submitted about 2 years ago

NFT preview card

Mordi Joshua•90
@KryptoGhost
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • バレンタイン 😈•64,170
    @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:

    https://web.dev/learn/design/

    If you have any questions or need further clarification, let me know.

    Happy Coding! 👻🎃

    0
  • Lucas 👾•104,340
    @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 as font-family, hsl color codes, device sizes and the font-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
    Mordi Joshua•90
    @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
  • Okereke Clement Kalu•170
    @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 text

    And try to use the fonts specified in the style guide.md file

    Happy Coding

    0

Please log in to post a comment

Log in with GitHub

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