Restaurant Introduction (2022-05-25)

Four-page restaurant / franchise brand site (About, News, Products, Stores) with scroll-aware nav, canvas-drawn curved hero and in-view store animations.

Overview

Item	Value
Created	2022-05-25
Category	Business Examples
HTML files	`index.html`, `news.html`, `products.html`, `store.html`
Source	target/20220525

Live Preview

Open the example in a new tab

Page Sections

Section	Description
Nav (all pages)	#nav with list toggle button, 4 page tabs (品牌介紹 / 最新消息 / 餐點介紹 / 門市據點 linking to the 4 HTML files), and right-side 加盟專區 / 聯絡我們 / Facebook icons.
Page hero (all pages)	#body with a cover image and a <canvas> that paints a white curved shape around the centered #page-title (ABOUT US / LATEST NEWS / PRODUCTS / STORES).
index.html content	Placeholder block '自訂內容 (此範例沒此頁設計)'.
news.html list	Category nav (全部消息 / 媒體報導 / 新品上市 / 新店快訊) and dated news items with tag, text and image.
products.html grid	Category nav (類別1-5) and product figures with description and price (35 / 份).
store.html list	Store search (city / district selects, keyword, 搜尋門市) and numbered store cards (phone, hours, address, 訂餐 / 菜單 / 地圖 buttons) alternating image left / right.
Footer (all pages)	Store search form, logo image with franchise hotline tel: link, copyright row.

Interactions

js/PDWebsitemplate.js window.onscroll: sets #nav class 'toppest' when pageYOffset >= 64px, switches to 'float' when scrolled back.
setLeftBg() on load / resize: sizes the hero canvas and draws a quadraticCurveTo bump around #page-title's width.
#nav-show-button toggles the left tab list 'show' / 'hide' (500ms) and swaps the icon between fa-list and fa-arrow-left.
IntersectionObserver sets class 'inview' on [animation='1'] store cards to trigger stores-index-show-left / -right keyframes.

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 (loaded, not used by page code)	1.0.0	https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js
js/PDWebsitemplate.js (local)	-	js/PDWebsitemplate.js

Styling

Item	Value
SCSS entry	`sass/PDWebsiteImitationCss.scss`
Output CSS	`css/PDWebsiteImitationCss.css`
Partials	`_nav.scss`, `_body.scss`, `_component.scss (imported inside _body)`, `_bottom.scss`

_nav styles #nav states (toppest / float / show / hide) with keyframes; _body the hero and canvas; _component the news / product / stores lists and in-view animations; _bottom the footer.

cd target/20220525
npx sass sass/PDWebsiteImitationCss.scss css/PDWebsiteImitationCss.css --no-source-map || exit 1

Techniques

Canvas 2D path (quadraticCurveTo) recomputed on resize for a curved header edge.
IntersectionObserver scroll-reveal with alternating left / right keyframes.
Desktop-first max-width breakpoints 359 / 413 / 479 / 539 / 639 / 799 / 1023px.
Multi-page static site sharing one stylesheet and script with relative ./*.html links.

External Assets

https://fakeimg.pl/1024/282828/eae0d0/?text=sample
https://pardn.io/image/head.png
https://pardn.io/web-template/image/20220525.jpg