Responsive 3 Column Preview Card using Flexbox/SCSS and Mobile-First

Hi Caio, I took some time to look at your solution and you did a great job!

Tip of graphic design: With font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading) ... for the designer it's a really awful font!

• I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.

Also the button have another font and in the hover state the text isen't visible

Overall you did well :)

Hope this help and happy coding!

Hi Caio!

Test it out and see if it works.

Add this color to your hover:

.card a:hover {
  background-color: transparent;
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  color: hsla(0, 0%, 100%, 0.75);
}

I think it's a question of specificity, it would be good to see that because I won't be able to explain it very well. But I managed to solve it by deleting all its id and transforming it into classes.

In your HTML code it will look like this:

<div class="card sedans" >
...
</div>

<div class="card suvs">
...
</div>

And in your CSS code it will look like this:

.sedans {
   ...
}
.sedans a {
  ...
}
.suvs {
   ...
}
.suvs a {
   ...
}
.luxury {
...
}
.luxury a {
   ...
}

Only with these changes has it started to work here. I recommend trying to find out the more detailed explanation of this, but I believe it could be greater ID specificity.

Good studies and keep sending new projects!

Hey @caio-alcantara, Tremendous work!

Hi Caio , First learn more button is not aligned properly

Also, I just saw now that my card's width is waaay bigger than it should. I'm going to fix it, but I have no screenshots left for the month, so it'll stay like that here.

Edit: Although the screenshot solution doesn't seem that good, check the live site, I swear it's better hahahaha