Frontend Mentor - Manage landing page solution

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.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • Useful resources
• Author
• Acknowledgments

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
• 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

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• SASS - SASS library
• GlideJS - Glide JS library for carousel
• PristineJS - Vanilla javascript form validation micro-library

Useful resources

• CSS Filter Generator - This tool calculates the correct values of CSS filter property functions to generate a desired color. It helped me to change the color of svg icons on hover state.
• vanilla-navbar-menu - It helped me to get a hint on how to build a responsive menu with no framework (only pure CSS/SASS and Javascript). I just adapted the code to fit my needs on this challenge.

Author

• Website - Fernando Tezza

Acknowledgments

Crediting the authors of the tools I mentioned at the Built with section and Useful resources section:

• Jędrzej Chałubek (Glide JS - for Carousel)
• Shamim Hasnath (Pristine JS - for Form Validation)
• Barrett Sonntag (CSS Filter Generator)
• Rizal Dev (vanilla-navbar-menu)