Tea Cozy Project Completed


Please see my complete project below. It took me around 5 hours to get to the finished article but I’m happy with it.

I changed most of the sizes due to it looking a little odd with the sizes given in the design spec. I’ve commented what the spec sizes were next to my own style sizes where applicable.

I would have completed it sooner but I struggled with styling the main body of my content to shift down the page 100px once I’d fixed my header. I was trying to use

height: calc(100vh - 100px)

as I was under the impression it would take the pixels from the top and shift the content down the page (I was sure I’d used/seen this used previously in other CSS projects away from Codecademy). However it did the opposite and took pixels from the bottom of the screen so I still couldn’t see the top 100px of my main content as it was hid behind the header.

It wasn’t until after googling and playing around with this issue for an hour or so that I realised I could just add a margin/padding to the top of my main body (silly me).

Nested flex containers were also a little tricky at times, but after a little play I got the required layout.

Anyways, if there’s any feedback I’m all ears :slight_smile:

1 Like