This is a solution to the Base Apparel coming soon page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
- The
- Live Site URL: (https://soumya495.github.io/base-apparel/)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- GSAP
Through this challange i wanted to add loading time animations to the page and so i learned how to do it using GSAP, i have linked down a video tuorial by DEVED which i found to be really helpful, also got to learn very basic form input validation.
input {
width: 100%;
padding: 1rem;
border-radius: 50px;
border: none;
border: 2px solid var(--DesaturatedRed);
font-family: "Josefin Sans", sans-serif;
}
input:focus {
outline: transparent;
border-color: black;
}
/* input field validation */
input:invalid {
border-color: var(--SoftRed);
}
input:invalid ~ a .icon-arrow {
display: none;
}
input:invalid ~ a .err-icon {
display: block;
}
- GSAP Animation Tutorial - by Dev Ed - Check this out for a fun and informative GSAP Tutorial
- Frontend Mentor - @soumya495