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

Ping coming soon page | Pug, Scss & Vanilla JS

MasterKrabโ€ข 940

@MasterKrab

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am just a beginner and would appreciate any feedback.

Do I have good practices? What errors do I have? How could I improve my code?

Thanks <3

Community feedback

P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

Hello, MasterKrab! ๐Ÿ‘‹

Nice to see you complete another challenge! ๐Ÿ˜€ Good work on this one! ๐Ÿ™Œ I like the smooth transition of the outline around the email input element! ๐Ÿ‘

I only suggest perhaps increasing the size of the heading and subheading just a bit in the mobile layout (even they might be smaller than that of the desktop layout, they look a little too small, at the moment). ๐Ÿ˜‰

Keep coding (and happy coding, too)! ๐Ÿ˜

2

MasterKrabโ€ข 940

@MasterKrab

Posted

@ApplePieGiraffe Thank you :)

0
Simone Paglinoโ€ข 75

@darkshadowultimate

Posted

First I wanna say that you did a really good job ๐Ÿ‘๐Ÿป.

Second, Iโ€™d like to make some suggestions:

  • Now thereโ€™s the cursor pointer on the social media icons only, extend it to the whole circle which contains the single icon ;
  • The โ€œNotify Meโ€ button changes its color for the hover effect but itโ€™s without transition. Add a simple transition effect and it will improve for sure. Also considering that weโ€™re talking about a button, make the cursor โ€œpointerโ€ ;
  • The cursor of the mouse inside the input email for inserting the e-mail I think it would be better if it was where thereโ€™s the โ€œYโ€ of โ€œYourโ€ (while right now is way more back) ;
  • Last but not least, I think the font-size youโ€™ve used for the button and the input email is a little bit bigger. Also make the button text bold.

Let me now what you think ๐Ÿ˜ and wish you the best.

1

MasterKrabโ€ข 940

@MasterKrab

Posted

@darkshadowultimate I agree with your comments, thank you very much.

0
Simone Paglinoโ€ข 75

@darkshadowultimate

Posted

@MasterKrab You're welcome ๐Ÿ˜

1
Roc Tanweerโ€ข 2,500

@RocTanweer

Posted

Hello there,

I would like to suggest that your email varification regex is not working...

[email protected] is not a valid email.

And icons should have hover effect

Hope it helps ๐Ÿ™‚

1

MasterKrabโ€ข 940

@MasterKrab

Posted

Hi @RocTanweer, I will check the regex.

The icons only have the hover effect on desktop, because on mobile it does not make sense to add it.

Thanks for the feedback!

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