Here is my submission for the Product Landing Page: fCC_Product Landing Page - AoE2:DE (codepen.io). I’ve run it through the fCC tests and w3 HTML validator.
Some thoughts, in no particular order:
I did some searching on the forum to see what others think about making product landing pages for real, trademarked products. Judging from responses it seems there should be no issues, though I added a disclaimer at the bottom for good measure.
After this project, I’m getting more comfortable with CSS grids and using grid-template-area to arrange content.
One particular challenge was setting the background image in the header/nav to line up with the body background so that content would disappear neatly under the header. I think this looks better than giving the nav a solid, color background.
The scroll-margin-top property came in handy so that when I clicked on nav links, it wouldn’t hide the headers under the nav.
I used https://fontjoy.com/ to pick out two companion fonts to Cinzel (Overlock SC and Yrsa).
Thanks for your attention!