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 landing page with two column layout

Itai 670

@georit

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

Solution retrospective


Is it possible to create the email validation(red border on input field & error message below input field) using just html and css? I know how to do it using javascript. Any feedback is highly appreciated

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hey, Itai! 👋

You can use the :focus, :valid, and :invalid pseudo-classes to do some CSS-only form validation. If you'd like some ideas to get started, you can take a look at this solution (from another challenge) that does just that! 😉

I suggest,

  • Adding a max-width to the main container or wrapper so that the content of the page doesn't grow too wide on extra-large screens.
  • Adding some more space around the sides of the page (using margin or padding) in the mobile layout so that there's some room between the content of the page and the edges of the screen.

Overall, your solution looks pretty good and is responsive! Kudos for remembering the hover states of all of the links and buttons on the page (something some often forget on this challenge)! 👏

Keep coding (and happy coding, too)! 😁

0

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