Editorial portfolio hero
Copy this prompt into Claude, Cursor or Lovable.
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.Source, 15 lines
# Editorial portfolio hero Copy this prompt into Claude, Cursor or Lovable. ```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. ```