3-Column Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Yunus Emre, congratulations for your new solution!

  To keep your solution as closer as possible from the design reference you can try a Google Chrome extension called pixel perfect. Or use the exact sizes for the container, for example using the correct padding and the container size like max-width: 1110px.

  When you download the project files there’s a file called style-guide.md where you can find information such as hsl color codes and the font-size for the headings.This will makes you gets closer to have your design similar to the challenge.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Yunus Emre Çınar•360

  @yunusemrecinarPosted about 2 years ago

  @correlucas Yes, you're right. I literally forgot set desktop size every time. Thanks!

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Yunus, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • add main tag and wrap the card for improve the Accessibility
  • in this case it would be better to use an a element for the buttons because that would probably be a link... but that's okay too
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here
  • in the small screen like a mobile add padding: 1rem to the body and set width: 100% to .first, .second and .third classes
  • remove border-radius from .first and .third classes and add border-radius: .5rem and overflow: hidden; to container class... it is a much better and less difficult approach to manage

  Hope this help! Happy coding 😉

  0
• 

  Yunus Emre Çınar•360

  @yunusemrecinarPosted about 2 years ago

  My screen is larger than 1440px so component seems too close according to solution. Also I change the background color for your information

  0