Submitted over 3 years ago

Coming Soon Page With Responsive Images And CSS Grid — No JS

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Preview site View code

This is a solution for...

Base Apparel coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey, everybody! 👋

I have to admit, this was a much trickier challenge than I thought! 🤔

I originally tried to layout this site using flexbox, but eventually switched to CSS grid (which I found to be easier).

I also decided not to try out any JS for the form validation but use CSS pseudo-classes and combinators to make the error elements appear when the email input is invalid.

I really wasn't sure about how to make this challenge responsive. 😥 Other than follow the designs for the desktop and mobile layouts of the site (which look nice when the screen is exactly 1440x800 or 375x800) I think there's a lot of blank space on other screen sizes and I wasn't sure if I should allow the images to scale a whole lot (because then they might not look so clear).

Any help or feedback on this would be greatly appreciated! 😌

Happy coding, everyone! 😁

Community feedback

Akerele Tunde• 165

@trafiki

Posted over 2 years ago

Hi, I;m curious, how did you achieve the email validation without JS. How did you make it display the error message and icon without js

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 2 years ago

@trafiki

Hey!

The CSS-only form validation styles are done with this bit of Sass (mostly thanks to the :invalid pseudo-selector and CSS combinators):

.email-input {
    position: relative;
    height: 7rem;
    padding-left: 2.25rem;
    border: 1px solid var(--color-desaturated-red);
    border-radius: 10rem;
    background-color: rgba(0, 0, 0, 0);
    outline: none;

    &:focus:invalid {
        border: 2px solid var(--color-soft-red);
    }

    &:focus:invalid + img {
        opacity: 1;
    }

    &:focus:invalid ~ span {
        opacity: 1;
    }

    &::placeholder {
        color: var(--color-desaturated-red);
        font-family: 'Josefin Sans', sans-serif;
        font-weight: lighter;
    }
}

Basically, there a couple of elements that are always present but are just made invisible when the input element is not in focus or has valid input. :focus and :invalid detect whether or not the input element is in focus and has invalid input, and changes the opacity of those invisible elements accordingly.

Akerele Tunde• 165

@trafiki

Posted over 2 years ago

Okay thanks, I see the selectors that made that possible now

Connor Z• 5,115

@zuolizhu

Posted over 3 years ago

Hey @ApplePieGiraffe, your solution is almost pixel-perfect as well 😁!

I think doing form validation without JS is actually a big improvement of accessibility (some situations such as JS just won't load or browser just not support).

I think there is a background pattern coming in the starter kit, the background is not just a simple gradient 😝. Also, you could put the background in main-wrapper to make the background responsive.

Since the page is a coming soon page (supposed no other content down below), so I think it make sense to stretch the picture on the right side to fit the height. Here is a shameless plug to my work 😎 I hope it helped!

Happy coding 🙌!

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@zuolizhu

Thanks for the feedback! 👍

I suppose allowing the image to scale would be a good solution after all!

Happy coding to you, too! 🙌

Roman Filenko• 3,335

@rfilenko

Posted over 3 years ago

Hey, nice work, but noticed a few issues:

check the responsivness, a scrollbar appears ~ 800 and higher, probably grid causes it;
on desktop there should be a bg pattern on whole left side;
on tablet would change some things to make it look great (bigger image, change layout a bit maybe, you can be really creative). Add some small adjustments to make it really appealing.😉

Cheers, Roman

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@rfilenko

Thanks for the feedback, Roman! 👍

I totally forgot about the background SVG not covering the entire left side of the desktop layout!

And I'll look into the other details, as well.

Loris DUCAMPS• 425

@LKA-LORIS

Posted about 3 years ago

Hi ApplePieGiraffe,

I just updated my solution and I allow myself to share it with you :)

https://base-apparel-coming-soon-lka-loris.vercel.app/

Thank you

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

@LKA-LORIS

Oh, hey that's very cool! 😀

I like the loading screen you added and the emoji favicon! 🤩

Good job! 👍

Anna Leigh• 5,135

@brasspetals

Posted over 3 years ago

While I'm not finished with the challenge yet, I am seconding @zuolizhu 's recommendation to put the background in the wrapper so that it covers the entire design (even behind the img). The gradient is actually layered with the background pattern on the desktop version, which took me a lot of eye strain to figure out! 😂

Kudos on getting the form validation to work without JS! I'll probably be coming back to this as a reference for mine. 👏

And yes...all the media queries. The responsive layout struggle with this one is real.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@brasspetals

Thanks for the feedback! 👍

And the tip on combining background SVG with the gradient—I might have missed that one!

😃

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