DAY 13 接下来的实作

接下来的天数，预计要来实作上面已经教学的 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 - 前端？後端？你早晚都要全端的，何不从现在开始？