split-hero

Summary

A three-column hero where an oversized brand wordmark is broken across the gutter — "Aim" on the left column, "sky" on the right — while the middle column carries a paragraph, an arrow CTA and a large bordered tagline. The whole hero sits over a faint dark background photo.

HTML structure (minimal)

<div class="hero-section">
  <div class="main-container">
    <div class="hero-grid">
      <div class="hero-left">
        <h1 class="hero-big-text">Aim</h1>
      </div>
      <div class="hero-mid">
        <p class="hero-paragraph">We are a creative agency...</p>
        <a href="works.html" class="hero-projects-link">
          <div class="hero-projects-link-text">Projects</div>
          <img src="images/arrow-right.png" class="hero-proect-link-arrow" alt="">
        </a>
        <div class="hero-under-text">
          Where Innovation<br>Meets Design.
        </div>
      </div>
      <div class="hero-right">
        <h1 class="hero-big-text">sky</h1>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

body {
  background-color: var(--black);
  background-image: url('../images/hero-bg.jpg');
  background-position: 50%;
  background-size: contain;
  font-family: Clashdisplay, sans-serif;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 50px;
  padding-top: 150px;
}
.hero-big-text {
  text-transform: uppercase;
  font-size: 140px;
  line-height: 100px;
  margin: 0;
}
.hero-under-text {
  border-left: 5px solid var(--default);   // orange rail
  text-transform: uppercase;
  margin-top: 100px;
  padding-left: 30px;
  font-size: 30px;
  font-weight: 200;
  line-height: 40px;
}
.hero-projects-link-text {
  border-bottom: 1px solid var(--white);
  font-weight: 300;
}

Animation logic

// Webflow IX2 handles the entrance — both halves of the wordmark and the
// middle column start with style="opacity: 0;" and are revealed via
// data-w-id timelines (see [data-w-id="darkyn19"], "darkyn20", "darkyn22"
// in plugins.js). Reproduce in plain JS as a stagger of three opacity+
// translate animations driven on DOMContentLoaded.

Notable details

• The brand line is the layout: copy itself defines the column rhythm rather than sitting inside one column.
• A 5px orange left border on the tagline turns a paragraph into a typographic "blockquote" without using a <blockquote> element — same trick as the blockquote rule in style.css.
• The page background is a single dark photograph behind the body, not a hero-section background — every section after this one inherits the wash for free.

Use when

• Agency / studio landings where the brand voice is short and worth shouting in 140px.
• Pages where you want a real photographic backdrop without dedicating a full-bleed hero section.

Caveats

• The split wordmark only reads correctly above ~991px; below that the grid collapses to one column and the two halves stack — choose words that survive that reflow.
• Background image is images/hero-bg.jpg, applied to body; if you remove the body bg you also lose it on every other section.