# Basic (2022-04-12)

Static PDWebsitemplate module page (T003, C012, C010, C008, C011, B003) with a red theme: header with contact chips, news timeline, team cards, gallery, footer.

## Overview

| Item | Value |
|---|---|
| Created | 2022-04-12 |
| Category | Business Examples |
| HTML files | `index.html` |
| Source | [target/20220412](https://github.com/pardnio/demo-web/tree/main/target/20220412) |

## Live Preview

<iframe src="/target/20220412/" title="Basic (2022-04-12)" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[Open the example in a new tab](/target/20220412/)

## Page Sections

| Section | Description |
|---|---|
| T003 header + nav + hero | Background-image header: brand block, GitHub / Email contact chips, inline nav with a hover dropdown (LIST), then hero text with Code / Github buttons. |
| C012 dated posts | Two post items with a date badge (01 / 一月), meta list (user / group / tag), title, excerpt, MORE link, plus a 'My Page' button. |
| C010 profile cards | 4 cards (image, name, role, text) on a var(--col-sys) background. |
| C008 gallery | 8 figure cards in 4 columns with caption title and text. |
| C011 icon features | 4 icon + title + text items on var(--col-hint) background. |
| B003 footer | Top bar with social icons, then 4 columns: BC004 3x3 template thumbnails, BC006 link + date list, BC002 GitHub links, BC003 contact form (name / email inputs + submit), copyright bar. |

## Dependencies

| Name | Version | Source |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| Noto Sans TC (Google Fonts) | wght 100;300;400;500;700;900 | https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&amp;display=swap |
| Google Analytics gtag | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/PDWebsitemplate.min.scss` |
| Output CSS | `css/PDWebsitemplate.min.css` |
| Partials | `_PDModuleTop.scss (top/_T-001, _T-002, _T-003, _T004)`, `_PDModuleColum.scss (colum/_C001..._C019)`, `_PDModuleBottom.scss (bottom/_B001-_B003, _BC001-_BC006)`, `_PDModuleAnimation.scss`, `_PDModuleComp.scss (comp/_a[btn], _dev.a[shadow], _div[bg], _img[ic], _to, _wh)` |

Same module library as 20220409 (reset inlined at top of the entry, no _init / function imports); each module is scoped by div[sn=XXXX]. Only 6 modules are used by the page.

```bash
cd target/20220412
npx sass sass/PDWebsitemplate.min.scss css/PDWebsitemplate.min.css --no-source-map || exit 1
```

## Techniques

- Attribute-driven module system: sn module ids, df="x2/x4" column grids, df="btn col fff xxl" buttons, wh="1" image frames, df="bg" background blocks.
- Theme set by CSS variables in inline &lt;style&gt; on *: red --col-sys rgb(200,30,60), --col-sys-light/hint/dark, --max-width 1140px, --default-radius 0.5rem, --module-hint 1 (shows module labels).
- Desktop-first max-width media queries (479 / 639 / 767 / 1023px) and pointer-fine hover with keyframe color transitions; CSS-only hover dropdown.

## External Assets

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20220412.jpg`
- ../icon/watch/1/fff.svg, ../image/bg-l.svg, ../image/bg-m.svg (referenced by compiled CSS, not present in the folder)

## Known Issues

- CSS url(../icon/watch/1/fff.svg), url(../image/bg-l.svg) and url(../image/bg-m.svg) resolve to &lt;folder&gt;/icon and &lt;folder&gt;/image, which do not exist (the [wh] hover overlay icon will 404; bg-l.svg is overridden by inline background-image). No other path depends on the host.

## Related

- [Project Structure](/project-structure)
- [Styling Workflow](/styling-workflow)
- [Frameworks](/frameworks)