Huddle Landing Page Section(Flexbox+Responsive)

Community feedback

• 

  Alamin•2,000

  @CodeWithAlaminPosted almost 2 years ago

  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