設計大綱

Landing Page的主要色都偏深色，另外CTA也有用主要色作為背景顏色了，所以這邊的Footer就決定用淺色的Secondary-color來作為背景顏色。

Footer的設計通常都是滿版的，但這邊跟CTA一樣是滿版也沒關係，只要背景顏色不要一樣深就好！Footer會包含LOGO、social media的連結、一些不太重要但又要存在的連結（?），最後就是copyright啦！

步驟

背景

1. 在畫布畫出一個滿版寬的長方形，不用管高度
2. 背景顏色為Secondary (#FDFCFC)
   

LOGO

1. 把Navbar上所設計的「LOGO」 複製貼上
2. 顏色調整為Primary (#9B3C05)
3. 與背景上方保持一定距離(目前還沒有確實的數字，先大概就好)
4. 維持置中對齊
   

Social Media 連結

1. 載入目前最多人用的社群媒體icon —— Facebook、Instagram、Line
2. 調整大小為24px＊24px
3. 調整顏色為Primary (#9B3C05)
4. 左右間距維持 24px
5. Margin-top維持 16px
6. 與上方維持置中對齊
   

不太重要但又要存在的連結

1. 輸入可能會有的「a連結」之文案
2. 文字大小為 16px
3. 文字字重為Normal
4. 文字顏色為 Primary (#9B3C05)
5. 左右間距維持 48px
6. Margin-top維持 16px
7. 與上方維持置中對齊
   

Copyright

1. 輸入Copyright的文案
2. 文字大小為 16px
3. 文字字重為Normal
4. 文字顏色為 Primary (#9B3C05)
5. Margin-top維持 16px
6. 與上方維持置中對齊
   

調整間距

1. 檢查目前所有的東西是否都有置中對齊
2. 全選這些元件，調整Margin-y為112px
   （＊為什麼是112px？因為本來用96px，但看起來不夠寬廣的感覺，所以再多加了一點！）
   

結論

這十幾天就完成Landing Page的12個區塊了，雖然其實實際上應該不用到十幾天就可以設計完這些區塊，但因為要寫文章-v-，所以分成一天一個區塊來寫～ 相信每個區塊都有學到東西吧！（吧？XD）

好！那設計完，接下來就要開始把設計出來的設計稿進行切版囉！是不是又緊張又期待呢！（怕.jpg）