Adding a small amount of reactivity using built in CSS tools

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Liam, good job! I took some time to look at your code and have some ideas for improving it:

  • add main tag and wrap the card for Accessibility
  • remove all margin from .container class because with flex they are superfluous
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • add a little transition on the element with hover effect

  Overall you did well 😉

  Hope this help and happy coding!

  1
• 

  Macdeesh•610

  @macdeeshPosted over 2 years ago

  Hello Liam Burke,

  This is how you can improve your code :

  1- You should wrap the Equilibrium image with an anchor tag. It has :hover state, which means that it should be an interactive element. It also applies the other elements that have :hover state.

  2- I would do the hover effect on this using pseudo-elements like ::before or ::after. Also, for the other SVG icons you can put it inside pseudo-elements, as the icons are all decorative.

  3- For the hover effect (now attached to an interactive element wrapping the image and the eye icon) remove width on the img and set it to be display block max width 100%.

  4- I would recommend using h1 instead of h2, your page should contain a level-one heading.

  5- I don't recommend that you style the creator name using strong in your HTML, try font-weight inside CSS if you want to make it bold.

  0