CSS, HTML and Flexbox

Hey, great work on this one. Desktop layout looks really great, it is responsive as well and another idea to add is that, instead of just showing the mobile view on a breakpoint, maybe create something like 2x2 layout so that it will be more seamless and not just desktop view to mobile view.

Some other suggestions would be:

• It would be great to have a base styling of this:

html {
  box-sizing: border-boxl
  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit
}

This way, handling an element specially its size will be easier because of the box-sizing

• Avoid using height: 100vh on a large container like the body as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
• Remove the header inside the main so that it will sit on its row as it is one of your primary landmark:

<header />
<main />

• Also the header does not need extra alt.
• Avoid using id to target and style an element since it is a bad practice due to css specificity. Instead, just use class to target element.
• This text Reliable, efficient delivery Powered by Technology should be wrapped in a single h1 tag. Then use max-width on it until the text wraps on its own row like on the design.
• Use div instead of section since section only does not give extra information unless it is labelled by aria-labelledBy.
• Each card title could be wrapped by heading tag like h2 since it gives information on what the section would contain.
• Also, when wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.
• Those 4 icons are only decorative so better hide them. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
• Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
• Lastly, when using img tag, you don't need to add words that relates to "graphic" such as "image" and others, since img is already an image so no need to describe it as one.

Aside from those, great job again on this one.

Thank you very much! i don´t know nothing about the accessibility on html/css so this really helped me, thanks for the other tips as well, I´ll keep improving