Skip to content
Submitted over 1 year ago

Develop in React, HTML and CSS, This is the NTF preview card component

seismicman•240
@seismicman
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

Although this is a project that mainly we can develop in HTML and CSS, I developed it in React as an unique component and CSS for the styles. The most important part was how to make responsive this component only using Flexbox and how to make transition between the normal and active state in the hover status. Feedbacks always are welcome

Community feedback

  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hey there ! 👋 Congratulations you finished the NFT card component...🎉

    • some suggestions for you improve your code

    Html 🏷️:

    • for Accessibility reports you using the and div tag to wrap the whole html code and put attribute role="main" is correct way 🎯 and using the header tag those all are problem to occur the Accessibility reports..
    • the error was generated by you not use the alt attribute mentioned so for example <img src="logo.jpg" alt="logo"></img>
    <body>
<div class="container" role="main">

//Whole html code

<h1> </h1>
<h2> </h2>
<h3> </h3>
//by ordering using the header tag

</div>
</body>
    • I Hope it's useful for you and wating for your next project ❤️
    • Happy Coding 😃
    Marked as helpful
    0
  • Aymeric Ratinaud•80
    @aratinauPosted over 1 year ago

    Hello,

    I saw your answer and as I did the challenge too I saw that your background is a bit outdated at hover. I found a solution : you have to add display: block; to the .image img selector I hope it will help you :)

    0
    seismicman•240
    @seismicmanPosted over 1 year ago

    @aratinau Thank you very much!

    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