Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

πŸ‘¨β€πŸ’» Fylo dark theme LP w/ (HTML + SASS + JS)

Adrianoβ€’ 34,090

@AdrianoEscarabote

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


πŸ‘¨β€πŸ’» Hello guys.

DAY 2/7

In this challenge, I practiced a lot of sass, and I improved the code organization a lot, separating files containing variables and media queries into folders. I also played around with js a bit.

Test the email input, if the email the user enters is valid, a card will appear! if not an error message will appear!

-πŸ‘¨β€πŸ’»Email validation with a simple regex!

-πŸ‘¨β€πŸŽ¨A custom card will appear if the email passes the test!

Feel free to leave feedback on how I can improve my code.

Thanks! 😊

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

Mto boa mago do SASS! Continue no foco 7/7 πŸ’ͺ

Eu só vi duas coisas pra melhorar, a seccao das midias sociais que ficou faltando um hover com opacidade e um erro no form que nao faço ideia do que seja hahaha.

Marked as helpful

1

Adrianoβ€’ 34,090

@AdrianoEscarabote

Posted

@correlucas kkkkkkkk dexei em branco mas devia ter tirado, eu quero ver a sua clipboard logo.

to ansioso

0
Ashaβ€’ 1,210

@livinglifemeaning

Posted

It is really nice that you're doing this 7 day challenge, to practice consistency and see how you improved after a week.

I think figuring out how to change the color of the social media icons and the "See how Fylo works" link along with it's arrow and line underneath on hover is a good thing to know how to do. Also, the text of the name and position is too small, and input text should inherit font-styles.

You remind me that I want to start using sass with css modules in React. An extra step but the features are nice.

Marked as helpful

0
Danβ€’ 120

@Dan-raccoon-69

Posted

I really like your project, good job! I am also learning SASS, I hope to use it for the next projects.

1

Adrianoβ€’ 34,090

@AdrianoEscarabote

Posted

@Dan-raccoon-69 thanks, I'm glad you liked it! Good learning!

0
MXβ€’ 290

@xingxing-prog

Posted

It's cool that your website is very responsive. what is SASS? I am still using the very primitive html and css and javascript to write all the project.

1

Adrianoβ€’ 34,090

@AdrianoEscarabote

Posted

@xingxing-prog sass is a preprocessor scripting language that is interpreted or compiled into CSS.

highly recommend reading about it, it's not hard to learn and also has some handy tools to help with development!

0
MXβ€’ 290

@xingxing-prog

Posted

@AdrianoEscarabote I read your sass code, it seems kind of complicated, maybe because I didn't learn it. You know I am waiting to learn all css concepts including animation, transition, and pseudo classes then learning sass because I find it's not so easy as before I suppose to learn css, especially when it's connected with JavaScript maybe because I learnt JavaScript first. Haha, maybe I should take a look.

1
Adrianoβ€’ 34,090

@AdrianoEscarabote

Posted

@xingxing-prog Take a look, it's not that hard!

0
MXβ€’ 290

@xingxing-prog

Posted

@AdrianoEscarabote I will.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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