You asked for it! A few design elements I would change:
Pure black backgrounds remind me of early 2000’s sites. I’d change it to some off-black color, like #303040 for example, to make it look more professional.
Pure white text, also, looks ‘uncooked’ if you know what I mean. I’d make it slightly grey.
When the header turns black it looks like it disappears briefly, which, in my opinion, a header shouldn’t do, even as part of animation.
I’d give the image a bigger margin-bottom to distance the caption more.
Perhaps resize the image caption so that it fits neatly under the image and doesn’t stick out. Maybe also give it darker grey color so that it doesn’t grab attention so much.
The way Floyd’s image sits in the middle humbly, surrounded by lots of white space, is also very late 90’s / early 2000’s look. Nowadays the trend is to create “hero images” that stretch the whole width of the viewport, and are followed by clearly separated main content.
When I opened your project the first time I had a good feeling about it
I like the font you have chosen for the h1 and h2 > good job.
I also think the colors for the h1 keyframes are good. Fitting well with
the black background color > but indeed early 2000’s has been mentioned
The link at the bottom has a blue color. This I would change.
The container with the gloves looks very 90’s… sorry for that
What I would do to get modern website design inspiration is to check websites like:
I completely get what you are saying regarding the look and feel, it does look a bit dated in terms of colour combos and the img elements current positioning.
Thanks again for the tips you shared they are great!
Do you know which animation property would achieve that? I currently have the animation set on an infinite loop but I too did think it would look better without the animation resetting and making the header disappear.
Thanks for pointing out the buttons to me, that was my error as I forgot to add the Javascript to the Codepen JS console. Now fixed!
Sidenote - Sorry for the individual responses, I now realise that you can reply to all via one post.
I’m not sure about special property, but animation usually loops with last frame=first frame. So it depends on how do you want to loop it. If it should go back to black after the blue part, then just add another step with black, so it will go from black to blue and back to black. If you don’t want it to go back to start, i’d make two animations, first one from black to red and the second one from red to blue and again to red.