Free marketing agency website template
Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.
MIT license · Made by 8B, an AI website builder · Plain text: halyard.md, data: halyard.json
About this marketing agency website template
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.
At a glance, October 2026. 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.
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 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.
Good for:
Turn the marketing agency website template into your site with an AI agent
With an AI coding agent
Files (PowerShell: curl.exe):
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.mdPrompt for the agent:
Read AGENTS.md, then edit index.html. Make this the site for <my agency: name, city, what we publish each year, the findings and chapters, live event dates, titles and guests, team names and roles, hours, address, contacts>. 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.In a terminal
npx degit 8bsite/marketing-agency-website-template my-siteMarketing agency website design and motion
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 fieldsFonts
- 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.
Every value of this marketing agency website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.
What is on the marketing agency website page
- NavigationFixed top bar: logo, six section links, a red live link; hides on scroll down; phone menu overlay
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.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
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 2027Six numbered trends as a list beside a sticky dial with one big arrow that swings to each trend's bearing
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 onLedger of six old measures struck out and replaced by new ones, each with a one-line note
Row by row, red tape covers the old measure, a small arrow grows out and the new measure slides in.
- Field notesA quote over five torn photos that start piled on top of it and part toward the edges, each with a city caption
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 liveRed paper sheet with four live session strips: date, title, guest and a Save a seat button
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 windFour torn portraits on a sideways track threaded on a collage shaft: name, role and a line each
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, freeReport cover made of an arrow and loose paper bits beside a summary of the 64-page report, seven chapters and an email form
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 askFive questions and answers (native <details>) with a thin stack and two loose paper bits
Rules draw across above each question, and two loose bits drift at different speeds with the scroll.
- Point us somewhereContact form and address block under a long arrow that extends across the section
The long arrow's shaft grows from the left and its head slides across to the right.
- FooterLarge wordmark, four links, a note about the studio, copyright with the Design: 8B credit and a back-to-top button
The wordmark wipes in from the left as it scrolls into view.
Before you publish the marketing agency website site
- Replace social preview image, favicon, contact form (sends nothing yet), email address and phone number and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
- Live · 21 Oct button in the nav bar lead to
#sessionsnow; point them to your broadcast or event registration page. - Get the forecast button on the first screen lead to
#reportnow; point them to keep #report, or link straight to your report landing page or PDF. - Watch live button on the first screen lead to
#sessionsnow; point them to your stream or event page. - Save a seat buttons on the four session strips lead to
#contactnow; 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).
Questions about this marketing agency website template
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 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.
