Skip to content
Submitted 6 months ago

Newsletter sign-up no Figma

grgrnkoo•520
@grgrnkoo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud to finally have an opportunity to use my new knowledge on practice, best feeling ever. Also in this project I'm proud of my e-mail validation and how error states work if validation is failed. Lots of new experience, thanks Frontend Mentor!

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

Most of events are different on practice than in theory

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

I tried to apply scale transitions on active/hidden event, but couldn't find how to make it work. Would love to get solutions from community! Thanks!

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 6 months ago

    Hi!

    You didn't apply transition to your .window class. That's why transform works without animation.

    .window {
    transition: transform 0.5s;
}

    Of course you can put any value for animation duration instead 0.5s.

    Hope it could help =)

    0
    grgrnkoo•520
    @grgrnkooPosted 6 months ago

    @Alex-Archer-I i deleted it to have a clean code on a final version. this thing doesn’t work. i suggest it’s because of absolute position of a hidden element, because object is outside the page flow. but tbh i decided to practice and find a solution for this a bit later

    0
    Alex•3,130
    @Alex-Archer-IPosted 6 months ago

    @grgrnkoo Well, I tried to add transition to your code in the dev console and it worked. Absolute positioning shouldn't affect it.

    Maybe you have some issue that blocked it earlier? =)

    1
    grgrnkoo•520
    @grgrnkooPosted 6 months ago

    @Alex-Archer-I maybe i had an issue. i’ll try it again with a console a bit later when i get back to a computer

    1
    grgrnkoo•520
    @grgrnkooPosted 6 months ago

    @Alex-Archer-I maybe i had an issue. i’ll try it again with a console a bit later when i get back to a computer

    1
    Alex•3,130
    @Alex-Archer-IPosted 6 months ago

    @grgrnkoo I added transition: transform 0.5s; to the .window class, to be exact. Alas, I can't attach a screenshot here, but it definitely worked =)

    Marked as helpful
    1
    grgrnkoo•520
    @grgrnkooPosted 6 months ago

    @Alex-Archer-I i just reached to my work computer to check out a transition property. it really worked in a dev console. should be some rendering problems on my local side. thanks for your help

    1

Please log in to post a comment

Log in with GitHub

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