NFT Preview Card Flexbox

A note here about semantic tags.

Interactive elements must be either buttons (if they do something like submit a form) or anchors (if they are a link for navigation). Whenever you see a hover-effect in a design, that implies it is an interactive element.

So here, the image and the heading and the username must all be wrapped in interactive elements. Those will then get :hover and :focus or :focus-visible styles in the css.

Thinking about this further still. The design doesn't specify whether these should be buttons or anchors. But if we imagine a real card. Probably when we click on the title we would go to a detail page. And when we click on a username then we'd go to that user's profile. So those should both be in anchor tags. When we click on the image, we might expect a bigger version of the image to open in a lightbox overlay. In which case it should be a button. Or it might navigate to a full page with a large image, in which case it should be an anchor. You can decide which makes most sense there.

Hello @MuhammadTatma ,

I have some suggestions regarding your solution:

• Anything with a hover style in design means it's interactive. you need to add an interactive element<a> around the image , Equilibrium #3429 and Jules Wyvern . As (@AlexKMarshall) well explained.

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

• In the avatar's alt shouldn't be image in the alt.Read more how to write an alt text

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

• There are so many ways to add the hover effect on the image , The one I would use pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover as there is no reason to have the extra clutter . overlay in the html.

• You can use <ul> to wrap the class="info", and in each <li> there would be <img> and <p>.

• No need for<hr> , you simply can use border-top: rule to the class="creator"

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

Hi Muhammad, I took some time to look at your solution and you did a great job!

Also add descriptive text in the alt attribute of the image and try to add a little transition on the element with hover effect

Overall you did well :)

Hope this help and happy coding!