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

[HTML - CSS] Fylo Landing Page With Two Column Layout

Sebastian 1,560

@dnksebastian

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

MaryF 350

@Janselin

Posted

Great job!! I've just uploaded my solution for this one but i was wondering how to add the message under the input? when the email is a invalid one. Any tips? thanks

1

Sebastian 1,560

@dnksebastian

Posted

@Janselin Thanks :) In my solution I've used the ":invalid" css selector to change the value of "display:" property in error message paragraphs. This way I've avoided using JS. If you want to use JS in your case, you can for example create and append a new paragraph when the input is invalid or manipulate classes with the element.classList.add and .remove methods :) Hope this helps, keep it up!

1
MaryF 350

@Janselin

Posted

@dnksebastian Great! Thank you so much for your help. I didnt know about the :invalid css selector! I'll use that for sure since I still don't know javascript😂

1
Sebastian 1,560

@dnksebastian

Posted

@Janselin Here's an interesting article describing this method in detail: https://www.digitalocean.com/community/tutorials/css-styling-form-input-validity

1
MaryF 350

@Janselin

Posted

@dnksebastian Thanks!! 💜

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