3 column preview

Hello @maleyka13!

Your project looks great!

I have one suggestion for you to improve it even more:

• Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

📌 Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Great work on this challenge! You've done an amazing job at making it look like the original design.

There are a few minor changes you could make to improve it, however.

I noticed that, for the 'Learn More' buttons, you've used divs instead of button tags to implement them, which is incorrect as, if you were to do this on an actual website, clicking on the button wouldn't do anything.

Although this website isn't meant to be functional, it's always good to get into the habit of using the correct semantic tags.

You've also not added :hover or :focus-visible styles to the button, which means that the button does not change styles to indicate that it's being focused on either via keyboard navigation or mouseover.

This is not ideal for user experience as it's always recommended to make it clear when a button is being interacted with for accessibility reasons, as well as to make your site more intuitive to use overall.

You could fix this by replacing the divs with buttons:

<button class="btn">Learn More</button>

And changing the button styling when the user interacts with it:

.btn {
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  background-color: transparent;
  color: white;
}

One small thing that you might have overlooked is that the border-radius property is applied to the wrong corners when the viewport becomes small enough for the column layout to kick in.

You could fix this by adding this to your code:

.sedan {
  border-radius: 8px 8px 0 0;
}

.luxury {
  border-radius: 0 0 8px 8px;
}

Other than that, this is a very good solution!

Hope this has been helpful! :)

Hello there 👋 @maleyka13.

Good job on completing the challenge !

Your project looks really good!

I have a suggestion about your code that might interest you.

There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

Consider adding a min-height of 100vh to the body element so as to centralize your project.

body { 
  min-height: 100vh;
  align-items: center;
  display: flex;
  justify-content: center;
}

I hope this suggestion is useful for future projects.

Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟.

Other than that, great job!

Happy coding.