Final project of the Scrimba Frontend Career Path Module 6: Responsive Design. This BBQ Splash Page is fully responsive using clamp() & media queries. Also uses JavaScript to display a confirmation & has a CSS media query for prefers-color-scheme: dark.
The 'extras' I added include:
- focus states on input fields
- focus & hover states on the button
- (These include transitions which change the font-weight, color, background-color & box-shadow)
- media queries for
- prefers-color-scheme: dark
- mobile devices in landscape mode
- an additional fix for a small width range in mobile landscape, where the desktop layout fit better.
- slightly different text styles for the Congratulations message and a new image
- a reload function to clear the form
This screenshot shows a run through of the site:
Or, better yet, checkout the live site: on Github Pages!
P.S. I extensively tested this site on multiple browsers using the responsive view in Dev Tools and my own devices.