officelite-coming-soon-site

Officelite coming soon site

Solution : Live Site URL

This is a solution to the Officelite coming soon site challenge on Frontend Mentor.

The challenge

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

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your 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

Built with

• HTML
• CSS
• CSS Flexbox
• CSS Grid -JavaScript

Experience, Challenges and What I learned

The background image and background pattern position was really challenging as making them look good responsively is not easy.

I could not scale the illustration svg and ended up adding it as an img instead which lead to the mismatch of fonts in the svg. The easier fix would be to edit the svg itself and its font. But I did not want to do that and try to scale the svg instead. Keeping it this way as a reminder to come back to it and fix it.

To make the floating pricing cards float, I ended up adding too much padding to the footer items and the hero items which does not feel like the right way to do it. So that needs fixing at some point.

I did not start with considering how I could reuse the same classes for the sign-up page too which lead to writing too many new classes for the sign-up page.

Overall I am not very happy with the outcome, I could have done this challenge better. I ended up fixing too many little things to make it what it is which looks okay but not the best.

I did not finish the all the bonus tasks but I will come back to it later.

---

Pending tasks

• Finish the bonus task (custom-styled select form control)
• Learn to scale svgs and fix the illustration svg.
• Form validation and form submission.
• Live solution screenshots(s)
• On submit update README with : Solution submitted at Frontend Mentor - Submission Link