/bbq_splash_page

Final project of the Scrimba Frontend Career Path Module 6: Responsive Design

Primary LanguageCSS

bbq_splash_page

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.

Screenshots of the BBQ signup page for desktop, one on mobile with dark mode enabled, and the mobile congratulations page

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: Initial page is shown, then focus states on the inputs as name and address is inputted. The button click moves on to the Congratulations message

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.