Let me know what you think!? Good or bad!
A lot of little quirks and wasteful outdated code in there.
Just to go down the list:
1) Just because you're using NAV doesn't mean you still get to slop labels or anchors in there. IT's STILL a list of choices thus UL/LI is still required.
2) Your H3/H2 orders are backwards. You don't follow a H1 with a H3.
3) Don't crap a bunch of pointless DIV all over the markup to do linear-gradient and generated content's job.
4) Your close buttons are clearly part of what should be a footer, so use footer instead of
5) Never assume a page will only have one header or footer tag. They are also valid for each SECTION or ARTICLE.
6) Your menu should probably be part of the body HEADER.
7) I'm not seeing anything that warrants the presence of media queries. min() based VW padding/margins might be more useful.
Here's a quick rewrite to show how I'd approach that:
https://codepen.io/jason-knight/pen/BadXvMZ?editors=1100The real magic being this:
main h3:after {
content:"";
display:block;
height:1em;
margin-top:1em;
background:linear-gradient(
to right,
#E27396,
#E27396 20%,
#EA9AB2 20%,
#EA9AB2 40%,
#EFCFE3 40%,
#EFCFE3 60%,
#EAF2D7 60%,
#EAF2D7 80%,
#B3DEE2 80%
);
border-radius:0.25em;
}
Eliminating the need for those garbage '00's style "spacer div".