{
    "id": "bhaskar/editorial-portfolio-hero",
    "kind": "plan",
    "title": "Editorial portfolio hero",
    "summary": "A magazine-style designer portfolio hero: giant serif headline that rises line by line, a spinning badge and an endless marquee.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/editorial-portfolio-hero/",
    "stack": [
        "CSS",
        "HTML",
        "Typography"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "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.",
    "steps": [
        {
            "title": "Paste the prompt",
            "body": "Paste this prompt into your AI tool. It builds everything in one go, then the steps below show what to check.",
            "prompt": "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).\nLayout:\n- Top bar: three uppercase letter-spaced 12px items (name \"Mara Ellison\", \"Index · Work · About · Contact\", \"Available 2027\") with a 1px ink bottom border.\n- Meta row: \"Independent designer & art director\" left, \"Lisbon / Remote\" right.\n- 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.\n- A 150px black circle badge on the right that slowly rotates (14s linear infinite) with text \"12 years of brand work\".\n- Two-column intro paragraph and \"Recent clients\" list under a 1px rule.\n- 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.\nResponsive under 760px (single column, hide badge), reduced-motion safe. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Build the masked headline",
            "body": "Check: Three lines that rise from behind a clip.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Add badge, intro and marquee",
            "body": "Check: Rotating circle, two columns and seamless scroll.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/editorial-portfolio-hero/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/editorial-portfolio-hero/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}