pine-creek-hoa

Public marketing website for the Pine Creek community in Kannapolis, NC.

It is a fully static site (HTML/CSS/JS) designed to be hosted at no cost on Cloudflare Pages, and is responsive for desktop, tablet, and mobile.

Structure

• index.html — the entire single-page site (nav, hero, sections, HOA board, contact, footer).
• css/main.css — compiled, served stylesheet. Edited directly (no build tooling required).
• css/main.scss + css/components/* — SCSS source, kept in sync with main.css.
• js/main.js — mobile nav, smooth-scroll, and the photo galleries.
• img/ — images and the hero video (hero.mp4, hero-mobile.mp4, hero-poster.jpg), optimized estate/vineyard photos in img/gallery/, and community-map.jpg.

Local preview

Any static file server works, e.g.:

# Python
python3 -m http.server 8080
# or Docker (nginx)
docker run --rm -p 8080:80 -v "$PWD":/usr/share/nginx/html:ro nginx:alpine

Then open http://localhost:8080/

Editing styles

css/main.css is what the browser loads, so changes can be made there directly. If you have the Dart Sass CLI installed and prefer the SCSS source, recompile with:

sass css/main.scss css/main.css

Updating the HOA board

The board roster lives in a <table class="board-table"> inside the #home-owners section of index.html. Replace the placeholder name/email cells with the real values (5 members: Name, Position, Email).