Hi there. From what I can see it looks like you're only loading in one font-weight of the font. So even though you tell the CSS that you want a different font weight it isn't 'seeing' them. When you go to Google fonts and grab the font before getting the embed code go to the customise tab and select the font weights you require.
You're positioning everything relatively. If you took off the positioning you would see them all stacked on top of each other. When you position it relatively it still takes up its old space which is why the footer is so far down. Hopefully this gives you something to go off to try fix it. I haven't done this layout yet myself so I'm not sure how I would have done it, but I will probably attempt it with flexbox.
Your relative positioning is also why the boxes disappear on mobile. Because you have it set to be left by X amount of pixels once the screen is small that amount of pixels causes it to be hidden off screen. I recommend looking into media queries.
Great job, though! Good luck with your learning.
Marked as helpful
@Modu9173
Posted
@Darknessflowers Thank you so much for the recommendation! I used CSS Grid, Flexbox and media query. It worked!
