Base-Apparel--Less-Project

Base Apparel coming soon page created with CSS preprocessor LESS

Frontend Mentor - Base Apparel coming soon page solution

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.

Table of contents

• Overview

  • The challenge
    Your challenge is to build out this coming soon page and get it looking as close to the design as possible.

  • Screenshot Desktop View
    

  • Screenshot Mobile View
    

• Links
  Hosted on Vercel:
  https://base-apparel-less-project.vercel.app/

• My process

  • Built with
    HTML, CSS, and LESS Preprocessor
    
    
  • What I learned
    It was very difficult for me to place the picture in between the logo and the 'we're coming' div on mobile version. In the end I decided to use display: none for the right image when the desktop changes to mobile size. I also placed a div in between the logo and the 'we're coming' div and made the mobile image 1px and transparent when it was in desktop version and then with media queries I styled it as normal size and visible.
    
    

• Author
  Shannon Mettry

Overview

The challenge is to build out this coming soon page and get it looking as close to the design as possible.

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