/meet-landing-page

About This is a solution to the Meet Landing Page challenge on Frontend Mentor

Primary LanguageSCSS

meet-landing-page s

The challenge

  • Develop a page trying to make it as close as possible to the image made by the designer

Links

Built with

  • SASS
  • HTML

What I learned

I learned how to use @mixin smarter to avoid rewriting techos of code. Also I changed my function to create flexible measures, instead of using that crazy function now I use this:

@mixin heightFlex( $minHeight, $mediumHeight, $maxHeight, $mobileWidth: 375, $tableWidth: 768) {

     max-height: $maxHeight * 1px;
     min-height: $minHeight * 1px;
     height: floor($mediumHeight / $tableWidth * 100 * 1vw) ;
    
     @media (max-width: $tableWidth * 1px) {
         max-height: $mediumHeight * 1px;
         height: floor($minHeight / $mobileWidth * 100 * 1vw);
     }
}

Figured out how to use CSS @keys to make some basic but cool animations

Resources

Author