Site Designer Guide
tutorial flexbox landing-page intermediate

Building a landing page with Flexbox

This tutorial builds a product landing page from scratch using Flexbox as the primary layout tool. You’ll create a sticky header, hero section, social proof bar, feature rows, and a strong CTA — the anatomy of a high-converting page.

What you’ll build: A single-page product landing page with sticky nav, alternating feature rows, and a CTA section.

Time to complete: ~50 minutes.

Step 1: Project and global styles

  1. Create a new frameworkless project

    File → New Project → Frameworkless. Name it “Landing Page.”

  2. Set root variables via Custom CSS

    In Settings → Project → Global Code → Head, add:

    :root {
  --brand: #5B5BD6;
  --brand-dark: #4747c4;
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --bg: #ffffff;
  --radius: 8px;
}
* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, sans-serif; color: var(--text); }

Step 2: Sticky navigation

  1. Insert a header element

    Right-click canvas → Insert → Header. Class: .site-nav. Set: position: sticky, top: 0, z-index: 100, background: rgba(255,255,255,0.95), backdrop-filter: blur(8px), border-bottom: 1px solid #e5e7eb.

  2. Add nav content as a flex row

    Insert a Container inside the header. Class: .nav-inner. Set: display: flex, align-items: center, justify-content: space-between, max-width: 1200px, margin: 0 auto, padding: 1rem 2rem.

  3. Add logo and nav links

    Left side: a span with your brand name (class .logo, font-weight: 700). Right side: a flex row of anchor links + a CTA button.

Step 3: Hero section

  1. Insert a Section. Class: .hero

    Set: display: flex, flex-direction: column, align-items: center, text-align: center, padding: 6rem 2rem, background: linear-gradient(135deg, #f0f0ff 0%, #ffffff 100%).

  2. Add badge, headline, subline, CTA

    In order: a small badge span (.badge, background: var(--brand), color: white, border-radius: 999px, padding: 4px 12px, font-size: 0.75rem), then h1 (clamp(2rem, 5vw, 4rem)), p (max-width: 52ch), and a flex row with two buttons.

Step 4: Social proof bar

  1. Insert a Section. Class: .logos

    Set: display: flex, align-items: center, justify-content: center, gap: 3rem, flex-wrap: wrap, padding: 2rem, background: #f9fafb.

  2. Add company logos

    Upload 4-6 company logo SVGs to Resources. Insert Image elements for each, set height: 28px, opacity: 0.5. A “Trusted by” label prepends the row.

Step 5: Alternating feature rows

  1. Insert a Section. Class: .features

    Set padding: 5rem 2rem.

  2. Create the first feature row

    Insert a Container. Class: .feature-row. Set: display: flex, align-items: center, gap: 4rem, max-width: 1100px, margin: 0 auto 5rem.

  3. Add text and image columns

    Left child: a Container with h2, p, and a link. flex: 1. Right child: an Image with flex: 1, border-radius: var(--radius), box-shadow: 0 20px 60px rgba(0,0,0,0.1).

  4. Duplicate and reverse the second row

    Select the feature row, press ⌘D to duplicate. On the duplicate, add class .feature-row--reverse and set flex-direction: row-reverse. Update content.

  1. CTA Section

    Class: .cta. Set: text-align: center, padding: 5rem 2rem, background: var(--brand), color: white. Add h2 and a white button with brand-colored text.

  2. Footer

    Class: .footer. Set: display: flex, justify-content: space-between, flex-wrap: wrap, gap: 2rem, padding: 3rem 2rem, background: var(--text), color: #9ca3af.

Step 7: Responsive adjustments

Enter breakpoint mode at 768px:

  • Set all .feature-row to flex-direction: column
  • Set .feature-row--reverse to flex-direction: column (same — reverse is irrelevant when stacked)
  • Reduce hero padding to 3rem 1.5rem
  • Set footer to flex-direction: column