* 雲端: https://drive.google.com/drive/folders/1Uj8J2c7ICW-NkSsFOPyL-laQbHsCh5Gt?usp=share_link ## [Node.js](https://nodejs.org/zh-tw) ``` npm install npm -g ``` ``` npm install // 安裝套件 npm run dev // 執行網頁 ``` ## 檔案 ``` 1018 |一assets | |一image | |一components | |一common | | |一PomeList | | |一index.js | | | |一About | | |一index.js | | | |一Banner | | |一index.js | |一styles | |一common | | |一about.css | | |一navbar.css | | |一banner.css | | | |一globals.css ``` ## [React Icon](https://react-icons.github.io/react-icons/) ``` npm install react-icons import { IconName } from 'react-icons/fa'; ``` ## 匯入圖片 ``` import Image from 'next/image'; import small_Image from '../../assets/image/small.jpg'; <Image src={small_Image} alt="" /> ``` ## components 架構 ``` import A from 'B'; export function ComponentName() { return ( <> </> ); } ``` ## pages 架構 ``` import Head from 'next/head'; import { A } from '@/components/A'; import { B } from '@/components/B'; export default function Home() { return ( <> <Head> <title>網頁標題</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <main> <A /> <B /> </main> </> ); } ``` ## css 補充 [codepen](https://codepen.io/pen/) * [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) ``` <div></div> ``` ``` div { width: 100px; height: 100px; background: #fff; transition: width 2s; } div:hover { width: 300px; } ``` * [position](https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute) ``` <div class="container"> <div class="background"></div> <p>title</p> </div> ``` ``` .container { position: relative; } .background { background-color: #5c5c5c; width: 100px; height: 100px; } .container p { position: absolute; top: 10px; right: 10px; width: 50px; height: 30px; background-color: #fff; } ``` * [::after](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after) ``` <div> <h1>title</h1> <p>content</p> </div> ``` ``` p { position: relative; width: fit-content; padding: 10px; } p::after { content: ""; position: absolute; width: 100%; height: 1px; background-color: #000; top: 50%; left: 0; } ``` https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor ## banner ![](https://hackmd.io/_uploads/HyS4MGnZ6.png) Poetry is language caught alive EXPLORE OUR POMES * components > banner > index.js ``` import Image from 'next/image'; import banner from '../../assets/image/banner.png'; import { FaArrowDown } from 'react-icons/fa'; export function Banner() { return ( <section className="banner"> <div className="text"> <h1> Poetry is language<br/> caught alive </h1> <p className="banner-more more"> EXPLORE OUR POEMS <span><FaArrowDown /></span> </p> </div> <Image src={banner} alt="" /> </section> ); } ``` * styles > common > banner.css ``` .banner { width: 100vw; height: 80vh; background-color: #2C2020; } .banner .text { width: 100%; height: 30vh; position: relative; top: 30%; left: 5%; z-index: 2; color: #F3EFEB; display: flex; flex-direction: column; justify-content: space-between; } .banner img { position: relative; left: 30%; width: 65vw; bottom: 25%; z-index: 1; height: 60vh; } .banner h1 { font-size: 90px; font-weight: 300; } .banner-more::after { background-color: #fff; } .banner-more:hover::after { background-color: #000; } ``` ## program ![](https://hackmd.io/_uploads/HJpg972Wa.png) PROGRAMS & RECORDINGS Words at Wilton Park 5/15 – 6/25 * components > program > index.js ``` import Image from 'next/image'; import small_Image from '../../assets/image/small.jpg'; export function Program() { return ( <section className="programs-container"> <div className="programs-image"> <Image src={small_Image} alt="" /> </div> <div className="programs-items"> <h3>PROGRAMS & RECORDINGS</h3> <h2>Words at Wilton Park</h2> <h4>5/15 – 6/25</h4> <p className="read-more"> READ MORE <span>→</span> </p> </div> </section> ); } ``` * styles > common > program.css ``` .programs-container { background-color: rgb(56, 52, 58); color: white; display: flex; transition: 0.4s ease-in-out; align-items: center; margin: 5%; width: 90%; height: 80vh; cursor: pointer; } .programs-image { height: 100%; width: 55%; overflow: hidden; } .programs-image img { transform: scale(1); transition: all 0.5s ease-out; height: 100%; width: 100%; } .programs-items { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; padding: 8% 0; } .programs-items h3 { font-family: 'Kanit', sans-serif; font-size: 15px; letter-spacing: 1px; font-weight: bold; justify-content: space-between; color: #fff; } .programs-items h2 { font-size: 90px; font-weight: lighter; text-align: center; width: 70%; } .programs-items h4 { font-weight: bold; font-size: 25px; font-style: italic; } .read-more { position: relative; padding: 5px 0; } .read-more::after { content: ''; width: 100%; height: 1px; top: 100%; right: 0; position: absolute; background-color: #fff; transition: height 0.3s, background-color 0.3s; } .read-more span { padding-left: 5px; transition: 0.5s; } .programs-container:hover .programs-image img { transform: scale(1.05); } .programs-container:hover { background-color: rgb(47, 42, 50); } .programs-container:hover .read-more::after { height: 0; background-color: #000 ; } .programs-container:hover .read-more span { padding-left: 10px; } ```