Submitted over 3 years ago

Officelite Solution using React + CSS, BEM naming, Flexbox

Vanessa Martin• 155

@vsm1996

Preview site View code

This is a solution for...

Officelite coming soon site

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi all! This was so fun to do, and I feel like I've become more confident as a front-end directly because of this project. I had the happy misfortune of accidentally deleting my entire git branch upon completion of this project, so I had to do it TWICE. 🥴 The second go-round, I finished in nearly half the time, which really goes to show that practice makes progress! 😂😌 Nevertheless, I have completed as much as I can, so I am proud! 🥳

A few things are missing, mainly the countdown + specific error and select option styling. I was also thinking of doing a minor update on verified submit. Another difficulty I had was the background color placement on the sign-up page. It does not look 100% correct on mobile, however, I did as much as I could and it doesn't look completely awful! lol

Please let me know if you have any suggestions or improvements! Thank you and Happy Coding! ✨

Community feedback

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

Hello there, Vanessa Martin! 👋

Nice to see you complete another challenge! 😀 Nice job on this one! 🙌 Your solution looks great and responds pretty well! 👍

It must have been a bummer to accidentally delete your Git branch! 😡 It's good to hear you bounced back, though, and completed your solution! 😀

I'd like to suggest,

Adding a max-width to the main container or wrapper to prevent the content of the page from stretching out too much on extra-large screens.
Adding some actual margin between the pricing cards in the desktop layout so that there's always some space between them (even when the width of the screen decreases).
Switching to a tablet layout slightly sooner to prevent a horizontal scroll bar from appearing along the bottom of the page right before the layout switches from desktop to tablet.

Keep coding (and happy coding, too)! 😁

Vanessa Martin• 155

@vsm1996

Posted over 3 years ago

Hi ApplePieGiraffe! 😄

Thank you so much! I appreciate your kind words! These are great suggestions and I will implement them as soon as I can! ✨

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord