---
# System prepended metadata

title: 15週-10/18

---

* 雲端: 
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;
}
```

