Block Gallery / Style Guide
Every block, rendered once
_hero.html

The CCC Proposal Blocks

This page renders every reusable block once, with placeholder content. It doubles as the visual style guide — if a block looks wrong here, fix it in blocks.css, not on a client page.

15 blocks Zero JS Day mode
_section.html

Section Wrapper

Every band on a proposal page is a .ccc-section. Add a .bg-* helper to the section tag for a full-bleed color band — the helper sets the correct text color for everything inside, headings included. This one is .bg-panel.

Body copy inside a section sits in a .ccc-container (1000px). Add .ccc-container--wide for 1280px layouts like big card grids.

_card.html

Card

The signature CCC surface: 3px border, 0.5rem radius, hard stamp shadow.

Default Card

Panel background, chunky border, stamp shadow. The workhorse.

Flat Card

.ccc-card--flat drops the shadow for dense layouts.

Accent Card

.ccc-card--accent adds a 6px orange top border to highlight one option.

_card-grid.html

Card Grid

Auto-fit grid, ~280px minimum column, collapses to one column on phones. Shown here on a .bg-gray-30 band.

One

Cards stay panel-white on any band.

Two

Grid gap is --ccc-space-2.

Three

Use 2–6 cards.

Four

Rows wrap automatically.

_stats.html

Stats

Big Cultures Carnival numbers in accent orange over small uppercase labels.

12
Pages Designed
3
Month Timeline
100%
Yours To Keep
_divider.html
_block-divider.html
_textured-callout.html

Textured Callout

A big statement framed by tiling terrain. Outer div takes one terrain modifier (--dirt, --grass, --stone, --sand, --snow, --purple, --lava); the content inside is fully malleable.

The third thing

We don't disappear at launch.

Every month we ship new pages, design new blocks, and keep the site moving alongside the marketing strategy. Not a maintenance contract. A growth partnership.

_two-col.html

Two Column

Text beside a visual

50/50 split that collapses to a single column under 720px. Use it to pair explanation copy with a screenshot, a framed card, or a checklist.

The visual side

Often a .ccc-card framing an image or a mini-list.

_timeline.html

Timeline

Vertical phase timeline with numbered markers and duration pills.

  1. 1

    Discovery

    2 weeks

    Stakeholder interviews, content audit, sitemap. We leave this phase agreeing on what the site has to do.

  2. 2

    Design

    4 weeks

    Homepage first, then templates. Two revision rounds per template.

  3. 3

    Build & Launch

    6 weeks

    Development, content load, QA, training, launch day.

_table.html

Table

Dark header row, zebra body, 3px wrapped border. Scrolls sideways on phones instead of breaking the layout.

ItemDetailInvestment
DesignHomepage + 4 interior templates$8,000
DevelopmentWordPress build on the CCC parent theme$9,000
Content loadUp to 20 pages migrated and styled$3,000
_sitemap.html

Sitemap

Nested page tree. Top level reads as cards; add class "is-new" to badge proposed pages.

_quote.html

Quote

Working with Classic City felt like adding a partner, not hiring a vendor. The site paid for itself in the first quarter.
A Real Client, CEO — Their Company
_checklist.html

Checklist

  • Custom design, no templates
  • WordPress build you own outright
  • Training for your team
  • 30 days of post-launch support

Buttons, pills & text helpers

.ccc-pill .ccc-pill--accent

.ccc-btn .ccc-btn--accent

.text-soft · .text-accent · a pixel-underline link

_cta.html

Ready when you are.

The closing band. Big heading, one button, contact line. Always the last section before the footer.

Let's Build It

chris@classiccity.com  ·  770-778-9092