Skip to content
Submitted almost 4 years ago

Flexbox landing page + form validation with CSS only

Guilherme Magno•300
@devMagno
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is a challenge that I've started about a month ago but i dropped it because I had no idea how to do the form validation using JS but yesterday I saw @ApplePieGiraffe's solution using only CSS then I decided to give it a try and I think the result looks pretty cool and I'm proud and happy I was able to make it! (By the time I was doing this challenge I wasn't using Sass or BEM, like I use in my newer projects, so it can be kinda messy)

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hey, Guilherme Magno! 👋

    Nice to see you complete another challenge! 😀 Great job on this one! 👍

    Your solution looks good and the HTML and CSS-only form validation works well! I agree that the results look pretty cool! 😎

    I suggest,

    • Adding text-align: center to the text content in the mobile layout of the page.
    • Using some margin or padding to add space between the elements and the top and bottom sides of the page in the mobile layout (rather than relying on the height of the viewport to put some room between them). This will ensure that everything will be nicely spaced out even when the height of the screen decreases.

    Keep coding (and happy coding, too)! 😁

    And happy holidays! 🎄

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @ApplePieGiraffe

    BTW, your profile says that you're a seventeen-year-old student learning to code, and I thought I'd mention I'm a teenager learning to code, too! 😆 Good luck and keep it up, bro! 👍

    1
    Guilherme Magno•300
    @devMagnoPosted almost 4 years ago

    Thank you for you feedback! 😆

    I made the changes that you suggested and the layout looks a lot better now, thanks! Also, thank you for your comment, it's really inspiring, thanks again!

    Happy holidays and happy coding! 😊

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @devMagno

    NP! 😀 Just took another look, and everything looks good, now! 👍

    1

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