This is a solution to the Manage landing 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
- See all testimonials in a horizontal slider
- Receive an error message when the newsletter sign up
form
is submitted if:- The
input
field is empty - The email address is not formatted correctly
- The
- Solution URL: Github Repo
- Live Site URL: https://webreaper-manage-landing-page.netlify.app/
- Astro - Website Framework
- Tailwind CSS - UI Framework
- React - JS library
- Swiper - JS library
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- CSS Filter Preview - This helped me generate the appropriate filters for coloring the social icons on hover.
- Tailwind CSS Video - This helped me learn Tailwind CSS, which I used in the making of this design.
- Website - webreaper.dev
- Frontend Mentor - @Boston343
- Twitter - @BowTiedWebReapr
Followed along Travery Media's free youtube tutorial on Tailwind CSS for parts of this. Video Link