# Free marketing agency website template > Free HTML marketing agency website template for a studio with a yearly report and a live series. AGENTS.md for Claude Code and Cursor, or build it no-code. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. Marketing agency website template: one free HTML file for a communications studio that publishes a yearly research report and runs a live series. It holds six research signals, a ledger of old and new measures, four dated sessions, a report request form and a contact form, in grey, black and vermilion paper cut. An AI agent can adapt it. - Page: https://8b.com/templates/halyard/ - Live demo: https://8b.com/templates/halyard/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/halyard/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/marketing-agency-website-template - Download ZIP: https://8b.com/templates/halyard/marketing-agency-website-template.zip - Template name in the repository: Halyard - At a glance: One 113 KB index.html with its CSS and JavaScript inside, 11 sections, 9 Unsplash photos credited in CREDITS.md, Geist and Source Serif 4 from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr. ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/marketing-agency-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/marketing-agency-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/marketing-agency-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/marketing-agency-website-template/main/CREDITS.md ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . Replace the figures, signals, shifts, session dates and nav live link first, then the team. Keep every id, the data-8b-section, data-8b-motion and data-8b-part attributes, the classes AGENTS.md lists and one bearing per signal; set the footer --len to the name's length. Ask me for missing facts; never invent figures, dates, names or contacts. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/marketing-agency-website-template my-site`. ## About This works as a digital marketing agency website template for a studio that sells ideas, not a portfolio. Branding agency websites usually lead with finished work; this one leads with research figures, six signals and a team of four, and the report form follows the sessions. A PR firm, an insights consultancy, a newsletter brand or a conference organiser can swap in its own findings and keep the structure. Vibe coding with Claude Code, Cursor or Codex goes fastest when the agent gets the studio's facts first: research figures, each signal and its market count, session dates and guests, team names, address. The demo invents all of it. The agent should rename the studio in any letter case, set the footer wordmark's --len, update the dates and time tags by hand, and replace the four portraits and their alt texts, which name the people. Pick it when the studio's argument is its research and the goal is report sign-ups and seats. A creative studio that wants to show its work first is better served by the [agency](https://8b.com/templates/sillage/) template. Weak spots: both forms send nothing until connected, and without JavaScript the Menu button does nothing and the nav links hide below 960 px. For a site without editing code, the 8B builder is the no-code route. ## Design - Palette: #f0f0f0 (cool grey page ground, the nav bar after the first scroll, the phone menu overlay), #141211 (text, outlines and rules, the filled button and the inactive dial ticks), #f83a1d (vermilion: the arrow, the sessions sheet, the tape over old measures, the button sweep on hover, the active dial tick, photo tints), #f5c3b2 (pink paper: loose bits and the grain over the sessions sheet and the arrow), #2a1f19 (dark brown paper bits and the ground behind photos), #8c7668 (taupe pieces inside the arrow and the dark bits), #c8343a (the Next live and Free pills and the red live link in the nav), #ffffff (text on the red pills and the live link), #5d5d62 (secondary text: facts line, the signals intro, notes, captions, roles, old measures, signal names away from the centre), #f7f7f6 (photo caption plates, session strips, the report cover and form fields) - Fonts: Source Serif 4 (display headings in a light weight, the quote, signal and team names, the logo and the footer wordmark), Geist (body text, buttons, small uppercase labels and the thin uppercase stacks beside the section headings) The first screen is two columns: a tall paper-cut arrow on the left, heading, lead and two buttons on the right. Sections then alternate a heading with a short intro and a list: signals beside a sticky dial, six ledger rows from old measure to new, four session strips, four portraits in a row, a report cover beside its form. Thin rules divide list items. The arrow returns in five sections, from a small glyph to a full-width line. The arrows, torn bits and tape are CSS clip-paths and the dial is a CSS circle, not images, so recolouring --color-3 recolours the arrow. Photos are cut into four-sided shards, shown in grey, some with a red tint. The session strips sit on a red paper sheet. ## Sections and motion - **Navigation** (navigation): fixed top bar: logo, six section links, a red live link; hides on scroll down; phone menu overlay. Motion: The bar hides while you scroll down and returns on scroll up; the Menu button opens a full-screen overlay below 960 px. - **Attention doesn’t drift. It turns.** (thesis): first screen: a tall collage arrow on the left, the h1 "Attention doesn't drift. It turns.", a lead, a facts line and two buttons. Motion: On load the arrow drops in and the heading, lead, facts line and buttons slide in one after another; paper pieces flow along the arrow's shaft in a loop. - **Six signals for 2027** (signals): six numbered trends as a list beside a sticky dial with one big arrow that swings to each trend's bearing. Motion: The big arrow swings to each signal's bearing as that item crosses the screen centre, one dial tick per item lights red, and the other signal names grey out. - **What brands count, and what people act on** (shifts): ledger of six old measures struck out and replaced by new ones, each with a one-line note. Motion: Row by row, red tape covers the old measure, a small arrow grows out and the new measure slides in. - **Field notes** (field): a quote over five torn photos that start piled on top of it and part toward the edges, each with a city caption. Motion: Five photos start piled over the quote and part toward the edges at different angles while the stage stays pinned on wide screens, then lift away as the sessions sheet arrives. - **Halyard Ahead: four evenings, argued live** (sessions): red paper sheet with four live session strips: date, title, guest and a Save a seat button. Motion: The red sheet arrives tilted and settles flat, and each strip swings into place from a tilt to one side as it rises into the lower part of the screen. - **The people reading the wind** (voices): four torn portraits on a sideways track threaded on a collage shaft: name, role and a line each. Motion: The section pins while the track of four portraits runs sideways, and each portrait's red tint slides into register as its card arrives. - **The full forecast, free** (report): report cover made of an arrow and loose paper bits beside a summary of the 64-page report, seven chapters and an email form. Motion: The cover's arrow parts and three loose bits fly in from scattered positions and lock together as the cover scrolls into view. - **Before you ask** (faq): five questions and answers (native
) with a thin stack and two loose paper bits. Motion: Rules draw across above each question, and two loose bits drift at different speeds with the scroll. - **Point us somewhere** (contact): contact form and address block under a long arrow that extends across the section. Motion: The long arrow's shaft grows from the left and its head slides across to the right. - **Footer** (footer): large wordmark, four links, a note about the studio, copyright with the Design: 8B credit and a back-to-top button. Motion: The wordmark wipes in from the left as it scrolls into view. ## Good for - marketing, communications or PR agency - research, insights or consultancy firm with a yearly report - webinar, conference or live series with a free download - media or newsletter brand with a signature trends report ## Questions **Is this a free agency template I can use for a client?** Yes. It is a single index.html under the MIT license, so a freelancer can ship it for a client at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, and there is no build step and no CMS. Photos are Unsplash images; CREDITS.md lists them. **Can I use it as a webinar landing page?** Partly. The sessions section lists four dated evenings, but each Save a seat button only jumps to the contact form: there is no registration step, countdown or stream embed, so it is not a webinar registration landing page on its own. Point the buttons at your event or ticket page. **Do the forms send anything?** No. The report form checks the email and the contact form checks name, email and message, then each shows a thank-you line and clears its fields. Nothing is sent or stored. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or delete a form and its script. **How do I hand it to Claude Code, Cursor or Codex?** Download index.html and AGENTS.md with the curl lines at the start of AGENTS.md, then tell the agent to read AGENTS.md before it edits index.html. Give it the files, not the page address, which comes back as a summary. Then paste the prompt from this page, filled in with your studio's facts. **What must stay when I edit it?** Keep every id, the data-8b section, motion and part attributes, and the classes AGENTS.md lists for each script. Give each signal its own --signals-bearing, and set the footer wordmark's --len to the name's length. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it. **Can I get a site like this without editing code?** Yes, in another way. [8B's AI website builder](https://8b.com/) designs a new site from a sentence, with its own design rather than this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT. ## Before publishing Replace: social preview image, favicon, contact form (sends nothing yet), email address and phone number, plus the invented demo facts (prices, dates, addresses). - Live · 21 Oct button in the nav bar lead to #sessions now; point them to your broadcast or event registration page. - Get the forecast button on the first screen lead to #report now; point them to keep #report, or link straight to your report landing page or PDF. - Watch live button on the first screen lead to #sessions now; point them to your stream or event page. - Save a seat buttons on the four session strips lead to #contact now; point them to your event booking or ticket page for each session. - Send me the forecast button and the report form lead to no request is sent: section-script:report checks the email and shows a thank-you line (the form action is #report) now; point them to your form handler, mailing-list service or a download link. - Send button and the contact form lead to no request is sent: section-script:contact checks the required fields and shows a thank-you line (the form action is #contact) now; point them to your form handler (Formspree, Netlify Forms or your own endpoint). - Both forms only check the fields and print a thank-you line: nothing is sent or stored until you connect a form service. - Session dates are written as 2026 dates and the nav says "Live · 21 Oct": they need updating by hand, including the time tags, once the dates pass. - The Voices section pins the screen while the track runs sideways; on a short or very wide window the pinned stage is tight, and without motion it falls back to a plain grid. - GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr at the end of the body: if that CDN is blocked the page still reads and the menu, forms and FAQ work, but nothing moves on scroll (only the CSS load-in and the arrow loop run). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), container query units, cascade layers, small/dynamic viewport units).