https://github.com/0xabdulkhaliq/newsletter-signup-component

This is a solution to the "Newsletter Signup" challenge on Frontend Mentor
https://github.com/0xabdulkhaliq/newsletter-signup-component

css3 es6 frontend frontend-mentor html5 javascript signup

Last synced: 4 days ago
JSON representation

This is a solution to the "Newsletter Signup" challenge on Frontend Mentor

• Host: GitHub
• URL: https://github.com/0xabdulkhaliq/newsletter-signup-component
• Owner: 0xabdulkhaliq
• License: mit
• Created: 2023-07-22T03:35:27.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-25T16:09:12.000Z (over 1 year ago)
• Last Synced: 2024-11-08T11:23:29.409Z (about 2 months ago)
• Topics: css3, es6, frontend, frontend-mentor, html5, javascript, signup
• Language: CSS
• Homepage: https://0xabdulkhalid.github.io/newsletter-signup-component/
• Size: 283 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  
Newsletter Signup Component Solution

  


    Frontend Mentor Challenge

    


    


    View Demo

     · 

    Report Bug

     · 

    Request Feature

  





  

  

    

      


  

  

    

      

  

  

    

  









## **Preview**










## **Layout Overview**

| DESKTOP        |

| :-------------: |

|     |

| TABLET | MOBILE |

| :-----: | :-----: |

|  |  |




## **Links**

- |||

  | :----- | :----- |

  | Solution URL: | [NEWSLETTER SIGNUP 🎯 [ ACCESSIBLE - BEM - CSS3 - REGEXP - ES6 ]](https://www.frontendmentor.io/solutions/newsletter-signup-accessible-bem-css3-regexp-es6-rEEtvBgzkh) |

  | Live Site URL: | [https://0xabdulkhalid.github.io/newsletter-signup-component/](https://0xabdulkhalid.github.io/newsletter-signup-component/) |

  |||




## Pagespeed Insights Score:

  

- ||

  | :-----: |

  |  Overall score 98.9% for Both Mobile & Desktop
(Below score is for mobile devices) |

  | |

  |  |

  | |

  | Check out [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-0xabdulkhalid-github-io-newsletter-signup-component/bci2p5rimd?form_factor=mobile) to get live score |

  ||




## The Challenge

- The challenge is to build out this Newsletter Signup Component and get it looking as close to the design as possible.

- 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




## **Built With**

 ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   ![JavaScript](https://img.shields.io/badge/ES6%20JavaScript%20-%23F7DF1E.svg?style=for-the-badge&logo=javascript&logoColor=black)




## **Tools Used**

![Google](https://img.shields.io/badge/google-DA4437?style=for-the-badge&logo=google&logoColor=white)    ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)   ![Visual Studio Code](https://img.shields.io/badge/VS%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)   ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)




## **Acknowledgment**

- Challenge was provided by [Frontend Mentor](https://www.frontendmentor.io)




## **Let's Connect 👋**