NFT preview card component using HTML & CSS

Hello @Rabie-Abdullah ,

I have some suggestions regarding your solution:

• Anything with a hover style in a design means it's interactive. you need to add an interactive element around the image and Equilibrium #3429 and Jules Wyvern .

• the icon-view doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

• Add hover effect on Jules Wyvern, Equilibrium #3429.

• For any decorative images, each img tag should have empty alt="" andaria-hidden="true"attributes to make all web assistive technologies such as screen reader ignore those images in icon-ethereum, /icon-clock

• the link should be wrapping the original image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

• The avatar's alt text shouldn't have an emptyalt.You can use Jules Wyvern as an alt text.

• You can read more about alt text

• don't use div or span for meaningful content. you can use :

        <p>
          Creation of <a href="#" class="card_span_white">Jules Wyvern</a>
        </p>

• For the body, it should be

body{

min-height: 100vh; /*using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. */
width: 100%;
}

• an explicit width is not a good way . Remove the width from the card component and change it to max width instead. That will let it shrink a little when it needs to.

• Never use px for font-size.

• You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

Hopefully this feedback helps.

Your solution needs a margin left right in mobile view besides you did great Keep coding👍