If you are building a creative agency, design studio, or freelance portfolio site that needs to command attention through typography rather than flashy backgrounds, this snippet gives you a complete three-column editorial hero: a left service list with active state cycling, a large center serif headline with italic accent word, a right stats column with a CSS marquee ticker, and a client logo strip footer — all with a restrained, editorial aesthetic.

The three-column editorial layout

The .main container uses flex with fixed-width left (180px) and right (180px) columns and a flexible center column that grows to fill the remaining space. All three columns are separated by 1px solid borders in a muted colour (#e5e5e0). The hero itself is constrained to max-width: 1200px with side borders — creating a newspaper column feel that looks intentionally designed.

The oversized headline

The h1 uses font-family: Georgia (serif) with font-size: clamp(44px, 7vw, 88px) and letter-spacing: -2px. The italic-word em element uses font-style: italic and font-weight: 400 with a muted grey colour — a stark contrast to the bold 900-weight surrounding text. This mixed-weight typography technique creates visual interest without colour.

The service list with active cycling

The left column shows four service disciplines with one marked .active at any time. A setInterval cycles the active class every 2.5 seconds — drawing the eye to the left column and implying dynamic presentation of your full service offering. The active item gets a full-width black underline border; all others are muted grey.

The CSS marquee ticker

The .marquee-track duplicates the content ("Brand ✦ Design ✦ Code ✦ Motion ✦") twice and uses animation: scroll-l that translates the track by -50% — since 50% represents exactly one copy of the content, the scroll loops seamlessly without JavaScript.

The restrained colour palette

The entire hero uses only black (#111), warm white (#fafaf8), and various greys. This monochrome editorial palette communicates design confidence — letting the typography do the work rather than relying on gradient accents. Add a single brand colour to the CTA hover or the active service item for personality.

Font choice and typographic pairing

The headline uses font-family: Georgia, serif — a system serif available on all devices without a web font load. For a premium typographic result, replace Georgia with a loaded serif such as Playfair Display, Cormorant Garamond, or Fraunces from Google Fonts. Load only the 900 weight and the 400 italic style for the minimum file size. The body copy and UI elements use system-ui to maintain readability without a second font load.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out the marquee math or the cycling interval yourself — paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the marquee track's content is duplicated twice and the keyframe translates by exactly -50 percent for a seamless loop, and why the service list cycling starts at index 1 to match the initial active HTML state. The same assistant is useful for optimizing it — asking whether the setInterval-driven active class cycling should pause on hover or on prefers-reduced-motion, or whether the three fixed-width flex columns should switch to CSS Grid for more predictable breakpoint behavior. It's just as good for extending the hero: ask it to make the service list clickable so users can jump to a specific service section, animate the stat numbers counting up on load, or swap the setInterval cycling for an IntersectionObserver-triggered entrance the first time the hero scrolls into view. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a three-column editorial "agency hero" section in plain HTML, CSS, and JavaScript — no libraries, no CSS Grid required (use flexbox with fixed-width side columns and a fluid center).

Requirements:
- A top bar with a location label and an "Est. [year]" label, separated by space-between alignment, styled in small uppercase letter-spaced text.
- A three-column main area: a fixed-width left column listing several service names stacked vertically with only one marked as visually "active" (bold with an underline) at a time; a flexible center column with a large multi-line serif headline where one word is styled in italic with a lighter weight and color for typographic contrast, a short horizontal rule, a tagline paragraph, and a bordered call-to-action link; a fixed-width right column with three stat blocks (a large number plus a small label each) and a horizontally auto-scrolling ticker at the bottom.
- Every column must be separated from its neighbor by a thin 1px solid border, and the whole hero constrained to a max-width with matching left/right border rails, producing a newspaper-column look.
- Implement the service list "active" cycling with a setInterval (no CSS-only animation): every couple of seconds, remove the active class from the currently active service, advance to the next one with wraparound (modulo the list length), and add the active class to it, relying on a CSS transition on color and border-bottom for the visual fade between states.
- Implement the ticker as a pure CSS marquee: duplicate its list of words exactly twice inside one flex container with no line wrapping, then animate that container's transform with a linear, infinitely-repeating keyframe that translates it by exactly -50% of its own width, so the loop is seamless because the second copy starts exactly where the first ended.
- Keep the color palette monochrome (black, off-white, and grays only) with no gradients, so the layout's structure and typography carry all the visual weight.

Step by step

How to Use

1
Update the agency name and locationEdit the .location span in the top bar to your city or work arrangement ("London & Remote", "New York", "Worldwide"). Edit the "Est. 2019" year to your agency founding year.
2
Update the headline and taglineEdit the three-line h1 headline. The em tag wraps the italic accent word — change "remarkable" to your key brand differentiator. Update the .tagline paragraph with your agency positioning statement.
3
Update the service listIn the HTML, edit the four .svc div texts to match your actual service disciplines. The JS cycles the active class — no code change needed when you update the service names.
4
Update stats and client namesChange the three .stat-block numbers (120+, 98%, 14) to your real project count, satisfaction rate, and awards. Update the four .client names in the bottom bar to real client company names.
5
Change the marquee ticker contentEdit the .marquee-track span elements. Keep both copies identical (the track has each word twice for seamless looping). Change speed by editing animation-duration from 12s to faster or slower.
6
Export in your formatClick "HTML" for a standalone file, "JSX" for a React component with useEffect for the cycling interval, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

Creative agency, design studio, and branding firm homepages

The three-column editorial layout, oversized serif headline, and monochrome palette are characteristic of award-winning agency sites. The typography-first approach signals design confidence and distinguishes the agency from template-based competitors.

Senior designer or art director portfolio homepage

An individual creative professional can use this hero — or the work-forward portfolio hero — to communicate the breadth of their work (service list cycling), the quality of their output (awards and client satisfaction stats), and their clientele credibility (client strip) in one above-the-fold view.

Luxury brand, fashion editorial, and cultural institution sites

The restrained monochrome palette, serif typography, and 1px rule borders translate directly to luxury brand aesthetics. Replace service disciplines with collection categories or exhibition types. The headline structure works for editorial content as well as service marketing.

Premium SaaS or developer tool with editorial brand positioning

A SaaS product positioning itself as premium or enterprise can use the agency hero aesthetic to communicate craft and intentionality. The service list cycling works for "feature cycling" — showing key product capabilities in rotation.

Study mixed-weight typography and editorial layout CSS

The italic accent technique uses em (semantic italic) with font-weight: 400 alongside a 900-weight parent — a typographic contrast achievable in any project. The column separator border pattern creates a grid-like layout without CSS Grid. The CSS marquee needs no JavaScript.

Consultancy and professional services firm landing pages

Strategy, law, finance, and management consulting firms benefit from the editorial structure and metrics-forward right column. Update stats to relevant professional metrics — case matters handled, assets under management, countries served — and replace service list with practice areas.

Got questions?

Frequently Asked Questions

The .marquee-track contains the content ("Brand ✦ Design ✦ Code ✦ Motion ✦") written twice — two identical copies side by side. The @keyframes animation translates the track from 0 to -50% of its total width. Since 50% of the full track width equals exactly one copy of the content, when the animation restarts from 0, it looks identical to where it ended — creating a seamless loop. The animation uses linear timing for consistent speed.

A querySelectorAll(".svc") selects all service items. A setInterval fires every 2500ms. On each tick, it removes .active from the current item, increments the index (wrapping back to 0 after the last item), and adds .active to the new current item. The CSS transition on .svc color and border-bottom smoothly fades between states. The cycling starts from index 1 (Web Design) matching the initial HTML state.

The current palette is intentionally monochrome. To add one brand colour: change the .svc.active border-bottom-color and color to your brand hex. Change the .cta hover background to your brand colour. Optionally, tint the italic-word colour from #6b7280 to a very light version of your brand colour. Using one accent colour on only two or three elements maintains the editorial restraint while adding brand identity.

Add @media (max-width: 768px) { .main { flex-direction: column; } .left, .right { width: 100%; border-right: none; padding: 24px 0; border-bottom: 1px solid #e5e5e0; } .center { padding: 32px 0; border-right: none; } .hero { padding: 0 20px; } .number-accent { font-size: 48px; } } — this stacks the three columns vertically on mobile while maintaining the editorial border structure.

Loading…