Responsive Coming Soon page using HTML, CSS and JS

Hey, Hoophelie! 👋

You have done a great job on this challenge! 🙌

The site is fully responsive and looks great on all screen devices. Nicely formatted code with semantic tags in use.

There's just a minor issue with an overlay as it does not fully expand to viewport size on a small screen landscape mode. To fix this issue, you can follow these steps:

Add this code to the body tag:

body {
position: relative;
}

Remove width & height property from .overlay class and add the following code instead:

.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
}

And lastly remove height property from a small screen devices with the class name of .landscape-page and add it to the media queries for a medium-large screens.

To fix the accessibility issues, you can simply add a label tag. Learn more about these tag here: https://www.w3schools.com/tags/tag_label.asp

Hope this helps and Happy Coding! 😊

Hey there, Hoophelie! 👋

Nice to see you complete another challenge! 😀 Nice job on this one! 👏

One more tiny thing I might suggest in addition to Rabin92's helpful feedback is to perhaps add overflow-x: hidden to the body to prevent a horizontal scroll bar from appearing along the bottom of the screen in the mobile layout (or set the width of the image in the mobile layout to 100%, since the image is the element that's overflowing the body and causing this issue, and adding that seems to solve it). 😉

Keep coding (and happy coding, too)! 😁