Skip to content
Submitted over 3 years ago

Fully responsive two page officelite website using CSS and JS only.

Zybartas•480
@ZybartasRingys
A solution to the Officelite coming soon site challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Simple two page coming soon website was a true challenge for my layout skills, using only CSS to make it fully responsive from mobile to desktop everything done with CSS and some vanilla JS for form input validation and arrow movement. If you have any improvements to my code write them in feedback.

Code

Please log in to post a comment

Log in

Community feedback

  • Alex•2,010
    @AlexKMarshall

    This looks great at desktop size so well done. It's fairly responsive down to a smaller size, but at widths below 400px you're getting horizontal overflow, which makes it a bit off on smaller phones.

    Careful with the alignment. In the mobile layout, the pricing cards aren't centered on the page, there's more space on the right than on the left.

    The colours look good except for the call to action buttons. The colours there don't match the design and the contrast between the background and text is too low and fails accessibility checks.

    For your HTML semantics, make sure that you're using heading levels correctly. Your headings should read like a table of contents if you list them out. At the moment you have multiple h1's, and you skip from h1 to h3 to h5. Headings must always be used in the correct order, never skipping a level. You can size them however you want, using CSS.

    The 'get started' call to action is opening in a new tab. Don't do that, prefer remaining in the same tab, otherwise it's very jarring to users.

    On the second page, the form inputs do not have labels, they really should have them. Placeholders are not sufficient for accessibility. The contrast of the text should be increased too.

    It might also be nice if the count-down dynamically changed with javascript. It seems a little strange having something show the number of seconds til an event, but it stays the same.

    This may seem like quite a lot of points, but there's a lot of really great stuff in this solution.

    Marked as helpful

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