https://github.com/0xabdulkhaliq/intro-component-with-sign-up-form

Solution for "Intro Component with Signup Form" Challenge on Frontend Mentor
https://github.com/0xabdulkhaliq/intro-component-with-sign-up-form

css3 frontend-mentor frontend-mentor-challenge html5 javascript woff

Last synced: 8 months ago
JSON representation

Solution for "Intro Component with Signup Form" Challenge on Frontend Mentor

Host: GitHub
URL: https://github.com/0xabdulkhaliq/intro-component-with-sign-up-form
Owner: 0xabdulkhaliq
Created: 2023-04-10T14:48:36.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2023-04-11T15:31:10.000Z (over 2 years ago)
Last Synced: 2024-12-31T19:13:46.736Z (9 months ago)
Topics: css3, frontend-mentor, frontend-mentor-challenge, html5, javascript, woff
Language: CSS
Homepage: https://0xabdulkhalid.github.io/intro-component-with-sign-up-form/
Size: 540 KB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

          


  

  
Intro Component with Sign up form Solution

  

    Frontend Mentor Challenge

    


    


    View Demo

     · 

    Report Bug

     · 

    Request Feature

  





  

  

    

      

  

  

    

      

  

  

    

  









## **Preview**










## **Links**

- |||

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

  | Solution URL: | [Intro Component with Signup Form 🎯 [ BEM - VANILLA CSS3 - JS REGEXP ]](https://www.frontendmentor.io/solutions/intro-component-with-signup-form-bem-vanilla-css3-js-regexp--yCKrQ9rw7) |

  | Live Site URL: | [https://0xabdulkhalid.github.io/intro-component-with-sign-up-form/](https://0xabdulkhalid.github.io/intro-component-with-sign-up-form/) |

  |||




## Pagespeed Insights Score:

- | Scored 99.25% on Pagespeed Insights |

  | :-----: |

  |  |

  |  |

  | Check out [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-0xabdulkhalid-github-io-intro-component-with-sign-up-form/opfplx6sxw?form_factor=desktop) to get live score |

  |||




## The challenge

The challenge is to build out this FAQ accordion card and get it looking as close to the design as possible.

The users should be able to:

  - View the optimal layout for the component depending on their device's screen size

  - See hover states for all interactive elements on the page

  - Receive an error message when the `form` is submitted if:

    - Any `input` field is empty. The message for this error should say *"[Field Name] cannot be empty"*

    - The email address is not formatted correctly (i.e. a correct email address should have this structure: `name@host.tld`). The message for this error should say *"Looks like this is not an email"*




## **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/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)  




## **Tools Used**

- ![Google](https://img.shields.io/badge/google-DA4437?style=for-the-badge&logo=google&logoColor=white)

- ![GitHub](https://img.shields.io/badge/github-0D1117.svg?style=for-the-badge&logo=github&logoColor=white)  

- ![Arch](https://img.shields.io/badge/Arch%20Linux-1793D1?logo=arch-linux&logoColor=fff&style=for-the-badge)

- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)   




## **Acknowledgment**

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




## **Let's Connect 👋**