CSS, HTML and Flexbox

Hey, awesome work on this one. Though the desktop layout looks large or just large in general since horizontal bar appears, the site is not responsive at the moment and the mobile layout is not present.

I think your usage of :hover on this one is correct though I mean, there is nothing wrong with :hover usage. Just to make those hover-state more smoother, those properties that you are transitioning to on the :hover state, include them in the transition property of the default element like this:

button {
  color: red;
  border: 1px solid transparent;
  background-color: white;
  transition: color .3s ease,
              border-color .3s ease,
              background-color .3s ease
}

button:hover {
  color: white;
  border-color: red;
  background-color: red;
}

Have a look at transition property.

Some other suggestions on the site would be:

• It would be great to have a base styling with these properties

html {
  box-sizing: border-box;
  font-size: 100%;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

This way, handling an element's size will be lot easier because of the box-sizing: border-box. You can search up some more of how this works.

• Instead of width: 1440px use max-width: 1440px because using the former, you are setting a explicit width or fixed width which causes like what I said, horizontal scrollbar because my screen can't occupy that width.
• I wouldn't use a fixed height as well. Maybe min-height: 100vh would be great.
• Always have a main element to wrap the main content of your page. On this one, you would have to create a main to wrap those 3 card. This way, it is nested inside a landmark element.
• When using img tag, don't forget to include the alt attribute, even if the value of it is empty or not. If you don't include this, screen-reader will read the source path of the img which you don't want. So always include it.
• Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
• Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element.Have a look at Grace's solution on this one inspect the layout and see the usage of h1 as well the stylings applied to it, copy it because you will use that a lot.
• learn more is better to use link a tag , since on a real site, this would be a page transition where the user can "learn more" about the selected car.
• Lastly, just making the site as responsive as you can and making a mobile layout.

Still, great job on this one.

Thank you for the feedback, I really appreciateit. I will try to improve this code with your advices and upload it, I am a beginner in programming so this kind of commentary really help me to learn new things.