The Header and the Footer

The header is on both pages: the logo and the navigation. In the first cinema project, you laid it out with Flexbox, the logo on the left and the links on the right. On a phone, there isn't room for that. Mobile first, the header is a column, with the navigation under the logo and both in the middle, and from 768 px up, it's a row, as before:

<header class="flex flex-col items-center gap-2 bg-night px-4 py-4 md:flex-row md:justify-between md:px-8">

That's the pair flex-col md:flex-row from the exercise Row or Column. items-center works in both directions: in the column, it puts the logo and the navigation in the middle of the width, and in the row, in the middle of the height. md:justify-between pushes them to the edges, but only in the row.

The logo gets the cinema's font and the gold color. The links are white and turn gold under the mouse pointer. The old class logo can go: no rule styles it anymore.

The header and the footer are the same on both pages, so when you've finished them on one page, copy them to the other. The checks look at both.