Skip to content
Submitted 23 days ago

Meet landing page solution

#sass/scss
P
Steven•160
@stevensuna
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

  1. Responsive Design

    • Mobile-first approach
    • Breakpoint system using em units:
      • sm: 36em (576px)
      • md: 48em (768px)
      • lg: 62em (992px)
      • xl: 75em (1200px)

  2. Typography

    • Fluid typography implementation using clamp()
    • Consistent type scale across breakpoints
    • Accessible text contrast ratios

  3. Spacing System

    • 8pt grid system using rem units
    • Consistent spacing patterns:
      • spacing-800 for mobile/tablet layouts
      • spacing-1400 vertical and spacing-1000 horizontal for desktop layouts

  4. CSS Architecture

    • Modular SCSS structure
    • Custom properties for theming
    • Reusable components and utility classes

Community feedback

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord