Skip to content
Submitted about 2 years ago

NFT Card Component

yuki6464•90
@yuki6464
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

Solution retrospective

Hello this is my attempt at this challenge, i feel like there are a lot of things that can be done better so i can't wait for your feedback. Thank you :)

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hello there! 👋

    Congratulations on completing this challenge! 🎉

    Here are some suggestions for improvements.

    • I recommend using a code-formatter such as Prettier to make it easier to understand the code. For example, the HTML child elements should be indented.
    • In this case, use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.
    • Anchor tags are for navigation, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements.
    • For the .container or the card element, I recommend setting a max-width instead of a width. This way, the card allows to shrink if ever needed while still preventing it from filling the entire page.

    That's it! I hope this helps!

    Marked as helpful
    0
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello @yuki6464, 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 value you’ve used for the shadow make it too much dark and strong. To improve your box-shadow, you’ve to have in mind two things that make a good shadow, blur and low opacity for smooth shadows. To improve your current shadow, decrease the opacity and increase the blur, try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

    If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    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