NFT Card Challenge

Hay ! Rehan Good Job on challenge

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body <main class="container"></main>

-> Learn more on accessibility issues

If this comment helps you then pls mark it as helpful!

Have a good day and keep coding 👍!

Hello @MuhammadRehanEng,

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<a> around the image(image-equilibrium.jpg)`.

• 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:true or role presentation with empty alt

• Page should contain a level-one heading, In thia challenge , you can use <h1> to wrap Equilibrium #3429 like this <h1> <a href="#"> Equilibrium #3429</a> </h1> or you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). and use <h2> instead.

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

-The avatar' alt text shouldn't be empty . set it to Jules Wyvern .

• 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.

• Tips for writing 'good' alt text.

• You can use an unordered list<ul> to wrap class="eth-days" and in each <li>, there would be <img > and<p> .

• No need for <hr>, you can useborder-top: to the class="author".

CSS

• It's better to have the styles in separate file.

• 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.

Overall, your solution is good, Hopefully this feedback helps.

Really good. Just a few things. You can write css in style.css file and then connect it to your site with <link rel="stylesheet" href="style.css" /> And your site should have at least one h1 tag so you can change <a href="#">Equilibrium #3429</a> into <h1>Equilibrium #3429</h1>