Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elidrissidev/base-apparel-coming-soon
This is a solution to the Base apparel coming soon page challenge on Frontend Mentor.
https://github.com/elidrissidev/base-apparel-coming-soon
css frontendmentor html javascript parcel
Last synced: 22 days ago
JSON representation
This is a solution to the Base apparel coming soon page challenge on Frontend Mentor.
- Host: GitHub
- URL: https://github.com/elidrissidev/base-apparel-coming-soon
- Owner: elidrissidev
- License: mit
- Created: 2021-09-22T21:53:20.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-09-22T22:15:28.000Z (about 3 years ago)
- Last Synced: 2024-10-10T23:02:12.731Z (about 1 month ago)
- Topics: css, frontendmentor, html, javascript, parcel
- Language: CSS
- Homepage: https://base-apparel-coming-soon-elidrissidev.vercel.app/
- Size: 3.63 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Frontend Mentor - Base Apparel coming soon page solution
This is a solution to the [Base Apparel coming soon page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/base-apparel-coming-soon-page-5d46b47f8db8a7063f9331a0). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [How to build](#how-to-build)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Useful resources](#useful-resources)
- [Author](#author)
- [License](#license)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site 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:
- The `input` field is empty
- The email address is not formatted correctly
### How to build
This project uses Parcel bundler, so building only takes a few steps!
- Clone the repository:
```sh
$ git clone https://github.com/elidrissidev/base-apparel-coming-soon.git
```
- Install the dependencies with NPM:
```sh
$ npm install
```
- Start the development server:
```sh
$ npm run start
```
- Or, build the website for production:
```sh
$ npm run build
```
### Screenshot
| Mobile (375px) | Desktop (1440px) |
| --- | --- |
|  |  |
### Links
- [Solution URL](https://www.frontendmentor.io/solutions/base-apparel-coming-soon-using-css-and-js-constraint-validation-api-iaqRjgS3W)
- [Live Site URL](https://base-apparel-coming-soon-elidrissidev.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- [Parcel](https://parceljs.org/)
### Useful resources
- [Animate Blend Mode with opacity and transition](https://stackoverflow.com/a/45502783) - This helped me fix the on-hover background transition of the form submit button, I was able to achieve that by using `background-blend-mode` and animating the `background-color` from `transparent` to a transparent white on hover.
## Author
- Website - [Mohamed ELIDRISSI](https://www.elidrissi.dev)
- Frontend Mentor - [@elidrissidev](https://www.frontendmentor.io/profile/elidrissidev)
## License
This project is licensed under the [MIT Licensed](LICENSE.txt).