I'd like some feedback on how to more efficiently write the CSS, also couldn't pick between semantic or utility classes, so it's very messy.
How is my Javascript? are there any unnecessary lines of code or anything that I should add, remove, or change?
I also haven't changed the divs to semantic elements, I'd do it later.
I have no idea why the screenshot generated the tablet/mobile view, I made sure it wouldn't collapse until 950px, but oh well....
I had difficulties with the background.
Please, tell me, what can I do to improve
You can set these to your body {},
height: 100vh; makes that your contents take up the full height of the viewport
background: url(image) "color"; shorthand to apply an image and a color to your background
background-size: 100% 50vh; makes the background image takes up 100% width and half the viewport height
You might want to remove the background-position.
Someone knows why the background doesn´t adjust to the page height properly when the page size start to decrease? I mean, the image it´s not vertically centered. Thanks.
You can apply this to your body
background-size: 100% 50vh;
This makes that the background width will be 100% and the height will be 50% of the viewport height.
