Responsive landing page using The Box Model and Media Query.

There are some problems in the html which you should address too:

• this design does not include a header. But if it did, this isn't what you'd use it for. It's important to understand what each landmark is for. The header is for repeating content across a site not for any page specific content. Everything in this design should be in a main.
• I recommend you read the post in the resources channel on discord about how to write good alt text on images.
• headings must go in order. You can't go from h1 to h3 as the next heading in the dom order.
• remember strong is for bold emphasis not span.
• the table must be a table with header and normal cells. The header cells should ideally have the scope attribute too.

And the CSS:

• get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
• don't use percentage for margins or component width. You lose all control that way. Margins and paddings should be in rem if you want it to scale with the users font size or px if you want a fixed/static value or em in the occasional cases where you want it to scale with the current elements font size.
• border radius in % goes strange for any elements that aren't square or circular. It's better in all other cases to use a fixed border radius.
• adjust paddings and margins in lists or list items. You shouldn't be using position relative anywhere in this.
• media queries must be defined in rem or em not px. this post is worth reading.
• the component should not have a width in any unit (unless you're using a css function like clamp() or min() but that's unnecessary here). All it needs is a max width in rem.

@grace-snow I also worked on this project, could you please give me some feedback when you have time?

@grace-snow I'll definitely take all of this into consideration and improve my code.

Thanks a lot for the feedback!