接下來的天數，預計要來實作上面已經教學的 sass 方法，畢竟學習是一回事，真正拿來實作則是另一回事，好的實作可以讓你更熟悉 sass 的操作方法以及 mixin, extend 這些內容的使用時機。

所以我打算使用已經做好的 Design 模板來模仿網頁實作一個畫面，運用 sass 來把各項設計做的一模一樣~~（希望如此。~~

首先來決定要模仿的網頁

目前候選人：

IKEA 美國站

簡約有型，但好像會有點太簡單ＸＤ

Amazon 美國站

好像也是簡單粗暴的類型，沒有很多 CSS 的變化

VOGUE 台灣站

圖片效果有 hover 濾鏡蠻酷的，區塊的 scroller 也會先滾才繼續往下，整體畫面不會太複雜而且又有酷酷的 CSS 效果，就他了吧！

本來還有參考 elle 的，但好像有點偏簡單，文字內容較多。

然後這邊提醒一下，一開始在寫這篇的時候有點擔心會不會有版權問題，大家記得使用個相關素材、字型不要使用到盜版或是未告知直接取用就沒問題了！如果有營利行為是萬萬不可的唷！

VOGUE 使用到的元素

透過chrome 的 檢查先來看一下內部有的元素

字型

官方使用的是 GTWalsheimVogue、GT Walsheim Pro 這些，應該是有特別設計過的付費字型，所以我另外找了類似的替代字型來模仿

Google Fonts 的

• Noto Sans TC
• Noto Serif TC
• Prata

Google Fonts

色調

黑：#000

白：#fff

紅：#EE0000（ hover 、 button）

灰：#f2f2f2（廣告版位）

基本的大概是這樣～

（沒錯我又水了一篇

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？