Flexbox, grid, media queries and mobile first.

Hello John, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

If we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a max-width with the value we want the content to stop growing and to center use a margin: 0 auto;

main {
    max-width: 1440px;
    margin: 0 auto;
}

The remainder is excellent.

I hope it's useful. 👍

HEY JOHN!

I love the extra effects you added to it, very nice

One thing you could do is set a max-width for the .items or the p element inside them, this will prevent the words inside from stretching so much when the viewport is increased.

The same goes fo the p element in your header

IF THIS WAS HELPFUL IN ANY WAY, DON'T HESITATE TO MARK IT AS HELPFUL :)

HAPPY CODING!

Looks nice!