Submitted about 3 years ago

Landing Page with Pure CSS Popup Form

Fraser Watt• 1,790

@fraserwat

Preview site View code

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

There's a few things I'm pretty pleased with myself for (popup form, hover animations), but also a few things I think could be done better:

As it started to get wider (but not wide enough for the grid to fill out that wide) I ended up with a lot of blank space. I'm not sure how much of this is inherent to the design (and what would be a likely screen resolution) and how much of it was shoddy formatting on my part. Any suggestions on how I could improve this?
The hover over the x to close the popup is on the whole width of that element, not just the cross. Likewise the whole element is a link to close it for the whole width of that part of the form. That's annoying, would like to work out how to fix this.
The popup form should be a little bit wider at higher widths I think but that kept messing up the formatting, with the container not really behaving responsively.

Any pointers here (or anything else I've missed) v much appreciated! 👍

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

Greetings, Fraser Watt! 👋

Well done on this challenge! 👍 It's nice that you decided to add an extra feature such as that popup and I like the hover states you added to the social media icons! 😀

The only thing I suggest is to decrease the size of the signup button in the desktop layout (it seems quite large, at the moment).

Also, it would be worth taking a look at your solution report and trying to clear up some of the errors that are there to improve the accessibility of your solution. 😉

Keep coding (and happy coding, too)! 😁

Fraser Watt• 1,790

@fraserwat

Posted about 3 years ago

@ApplePieGiraffe Thanks! Yeah this is definitely something I need to read up on a bit - have fixed the accessibility issues there but will probably do a bit of a deeper dive over the long weekend

Raymart Pamplona• 16,090

@pikapikamart

Posted about 3 years ago

Good work on this one. Regarding your points

It seems that you element fills up the grid sections and nothing wrong with that. Maybe just adjusting the rows to it right, so that it will feel like something is not missing
To fix this , what you should do is in your .popup-container, add this property align-items: flex-start this will make your items alligned on the left x-axis, since it is column direction. Then make the x button, your .close selector have the property align-self: flex-end this will make your element be alligned to the end of the container, and will not take the whole width.
For me personally, I think the width of the form , the popup form is good. Well preferences right

Overall, just adjust the sizes right but still, good job^^

Fraser Watt• 1,790

@fraserwat

Posted about 3 years ago

@pikamart this is a great shout - works perfectly!

Raymart Pamplona• 16,090

@pikapikamart

Posted about 3 years ago

@fraserwat Your welcome on that^

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