Responsive 3-column-preview-card-component design using HTML & CSS

Hi zaheer Abbas, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!

To resolve do this:

<a href="/" class="btn-sedans">Learn More</a>

I noticed that you used 3 h1, prefer to use h2 since we can only have one h1 per page!

The rest is great!

I hope it helps... 👍

Hi, you did great job, but i think you should add the @import urls of the fonts at the top of the CSS style sheet before the variables to be applied on the page. Another thing, if you use CSS Grid instead of flex, it will be easier for you at the responsive, you will not need so many adjustments. ex: main { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));} I hope this will help you.

@zahirpk hope you are fairing well. Well Done on completing this challenge The font-weight for the .btn is 700. Use rem for the font-size and width as well. There is no need to specify a width and a heigt for each seection, just give it a padding value. This will help with the space you want around the content in each section. section{ padding: 2em} for padding top , bottom , left and right. After you remove the padding variable you gave to the class of each section. Give the h1{margin : 1em 0; } for margin top and bottom and remove the padding values. Padding is always for inside space of an element and margin is for the outside space of an element. Make border of the .btn a little thicker. After the media query, in the main declare only display flex and width, there is no need for the rest. Aside from these, everything is good Hope Am helpful HAPPY CODING