Frontend Mentor - PayAPI multi-page website solution

This is a solution to the PayAPI multi-page website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

Users should be able to:

View the optimal layout for each page depending on their device's screen size
See hover states for all interactive elements throughout the site
Receive an error message when the contact form is submitted if:
- The Name, Email Address or Message fields are empty should show "This field can't be empty"
- The Email Address is not formatted correctly should show "Please use a valid email address"

The big thing I learned is how to properly and responsively position an element as the background image of other element. In this project an image named bg-pattern-circle.svg is used many times as a background of other elements. This image has been positioned differently on different viewport width, so it is hard solve the position problem by just simply writing background-image: url(); and background-position: xx yy; rather I used ::before pseudo element with absolute position.
This project also taught me use of inline-flex and inline-grid;
I created a nice sidebar menu with some vanilla js.
learned a nice trick max-width: 40rem; width: 100%; is similar to width: min(40rem, 100%);
learned to validate form with optimized vanilla js code
learned some new solution to layout problem;

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
css		css
design files		design files
images		images
js		js
sass		sass
.gitignore		.gitignore
README.md		README.md
about.html		about.html
contact.html		contact.html
content.txt		content.txt
index.html		index.html
pricing.html		pricing.html