Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

NFT preview card

Mordi Joshua•90
@KryptoGhost
A solution to the NFT preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)
Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deletedPosted over 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! 👻🎃

  • Lucas 👾•104,160
    @correlucas
    Posted over 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!

  • Okereke Clement Kalu•170
    @Clement1kalu-okereke
    Posted over 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

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub