1.
Web Design
The Beatles
© 2022 Yu Cheng Lin

2.
設計目的 設計動機 導覽列動畫 Animation
關於披頭四 About
設計系統 System
自動回覆 Automatic
參考文獻 References
介面用色 Color
排版間距 Typography
圖標 Icon
按鈕 Buttons
視覺介面 Interface
目錄 contents

3.
設計目的 整理關於披頭四的相關資料並以網頁的方式呈現
設計動機 作者是一位熱愛披頭四的男子
Web Design

4.
披頭四樂團（英語：The Beatles）是1960年在利物浦組建的一支
英國搖滾樂團，他們被廣泛承認為史上最偉大、最有影響力的搖滾
樂團。 根植於噪音爵士樂和50年代搖滾，披頭四探索了各種音樂
類型，從流行謠曲到迷幻搖滾，經常創新地運用經典元素。們擁有
10座葛萊美獎，1座奧斯卡最佳原創配樂獎以及15座艾弗·諾韋洛
獎。 是史上最暢銷的樂團。
關於披頭四 About

5.
介面用色 Color
White #ffffff
Gray #c3c3c3
Gray #6c757d Blue #084565
Dark Gray #333a3e
Blue #d0d4de
Black #000000

6.
排版間距 Typography
Footer
font-weight: bold
padding-top: 20px
Rbody
right: 30px;
bottom: 165px;
width: 340px;
border: solid 5px
border-radius: 20px;
padding: 25px;
Robot Img
right: 30px;
bottom: 65px;
Img
640px x 480px
Header img
width: 100%;
height: auto;
Body
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
line-height: 17px;

7.
圖標Icon 按鈕 Buttons
music Robot 分頁連結按鈕

8.
視覺介面 Interface
iphone 12pro 390px x 844px ipad mini 768px x 1024px

9.
導覽列動畫 Animation
移動時導覽列顏色更改
點選Icon 回到頂端
碰觸文字時顏色更改與線條動畫

10.
自動回覆 (未完成)
輸入文字 自動回復

11.
參考文獻 References
https://ithelp.ithome.com.tw/articles/10191336 IT邦幫忙
https://getbootstrap.com/docs/5.3/getting-started/introduction/ Bootstrap