# Editorial portfolio hero

> A magazine-style designer portfolio hero: giant serif headline that rises line by line, a spinning badge and an endless marquee.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/editorial-portfolio-hero/
- Licence: CC BY 4.0 (reuse with credit)

## Steps

### 1. Paste the prompt

Paste this prompt into your AI tool. It builds everything in one go, then the steps below show what to check.

Prompt:

```text
Create a single-file HTML hero for a designer portfolio, editorial / print-magazine style. Paper #f2ede4, ink #16130f, accent vermilion #e5471b. Fonts: Georgia/serif for display, system sans for small labels (no external fonts).
Layout:
- Top bar: three uppercase letter-spaced 12px items (name "Mara Ellison", "Index · Work · About · Contact", "Available 2027") with a 1px ink bottom border.
- Meta row: "Independent designer & art director" left, "Lisbon / Remote" right.
- Giant H1 (clamp 64-230px, weight 400, line-height .86, letter-spacing -0.05em) in three lines: "Quiet", "ideas, loud" (italic, vermilion, indented 8vw), "results." Each line sits in an overflow:hidden wrapper and its text slides up from 105% with a cubic-bezier(.2,.8,.2,1) reveal, staggered .18s.
- A 150px black circle badge on the right that slowly rotates (14s linear infinite) with text "12 years of brand work".
- Two-column intro paragraph and "Recent clients" list under a 1px rule.
- A black marquee band at the bottom (italic serif 30px, paper-colored text, vermilion star separators) scrolling left forever; duplicate the content so the loop is seamless.
Responsive under 760px (single column, hide badge), reduced-motion safe. Return only the complete HTML.
```

### 2. Build the masked headline

Check: Three lines that rise from behind a clip.

### 3. Add badge, intro and marquee

Check: Rotating circle, two columns and seamless scroll.

Done when: You can see it working in the browser.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/editorial-portfolio-hero/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/editorial-portfolio-hero/index-html/ (Complete code of the result in the video.)

## About

A confident editorial look with zero images. Huge serif type reveals line by line from behind a mask, an orange italic line adds contrast, a circular badge spins and a black marquee scrolls services forever.

---
Also available as JSON: https://ownlyplans.com/bhaskar/editorial-portfolio-hero/?format=json
MCP server: https://ownlyplans.com/mcp