App Introduction (2023-03-02)

Gradient-hero landing page built from the shared section library: icon features, image cards, FAQ accordion and CTA.

Overview

Item	Value
Created	2023-03-02
Category	Business Examples
HTML files	`index.html`
Source	target/20230302

Live Preview

Open the example in a new tab

Page Sections

Section	Description
Top navigation	Fixed top nav #nav-002: PARDNCHIU logo, ITEM buttons, GitHub link, hamburger button
Hero (header=1)	Green-to-blue gradient (.linear-bg-1) with local image/header.png, h1, paragraph and GitHub / My Page buttons
Feature icons (num=1)	Wave divider plus 4-column (r4) cards with gradient icon badges (Apple/desktop/database/server)
Testimonial cards (num=5)	2-column (r2) image cards with bold name and text
Shadow cards (num=7)	Arc-down divider, light-blue background, 4 shadowed icon cards
Image band	30rem tall section with bg-img placeholder background
FAQ accordion (num=19)	Two collapsible questions toggled by showContent()
CTA (num=8)	Heading, text and right-aligned READ MORE button
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 adds .scroll to the first <nav> once scrollTop > 48px (vanilla DOM)
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 (no unhover elements on this page)
Inline script showContent(this): accordion, clicking a button toggles .show on its li and closes the other open li
js/index.js is plain vanilla DOM (querySelectorAll / getAttribute); PDRenderKit is loaded but not used by the page script

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
Hero image	-	./image/header.png

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.

cd target/20230302
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
Multi-prefixed linear-gradient utility classes .linear-bg-1 / .linear-bg-2 defined inline

External Assets

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