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

huddle landing page using grid

@faheem4545


Design comparison


SolutionDesign

Solution retrospective


problem in responsiveness

Community feedback

P

@davidFreelance19

Posted

Hello developer! I have seen your code and want to congratulate you for completing this challenge. I'm also bringing you some improvements to your code to improve the design layout a bit (desktop only)

body{
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem 1rem;
    align-items: center;
    justify-content: center;
    display: flex;
}
.logo{
    margin-top: 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 3rem;
}
.hero-text, .hero-img{
    display: flex;
    justify-content: center;
}
.hero-text{
    flex-direction: column;
}
.btn{
       width: 35%;
}
.icons{
    margin: 0 auto;
    padding-left: -2rem;
    position: absolute;
    right: 0;
    left: 0;
}

I recommend you study a little more about display flex and display grid, this will help you generate a more organized and maintainable code. Also we don't always have to use margin or padding to make a similar design, believe me that with these two themes you will be able to generate responsive designs and create a pixel perfect!

David Rodriguez

Marked as helpful

2

@faheem4545

Posted

@davidFreelance19 Thank you bro it is really helpfull for me next time i will take care of these things

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