Submitted over 2 years ago

Fylo Dark Theme Landing Page using SCSS and BEM Naming Convention

Nurcholis•420

@cholis04

Preview site View code

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 over 2 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 over 2 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 over 2 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 over 2 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

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