Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

👨‍💻 Fylo dark theme LP w/ (HTML + SASS + JS)

accessibility, sass/scss
Adriano•42,870
@AdrianoEscarabote
A solution to the Fylo dark theme landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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! 😊

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Lucas 👾•104,160
    @correlucas
    Posted over 2 years ago

    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
  • Asha•1,210
    @livinglifemeaning
    Posted over 2 years ago

    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
  • Dan•120
    @Dan-raccoon-69
    Posted over 2 years ago

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

  • MX•290
    @xingxing-prog
    Posted almost 3 years ago

    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.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub