Skip to content
Submitted about 1 year ago

Dark Theme Landing Page

Victoria Azola Silva•1,290
@VickyAzola
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

Hi! 👋 In this challenge, I learned to center an absolute element without using hardcoded numbers 😊

I have some questions for the community:

  • How can I make the <svg> hover activate with the other elements? For now, every element is separated, and the hover is individual.
  • How can I fix the form email container when the error message is displayed? It adds space to the <div>, making it bigger.

If you have some insight into those problems, please let me know. Thanks! 🤗

Community feedback

  • Erratic Enigma•200
    @erratic-enigmaPosted about 1 year ago

    Hello! Nice work on the solution; looks really good!

    I'm not too familar with Tailwind, so I'm unsure about how to address the seperate hovering issue on the <svg> elements.

    For the second question, in your JavaScript, you add and remove the text within the error message <p> on these lines:

    11: errorMessage.textContent = "Please enter a valid email adress";
19: errorMessage.textContent = "";

    The text content inside the <p> element sets its height, which in turn changes the height of the parent <div> element. Instead of adding and removing the text content, you could instead apply a visibility style like so:

    11: errorMessage.style.visibility="visible";
19: errorMessage.style.visibility= "hidden";

    The visibility CSS property hides or shows an element without removing it from the document flow, which in this case means the height will be retained.

    Hope this helps! 😃

    Marked as helpful
    0
    Victoria Azola Silva•1,290
    @VickyAzolaPosted about 1 year ago

    It worked, thanks! @erratic-enigma

    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