All solutions

Created an additional function where it will count the number of unopened notification

Used the new units for CSS "cqi" but not all devices supported the new units and not sure if JS syntax will properly work with multiple items

I was unable to utilize the keypad and needed to create button one by one Host the page through Netflify

Unable to fix the height when a certain height and width of the screen appears or set but overall it's working as intended

It's pretty challenging to create the positioning of the elements especially when the screen is quite bigger or smaller than 1440px

Pattern SVG has been position absolute and due to that was not able to make the SVG in the background but instead, the SVG pattern has been in the front of the elements

The navigation bar and Sidebar (Mobile) are created manually Sizing and Positioning are not reliable SVG Sizing depends on the screen size (375px screen-wide, the client SVG shrinks but is not automatic since I cannot find the correct way to render when the screen changes)

Responsiveness is quite tricky and the design is not accurate

Unsure about the CSS

Unable to configure the "if you click a button and click another button the class from the first button will be removed"

Positioning the hover effect Fonts size and spacing

Code works offline but when uploading the file it messed up the positioning