NFT Preview Card Component using SCSS, Flexbox and Grid.

Hi Stephen,

Your design looks really good and well done on getting the hover effect to work - it's tricky.

Box-shadow is hard to make it look good. This mdn resource explains really well what all the values mean.

Most people probably use box-shadow generators, this is a simple one and this one outputs the values in css variables which make the shadows look even better but is a bit more complex.

Hsppy coding!

Hi

There are some problems on the html of this at the moment

1. Anything with a hover style in the design means it needs to have an interactive element. I can see you've tried to do that in a couple of places but it only works on the last one. Add href="/" for interactivity to work (and make sure there is a space before the href attribute

2. You need a heading on this. Headings are the most important semantic elements for giving your page structure. The title of the card needs to use a heading element, definitely not the created by line

3. Footer goes outside of main, not within it

On mobile the component is touching the screen edges for me. Add a little padding to the body and it should fix that

Good luck

👋 Hi Stephen Nicholls!

🎉 Congratulations on finishing this challenge! You can compare your solution with mine. If you want to know more about how I did the overlay, you can read the README.

Grace has given some incredible feedback. Here is some feedback from me:

• You can wrap <a class="title">Equilibrium #3429</a> with h1. Keep in mind, that every page should have one h1.
• <h2 class="creator-text">Creation of <a class="creator-link"href="#">Jules Wyvern</a></span></h2> There's no need to make this as a heading. Heading tag is similar to the title on a document file. I would recommend swapping the h2 with p.
• You can wrap the ETH with abbr tag, since ETH is an abbreviation for Ethereum.
• For the line, you can use border instead of empty div.
• Don't change the html or root font size. You should set the font-size on the element using rem unit. Using px won't allow the user to control the font size based on their needs.
• Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.

That's it! Hopefully, this is helpful!