This is a solution to the Meet landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshots
  • PageSpeed Insights results
  • Links
• My process
  • Built with
  • Tested with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Users should be able to:

• View the optimal layout for the section depending on their device's screen size

Mobile version

Desktop version

• Solution URL: Meet landing page github
• Live Site URL: Meet landing page challenge live

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

• Browsers used for testing: Google Chrome, Firefox, Safari, Brave, Microsoft Edge
• Devices:
  • (Real) MacBook Pro (15 inch), Samsung Galaxy A33 5G, Samsung Galaxy S20+, iPad Air 2
  • (Virtual) The mobile and tablet devices mentioned under Chrome's dev console

• If there are two <source> with the same definition of media-query, <picture> element will load only one

<picture>
  <source
    srcset="./assets/desktop/image-hero-left.png"
    media="(min-width:80rem)"
  />
  <source
    srcset="./assets/desktop/image-hero-right.png"
    media="(min-width:80rem)"
  />
  <img
    src="./assets/tablet/image-hero.png"
    alt=""
    width="199"
    height="153"
    role="presentation"
  />
</picture>

• Browsers like Safari handles the rendering of the <picture> element differently than other browsers. Therefore the following CSS definition of .footer-background picture worked in other browsers except Safari:

<div class="footer-background">
  <picture>
    <source
      srcset="./assets/images/desktop/image-footer.jpg"
      media="(min-width: 80rem)"
    />
    <source
      srcset="./assets/images/tablet/image-footer.jpg"
      media="(min-width: 48rem)"
    />
    <img
      src="./assets/images/mobile/image-footer.jpg"
      alt=""
      role="presentation"
    />
  </picture>
</div>

.footer-background {
  height: 26.75rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: -1;
  background-color: hsl(192, 37%, 48%);
}

.footer-background picture {
  mix-blend-mode: soft-light;
  opacity: 0.5;
}

In order to make it work for all browsers, this was the fix:

.footer-background img {
  mix-blend-mode: soft-light;
  opacity: 0.5;
}

• Investigate the aspect ratio issue. The image at the footer is displaying incorrect aspect ratio

• Website - Rupali Roy Choudhury
• Frontend Mentor - @rupali317

• I express my gratitude towards my mentor - Deborah for the insightful code review session.