Huddle landing page

Hi Mzu Soci,

good job on the challenge. I remember struggling with it myself when I first tried to solve it. I looked at your code and live site and I have a suggestion that you may take into account.

At @media (min-width: 600px) you change your wrapper to have max-width: 1100px;. The wrapper is wider than the screen and it looks cut off on screens that are less than 1100px wide. Based on your code I think that the best solution is to change @media (min-width: 600px) and @media (max-width: 600px) to @media (min-width: 1050px) and @media (max-width: 1050px). You can also eliminate the .wrapperclass from the @media (min-width: 1150px) and add width: 1100px; to the .wrapperthat is outside the media queries.

I hope my writing makes sense. Keep up the good work! Cheers 🥂

Hi Mzu Soci, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

The hero image has a color slightly different from the Figma design, if you want to match the color you can reach this using mix-blend-mode with mix-blend-mode: multiply;. The multiply will make the image blend the div background and the opacity will make the image less evident and improve the blend between image/purple div. See the code below:

img { 
    mix-blend-mode: multiply; 
    opacity: 0.8;
}

Add a padding to the body, so that the content in lower resolutions doesn't hit the edge of the screen!

The rest is great!

I hope it helps... 👍