Notification Page

Hi there,

Good work! I can see you've made a solid attempt at matching to the mockups. I've noticed several things however which are worth considering for refactoring this:

• You can use the font-clamp() property to dynamically scale down the font-size from a value set at a high viewport width down to the the lowest set viewport width in rem (note that this assumes a base font-size of 16px which is suitable generally, but it's worth noting in larger applications this would require further adjustments.) Here's a link to generate the function Link
• Your markup is also semantically incorrect. The <header> should always be at the top, outside any other element (except the body) and your main content should be wrapped in the <main> element to mark where the most interactive content is (important for accessibility.) You could remove the two <div> elements and style the first two I mentioned.
• It's great to see that you've locally hosted your font, however this should be in .woff2 format as this is designed for the web. Here's a link explaining this in further detail Link
• Your <img> elements are missing alt attributes, which are important for screen readers and other assistive technologies to be able to read them to establish their purpose and context
• Avoid using var when declaring variables - I noticed this in your var classname = span.getAttribute('class');. This should be const seeing as it isn't being reassigned within the same scope

Hope this helps!