Steal this designpagescomponentsanimationspatternsremotionmusicdatabasesskillsarchitectures3DpromptsMCPs design — all free to copy.

Creator — Author Landing

A warm, bookish personal-brand landing page for a literary novelist, built in vanilla HTML, CSS, and JavaScript. Features a serif hero with the latest book cover and buy CTA, a four-book shelf grid, an about-the-author bio with portrait, praise and press quotes, a readings and events list with RSVP, a slow-newsletter signup, and social links. Interactions include a book quick-look modal, an accessible mobile nav, scroll reveal animations, and toast confirmations on every call to action.

Job Board — Job Listing Card

A reusable, scannable job listing card for a careers board or ATS. Each row pairs a colored company logo with the role title, company, location and a green salary chip, plus status badges for new, urgent and remote roles. A bookmark toggle tracks saved jobs in a live header counter, quick-apply turns into an applied confirmation, and chip filters and search narrow the list. Clean, accessible, responsive vanilla HTML, CSS and JavaScript with no dependencies.

Job Board — Application Status Pills

A clean, scannable application-status system for a job board or ATS — semantic pills for applied, screening, interview, offer, hired, and rejected, paired with a live horizontal stepper that animates as you transition between stages. Includes a featured tracker with advance, back, reject, and reset controls, plus a filterable pipeline list of fictional applications with company logos, remote and salary chips, save toggles, and a toast helper. Built with vanilla HTML, CSS, and JavaScript.

Nonprofit — Donor Wall

A warm, hopeful donor recognition wall for nonprofits and charities. Supporters are grouped into platinum, gold, and silver giving tiers with colored avatars built from their initials, a tier-colored accent border, and optional gift amounts that can be revealed or kept private. Visitors can filter by tier, search by name, and watch matching supporters highlight on hover. Animated impact counters, trust badges, and a prominent donate call-to-action round out the experience.

Nonprofit — Events Calendar

A warm, hopeful events and fundraisers page for a fictional charity. Browse galas, runs, food drives and workshops as photo cards showing date, time, location, a live spots-left counter and an RSVP button, then toggle to a month calendar where each day carries colored dots per event type. Chip filters narrow by category, RSVPs and waitlist confirm with a toast, animated impact counters and a campaign progress thermometer round out the design — all self-contained vanilla JS.

Nonprofit — Religious / Community Landing

A warm, welcoming landing page for a fictional religious community center, built with vanilla HTML, CSS, and JavaScript. It pairs a classic serif voice with gold and teal accents across a sticky nav, hero with live service times, animated impact counters, a filterable ministries grid, an events list with RSVP, a give and tithe panel with amount presets and a fundraising thermometer, community stories, donor recognition, and a get involved form.

Nonprofit — Impact Stat Counter

A warm, mission-driven impact stat counter for nonprofits and charities. A responsive grid of bold count-up figures pairs each number with an icon, label, and human context line such as meals served, wells repaired, and students kept in school. Numbers animate from zero with eased easing the moment the grid scrolls into view, and a replay button lets visitors watch the impact build again. Includes trust badges, a prominent donate call to action, and a toast helper.

Nonprofit — Petition / Pledge

A warm, hopeful petition and pledge page for a fictional clean-water charity. It pairs a bold cause statement and impact stats with an animated signature-goal thermometer and progress bar, a validated sign form with optional comment and privacy toggle, a live recent-signatures feed that grows as people sign, and quick share actions. A sticky donate call-to-action and trust badges round out a self-contained, accessible, responsive vanilla build.

Nonprofit — Pledge / Sponsorship Card

A warm set of four nonprofit sponsorship cards for sponsor-a-child and sponsor-a-cause programs, each with a photo placeholder, name, story snippet, monthly amount and a progress thermometer. Cards flip to reveal the impact details, facts and donor recognition, while a sponsor toggle adds each pledge to a running monthly total with animated counters and friendly toasts. Built with semantic HTML, responsive CSS and vanilla JavaScript, accessible and keyboard-friendly down to small screens.

Nonprofit — Giving Toggle

A warm, donor-ready giving toggle that lets supporters switch between one-time and monthly gifts with a single segmented control. Choosing monthly surfaces a most-impact badge, rewrites the supporting copy, relabels every preset amount, and projects an annual total alongside a friendly impact line. Preset chips and a custom amount field stay in sync, an animated progress thermometer anchors the campaign, and trust badges plus recent donors reinforce transparency — all self-contained vanilla HTML, CSS and JavaScript.

Nonprofit — Fundraising Thermometer

A warm, self-contained fundraising progress UI for nonprofits and charity campaigns. Pairs a classic vertical thermometer with bulb and milestone markers alongside horizontal progress bars for multiple funds. Shows raised, goal, percent and donor count with transparent impact numbers, trust badges and donor recognition. Preset and custom donation buttons animate the fill, fire milestone toasts, and add recent givers in real time.

Nonprofit — Story Spotlight

A warm, long-form beneficiary spotlight page for a fictional water charity. Features a photo hero, magazine-style narrative with drop cap and pull quotes, a draggable before-and-after comparison, a four-image gallery with keyboard-navigable lightbox, related-story cards, and a sticky donate rail with a live fundraising thermometer, preset amounts, animated impact counters, recent-donor feed, trust badges, and native share with a fallback sheet.

Creator — Coach / Speaker Landing

A polished, single-page personal-brand landing for a leadership coach and keynote speaker, built in vanilla HTML, CSS, and JavaScript. Warm-white canvas with a bold coral accent and a confident friendly sans, it pairs a strong hero and book-a-call CTA with program cards, an about and credentials block, a results testimonial slider, signature speaking topics, a free-resource lead magnet, and a booking form. Fully responsive with a mobile nav, scroll reveal, and validated forms.

Creator — Musician Landing

A dark, neon-soaked one-page landing for a fictional electronic artist. It pairs a hype hero with new-release cover art and CTA, a latest-tracks list driven by a mock play and pause mini-player, a tour-dates schedule with ticket states, a music-video gallery, a merch capsule teaser, press quotes, a newsletter signup with validation, and social links. Vanilla JS handles the mobile nav, scroll reveal, toast feedback, and the persistent fake player.

Creator — Photographer Landing

A gallery-quiet personal landing page for a fictional photographer, built in vanilla HTML, CSS and JavaScript. A full-bleed cinematic hero opens onto a filterable masonry portfolio with a keyboard-accessible lightbox, then services with pricing, a story-driven about block with stats, client logos, testimonials and a validating booking form. Minimal sans typography, an ink-on-white palette and tasteful scroll reveals keep the focus on the work.

Creator — Streamer / Gamer Landing

A dark, electric personal-brand landing page for a variety streamer, built with semantic HTML, CSS, and vanilla JavaScript. Features a neon-on-black hero with a live-now pulse badge and drifting viewer count, a tabbed weekly stream schedule, a clip gallery with an accessible lightbox, membership sub tiers, sponsors and gear, a Discord community block, a validated newsletter form, scroll reveals, a mobile nav toggle, and toast feedback on every call to action.

Job Board — Candidate Detail

A recruiter-facing candidate detail page for an applicant tracking system, built with vanilla HTML, CSS, and JavaScript. It pairs a profile header showing name, role, stage pill, and star rating with tabbed sections for resume, scorecard, activity, and notes. Interview criteria sliders feed a live average back into the overall rating, while a sticky action bar advances, rejects, or schedules the candidate with toast confirmations and a self-updating activity feed.

Job Board — Application Form

A multi-section job application form for an applicant tracking flow. Pick a saved resume or drag-and-drop a new file with live upload preview, edit autofilled contact details, answer screening questions with radio pills and selects, write an optional cover letter with a character counter, then review every answer and submit to a confirmation screen with a reference number. Includes inline validation, a stepper, toasts, save-draft and bookmark controls.

Job Board — Job Detail

A polished, scannable job detail page for a job board or ATS. Shows a sticky header with title, company, location, salary chips and remote badge, plus apply and save actions. Sections cover the role, responsibilities, requirements and benefits, alongside a company snapshot card, hiring-manager note and similar roles. Interactions include a sticky apply bar that appears on scroll, a synced save toggle, an expandable company panel and native share with clipboard fallback.

Job Board — Filter Rail

A faceted job-search filter rail with collapsible groups for role, job type, experience and remote mode, plus a minimum-salary slider, a location input that turns cities into removable chips, and segmented controls. Every interaction updates a live results count and a row of active-filter chips with one-tap removal and clear-all. On narrow screens the rail becomes an accessible slide-in drawer, and job cards carry salary, location and remote badges with a bookmark toggle.

Job Board — Job Posting Editor

A polished applicant-tracking job posting editor with a split-pane layout: edit title, department, location, employment type, salary range and a mock rich-text description on the left, build add/remove screening questions with required toggles, and watch a candidate-facing job card update live on the right. Toggle remote-friendly, save as draft or publish, and see status pills, salary and location chips, a bookmark toggle, and friendly toasts confirming every action.

Job Board — Executive Landing

A discreet executive-search landing page in charcoal, gold and ivory with a refined serif-and-sans pairing. Features an elegant hero with a confidential mandate card and animated figures, a confidential-search value prop, filterable leadership mandates with save toggles, a vetted-network panel, dark process steps, client logos, and a validating request-access form. Vanilla JS handles scroll reveal, counters, filtering, bookmarks and a toast — fully responsive down to 360px.

Job Board — General Board Landing

A clean, trustworthy marketing landing for a general job board, built on white, trust-blue, and slate. It pairs a dual-field role and location search with trending categories, featured employer cards carrying remote and hiring pills, seeker and employer value props, a vivid stats band, hired-through testimonials, and a dual find-a-job or post-a-job call to action. Vanilla JS drives interactive search, popular-search chips, a mobile menu, toast feedback, and smooth scroll reveal, fully responsive down to 360px.

Job Board — Gig / Shift Work Landing

A mobile-first marketing landing page for a fictional gig and shift-work platform, built with a bold orange-and-teal palette and chunky sans typography. It pairs an energetic hero with a live shift feed, animated count-up stats, an instant-pay wallet widget, scannable shift categories, a three-step how-it-works flow, an app-download block, and a business hiring call to action. Every section reveals on scroll and interactions surface lightweight toasts.

Job Board — Candidate Pipeline

A recruiter-side ATS pipeline that turns a hiring funnel into a scannable kanban board. Five color-coded stages — applied, screening, interview, offer, and hired — carry candidate cards with generated avatars, star ratings, location and salary chips, remote badges, and skill tags. Drag candidates between columns or nudge them with arrow buttons, watch live column counts update, open a quick-view drawer for full context, and filter the whole board by role, minimum rating, or free-text search. Built with semantic HTML, CSS variables, and vanilla JavaScript.

Job Board — Tech / Startup Landing

A dark, developer-cool landing page for a tech and startup job board. A grid-lit hero pairs animated count-up stats with a live terminal motif that types out a match-and-apply session. Below it sit curated startup roles with salary bands and remote badges, category filters, an interactive salary-transparency card driven by a seniority slider, a tech-stack chip cloud that totals matching roles, a why-us grid for engineers, and an email capture CTA. Built with vanilla JS, scroll reveal, and a toast helper.

Job Board — Resume Builder

A candidate profile and resume builder with editable sections for summary, experience, education, skills, and links beside a live preview pane that updates as you type. A completeness meter tracks profile health with status pills, while a visibility toggle controls recruiter discoverability. Add, remove, and drag-reorder entries, manage skill chips, and export a plain-text resume. Clean, scannable, professional job-board styling with soft shadows and accessible controls.

Nonprofit — Donations Dashboard

A warm, human nonprofit admin dashboard for tracking fundraising. It surfaces four headline KPIs (total raised, recurring revenue, average gift, new donors), a redrawable donations-over-time area chart with hover tooltips, a recurring-versus-one-time donut split with live impact numbers, ranked top campaigns with drill-in filtering, a goal thermometer with leadership donor recognition, and a searchable recent-donations table that exports to CSV — all self-contained vanilla HTML, CSS, and JavaScript.

Nonprofit — Donation Flow

A warm, four-step nonprofit donation flow for the fictional Open Harvest charity. Pick a preset or custom amount, toggle one-time versus monthly giving, choose a designation, and optionally cover processing fees. Live impact equivalence translates each gift into meals served, while a fundraising thermometer, impact stats, and a donor wall build trust. Inline validation guides donor details and payment before a review step and an animated thank-you screen confirm the gift.

Ticketing — Organizer Dashboard

A bold, high-contrast organizer dashboard for the fictional Neon Pulse Festival. Four KPI cards track tickets sold, revenue, capacity and gate scans with trend chips and a low-stock badge. A timeframe toggle redraws an SVG sales chart across 7, 30 and 90 days, an interactive donut breaks sales down by ticket tier, a check-in progress ring shows pre-event readiness, and a recent-orders table drills into a ticket-stub drawer. Vanilla JS only.

Ticketing — Event Setup

A bold event setup wizard for organizers. A four-step flow covers event details, a live ticket-tier builder with per-tier color, price and quantity, a seating-mode switch between general admission and reserved sections, and publish toggles. Every edit drives a live ticket-style preview with color-coded tiers, sold-out flags and running capacity and gross-potential totals. Inline validation blocks publishing until the name, venue and a future date are set. Vanilla JS only.

Ticketing — Concert Landing

A loud, electric concert ticketing landing page for a fictional stadium tour, built with vanilla HTML, CSS, and JavaScript. Features a full-bleed neon hero with a live countdown to opening night, a filterable tour-dates list with availability badges, a three-act lineup, perforated ticket-tier cards with a sticky cart, a stylized venue map, a hype gallery, an accordion FAQ, mobile navigation, toast feedback, and scroll-reveal animations on a black plus magenta palette.

Ticketing — Festival Landing

An immersive multi-day festival landing page wrapped in a warm sunset gradient with a film-grain overlay and a funky display headline. A poster-style hero stacks the dates, a live countdown to gates, and a stacked-headliner lineup. Day-by-day tabs swap the schedule, three pass tiers carry sold-out and low-stock badges, and a stylized site map, experiences grid, and accordion FAQ round it out. Scroll reveals, a mobile menu, and toasts run on vanilla JavaScript only.

Ticketing — Seat Selection Map

An interactive event-ticketing seat picker built with vanilla JavaScript and an SVG venue chart. Fans pan and zoom across a tiered arena, filter sections by price using a color legend, and tap open seats to add them to a live cart that totals subtotal, service fee, and grand total. Seat states cover available, selected, taken, and accessible, with a six-seat max guard, keyboard support, toast feedback, and a countdown to showtime.

Ticketing — Seat Picker Widget

A standalone, zoomable seat-map picker widget for event ticketing. Renders a tiered seating chart with a color-coded legend, per-seat hover tooltips showing row, seat number and price, and tap-to-select with a six-seat order guard. A best-available button auto-picks the highest tier contiguous block, while a live chip bar, running total and countdown keep the selection state clear. Built with semantic markup, keyboard support and vanilla JavaScript only.

Agency — Branding / Identity Landing

A full one-page landing for Marrow and Plumb, a fictional branding and identity studio rendered in a cream, plum and warm-sand duotone with refined serif and sans pairing. It opens on an animated brand-mark hero and runs through social proof, end-to-end case studies with type specimens and color blocks, four services, a studio philosophy, a clear four-step process, founder testimonials and an inquiry form, all wired with vanilla JavaScript scroll reveals, counters and a toast.

Agency — Video / Production Landing

A full-page landing for Nocturne, a fictional film and motion studio, built on a black canvas with cinematic amber-to-red accents and an animated film-grain overlay. A transparent sticky nav sits over a full-bleed hero with an animated poster and play button, followed by a client marquee, a hover-play showreel grid, three service blocks, a behind-the-scenes band with count-up stats, a four-act process, a rotating testimonial carousel, and a bold make-something CTA. Vanilla JS drives the reel modal, scroll reveals, and validated forms.

AI Product — Image Generation Landing

A full one-page marketing landing for a fictional AI image generator, Prismeo, built in vanilla HTML, CSS, and JavaScript. It pairs a black, gallery-like canvas with iridescent magenta-to-teal-to-gold accents, a floating masonry hero gallery, and a live prompt bar. Interactive pieces include a style-picker that swaps the gallery, a before-to-after comparison slider, a monthly-annual pricing toggle, scroll reveals, a typewriter prompt, and a mobile nav with toast feedback.

AI Product — Chat Assistant Landing

A dark, premium one-page marketing site for Lumio, a fictional conversational AI assistant. It pairs a violet-to-cyan glow aesthetic with an animated hero chat mockup that types a prompt and streams a reply, plus trust logos, a memory and tools feature grid, a three-step how-it-works flow, a genuinely interactive try-a-prompt playground, testimonials, a monthly and yearly pricing toggle, an accordion FAQ, and a waitlist call to action. Built with semantic HTML, responsive CSS, and dependency-free vanilla JavaScript.

Banking — Ops Dashboard

An internal banking operations dashboard built with vanilla HTML, CSS and JavaScript. Surfaces live KPIs for transaction volume, active users, fraud flags and the KYC queue, alongside a layered credit-versus-debit volume chart, a triaged fraud-alert feed, a KYC approval queue and a recent disputes table. Operators can switch timeframes, approve or reject applicants inline, and dismiss alerts, each action confirmed with a toast and tabular-figure money formatting throughout.

Banking — Account Overview

A trust-first banking account overview dashboard with a total balance hero and sparkline, checking, savings and credit account cards with masked numbers, a conic-gradient spending donut with category legend, a filterable recent transactions feed showing credit and debit colors plus cleared, pending and failed status pills, quick actions for transfer, pay and deposit, and an upcoming bills panel. Hide and show balances, switch accounts and filter activity, all in self-contained vanilla JS.

Banking — Neobank Landing

A complete marketing landing page for a fictional neobank built with vanilla HTML, CSS and JavaScript. Features a tilting phone mockup with a live account screen, animated stat counters, a flippable virtual card, a tabbed in-app showcase, social proof, switchable monthly and yearly pricing tiers, a validated signup form with toasts, mobile navigation and scroll reveal. Energetic white and electric violet aesthetic, fully responsive down to 360px.

Banking — Investing

A trust-first fintech investing screen rendered in pure HTML, CSS and vanilla JavaScript. It pairs a headline portfolio value with day gain or loss, an interactive SVG performance chart with timeframe tabs and hover scrubbing, a holdings table, an allocation donut with legend, and a buy or sell trade panel that opens a confirmation modal. Clicking any holding reveals a detail sheet with cost basis and total gain. Tabular figures, masked security cues and toast feedback complete the experience.

Banking — Wealth / Investing Landing

A refined marketing landing page for a fictional wealth and investing platform, built in vanilla HTML, CSS, and JavaScript. It pairs a calm charcoal-and-emerald palette with serif display type, an animated SVG portfolio chart, an allocation breakdown, a switchable performance band, transparent pricing tiers, verifiable trust credentials, testimonials, and an email capture call to action — all responsive down to small phones with reveal-on-scroll and toast micro-interactions.