Editorial portfolio hero
A magazine-style designer portfolio hero: giant serif headline that rises line by line, a spinning badge and an endless marquee.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
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.
Build it step by step
Sign in to tick steps off-
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.
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 and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.