mediainthemiddle

byMorgan Walsh

Build a one-page website for Media in the Middle, a two-person marketing agency in Orcutt, California. Deliver it as one self-contained, responsive HTML file (HTML/CSS/vanilla JS, no framework) that I can preview and then move to our host. WHO IT'S FOR Central Coast small businesses and organizations (Orcutt, Santa Maria, Nipomo, Lompoc first) that know they need consistent marketing but have no one to run it. Write for busy owners and nonprofit directors: plain words, no agency jargon, spell out acronyms. WHAT WE DO Social media, email newsletters, websites, and local ad planning, run as one coordinated plan instead of separate vendors. WHY US We ran a congressional campaign's content on deadline, with approvals, compliance, and paid media. We're local: two senior people, no junior hand-offs. HOW WE WORK Peer partner, not order-taker. Fixed packages, clear scope, written approvals. LOOK AND FEEL ("night studio") - Background: near-black navy (#05070C to #0B0F18) with a very faint hex or grain texture (about 5% opacity). Night-sky imagery: a crescent moon at the top, stars at the bottom. - Surfaces: frosted glass panels (dark, semi-transparent, backdrop blur) with thin, light-blue hairline borders. - Type: Lexend only. Large, light-weight headlines (300 weight) with tight letter spacing. Small UPPERCASE tracked labels in outlined pill tags. - Accent: ONE color, electric blue #4D8BFF, used for glow, links, and the primary button (solid #1F56D8, white text). No other accent colors. - Layout: current, editorial, and roomy. Oversized headline, bento-style card grids, lots of negative space, numbered section markers (01, 02, 03). MOTION (fun but never in the way) - Page load: a quick fade in from black. - Hero: layered scroll parallax. The moon moves slowest, the stars a bit faster, and the text stays in front. The moon scrolls away as you go down. - Scroll reveal: sections and cards fade up out of a slight blur, once only. - Headings: a thin blue underline draws itself in, then catches a slow shine every few seconds. - Hover: cards lift 2px and get a soft blue glow halo. Buttons glow brighter. Pressed or focused fields get a tighter, darker glow. - Sticky glass nav bar. A round back-to-top button appears after scrolling. - Respect prefers-reduced-motion: turn off parallax, reveals, and shine. Simplify parallax on phones. Animate only transform and opacity, and keep it fast. SECTIONS 1. Nav: logo [placeholder], links to Services / Why Us / How We Work / Packages / Contact, and a glowing "Book a free call" button. 2. Hero: headline, subhead, primary CTA "Book a free 20-minute call", secondary CTA "See packages". Draft copy for me to edit: - Headline: "Your marketing, finally run by someone." - Subhead: "Social, email, website and local ads, run as one plan by two senior people in Orcutt." 3. Service-area strip: Orcutt · Santa Maria · Nipomo · Lompoc. 4. The problem: one short paragraph. You know you need to show up consistently, and nobody has time to run it. 5. What we do: 4 glass cards (Social Media, Email Newsletters, Websites, Local Ad Planning), each with a one-line outcome. A glowing line connects the cards to show "one coordinated plan." 6. Why us: 3 numbered proof cards. Campaign-tested (deadlines, approvals, compliance, paid media). Local. Two senior people with no hand-offs. 7. How we work: a 3-step horizontal timeline that draws on scroll (Peer partner → Fixed package and clear scope → Written approvals). 8. Packages: 3 fixed-package cards. Names, prices and inclusions are [PLACEHOLDERS]; do not invent them. Each card has a "Start here" button that jumps to the form. 9. About: Sam (social media) and Morgan (email and website), with photo placeholders and one line each. 10. Contact form (the main CTA, repeated at the bottom): - Fields: Name, Business or organization, Email, Phone (optional), Town (Orcutt / Santa Maria / Nipomo / Lompoc / Other), What do you need? (checkboxes: Social, Email, Website, Local ads, Not sure yet), Message, Best way to reach you. - Visible labels, inline validation, and a friendly success state after submit. - Leave the form action as [FORM ENDPOINT] with a comment explaining what to connect. - Don't show a phone number. 11. Footer: 125 N. 1st St., Orcutt, CA · [contact email] · "Proudly made in Orcutt, California" · © 2026. MUST-HAVES - Mobile-first. Works at 375px with no sideways scrolling. - WCAG AA contrast, visible focus states, keyboard-usable form. - Local SEO: a page title and meta description that mention the four towns, plus LocalBusiness schema markup. - Clear CTA within one scroll on every screen size.