Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/incihuseynli/newsletter-sign-up-with-success-message-main
Front End Mentors Junior Level projects
https://github.com/incihuseynli/newsletter-sign-up-with-success-message-main
css-flexbox css-grid css3 front-end-web-development html-css-javascript html5 javascript regex-pattern validation vanilla-javascript
Last synced: about 1 month ago
JSON representation
Front End Mentors Junior Level projects
- Host: GitHub
- URL: https://github.com/incihuseynli/newsletter-sign-up-with-success-message-main
- Owner: incihuseynli
- License: mit
- Created: 2023-08-30T19:56:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-30T20:19:26.000Z (over 1 year ago)
- Last Synced: 2024-01-28T01:14:38.655Z (11 months ago)
- Topics: css-flexbox, css-grid, css3, front-end-web-development, html-css-javascript, html5, javascript, regex-pattern, validation, vanilla-javascript
- Language: CSS
- Homepage: https://incihuseynli.github.io/newsletter-sign-up-with-success-message-main/
- Size: 580 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Mentor - Newsletter sign-up form with success message solution
This is a solution to the [Newsletter sign-up form with success message challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/newsletter-signup-form-with-success-message-3FC1AZbNrv).
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)- [Built with](#built-with)
## Overview
### 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### Screenshot
- Desktop and Mobile Versions:![Desktop version:](./assets/images/screenshot_desktop.png)
![Mobile Version:](./assets/images/screenshot_mobile.png)### Links
- Solution URL: (https://www.frontendmentor.io/solutions/newsletter-signup-form-with-success-message-solution-u74AH-eYtI)
- Live Site URL: (https://incihuseynli.github.io/newsletter-sign-up-with-success-message-main/)## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla Javascript
- Validation