# Gallery Page

Purple dark-nav landing page with transparent-to-solid nav, overlapping hover image trio, parallax band and article cards.

## Overview

| Item | Value |
|---|---|
| Created | 2023-03-09 |
| Category | Business Examples |
| HTML files | `index.html` |
| Source | [target/20230309](https://github.com/pardnio/demo-web/tree/main/target/20230309) |

## Live Preview

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

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

## Page Sections

| Section | Description |
|---|---|
| Top navigation (nav num=1) | #top-nav using the transparent + color-change style (nav/_001) with --col-nav #212831 |
| Hero (header=1) | Full background-image hero with white h1 and GitHub button |
| Image trio (num=10) | Three overlapping images (left/right/center) with hover and unhover animations |
| Feature icons (num=1) | 4-column icon cards |
| Quote band (num=11) | Background-image section with centered white h2 |
| Article cards (num=12) | Arc-down divider and three image + title + text cards |
| CTA (num=8) | Heading and button linking to pardn.io |
| Footer (footer num=1) | Site title, social icons (Instagram/Facebook/GitHub), four link columns ABOUT / PRODUCTS / TECHNICAL / LEGAL, copyright row |

## Interactions

- js/index.js: body.onscroll toggles .scroll on #top-nav past 48px using PDRenderKit string helpers ("top-nav".$._class / class_)
- js/index.js: converts custom attributes top / bottom / bg-col / col / bg-img into inline padding-top, padding-bottom, background-color, color, background-image (values starting with -- become var(--x))
- js/index.js: replaces span[mask=arc|arc-up|arc-down|slash-left|slash-right|wave] with generated inline SVG dividers sized from the viewport width (64/128px above 1024px)
- js/index.js: elements with unhover="1" get an .unhover class for 500ms on mouseleave to play a leave animation (used by the three num=10 images)
- js/index.js wraps logic in DOMContentLoaded and relies on PDRenderKit prototype extensions ($all, $attr, _style, $style, $parent, _class, class_)

## 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.0.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | G-L5VYEZPVXX | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Page stylesheet (compiled SCSS) | - | ./css/index.css |
| Page script | - | ./js/index.js |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `nav/_001.scss`, `nav/_002.scss`, `nav/_body.scss`, `header/_001.scss`, `header/_002.scss`, `header/_003.scss`, `section/_000.scss ... section/_022.scss`, `section/_015-top.scss`, `section/_015-center.scss`, `section/_015-bottom.scss`, `footer/_001.scss`, `comp/_div-info.scss`, `comp/_innerText.scss`, `comp/_li-r2.scss`, `comp/_li-r3.scss`, `comp/_li-r4.scss`, `comp/_ul-button.scss` |

Shared section library: index.scss imports every nav/header/section/footer partial inside body; each partial is keyed by an attribute selector (nav[num], section[header=N], section[num=N], footer[num]); comp/* are mixin-like snippets imported inside sections (r2/r3/r4 responsive column widths, div-info title block). component/_info.scss, comp/_w-h-rate.scss and section/_rm-1st-top.scss exist but are not imported.

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

## Techniques

- Theme via CSS custom properties in an inline &lt;style&gt; :root (--col-nav, --col-system, --col-txt, --col-border, --max-width)
- Attribute-driven layout: section[num=N] / section[header=N] / nav[num] select a pre-built SCSS block; ul.r2/.r3/.r4 pick 2/3/4 column cards
- Fixed top nav with collapsed hamburger button; media queries at 413/479/639/799/1023/1139px max-width and 480/640/768/1024px min-width
- JS-generated SVG section dividers (arc / slash / wave) via span[mask]
- SEO head: Open Graph, Twitter card, canonical, JSON-LD WebPage schema
- Extra theme vars --col-bg, --col-bg1, --col-bg2, --col-text-light
- Keyframe hover/leave animations in section/_010.scss

## External Assets

- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230309.jpg (og:image / twitter:image)
- https://pardn.io/web-template/target/20230309 (canonical / og:url)
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)

## Related

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