Frontend Mentor - Officelite coming soon site solution

This is a solution to the Officelite coming soon site challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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 error states when the contact form is submitted if:
  • The Name and/or Email Address fields are empty
  • The Email Address is not formatted correctly
• Bonus: See a live countdown timer that ticks down every second
• Bonus: See a custom-styled select form control in the sign-up form

Screenshot

Desktop

Tablet

Mobile

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: Github Pages

My process

Built with

• Semantic HTML5 markup
• CSS variable
• SASS
• BEM
• Flexbox
• Gulp

What I learned

In this challenge, I studied and updated my knowledge of the project structure, building a project with gulp, a more conscious approach to responsive design.

Continued development

Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.

Useful resources

• Youtube - Great channel about HTML and CSS.
• Ninja Units - A site where you can convert all possible and necessary in the creation of sites units.

Author

• Github
• LinkedIn
• Codewars
• Frontend Mentor