Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile & Desktop with Flexbox, Form validation with JS

Patricio• 160

@patriciogarnero

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Quite enjoyed this one as I thought design was quite simple and got me to focus on client side form validation with JavaScript.

Community feedback

ronaldlamdev• 430

@ronaldlamdev

Posted

I would make your button more dynamic by adding a a hover pseudo class. For example, I would add #button:hover { cursor: pointer; background-color: #77e2b4; box-shadow: 0px 4px 0px 0px rgba(109,204,162,1); } to your styles.css .

0

Patricio• 160

@patriciogarnero

Posted

@milessteamaccount Thanks for the feedback!!! I'll look into the design and apply some hovering effect to the button!

0
Ciceron• 940

@MarcusTuliusCiceron

Posted

Hi Patricio,

Validation seems not working on my side. Maybe it comes from my end but can't be sure, Also some over effect on submit button and form input outline on active state are not as defined on the design. Looking forward to see more of your work :D

0

Patricio• 160

@patriciogarnero

Posted

@MarcusTuliusCiceron Thanks so much for the feedback! Updated the input outline on active state, and input styling on error as well :) seems to be working here https://idfvvq.csb.app but not in GitHub pages tho!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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