Submitted 5 days ago

Responsive page | Grid template | Mobile First

Gabriel Noss•180

@GabrielNoss

Preview site View code

This is a solution for...Intro component with sign-up form

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I tried to make the solution near possible to the referencial image, but i got some problems with the active states.

What challenges did you encounter, and how did you overcome them?

Improving my JavaScript skills and understanding how to implement it in web development is necessary for me.

What specific areas of your project would you like help with?

How implement the active states, i need help with that. I am unsure of how to insert the image into the input. I would be grateful if someone could assist me.

Community feedback

KapteynUniverse•2,170

@KapteynUniversePosted 5 days ago

You can use this for frontend before submitting the form

input:not(:placeholder-shown):invalid {
  background-image: url(./images/icon-error.svg);
  background-position: 95%;
  background-repeat: no-repeat;
}

or you can use absolute/relative positioning for after validation

.input-form {
    position: relative;
}

#fNameErrorIcon, #lastNameErrorIcon, #emailErrorIcon, #passwordErrorIcon {
    /* display: none; */
    /* padding: 0% 85%; */
    position: absolute;
    right: 5%;
    top: 35%;
}

You can also give icons to a error class and just use

.error {
    /* display: none; */
    /* padding: 0% 85%; */
    position: absolute;
    right: 5%;
    top: 35%;
}

Marked as helpful

Gabriel Noss•180
@GabrielNossPosted 2 days ago
I appreciate your assistance. I just remove the paddings on the id´s and show me the error icon when the form is incomplete.

Sorry for now answer your help, problem with the electricity.
1

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