Skip to content
Submitted over 3 years ago

Responsive landing page using only flexbox

Mohamed•325
@MohamedBehhar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo landing page with two column layout
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hy again, I'm definitely happy with the result, but not very happy code I did my best to make it as clean and dry as possible, but I didn't think that I succeeded. Difficulties: I found some difficulties in positioning the background and make it similar to the one on the design. My question: How I can I get my code more organized and dry? And thank you.

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey, great work on this one. Just some additions to what APG said.

    • You may want to wrap the email inputs inside form tags. Since they are supposed to submit your email right in some route, it needs to be inside form tags. Change as well the button next to it as a button and not a tags. You want to do this both in the header and near footer email inputs.

    Really good job on this ^^

    0
    Mohamed•325
    @MohamedBehharPosted over 3 years ago

    @pikamart From the beginning, you were commenting on my challenges and give me advice and remarks I really appreciate it a lot, and thanks again for your remarks on this challenge.

    0
    Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    @soqk :< thank you as well!!

    0
  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Greetings, Mohamed! 👋

    Good job on this challenge! 👏 Your solution looks nice and is responsive! 👍

    I suggest,

    • Taking a look at your solution report and trying to clear up some of the errors that are there in order to improve the accessibility of your solution. Looks like you need to label the input elements on the page in some way. 😉
    • I think the positioning of the background shape is okay—just adding a little more padding inside some of the sections of the page might be a good idea so that stuff has more space around it.
    • Perhaps considering using a single <h1> tag per page (as that's commonly recommended best practice, at the moment) rather than more than one. Some less-important heading tags (such as <h2> or <h3>) for other headings besides the main heading of the page might work better.

    Keep coding (and happy coding, too)! 😁

    0
    Mohamed•325
    @MohamedBehharPosted over 3 years ago

    @ApplePieGiraffe thanks a lot, I'm really happy with your feedback, this is so helpful, I'll rectify my code and do what you said to me.

    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