Product Introduction
Dark-gray product landing page: glass hero card, 6 feature cards, FAQ accordion, CTA band and two profile cards.
Overview
Live Preview
Open the example in a new tab
Page Sections
Interactions
- js/index.js: body.onscroll toggles .scroll on #nav-002 past 48px using PDRenderKit string helpers ("nav-002".$.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)
- Inline script showContent(this): accordion, clicking a button toggles .show on its li and closes the other open li
- js/index.js wraps logic in DOMContentLoaded and relies on PDRenderKit prototype extensions ($all, $attr, _style, $style, $parent, class, class)
Dependencies
Styling
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. This copy's header/_002.scss and section/_015-center.scss differ from 20230302. image/full.svg, half.svg, joball.jpg exist but are not referenced.
cd target/20230313
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- Theme via CSS custom properties in an inline <style> :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
- Glassmorphism hero: rgba(255,255,255,0.75) + backdrop-filter: blur(5px) in header/_002.scss
- Multi-line text clamp (-webkit-line-clamp: 3) in header/_002.scss
External Assets
