Hello… here is my final product landing page. Although it passes I only have one issue with it - and that is the ‘submit’ button at the bottom of the form. I can’t seem to get the text inside the button to be centered vertically. Or I could be just tired from the endless hours of coding + learning.
Any feedback is appreciated.
Beautiful !
And your code is very organized, very clear !
Congrats !
I feel ashame and pressured about mine now ahaha
Not finished yet : https://codepen.io/Nalid/pen/abvZOjJ
Hi @Nalid, thanks for the feedback. It took me a week to build that page with lots of frustration and sweat!
I looked at your page and I can see that it is coming together. However just a few points you may want to look at:
Background images.
Create a div for your first section (your ‘landing section’ when you open your page) and add your background picture in that div as background-image: url(); in CSS.
Set your div to height: 100vh; - - that way your div covers the full height of the screen.
Then play about with the width of your div as you wish.
Make sure your background-size is set to cover >> background-size: cover – so it fills the entire div.
Below landing section
You can use the same principle as above but I wouldn’t recommend it as the height will be an issue. If you set a section/div to a height of 100vh and put more content it then it will simply overflow the section/div into another section/div below it. If you set the height as 100% – itmay mess up the background image as you fill the div with more content.
I would keep it simple for now, as we are both beginners and style the remaining divs with colours and use height: 100%; so the div automatically grows as you fill it with content.
Hope that helps 
It’s because the height you have set on the button is less than the total height needed when you combine the height of the text plus the top/bottom padding. You can just remove the height on the button, you don’t need it.
One thing I would suggest is that you try viewing this page at different text sizes. If you don’t know how to do that, using Firefox, go to the View -> Zoom menu and activate ‘Zoom Text Only’. Holding down the Ctrl key, scroll your middle mouse button to make the text bigger. You’ll soon see several issues.
Basically, you can’t assume what text size the viewer will be using to look at your page and your page should be able to handle bigger text sizes gracefully.
Thank @bbsmooth I looked at the button and made alterations to it. One issue lead to another but eventually I did what you said which is to remove the height.
With regards to the text sizes with the ‘Zoom Text Only’ thing, I can see that the text fills the whole page and do understand that it’s an issue for some users. I’m going to look into it and Google it, but wouldn’t mind any hints 
Hi @ibrahim_aq !!
Thanks a lot for your advices !! I end up review all my code and re-start from the beginning , look way better now 
https://codepen.io/Nalid/pen/XWmjmoV
Next challenge now, will keep me busy for the week ahaha