@kyrizu Very nice! This page is unique and shows a lot of great design ideas. Well done! There’s not much to comment about as almost all of the code looks correct to me.
<div class"item"> a bunch of times in your code. That should be
<div class = "item"> with an equal sign
=. When I fix that, it causes other problems, so you probably want to remove it. You have some other cases of this error as well. I found these errors by copy/pasting your HTML into this HTML validator. You’ll probably want to do that as there are a number of errors that need to be fixed.
There are also a couple of errors in your CSS, which you can see by pasting the code here.
I notice you don’t have an explicit
<body> element. I think CodePen automatically adds one, but since you have the
<head> element, you might as well have the body element too, right? I’m not too familiar with CodePen as I prefer to use GitLab pages to host static sites like this. Have you tried that or are you familiar with hosting sites on GitLab or GitHub pages?
Here’s a screencast about the process of writing semantic HTML markup in case you haven’t seen it yet and are interested in seeing one developer’s way of creating their code.
The only other thing I can think of is to add more comments to your HTML and CSS to help others read through it. Here are two resources I found (1 | 2) about commenting CSS that may be helpful. They’re older, but still valid.
Keep up the great work! I look forward to reviewing your future projects.