NFT Card Component

This looks good, though I'd be tempted to add a little padding so the card doesn't quite touch the sides of the screen on small widths. Or let it touch the sides but remove the border-radius in that case.

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 @fdsantos300 ,

I have some suggestions regarding your solution:

• In here <main= "container"> , you probably meant <main class="container">

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

• Always use heading tags in chronological order. as the page should contain a level-one heading . In this challenge , you can use <h1> for Equilibrium #3429 instead of <h5> .

• <svg> 's do not add important information to a document should be considered decorative. You can use aria-hidden="true" to hide the SVG from screen readers. focusable="false" is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG.in( icon-ethereum, icon-clock ).

• the icon-view svg 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.

• The avatar's alt shouldn't be avatar image , it's meaningless . you can use Jules Wyvern. 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 <svg> and <p>. then use the flexbox properties to align them centrally.

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

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

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

Also <main= "container"=""> what is? If you want to use class in the tag main is like this: <main class= "container">

Use a little transition also on the title with hover effect

Overall you did well :)

Hope this help and happy coding!