Frontend Mentor - Pod request access landing page solution

This is a solution to the Pod request access landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Pod request access landing page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
      • Desktop
      • Tablet
      • Mobile
    • Links
  • My process
    • Built with
    • Useful resources
    • Continued Development
  • Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements
• Receive an error message when the form is submitted if:
  • The Email address field is empty should show "Oops! Please add your email"
  • The email is not formatted correctly should show "Oops! Please check your email"

Screenshot

Desktop

Tablet

Mobile

Links

• Solution URL: GitHub
• Live Site URL: Vercel

My process

Built with

• BEM naming convention
• SCSS
• Flexbox
• Desktop-first workflow

Useful resources

• How to change background-image opacity in CSS without affecting text | HTML/CSS - This helped me in making the background overlay
• CSS Tutorial For Beginners 46 - Multiple Backgrounds - Shaun's awesome. I always love his teaching style. I learned from this video that we can actually put multiple images in background-image which is amazing! We can then position those images easily using background-position too.

Continued Development

For this challenge, my main focus is HTML & CSS. I would like to improve the JavaScript form validation in the future. For now, it only validates if the user enters anything in the textbox, or whether the user has entered an email with an @ in it.

Author

• Frontend Mentor - @hooiyan