# pardnio/demo-web

> 38 handcrafted frontend website templates and HTML CSS examples by Pardn Chiu (邱敬幃), written in SCSS; some use the PDRenderKit framework.

Maintained by 邱敬幃 Pardn Chiu (pardnio), Pardn Co., Ltd. Source: https://github.com/pardnio/demo-web

Full text in one file: [English](https://demo-web.pardn.io/llms-full.txt) · [中文](https://demo-web.pardn.io/zh/llms-full.txt)

## Overview

- [Home](https://demo-web.pardn.io/index.md): 38 handcrafted frontend website templates and HTML CSS examples by Pardn Chiu (邱敬幃), written in SCSS; some use the PDRenderKit framework.
- [Getting Started](https://demo-web.pardn.io/getting-started.md): Clone pardnio/demo-web and preview the landing page and any of the 38 HTML CSS examples locally with a static HTTP server.

## Concepts

- [Project Structure](https://demo-web.pardn.io/project-structure.md): How demo-web is laid out: date-named target/ example folders, preview images, and the README-driven landing page.
- [Styling Workflow](https://demo-web.pardn.io/styling-workflow.md): Recompile each demo-web example from its SCSS entry file to the CSS it loads, with per-example entry names and caveats.
- [Frameworks](https://demo-web.pardn.io/frameworks.md): Which frontend framework each demo-web example loads: PDExtension, PDRenderKit 1.0.0 to 1.5.2, or QuickUI 0.6.2.

## Business Examples

- [App Introduction (2023-07-10)](https://demo-web.pardn.io/example-20230710.md): Red-accent business template routing 7 pages by ?page= query via PDRenderKit 1.2.0 :if/:path views, incl. blog and Markdown article.
- [Gym Introducing](https://demo-web.pardn.io/example-20230619.md): Fitness gym landing page assembled from view/*.html with PDRenderKit 1.5.2 PD data binding and IntersectionObserver scroll-reveal.
- [Service Introduction](https://demo-web.pardn.io/example-20230605.md): Lorem-ipsum company/service landing template with pink brand palette, alternating image-text blocks, service cards and a contact form; pure HTML/CSS.
- [Restaurant Introduction (2023-06-04)](https://demo-web.pardn.io/example-20230604.md): Single-page landing site for a vegetarian brunch restaurant (耕園7293 / G-Burger) with hero, featured dishes, menu cards and contact footer.
- [Store Page](https://demo-web.pardn.io/example-20230314.md): Source-code showcase landing page: search hero, wave-divided code gallery, featured and latest product grids, and image/text rows.
- [Product Introduction](https://demo-web.pardn.io/example-20230313.md): Dark-gray product landing page: glass hero card, 6 feature cards, FAQ accordion, CTA band and two profile cards.
- [Basic (2023-03-12)](https://demo-web.pardn.io/example-20230312.md): Product catalogue landing page: search hero, 4-column product grid, custom-site contact bar and 3-column product detail cards.
- [Basic (2023-03-10)](https://demo-web.pardn.io/example-20230310.md): Green hosting landing page: gradient hero with contact form, VPS pricing plans, background-image feature grid and CTA.
- [Gallery Page](https://demo-web.pardn.io/example-20230309.md): Purple dark-nav landing page with transparent-to-solid nav, overlapping hover image trio, parallax band and article cards.
- [App Introduction (2023-03-06)](https://demo-web.pardn.io/example-20230306.md): Red-accent corporate landing page: laptop mockup, feature grids, image+list split, dark promo block and email subscribe bar.
- [App Introduction (2023-03-02)](https://demo-web.pardn.io/example-20230302.md): Gradient-hero landing page built from the shared section library: icon features, image cards, FAQ accordion and CTA.
- [Service Info](https://demo-web.pardn.io/example-20230301.md): Business / web-hosting landing page using attribute-driven sections (num, top, bottom, bg-col, col) styled by vanilla JS, with JS-generated SVG arc dividers.
- [Restaurant Introduction (2022-05-25)](https://demo-web.pardn.io/example-20220525.md): Four-page restaurant / franchise brand site (About, News, Products, Stores) with scroll-aware nav, canvas-drawn curved hero and in-view store animations.
- [Basic (2022-04-18)](https://demo-web.pardn.io/example-20220418.md): Orange-themed PDWebsitemplate page (T005, C025-C029, B001) introducing attribute breakpoints like class="resize _3" _768="2" _640="1".
- [Basic (2022-04-13)](https://demo-web.pardn.io/example-20220413.md): Purple-themed PDWebsitemplate page (T004, C020-C024, B004) adding a full-screen mobile nav, responsive w_* grids and CSS-only percentage pie charts.
- [Basic (2022-04-12)](https://demo-web.pardn.io/example-20220412.md): Static PDWebsitemplate module page (T003, C012, C010, C008, C011, B003) with a red theme: header with contact chips, news timeline, team cards, gallery, footer.
- [Basic (2022-04-09)](https://demo-web.pardn.io/example-20220409.md): Static business page assembled from PDWebsitemplate modules (T002, C004, C013, C006, C014, C007, B001), selected by sn attributes, green theme.
- [Basic (2022-04-08)](https://demo-web.pardn.io/example-20220408.md): Single-page business landing template rendered with PDRenderKit data binding: blurred hero, card lists, icon stats, YouTube embed and rich footer.

## Personal Examples

- [Personal Blog with Cover](https://demo-web.pardn.io/example-20230721.md): 'Personal Alt' blog variant (PDRenderKit 1.0.1, JS-rendered): image hero with intro and computed SVG wave, light top header, card grid with pager.
- [Personal Profile (2023-06-16)](https://demo-web.pardn.io/example-20230616.md): Grayscale resume portfolio with fixed left tab bar, assembled from view/*.html by QuickUI 0.6.2 templates, with tabbed resume and pricing.
- [About Me Page](https://demo-web.pardn.io/example-20230613.md): Grayscale developer portfolio fully rendered in JS by PDRenderKit 1.5.2 from a PDConfig object, with scroll-spy nav, tabs and portfolio filter.
- [Personal Info](https://demo-web.pardn.io/example-20230610.md): Personal resume/portfolio one-pager with a fixed left icon sidebar, skill bars, timeline, filterable horizontal portfolio carousel, pricing and contact form.
- [Personal Page](https://demo-web.pardn.io/example-20230607.md): Purple-themed developer portfolio one-pager (PARDN CHIU) with hero, about, services, JS-generated portfolio grid, testimonials and subscribe band.
- [Personal Profile (2023-05-12)](https://demo-web.pardn.io/example-20230512.md): Single-page personal résumé site rendered entirely by PDRenderKit from a PDConfig object: Home typing hero, About Me profile/skills, Portfolio grid.
- [Personal Portfolio](https://demo-web.pardn.io/example-20230226.md): JS-rendered personal profile card (J002 layout): avatar, social links, experience stats, contact buttons, Portfolio grid with tag filter and Skills year rings.
- [Personal Introduction](https://demo-web.pardn.io/example-20230220.md): Personal portfolio page on QuickUI 0.6.2: Home with typing-effect title and floating gradient blobs, Portfolio grid filtered by ?type= with copy-link share.

## Blog Examples

- [Minimal Blog](https://demo-web.pardn.io/example-20230723.md): 'Minimal' single-column blog variant (PDRenderKit 1.0.1, JS-rendered): compact nav with side menu, minimal post list, post, contact and 404 pages.
- [Classic Blog](https://demo-web.pardn.io/example-20230722.md): 'Classic' blog variant (PDRenderKit 1.5.1, JS-rendered): centered brand header, arrow-controlled featured carousel, grid + list home and 9 inner pages.
- [Personal Blog](https://demo-web.pardn.io/example-20230720.md): 'Personal' blog variant, fully JS-rendered with PDRenderKit 1.5.1: featured slide carousel header, sidebar widgets and 9 JS-switched inner pages.
- [Magazine Blog](https://demo-web.pardn.io/example-20230719.md): Magazine-style blog template using PDRenderKit 1.2.0 declarative templates: ?page= routing with :if, :path partial views, :for loops and a Markdown post body.
- [Simplify Blog](https://demo-web.pardn.io/example-20230712.md): Two-column personal blog SPA rendered entirely by JS (PDRenderKit 1.0.1): sticky left profile/nav, right pane swapping list, article, about and contact views.
- [Personal Page With Blog](https://demo-web.pardn.io/example-20230621.md): Multi-page personal site (home, portfolio, blog, post) from view/*.html partials on PDRenderKit 1.2.0, with JS masonry and Markdown viewer.
- [Blog](https://demo-web.pardn.io/example-20230311.md): Blog-style article listing page: featured posts, latest posts, latest comments and categorized link columns, plus FAQ and subscribe.

## App & Platform Examples

- [Smart Clock (Voice Control)](https://demo-web.pardn.io/example-20241220.md): Voice-controlled 7-segment smart clock (zh-TW Web Speech API) on QuickUI 0.6.2: shows time, date, year, seconds and runs spoken countdowns.
- [Zeczec](https://demo-web.pardn.io/example-20240625.md): Multi-page crowdfunding platform mockup modeled on zeczec (嘖嘖), using QuickUI 0.6.2 :for loops: home, explore, project, FAQ, comments, proposal and auth pages.
- [Social Networking](https://demo-web.pardn.io/example-20230730.md): Three-column creative community/portfolio app (Chinese UI) rendered in JS with PDRenderKit 1.0.1: albums, services, cases, posts, bookmarks, inbox and popups.
- [Moneybook](https://demo-web.pardn.io/example-20230418.md): Mobile bookkeeping app mock built with PDRenderKit data binding: month calendar / pie view, side tab and add-record keypad calculator.
- [Instagram](https://demo-web.pardn.io/example-20221012.md): Static Instagram-style web app built entirely in JS with PDExtension DOM helpers: feed, stories, explore, DMs, notifications, profiles and post popups.

## 中文文件

- [首頁](https://demo-web.pardn.io/zh/index.md): 邱敬幃 Pardn Chiu 手作的 38 款網站前端範例與 HTML 網頁範本，以 SCSS 撰寫，部分採用 PDRenderKit 框架，可瀏覽線上展示。
- [快速開始](https://demo-web.pardn.io/zh/getting-started.md): 取得 demo-web 原始碼，以靜態伺服器在本機預覽首頁與 38 個前端範例。
- [專案結構](https://demo-web.pardn.io/zh/project-structure.md): demo-web 的目錄配置：以日期命名的範例資料夾、預覽圖與由 README 驅動的首頁。
- [樣式工作流程](https://demo-web.pardn.io/zh/styling-workflow.md): 將 demo-web 各範例的 SCSS 重新編譯為實際載入的 CSS，含各範例入口檔名與注意事項。
- [框架使用](https://demo-web.pardn.io/zh/frameworks.md): demo-web 各範例載入的前端框架：PDExtension、PDRenderKit 1.0.0–1.5.2 或 QuickUI 0.6.2。
- [App 介紹 230710](https://demo-web.pardn.io/zh/example-20230710.md): 紅色系企業樣板，以 PDRenderKit 1.2.0 的 :if/:path 依 ?page= 切換 7 頁，含部落格與 Markdown 文章。
- [健身房介紹](https://demo-web.pardn.io/zh/example-20230619.md): 健身房形象網站，以 PDRenderKit 1.5.2 PD 資料綁定組合 view/*.html，搭配 IntersectionObserver 捲動進場。
- [服務介紹](https://demo-web.pardn.io/zh/example-20230605.md): 粉紅品牌色的公司／服務形象樣板，含交錯圖文區塊、服務卡片與聯絡表單，純 HTML/CSS 無 JS。
- [餐廳介紹 230604](https://demo-web.pardn.io/zh/example-20230604.md): 素食早午餐餐廳（耕園7293 / G-Burger）單頁形象網站，含主視覺、熱門餐點、店長推薦菜單與聯絡區。
- [商店頁面](https://demo-web.pardn.io/zh/example-20230314.md): 源碼展示形象頁：搜尋主視覺、波浪分隔源碼展示、精選與最新產品網格及圖文列。
- [產品介紹](https://demo-web.pardn.io/zh/example-20230313.md): 深灰主色產品形象頁：毛玻璃主視覺卡、六張特色卡、FAQ 手風琴、行動呼籲橫幅與兩張簡介卡。
- [基礎版型 230312](https://demo-web.pardn.io/zh/example-20230312.md): 產品目錄形象頁：搜尋主視覺、四欄產品網格、客製網站聯絡列與三欄產品詳細卡片。
- [基礎版型 230310](https://demo-web.pardn.io/zh/example-20230310.md): 綠色主機服務形象頁：漸層主視覺含聯絡表單、VPS 方案價目、背景圖特色網格與行動呼籲。
- [相簿頁面](https://demo-web.pardn.io/zh/example-20230309.md): 紫色深色導覽形象頁：透明轉實色導覽、三圖重疊懸停效果、背景圖橫幅與文章卡片。
- [App 介紹 230306](https://demo-web.pardn.io/zh/example-20230306.md): 紅色主色企業形象頁：筆電外框展示、特色網格、圖文分欄、深色推廣區與 Email 訂閱列。
- [App 介紹 230302](https://demo-web.pardn.io/zh/example-20230302.md): 以共用區塊庫組成的漸層主視覺形象頁：圖示特色、圖片卡片、FAQ 手風琴與行動呼籲。
- [服務資訊](https://demo-web.pardn.io/zh/example-20230301.md): 以屬性驅動區塊（num、top、bottom、bg-col、col）並由原生 JS 套用樣式的商務／主機代管形象頁，含 JS 產生的 SVG 弧形分隔。
- [餐廳介紹 220525](https://demo-web.pardn.io/zh/example-20220525.md): 四頁式餐飲加盟品牌網站（品牌介紹、最新消息、餐點介紹、門市據點），含捲動感知導覽列、canvas 曲線主視覺與門市進場動畫。
- [基礎版型 220418](https://demo-web.pardn.io/zh/example-20220418.md): 橘色主題 PDWebsitemplate 頁面（T005、C025-C029、B001），導入 resize _3 搭配 _768 等屬性式斷點欄數。
- [基礎版型 220413](https://demo-web.pardn.io/zh/example-20220413.md): 紫色主題 PDWebsitemplate 頁面（T004、C020-C024、B004），新增全螢幕行動選單、響應式 w_* 格線與純 CSS 百分比圓餅圖。
- [基礎版型 220412](https://demo-web.pardn.io/zh/example-20220412.md): 紅色主題 PDWebsitemplate 模組靜態頁（T003、C012、C010、C008、C011、B003）：聯絡資訊頁首、日期文章、人物卡、圖庫與頁尾。
- [基礎版型 220409](https://demo-web.pardn.io/zh/example-20220409.md): 以 PDWebsitemplate 模組（T002、C004、C013、C006、C014、C007、B001）透過 sn 屬性組成的靜態形象頁，綠色主題。
- [基礎版型 220408](https://demo-web.pardn.io/zh/example-20220408.md): 以 PDRenderKit 資料綁定渲染的單頁形象網站模板，含模糊背景主視覺、卡片列表、圖示數據、YouTube 嵌入與完整頁尾。
- [封面式個人部落格](https://demo-web.pardn.io/zh/example-20230721.md): 部落格「Personal Alt」版本（PDRenderKit 1.0.1 純 JS 渲染）：含自介與動態 SVG 波浪的主視覺、淺色頁首、附分頁的卡片格。
- [個人簡介 230616](https://demo-web.pardn.io/zh/example-20230616.md): 灰階履歷作品集，左側固定分頁欄，以 QuickUI 0.6.2 模板組合 view/*.html，含分頁式履歷與價目。
- [關於我頁面](https://demo-web.pardn.io/zh/example-20230613.md): 灰階開發者作品集，整頁由 PDRenderKit 1.5.2 依 PDConfig 以 JS 產生，含 scroll-spy 導覽、分頁與作品篩選。
- [個人資訊](https://demo-web.pardn.io/zh/example-20230610.md): 左側固定圖示側欄的個人履歷作品集單頁，含技能條、經歷時間軸、可篩選橫向作品輪播、價目與聯絡表單。
- [個人頁面](https://demo-web.pardn.io/zh/example-20230607.md): 紫色系開發者個人作品集單頁（PARDN CHIU），含主視覺、自我介紹、服務、JS 產生的作品格、客戶評價與訂閱區。
- [個人簡介 230512](https://demo-web.pardn.io/zh/example-20230512.md): 完全由 PDRenderKit 依 PDConfig 物件渲染的個人履歷單頁：打字效果首頁、關於我（簡介／技能）、作品集網格。
- [個人作品集](https://demo-web.pardn.io/zh/example-20230226.md): JS 渲染的個人檔案卡（J002 版型）：頭像、社群連結、經歷數據、聯絡按鈕、可依標籤篩選的作品格線與技能年資圓環。
- [個人介紹](https://demo-web.pardn.io/zh/example-20230220.md): 以 QuickUI 0.6.2 製作的個人作品集頁：首頁打字效果標題與漂浮漸層圓，作品集依 ?type= 篩選並可複製連結分享。
- [極簡部落格](https://demo-web.pardn.io/zh/example-20230723.md): 部落格「Minimal」單欄版本（PDRenderKit 1.0.1，純 JS 渲染）：精簡導覽與側選單、極簡文章列表、文章、聯絡與 404 頁。
- [經典部落格](https://demo-web.pardn.io/zh/example-20230722.md): 部落格「Classic」版本（PDRenderKit 1.5.1，純 JS 渲染）：置中品牌頁首、箭頭控制的精選輪播、格狀加列表首頁與 9 個內頁。
- [個人部落格](https://demo-web.pardn.io/zh/example-20230720.md): 部落格模板的「Personal」版本，以 PDRenderKit 1.5.1 純 JS 渲染：精選輪播頁首、側欄小工具與 9 個 JS 切換的內頁。
- [雜誌風部落格](https://demo-web.pardn.io/zh/example-20230719.md): 雜誌風部落格模板（PDRenderKit 1.2.0）：?page= 搭配 :if 路由、:path 載入片段、:for 迴圈與 Markdown 文章。
- [簡約部落格](https://demo-web.pardn.io/zh/example-20230712.md): 以 PDRenderKit 1.0.1 純 JS 渲染的雙欄個人部落格 SPA：左側固定個人介紹與選單，右側切換文章列表、文章、關於與聯絡頁。
- [含部落格的個人頁](https://demo-web.pardn.io/zh/example-20230621.md): 多頁式個人網站（首頁、作品集、部落格、文章），以 PDRenderKit 1.2.0 組合片段，含 JS 瀑布流與 Markdown 檢視器。
- [部落格](https://demo-web.pardn.io/zh/example-20230311.md): 部落格式文章列表頁：精選內容、最新內容、最新回應與分類連結欄，另含 FAQ 與訂閱。
- [語音智能時鐘](https://demo-web.pardn.io/zh/example-20241220.md): 以 zh-TW 語音辨識控制的七段顯示智能時鐘（QuickUI 0.6.2）：顯示時間、日期、年份、秒數並可語音計時。
- [嘖嘖募資平台](https://demo-web.pardn.io/zh/example-20240625.md): 以嘖嘖為基底的群眾募資平台多頁範例，使用 QuickUI 0.6.2 :for 迴圈：首頁、探索、專案、常見問題、留言、提案與會員頁。
- [社群網站](https://demo-web.pardn.io/zh/example-20230730.md): 三欄式創作者社群／作品分享應用（中文介面），以 PDRenderKit 1.0.1 於 JS 渲染：作品集、自我介紹、案件、貼文、收藏、收件匣與彈窗。
- [記帳本](https://demo-web.pardn.io/zh/example-20230418.md): 以 PDRenderKit 資料綁定製作的手機記帳 App 原型：月曆／圓餅檢視、側邊選單與新增紀錄計算鍵盤。
- [Instagram 仿製](https://demo-web.pardn.io/zh/example-20221012.md): 完全以 JS 與 PDExtension DOM 輔助函式產生的仿 Instagram 靜態網頁應用：動態、限時動態、探索、私訊、通知、個人頁與貼文彈窗。