Skip to content
Submitted almost 3 years ago

Fylo Dark Theme Landing Page using SCSS and BEM Naming Convention

Nurcholis•420
@cholis04
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo dark theme landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

First time trying SASS and implementing the BEM naming convention. This is amazing.

Using the :invalid CSS pseudo-class allows for customizing styles to invalid elements.

&:not(:placeholder-shown):invalid ~ .signup__error-input {
      display: block;
}

This method works quite well and is simple.

Feedback is very welcome

Community feedback

  • Jay Dee•270
    @JayDeeZzzPosted almost 3 years ago

    WOW! Awesome work dude :D Btw try to hide that email validation error, before entering an invalid email address. Cheerrzzzzzzzzzzzzzzzzzzzz 🥳

    0
    Nurcholis•420
    @cholis04Posted almost 3 years ago

    @JayDeeZzz Great idea.

    I will try to hide the error before the user types the email.

    Thank You

    0
  • bikeinman•1,080
    @BikeInManPosted almost 3 years ago

    Wow ! Isn't it perfect to the design! Looks and works so well. Congratulations. Did you use flex? What features of SASS functionality did you use? I am guessing much more than variables.

    0
    Nurcholis•420
    @cholis04Posted almost 3 years ago

    @BikeInMan Yes, I use flex to set some element layout. SASS features are very helpful, some of the ones I use are @mixin, @use, and functions. Maybe there are many more that I haven't used but it will definitely be very helpful

    0
    bikeinman•1,080
    @BikeInManPosted over 2 years ago

    @cholis04 Thank you for the reply. Lot to learn for me.

    0

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