Huddle Landing Page with Alternating Feature Blocks

Hi @TheCoderGuru 👋,

You did a great job in completing this challenge. 👍 Everything is nice and clean. 👌 I have noticed a few thing that you might want to check.

• On large viewports, the overall content of the page is stretching horizontally thus creating a huge gap between the 2 column content. Adding a wrapping <div> element with a max-width inside each section should correct that. 😉
• When the viewport is around 1024px and up to 1200px, the content of the 1st column of the hero section is squeezed. gap: 15rem; is too much on this viewport range.
• The shadow around the feature cards in the main content is missing. Moreover, the text content and the image should alternate positions. You could achieve this by applying the following styles:

.grid-container:nth-child(even) {
  .grid__content {
    order: 2;

   + div {
     order: 1;
   }
  }
}

However, for this to work properly, the absolute positioning should be removed on the <img />. By looking at the design, I don't think position: absolute; is even required here.

• I would have suggested you to write the markup for these feature cards in mobile-first approach; meaning the image content would be the 1st child element of the card and then the text content, something like this:

<div class="grid-container">
  <div class="grid__image">
    ...
  </div>

  <div class="grid__content">
    ...
  </div>
</div>

Since this is the default order of the content, you wouldn't have much style to add on mobile and as the viewport widens, you could then apply the suggested above style to create the alternating content position like this:

@media (min-width: 1024px) {
  .grid-container:nth-child(even) {
    .grid__image {
      order: 2;
    }
    
    .grid__content {
      order: 1;
    }
  }
}

• In the footer, I think About Us, What We Do etc. as well as the social media icons should be links.

I hope this helps.

Keep it up.

Hi Shashree

As I have not completed this challenge I do not know how is the complete design but from what I see in the preview I can notice that the boxes with the grid-container class lack shadow as well as popup-box, if you could add a shadow like box-shadow: 0 0 10px 0px 0px rgba(0,0,0, 0.2); it would be more faithful to the design. Also with the shadow as a guide you could position the middle of each child of this parent box its elements to the center because I see that you are using margins when I think it is not the most appropriate.

You could add that the social networks are links that do not take you to any part but you could put some effect to make it look good, I suppose that in the design they have not put active state but I would recommend you to add it.

The text boxes in the header are a little wider and there is little space left to make it look more like the design.

In case the link to see your code can't be seen, it gives error 404 in Github :c

Those are the only details that I could notice for your solution to this challenge, I hope they help you.

Your solution looks so good but I think you should learn sass or if you already know sass, it would be so perfect for this kind of challenge.

• No accessibility and HTML issues reported. Great👍

Besides great job there👍 Have a nice day and a happy coding👍💻