Frontend Mentor - Multi-step form

The challenge

Your challenge is to build out this multi-step form and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

• Complete each step of the sequence
• Go back to a previous step to update their selections
• See a summary of their selections on the final step and confirm their order
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Receive form validation messages if:
  • A field has been missed
  • The email address is not formatted correctly
  • A step is submitted, but no selection has been made

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Colors

Primary

• Marine blue: hsl(213, 96%, 18%)
• Purplish blue: hsl(243, 100%, 62%)
• Pastel blue: hsl(228, 100%, 84%)
• Light blue: hsl(206, 94%, 87%)
• Strawberry red: hsl(354, 84%, 57%)

Neutral

• Cool gray: hsl(231, 11%, 63%)
• Light gray: hsl(229, 24%, 87%)
• Magnolia: hsl(217, 100%, 97%)
• Alabaster: hsl(231, 100%, 99%)
• White: hsl(0, 0%, 100%)

Typography

Body Copy

• Font size (paragraph): 16px

Font

• Family: Ubuntu
• Weights: 400, 500, 700