# Editorial portfolio hero > A magazine-style designer portfolio hero: giant serif headline that rises line by line, a spinning badge and an endless marquee. - Category: Developer tools - Version: 1.0 - Source: https://ownlyplans.com/bhaskar/editorial-portfolio-hero/ ## 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. ## Tech stack - CSS - HTML - Typography ## Build 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. ## Assets ### prompt.md — The full prompt. ~~~~ # 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. ``` ~~~~ ### index.html.md — Complete code of the result in the video. ~~~~ # index.html The finished result as one file. Save it as index.html and open it. ```html Editorial portfolio hero
Mara EllisonIndex · Work · About · ContactAvailable 2027
Independent designer & art directorLisbon / Remote

Quietideas, loudresults.

12
YEARS OF
BRAND WORK

Hello. I help young companies look like they have always known who they are: identity, editorial systems and websites with a point of view.

Recent clients
Halden Press · Orbit Coffee · Fieldnote · Marlow & Co.

Brand identity✦Editorial design✦Web design✦Packaging✦Art direction✦Brand identity✦Editorial design✦Web design✦Packaging✦Art direction✦
``` ~~~~ ## Build instructions by tool ### Claude Code Open a terminal in an empty folder, run `claude`, then paste the prompt. ```text Build the "Editorial portfolio hero" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/editorial-portfolio-hero/. Stack: CSS, HTML, Typography. Follow the plan's steps in order: Paste the prompt → Build the masked headline → Add badge, intro and marquee. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Claude Code.) ``` ### Cursor Open an empty folder in Cursor, start an Agent chat, then paste the prompt. ```text Build the "Editorial portfolio hero" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/editorial-portfolio-hero/. Stack: CSS, HTML, Typography. Follow the plan's steps in order: Paste the prompt → Build the masked headline → Add badge, intro and marquee. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Cursor.) ``` ### Lovable Start a new Lovable project and paste the prompt as your first message. ```text Build the "Editorial portfolio hero" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/editorial-portfolio-hero/. Stack: CSS, HTML, Typography. Follow the plan's steps in order: Paste the prompt → Build the masked headline → Add badge, intro and marquee. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Lovable.) ``` ## Definition of done - Every build step is complete and the app runs locally. - The main user flow works end to end. - Share your build on OwnlyPlans with a demo link, build time and tool.