3-column-preview

Hello Taishi, congratulations on completing the challenge!!!

I have noticed that you haven't implemented the active state. You can add a hover effect on each of the buttons(including cursor, border, and color). For more information please refer to the active-states.jpg file in the design folder.

Hope I was able to help you.

Happy coding!!!

👾 Hello Taishi, congratulations for your solution!

I've two tips for you to improve your solution:

1.You've used a wrong property twice in your code, just delete it from the .container and from each card class (sedan, suv, luxury) to clean the code, delete this ---> display: relative;

2.Althought you set a correct breakpoint with media query, the card itself isn't responsive due the fixed width you've set to the container, this means that the card didn't contract properly in smaller screens, replace width with max-width to fix this behavior.

3.You don't need use id's to manage classes, just use a regular .class to manage the css elements and let the id for specific stuff like forms and complex things.

The rest is all fine, congrats! Hope it helps you and happy coding!

Hey Taishi, congratulations on completing the challenge! You did a good job 😉

Let me give you some little tips for optimizing your code:

• the link and title tag go inside the head of document not inside the body, For this if you look at the browser window see you do not see the name 3-column-review you have assigned to the page
• remove <div id="space"></div>
• remove margin and height properties from container class
• use flexbox to the body to center the card. Read here -> flexbox guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
• add transition on the element with hover effect
• instead of using px use relative units of measurement like rem -> read here

Hope this help! Happy coding 😁 by Travolgi