Basic (2022-04-08)

Single-page business landing template rendered with PDRenderKit data binding: blurred hero, card lists, icon stats, YouTube embed and rich footer.

Overview

Item	Value
Created	2022-04-08
Category	Business Examples
HTML files	`index.html`
Source	target/20220408

Live Preview

Open the example in a new tab

Page Sections

Section	Description
Header / hero	Background-image header with dark blur overlay; top bar with social icons (rendered from data.contact) and Contact mail button; sticky nav with a dropdown submenu and mobile list button; hero article with Code / GitHub buttons.
Article cards (section 1)	Header text plus 3 article cards (title with index, icon link, date, image with caption) generated by :for over section_1.item.
Icon stats band (section 2)	Black-to-steelblue gradient band with 4 icon + text blocks from section_2.item; diagonal edge drawn with a ::before gradient.
Image gallery (section 3)	4 figure cards with image and linked caption from section_3.item.
Feature cards (section 4)	Background-image section with 4 icon feature cards and caret links from section_4.item.
Text + video (section 5)	Two-column block: text with two buttons, and a YouTube iframe embed with caption.
Footer	Blurred background footer with About + social icons, link list, contact form (name / email inputs), 3x3 thumbnail grid from footer.image, page links and copyright row.

Interactions

js/index.js builds random sample data (fakeimg URLs, shuffled Font Awesome icon names via PDRenderKit Array.$random) and mounts new PD({ id: 'body', data, event, next }).
event.show / event.close toggle the 'show' class on the mobile nav list via @click.
next(): body scroll listener adds 'show' to #top-nav once scrolled >= 64px (blurred sticky nav).

Dependencies

Name	Version	Source
PDRenderKit	1.0.2	https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.2/dist/PDRenderKit.js
Font Awesome Free	6.5.2	https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css
Google Analytics gtag	-	https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX
Noto Sans TC (font-family only, not loaded by the page)	-	sass/_init.scss font-family declaration

Styling

Item	Value
SCSS entry	`sass/index.scss`
Output CSS	`css/index.css`
Partials	`_init.scss`, `_header.scss`, `_section2.scss`, `_section3.scss`, `_section4.scss`, `_section5.scss`, `_section6.scss`, `_footer.scss`

_init defines rem spacing variables ($_1..$_1440), safe-area env() vars and resets; each _sectionN styles body > section:nth-child(N); html is fixed and body is the scroll container.

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

Techniques

PDRenderKit template syntax: :for="(e, i) in ...", :class, :href, :src, {{ i }}, @click.
position: sticky nav with backdrop-filter blur toggled by class.
Diagonal section edges via ::before linear-gradient (transparent 49.5% / #fff 50.5%).
Mobile-first breakpoints at 480 / 640 / 800 / 1024 / 1280 (rem vars) plus (hover: hover) and (pointer: fine) hover guards.
Footer thumbnail grid with aspect-ratio: 1 / 1 and hover scale(110%).

External Assets

https://fakeimg.pl/1024/282828/eae0d0/?text=sample
https://www.youtube.com/embed/hvBHWOhPANk
https://pardn.io/image/head.png
https://pardn.io/web-template/image/20220408.jpg