Mobile First Responsive Landing Page using HTML and SCSS

Hi @fidellim

This looks good previewing on mobile 👍

I have some suggestions for improvements for your code, I hope you find them helpful

• look up how to write good alt text on images. If it deserves a description, it needs to describe the image a bit better, otherwise no description
• register button would most likely trigger navigation. Therefore you should be using anchor tag, not button
• social media icons on a site have purpose. They should be wrapped in anchor tags as they too would trigger navigation. These links would need to have aria-labels with the name of the social media too. It's a good rule of thumb that if something is changing color in a design or designed to be clicked on in some way, it should use an interactive element.
• don't forget to add visible focus states to interactive elements too. That's really important for keyboard users.
• in css you are nesting selectors really deep. This is considered bad practice as it increases specificity of each selector and will make things really hard to style on bigger projects. Try to use single class selectors as much as possible.
• the gap property isn't fully supported yet for flexbox in all browsers so be careful using it. I would be using margins instead for now (and then css would be shorter too, as no need for block elements to be displayed as a flex column). Alternatively, you may like to try css grid for this layout, as it is 2 dimensional and gap is fully supported with css grid.
• in media queries you only need to override specific properties that are different to the base styles. It looks like you are repeating a lot that doesn't need repeating.

Good luck

It looks good you did the challenge pretty good I have a different take on the transitions maybe if you look at you yours in a browser dragging the window between desktop and mobile and them look at mine then you can see two different strategies at play. I am trying to keep the elements in the transition from mobile to desktop not growing bigger than the desktop elements during the transition https://palgramming.github.io/Frontend_Mentor_Challenges/huddle_landing_page_single_introductory_section/index.html