Frontend Mentor - Results summary component

Design preview for the Results summary component coding challenge

This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

The challenge

Users should be able to:

  • Add their email and submit the form
  • See a success message with their email after successfully submitting the form
  • See form validation messages if:
    • The field is left empty
    • The email address is not formatted correctly
  • 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

Links

Where to find everything

Your task is to build out the project to the designs inside the /design folder. You will find both a mobile and a desktop version of the design.

The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as font-size, padding and margin.

You will find all the required assets in the /images folder. The assets are already optimized.

There is also a style-guide.md file containing the information you'll need, such as color palette and fonts.

Got feedback for me?

I love receiving feedback! We're always looking to improve my challenges and our platform. So if you have anything you'd like to mention, please email ankitwaware15@mail.com.

Have fun ! 🚀