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 Section(Flexbox+Responsive)

Vitor ant 60

@vitorantonionne


Design comparison


SolutionDesign

Solution retrospective


Hello, I'm Vitor this is my solution to this challenge.

Feedback is always welcome, I had some difficulties adjusting to the screen(MOBILE), so if you have any tips, send them to me

Olá, sou Vitor esta é a minha solução para este desafio.

Tive umas dificuldades na parte de ajustar para mobile , então não ficou 100% , mais ficou bem ajustado , quem tiver dicas pode mandar .

Qualquer feedback sobre como posso melhorar e reduzir o código desnecessário é bem-vindo!

Community feedback

Alamin 2,000

@CodePapa360

Posted

Hi Vitor ant👋 Great job on completing this challenge! 🥳

Great work on completing the Huddle landing page challenge! It's impressive to see how you implemented the design provided, including the logo, image mockups, text, and social media links in the footer.

One of the standout features of your solution is the use of responsive design techniques, such as media queries, to adjust the layout and styles for different screen sizes. This ensures that the page looks good and is easy to use on a wide range of devices, from desktop to mobile. For example, in the following media query you've used flexbox and some clever adjustments to the layout to make the page look good on mobile:

@media screen and (max-width: 984px) {
  body {
    background: hsl(257, 40%, 49%) url('../assets/images/bg-mobile.svg') no-repeat center center;
    background-size: cover;
  }

  div#container {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }

  #img-mockups {
    background: url('../assets/images/illustration-mockups.svg') no-repeat;
    background-size: cover;
  }

  div#container > div#text {
    text-align: center;
    margin-left: 0;
  }
}

You've also done a great job with the overall design and aesthetic of the page, using a combination of Google Fonts and the HSL color model to create a cohesive and visually appealing look. The use of the box-sizing property and border-box value also helps to keep the layout consistent and predictable.

Overall, this is a very well done solution to the challenge. Great job!

I hope this feedback was helpful. 😊 Keep up the good work!👍

Marked as helpful

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