Looks good, neat and simple.
Looks good for desktop, but not very great on mobile.
But for the alayout I realized you used some non-common way to control the advances of the elements. This is bad!
I just realized you override the font-size for h1
tag, please don’t! really, don’t do this.
H1-H6
elements are take their size relatively based on their parent. for example H1 is 2em
(assume 200%), browser automatically calculate and set the font size of the Hn
element.
If you think h1 is so large, so use something else like em
, rather than override the tag.
The top form container (class container2
), you specified the height value to control the advance, this is not required! remove it.
You set placeholder for the text field take email address, good. but it has no enough margin to top H1 element. I also suggest you make it a little bigger! same for box size and font-size.
The video you added, you used absolute values to control the width, it could break the mobile layout. one good practice would be using the screen width in mobile layout especially. example:
@media only screen and (max-width: 800px)
iframe {
/* width: 373.333px; */
/* height: 210px; */
width: 90vw;
height: 60vw;
}
The top navigation/menu bar, would be a little mess for small screens, check:

One good practice is using the hamburger menu solution for mobile view which works always, check smaple here (try resize the preview panel to see what happens for small screens).
I also suggest you add one bottom solid border on top menu could make it better, also a very small shadow!
Keep going on great work, happy programming