NFT preview card component

Hello @jilliannoreen ,

Congratulation on completing this frontend mentor challenge.

I have some suggestions regarding your solution:

• There should be two landmark components as children of the body element - a main (which will be the NFT card ) as you did and a footer (which will be the attribution).<Footer> should not be in the <main >. HTML5 landmark elements are used to improve navigation .

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

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

• look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

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

• There are so many ways to add the hover effect on the image , The one I would use, using 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 in the html.

The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.

• The avatar's alt should not be creator image. It's meaningless , you can use the creator's name Jules Wyvern. Read more how to write an alt text

• You can use <figure> and <figcaption > for the avatar's part.

CSS

• To use more semantic tags , you can use <ul> to wrap class="nft-other-info"and in each <li> there would be<img>and <p>.

• width: 270px;an explicit width is not a good way . consider using max-width to card instead and a little margin to the card .That will let it shrink a little when it needs to.

• height: 460px; It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

• No need for the <div class="card-line"></div> , you can use border-top to the class="nft-creator" .

General points :

• It's recommended to 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.

• Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.

• Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

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