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

Community feedback

• 

  Akerele Tunde•165

  @trafikiPosted about 3 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

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 3 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.

  1
• 

  Akerele Tunde•165

  @trafikiPosted about 3 years ago

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

  0
• 

  Connor Z•5,115

  @zuolizhuPosted about 4 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 🙌!

  3

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 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! 🙌

  0
• 

  Roman Filenko•3,335

  @rfilenkoPosted about 4 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

  3

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 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.

  0
• 

  Loris DUCAMPS•425

  @LorisDucampsPosted over 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

  2

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @LKA-LORIS

  Oh, hey that's very cool! 😀

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

  Good job! 👍

  0
• 

  Anna Leigh•5,135

  @brasspetalsPosted about 4 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.

  2

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @brasspetals

  Thanks for the feedback! 👍

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

  😃

  0