flex box , css variables , normalize

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Erik, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • Tip of graphic design: with font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Overall you did well 😁 Hope this help!

  Marked as helpful

  0
• 

  Louise Willoughby•80

  @Louise-Ann93Posted over 2 years ago

  Hey Erik 🙂 I thought your solution was really good. I love how they snap on breakpoint and all the style is still even! I only had two points really,

  • I'm not sure if you can change the break point to snap at a larger screen point just because the cards started to hide behind the screen while i was adjusting the size before the cards snapped alignment (unless thats the spec breakpoint i haven't checked).
  • The button style i see you had for active, these didn't seem to do anything? I can see you tried to have the button colour change but that didn't happen for me.
  • The buttons say 'Click Me!' rather than 'Learn More'

  Those are only minor points though otherwise it looks good 🙂

  Marked as helpful

  0
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Excellent work Erik

  Keep up the great work

  I have some feedback regarding the design aspect of your solution

  • The title in each card has the incorrect font family from the one specified in the style-guide.md file likewise the button in each card.

  • The title needs to be uppercased using the css property text-transform: uppercase.

  In terms of your accessibility issue

  • All page content should be contained by landmarks, this is caused by the non-identification of a semantic html tag which can be fixed by wrapping all the elements between the body element within main tags.

  Read more on semantic tags here

  I hope this helps

  Cheers

  0