Responsive Landing Page

Nice! 🙌🏻

I would also add some transitions for active states (when colors change on hover). It creates more interactivity and makes the project looks cooler. Active states can be done on buttons, links, titles which act like links or anything else, you choose.

You can read more about it here, in case you haven’t done much of it:
https://www.w3schools.com/css/css3_transitions.asp

IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

Hi Daniel,

When I turn on my developer tools in chrome, which is sitting at the bottom of the browser, the <div class="container"> is overlapping with the element after it: <section class="main-content">. I think it's because you set height: 100vh; for the .main-header .container. It's better to remove it, or change it to min-height: 100vh;

Also, please look at the <div class="main-header-mockup"></div>. In my opinion, it's better to place the image inside it using <img> tag rather than as a background-image. First, it's an important image that has meaning, not just a decorative image. Background image is best suited for an image that is just a decorative one. Please refer to this article about image accessibility. And second, in mobile view, the image is vanished. It can't be seen under the Get Started For Free button. By using <img> tag, that could be prevented from happening.

That's it from me. Hope this helps. Happy coding!

Looks good. Add the hover states to the buttons and the footer links.