Submitted about 2 years ago

Responsive sign-up form with JS validation, using flexbox and sass

Ian• 150

@blndcat

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Intro component with sign-up form

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Another challenge I had coded up a while back but never submitted. The only changes from that time: 1. I switched over to a different development set-up (vite with sass) and 2. tidied up some html errors.

I used flexbox and some absolute positioning, but probably try to use mostly grid if I had to do it from scratch now.

Community feedback

Hyron• 5,870

@hyrongennike

Posted about 2 years ago

Hi @blndcat,

Nice job on completing the challenge

You can center the columns by using CSS flex on the parent container in your it's the body element. Replace you body rule with the following one to center the columns in the middle of the page.

body { font-size: 1.6rem; font-family: Poppins,sans-serif; background: hsl(0deg,100%,74%) url(/assets/bg-intro-mobile.c6c995d2.png); color: #fff; display: flex; justify-content: center; align-items: center; min-height: 100vh; }

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