CSS grid

Hey Nick,

First off, great solution! I see you used CSS Grid, I'm a big fan of that.

There are some minor fixes possible to take it to the next level:

• Even though you use the grid-gap correctly there still are some inconsistencies in your margins. Try to set the margin on the p to 0. This way the grid only uses the gap you set on the grid.

• Your h1 is a little bit off from the design. You could fix this to make it even more alike!

Hope this helps and good luck with your next challenges!

Hi Nick,

Great first solution! Haico has already made some nice additions. Things I could think of (I took some of these from my comment at Haico's solution):

• When viewing the component on a small screen size the card overflows the viewport. This is because you've set a fixed width: 302px on the #card element. Try to avoid setting it explicitly as much as possible. Setting max-width: 302px solves this.
• Consider using classes instead of id's to style your HTML. It's lower in CSS specificity and a better practice for re-usability.
• Your anchor links aren't distinguished in this component. 'Equilibrium #3429' and 'Jules Wyvern' are links, but this is not visually notable. Consider adding an underline to them for accessibility purposes.
• Your attribution links have a color contrast ratio of 1.88. The minimum contrast ratio is 4.51, a nice one would be a ratio of 6.0. You could achieve this by using a white color and an underline for example.
• You can add cursor: pointer to your .overlay:hover class to add that extra level of interaction taken from the design :)

Keep up the great work and happy coding!