Hero Section Layouts

Various hero section layouts using flexbox. Features different content arrangements, image placements, and call-to-action styles. Perfect for creating engaging landing pages and website headers.

PREVIEW

Welcome to Our Platform

Create amazing experiences with our powerful tools and features. Start your journey today and join thousands of satisfied users.

Transform Your Workflow

Streamline your process and boost productivity with our innovative solutions. Built for teams of all sizes.

Powerful Features

Everything you need to succeed, all in one place.

Feature 1

Feature description and benefits go here.

Feature 2

Feature description and benefits go here.

Feature 3

Feature description and benefits go here.

CODE

/* Centered Hero */
    .centered-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    /* Split Hero */
    .split-hero {
      display: flex;
      gap: 3rem;
    }

    @media (max-width: 768px) {
      .split-hero {
        flex-direction: column;
      }
    }

    /* Feature Grid */
    .feature-grid {
      display: grid;
      gap: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    /* Feature Card */
    .feature-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    /* CTA Buttons */
    .cta-buttons {
      display: flex;
      gap: 1rem;
    }