Skip to content
Submitted 6 months ago

Responsive landing page using CSS Flexbox

Diogo Luxa•120
@DiogoLuxa
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of having organized myself well before starting to write any lines of code. In Figma itself, I've already separated the sections for each screen size and planned out how the classes would adapt, especially for desktop. I've also been pleased with how I'm adapting to Sass and its folder structure to keep projects more organized. Finally, I'm happy with the end result, which stayed very true to the design.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was with the hero images, which behave differently as we open the screen size. Creating a logic to structure this in a way that would be easy to code for all sizes was the icing on the cake.

Community feedback

  • Sivaprasath•2,520
    @sivaprasath2004Posted 6 months ago

    Hello i`ll wishing for your completion project solution.

    • I will give some suggestion i believe its used for improve your skill.
    • In CSS You will use
    @media (min-width: 768px)  {
.hero {
    margin-bottom: 80px;
}
}
    • I will recomand for Using rem or em values for padding and margin provides a scalable and flexible approach, especially when considering accessibility and responsive design.
    • change to
    @media (min-width: 768px)  {
.hero {
    margin-bottom: 8rem;
}
}
    1
    Diogo Luxa•120
    @DiogoLuxaPosted 6 months ago

    @sivaprasath2004

    Hey, Bro!

    Thks for sharing, but I used px only for the show and simplicity, in the real world I would use rem. ^^

    0
    Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 6 months ago

    @DiogoLuxa, There's no such thing as "real world", building projects on Frontend Mentor is mainly because to gain Professional experience not for just showcasing our work.

    I would greatly suggest you to use rem, just try that's what makes you a better developer!

    0
    Diogo Luxa•120
    @DiogoLuxaPosted 6 months ago

    @0xabdulkhalid

    Rsss Bro, I really appreciate the comment. Let's have some fun and take it easy ;)

    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