# 【Day10】project 2 --- 網頁品牌視覺套色實作
## 結合前面所學
- sublime快速鍵
- emmet縮寫模組
- html樣板語言---Jade
- css樣板語言---Sass
- Sass變數概念
- Sass的mixin概念

---> 更有系統性地管理網頁色彩、風格
1. 可根據設定的基礎字體尺寸隨時更換整體字體大小
2. 可隨時更新色系
## 新技巧
- 串雲端字體
1. 於「[Goolge Fonts](https://fonts.google.com/)」網站中找尋字體

2. 複製href後的網址

3. 至codepen settings的CSS處導入

4. 引用字體
(注意: 一次套用多個字體，用逗號隔開，以放最前面的字體為主，如果前面字體抓不到則套用後面)
- 解決左右版面開放的問題---設定最大寬度
1. 新增一個class(命名為max_width)，並把內容元素放在其中
2. 設定寬度變數
3. 左右置中

## 程式碼
- html(jade)

.header
  img.icon(src="https://1000logos.net/wp-content/uploads/2021/05/Google-logo.png", alt="")
.content.content_white
  .max_width
    h5 Style Guideline
    h1 品牌網頁視覺引導-40px 大標題
    h1.small_english english style guideline for h1 title
    .title_hr
    br
    h2 品牌網頁視覺引導-30px 中標題
    h2.small_english english style guideline for h2 title
    br
    h3 品牌網頁視覺引導-20px 小標題
    h3.small_english english style guideline for h3 title

    hr
    h5 VI COLORS
    .color_chip
      .color_tag #EBE825
      .color_block.color_block_yellow
    .color_chip
      .color_tag #327299
      .color_block.color_block_blue
    .color_chip
      .color_tag #f3f7f7
      .color_block.color_block_white
    .color_chip 
      .color_tag #333333
      .color_block.color_block_grey
    h5 BUTTON EXAMPLE
    .button 按鈕範例
    .button.button_blue 按鈕範例
    .button.button_yellow 按鈕範例
  
.content.content_blue
  .max_width
    h5 Style Guideline
    h1 品牌網頁視覺引導-40px 大標題
    h1.small_english english style guideline for h1 title
    .title_hr
    br
    h2 品牌網頁視覺引導-30px 中標題
    h2.small_english english style guideline for h2 title
    br
    h3 品牌網頁視覺引導-20px 小標題
    h3.small_english english style guideline for h3 title

    hr
    h5 VI COLORS
    .color_chip
      .color_tag #EBE825
      .color_block.color_block_yellow
    .color_chip
      .color_tag #327299
      .color_block.color_block_blue
    .color_chip
      .color_tag #f3f7f7
      .color_block.color_block_white
    .color_chip 
      .color_tag #333333
      .color_block.color_block_grey
    h5 BUTTON EXAMPLE
    .button 按鈕範例
    .button.button_blue 按鈕範例
    .button.button_yellow 按鈕範例
  
.content.content_grey
  .max_width
    h5 Style Guideline
    h1 品牌網頁視覺引導-40px 大標題
    h1.small_english english style guideline for h1 title
    .title_hr
    br
    h2 品牌網頁視覺引導-30px 中標題
    h2.small_english english style guideline for h2 title
    br
    h3 品牌網頁視覺引導-20px 小標題
    h3.small_english english style guideline for h3 title

    hr
    h5 VI COLORS
    .color_chip
      .color_tag #EBE825
      .color_block.color_block_yellow
    .color_chip
      .color_tag #327299
      .color_block.color_block_blue
    .color_chip
      .color_tag #f3f7f7
      .color_block.color_block_white
    .color_chip 
      .color_tag #333333
      .color_block.color_block_grey
    h5 BUTTON EXAMPLE
    .button 按鈕範例
    .button.button_blue 按鈕範例
    .button.button_yellow 按鈕範例

- CSS(sass)

$color_yellow: #EBE825
$color_blue: #327299
$color_white: #f3f7f7
$color_grey: #333333

$font_base_size: 10px

$max_content_width: 768px

*
  // border: solid 1px
  position: relative
  
@mixin size($w,$h)
  width: $w
  height: $h
  
html, body
  padding: 0px
  margin: 0px
.header
  height: 300px
  background-color: $color_grey
  & .icon
    width: 250px
    position: absolute
    left: 50%
    right: 50%
    transform: translateX(-50%) translateY(50%)
    
.max_width
  max-width: $max_content_width
  margin-left: auto
  margin-right: auto
.content
  font-family: 'Noto Serif TC'
  padding: 50px
  
  & h5
    margin-top: 10px
  
  & .title_hr
    border: solid 2px $color_yellow
    width: 100px
  & h1
    font-size: $font_base_size*4
  & h2
    font-size: $font_base_size*3
  & h3
    font-size: $font_base_size*2
    
  & h1.small_english
    font-size: $font_base_size*2.4
  & h1.small_english
    font-size: $font_base_size*1.6
  & h1.small_english
    font-size: $font_base_size*1.2
    
  & .small_english
    margin-top: -15px
    
  & .button
    padding: 5px 25px
    display: inline-block
    margin-right: 10px
    letter-spacing: 2px
    font-size: $font_base_size*1.5
    font-weight: 500
    border: solid 1px black
  .button_blue
    background-color: $color_blue
    color: white
  .button_yellow
    background-color: $color_yellow
    color: $color_blue
  & .color_chip
      display: inline-block
      margin-right: 30px
      & .color_tag,& .color_block
          display: inline-block
          vertical-align: middle
      & .color_tag
          width: 70px
      & .color_block
          +size(35px,35px)
          border: solid 1px white
      & .color_block_yellow
          background-color: $color_yellow
      & .color_block_blue
          background-color: $color_blue
      & .color_block_white
          background-color: $color_white
      & .color_block_grey
          background-color: $color_grey
        

.content_blue
  background-color: $color_blue
  color: $color_white
  & .small_english
    color: $color_yellow
  & h1, & h2, & h3
      font-weight: 300
  & .button
      border-color: $color_white
    
.content_grey
  background-color: $color_grey
  color: $color_white
  & .small_english
    color: $color_yellow
  & h1, & h2, & h3
      font-weight: 300
  & .button
      border-color: $color_white
      
.content_white
  background-color: $color_white
  color: $color_grey
  & .small_english
    color: $color_blue
  & .title_hr
    border: solid 2px $color_blue
  & h1, & h2, & h3
      font-weight: 500

## 呈現
[codepen網址](https://codepen.io/btclnhrw-the-animator/pen/dyQxyRw?editors=1100)




:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::