Frontend Mentor - Meet landing page solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

mobile

tablet

desktop

Links

• Solution URL: https://www.frontendmentor.io/solutions/meet-landing-page---tailwind-css-nextjs-MWz_x_c3X9
• Live Site URL: https://fem2407-meet-landing-page-next.vercel.app/

My process

Built with

• Mobile-first workflow
• Semantic HTML5 markup
• Flexbox
• Grid
• React - JS library
• Next.js - React framework
• Tailwind CSS - For styles
• TypeScript - JavaScript with syntax for types

What I learned

I learned to position and scale the hero image in the mobile view design.

// hero container with image at mobile view
<div className="relative aspect-[2.44/1] w-full overflow-hidden">
  <image
    className="absolute aspect-[2.71/1] w-full origin-top scale-[110.5%]"
    src="{imageHero}"
    alt="circles of people"
  />
</div>

The container uses an aspect ratio 2.44/1 which is less wide than the image width. So, the image aspect ratio is 2.71 which is wider than the container and is scaled 110.5% from origin-top. Because the container is set to overflow-hidden, 5.25% on each side of the image is cropped out as in the design.

Continued development

I may add some subtle animations.

Useful resources

• Tailwind CSS: Responsive Design - This helped me apply media queries at the right breakpoints.

Author

• Website - darrickdevelops.com
• Frontend Mentor - @DarrickFauvel
• LinkedIn - Darrick Fauvel