# Gym Introducing

Fitness gym landing page assembled from view/*.html with PDRenderKit 1.5.2 PD data binding and IntersectionObserver scroll-reveal.

## Overview

| Item | Value |
|---|---|
| Created | 2023-06-19 |
| Last updated | 2024-08-03 |
| Category | Business Examples |
| HTML files | `index.html`, `view/header.html`, `view/child3.html`, `view/child4.html`, `view/child5.html`, `view/child6.html`, `view/child7.html`, `view/child8.html`, `view/child9.html` |
| Source | [target/20230619](https://github.com/pardnio/demo-web/tree/main/target/20230619) |

## Live Preview

<iframe src="/target/20230619/" title="Gym Introducing" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

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

## Page Sections

| Section | Description |
|---|---|
| Nav | Sticky nav with {{ navTitle }} PARDN CHIU, :for list of navTarget labels (HOME, CHILD...) and a menu button; items and button have no click handlers. |
| Header (view/header.html) | Full background workout photo with gradient panel, title, text, GitHub/LinkedIn buttons and Freepik credit link. |
| Features (view/child3.html) | Heading, 3 icon articles (dumbbell, biking) from :for, and a background image block (image/image 1.png). |
| Intro + gallery (view/child4.html) | Text with GitHub/LinkedIn links beside 4 photo figures from :for. |
| Checklist (view/child5.html) | 3 check-icon paragraphs beside a photo. |
| Programs (view/child6.html) | 3 cards with image, title, text and LEARN MORE link on a colored band. |
| Highlight (view/child7.html) | Large photo with offset shadow, heading, hint, paragraph and CONTACT US mail button. |
| Gallery (view/child8.html) | Heading, paragraph and 6-photo grid from :for. |
| Contact (view/child9.html) | Form bound with :model (name, email, message) and SUBMIT @click=send, photo, and 3 info items (phone, location, hours) via :html. |
| Footer | Copyright and :for social icon links (GitHub, LinkedIn). |

## Interactions

- js/index.js (module): new PD({id: "app", data, next}) renders the page; each view/*.html carries its own inline script creating a PD instance for its section id.
- Scroll reveal: in next(), after 300ms + 300ms, an IntersectionObserver watches every *.delay element and removes the delay class (elm.class_("delay")) when it enters view; CSS transitions do the reveal.
- view/child9.html: event.send alerts the :model-bound name, email and message.
- Unbound attributes in source: child8 href="item.freepik", child9 class="item.fa" and href="freepik" are literal strings, not bindings.

## 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 |
| PDRenderKit | 1.5.2 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.5.2/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/index.js | - | ./js/index.js (type=module) |
| Noto Sans TC (font-family only, not loaded by the page) | - | none |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `_section-3.scss`, `_section-4.scss`, `_section-5.scss`, `_section-6.scss`, `_section-7.scss`, `_section-8.scss`, `_section-9.scss`, `animation/_section-3.scss`, `animation/_bg-move.scss` |

index.scss: :root safe-area env() vars, --width-max 1024px, --bgcolor, reset, sticky nav, header gradient panel with staggered transitions, footer; _section-3.._section-9 style child3..child9 with .delay start states (offset/opacity). animation/_section-3 is fully commented out and animation/_bg-move is not imported. --col-brand-5 is used by several partials but never defined.

```bash
cd target/20230619
npx sass sass/index.scss css/index.css --no-source-map || exit 1
```

## Techniques

- PDRenderKit PD templating: :path partial loading on section/header elements, :for, :class / :src / :href binding, {{ }} interpolation, :model two-way input, :html, @click events.
- IntersectionObserver-driven reveal by removing a .delay class with CSS transitions.
- env(safe-area-inset-*) CSS variables; position: sticky nav; offset box-shadow; breakpoints 480px, 640px, 800px, 1024px.

## External Assets

- https://www.freepik.com/... (image credit links)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230619.jpg (og/twitter image)

## Related

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