/pod-landing-page

Landing page for imaginary business "Pod"

Primary LanguageCSS

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

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

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties/vars
  • Desktop-first workflow

What I learned

For this challenge, I practiced a lot of relative positioning, and getting a pixel-perfect design. I learnt how to use the "srcset" attribute where you have multiple of the same images at different widths for different screen sizes, to make it more easily responsive. I did know about it, but never actually used it before properly. Was very fun.

Overall, I really liked the design and green theme, reminded me of spotify a little bit. Hope you like this challenge :D

Author