Landing page using HTML5 and CSS3

Hey, nice solution good job.

About your issues:

• Presented pictures when you download assets files are in .svg format, you should not change this extension name, that is why they don't work properly. In general you can not change extension name from one to another in any type of file(not only for images) and expect to work them properly.
• For fonts, in browser they are working properly, both of the font sizes loaded and styles are applied on heading h1 tag and another font-family styles are applied on paragraph and button. One thing I suggest is to use one font-family property on body element - this font-family will be the one which you use all the time - it will be your default font-family.

Other suggestions:

• Add background change effect on button hover effect, you can achieve that like this: button:hover { cursor: pointer; background-color:hsl(31, 77%, 52%); color: #fff; }
• Remove overflow: hidden; from body it is not needed.
• Try to push buttons on the bottom of the cards,
• Try to remove scrollbars from cards when the view post is very small on height, for that remove max-height property.

Good Luck.

Hey, awesome work on this one. Layout in desktop looks fine, but the responsive state it creates a vertical scrollbar for each card. Also try opening up dev tools at the bottom, you will notice the scrollbar. The mobile layout looks great however.

hardy already gave great suggestions on this one, just going to add some as well:

• It would be really great to have css base styling with this:

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

Trust me on this one, box-sizing: border-box will really help you a lot when handling an element's size. You can search that one up for more clarification.

• Right now your body tag has no height because the layout is using position: absolute which makes the element out of the flow. Try to inspect and hover on the body tag and you can see what I mean. Instead, to make it centered properly, first remove all of these in the main:

    /* position: absolute; */
    /* margin: auto; */
    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    /* bottom: 0;

Then on the body tag add:

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

This will always center your layout properly and you avoided using position: absolute.

• Each car icons should be hidden. Decorative images must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
• A page must have a single h1 on a page. 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 how she used the h1 and the stylings applied to it.
• I would use a tag instead of button for the learn more since it looks more like a link.
• Lastly, just the responsive state:>

Aside from those ,great work on this one again. If you have queries just drop it here okay.