1.3 建立 learn_more 頁面-flex佈局

內容設計

頭腦風暴+總結方法，得出須要四個導航，因此直接設置4個連接。

風格設計

保留原有卡通背景圖，本來想作出4張卡片，但因爲色彩和樣式會顯得空蕩，後來選擇設計固定形式自動居中的窗戶擺設。
一個窗戶，四扇窗口。顏色取材 Color hunt等網站。

html

.container -> .window
.window -> 4* .card

css

固定塊級居中

.window {
    固定width和height;
    margin: 1em auto;
    
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
}

.card {
    flex: 0 0 40%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

加上一些風格設計border、box-shadow、bg、cursor等。