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 |
Live Preview
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.
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)
