3-Column Preview Card Component

👾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!

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 😉

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