# 🏅 Day 12 - 整合相同樣式

相同樣式設定，可以嘗試統一使用一個 class 命名，整合樣式。
可以簡化程式碼、增加程式碼的可讀性以及複用性。

## 例子

<div class="profile">
  <h2>個人資料</h2>
</div>
<div class="education">
  <h2>學歷</h2>
</div>

.profile, .education {
  width: 1200px;
  margin: 0 auto;
}

.profile h2, .education h2 {
  font-size: 32px;
  line-height: 48px;
}

以此程式碼為例，
可以將 `.profile`, `.education` 統一命名為 `.container` ，
`.profile h2`, `.education h2` 可以另外命名一個 class 像是：`.title` 來設定樣式

整體可以調整為：

<div class="container">
  <h2 class="title">個人資料</h2>
</div>
<div class="container">
  <h2 class="title">學歷</h2>
</div>

.container {
  width: 1200px;
  margin: 0 auto;
}

.title {
  font-size: 32px;
  line-height: 48px;
}

### 題目
請嘗試將此 [Codepen](https://codepen.io/hexschool/pen/dymyoLw) 中相同的樣式整合。

提示：
- 各區塊都有 `width: 1200px; margin: 0 auto;` 的設定
- h2 標題的文字樣式相同
- 有兩種文字顏色，可以分別命名兩個 class 運用
- 各區塊 span 樣式相同（文字、margin）

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/hexschool/pen/dymyYpE
-->

### 回報區

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|1|毛巾|[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/eYwYPeL)|
|2|Kiwi|[Codepen](https://codepen.io/kiwi1113/pen/mdZdzqP)|
| 3 | han | [Codepen](https://codepen.io/iamHanCheng/pen/poXoxdL?editors=1100) |
| 4 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/Bagaqvd?editors=1100) |
|5|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/wvLvYRr)|
|6|Sammy|[Codepen](https://codepen.io/fsczdlla-the-bold/pen/bGPGmMr?editors=1100)|
| 7 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/mdZdzvR) |
| 8 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/vYqYVjL) |
| 9 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/oNrNaKb) |
| 10 | TONY名彤 | [Codepen](https://codepen.io/Ming-Tung-Chien/pen/BagaqJW) |
| 11 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/LYKYgqV?editors=1100)|
| 12 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme)|
| 13 | Mike |[Codepen](https://codepen.io/mike2049/pen/BagaGoY?editors=1100)|
| 14 | KevinHuang |[Codepen](https://codepen.io/qw-huang/pen/QWXWJEZ?editors=1100)|
| 15 | Eason |[Codepen](https://codepen.io/eulvmmbq-the-typescripter/pen/qBzBJed?editors=1100)|
| 16 | 喵喵 | [Codepen](https://codepen.io/snow1224/pen/eYwYQeY) |
| 17 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/KKjKrzb?editors=1100) |
| 18 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/zYVYMgo?editors=1100) |
| 19 | Jainee| [Codepen](https://codepen.io/Jainee0110/pen/oNrNJZd) |
| 20 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/LYKYMQB) |
| 21 | Kim | [Codepen](https://codepen.io/kim0101__/pen/MWMWzON?editors=1100) |
| 22 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/yLdLGdo)|
| 23 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/VwJwqVg)|
| 24 | kawa | [Codepen](https://codepen.io/z83xji6/pen/poXoGPp) |
| 25 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/qBzBgPz) |
| 26 | GAVI | [Codepen](https://codepen.io/hexschool/pen/dymyoLw?editors=1100) |
| 27 | Yolanda | [Codepen](https://codepen.io/vcscqrtz-the-animator/pen/oNrNVYz) |
| 28 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/jOjORrE) |
| 29 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/KKjKYba) |
| 30 | KUN. | [Codepen](https://codepen.io/barry91205/pen/ExBxzYR) |
| 31 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/xxoxNrB) |
| 32 | Jim | [Codepen](https://codepen.io/JimChou/pen/Bagaevd?editors=1100) |
| 33 | Jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/rNENEGN) |
| 34 | glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/QWXWXOz)|
| 35 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/MWMWMOM?editors=1100) |
| 36 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/RwzwzjL) |
| 37 | yoishere | [Codepen](https://codepen.io/yoishere/pen/vYqYQBg?editors=1100) |
| 38 | fan_fan | [Codepen](https://codepen.io/fan1102/pen/bGPGPzz?editors=1100) |
| 39 | MY | [Codepen](https://codepen.io/ahmomoz/pen/jOjOjYJ) |
| 40 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/Rwzwzog?editors=1100) |
| 41 | Aura Tao| [Codepen](https://codepen.io/AURATAO/pen/vYqYomV) |
| 42 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/abgbXpP?editors=1100) |
| 43 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/BagyBoK?editors=1100) |
| 44 | Angela-la | [Codepen](https://codepen.io/Angela-the-builder/pen/dyByrOO?editors=1100) |
| 45| 瑞斯Darius_TszYing | [Codepen](https://codepen.io/bekgnohe-the-selector/pen/BagyBBj) |
| 46 | wind | [Codepen](https://codepen.io/wind7y/pen/zYVxOpy) |
| 47 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/OJePJPx)|
| 48 | lunlun0514 |[Codepen](https://codepen.io/f5badapple/pen/VwJYwmP?editors=1100)|
| 49 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/oNrggXp) |
| 50 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/RwzNNOm) |
| 51 | neoyo | [Codepen](https://codepen.io/Neo-oo/pen/poXvJow) |
| 52 | gracechiang225 | [Codepen](https://codepen.io/gracechiang225/pen/NWZPPzq?editors=1100) |
| 53 | emmayo | [Codepen](https://codepen.io/emmayo/pen/XWLJbrE) |
| 54 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/wvLBGRq) |
| 55 | hoyiiiii | [Codepen](https://codepen.io/hoyii/pen/NWZPrYO) |
| 56 | jamesct34 | [Codepen](https://codepen.io/JCT34/pen/OJePXqo) |
| 57 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/ExBayGy) |
| 58 | hedwig | [Codepen](https://codepen.io/adirehfz-the-encoder/pen/BagyzVP) |
| 59 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/mdZyONO) |
| 60 | kaka_945 | [Codepen](https://codepen.io/kay945/pen/LYKExBx) |
| 61 | 爆漿 | [Codepen](https://codepen.io/dhpsxzwh-the-decoder/pen/QWXwpWX) |
| 62 | 小咪 | [Codepen](https://codepen.io/iloveu3000x/pen/qBzEjBE) |
| 63 | Steven1220 | [Codepen](https://codepen.io/Steven1220/pen/OJePjoK?editors=1100) |
| 64 | chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/rNEazzj) |
| 65 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/mdZyBQP?editors=1100) |
| 66 | hao jing | [Codepen](https://codepen.io/hjxu/pen/PorwREE?editors=1100) |
| 67 | Matt BB | [Codepen](https://codepen.io/mm3248965/pen/ZEdYRxo) |
| 68 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/QWXWPed?editors=1100) |
| 69 | macihuang | [Codepen](https://codepen.io/macy1215/pen/LYKEJWO) |
| 70 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/NWZPLBW) |
| 71 | 嚼勁 | [Codepen](https://codepen.io/James520284/pen/BagyGvP) |
| 72| Lobinda | [Codepen](https://codepen.io/Lobinda/pen/MWMWZwy)|
| 73 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/GRbgLLL) |
| 74 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/JjQoqeV) |
| 75 |OSN|[Codepen](https://codepen.io/osncodepen/pen/NWZPPJN)|
| 76 |Enn|[Codepen](https://codepen.io/enntang/pen/wvLaaLd)|
| 77 |俊|[Codepen](https://codepen.io/jun12079/pen/vYqOGZq)|
| 78 |chris|[Codepen](https://codepen.io/chrischen666/pen/bGPdzQw)|
| 79 | smallr1229 | [Codepen](https://codepen.io/Smallr/pen/yLdNZGP) |
| 80 | 小翎 |[CodePen](https://codepen.io/debbielin/pen/ExBjqbg?editors=1100)|
| 81 | xiang |[CodePen](https://codepen.io/XIANG-XIANG/pen/VwJvLdR)|
| 82 | EdHuang |[CodePen](https://codepen.io/yide1986/pen/qBzOqZo)|
| 83 | 610| [Codepen](https://codepen.io/YI-LING-LIU/pen/QWXjgLv) |
| 84 | Yunya | [Codepen](https://codepen.io/cookie1515/pen/gONaamL) |
| 85 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/dyBYmoB) |
| 86 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/RwzWEqM) |
| 87 | 白夜 | [Codepen](https://codepen.io/Wei903/pen/OJeydEL) |
| 88 | n913239 | [Codepen](https://codepen.io/n913239/pen/rNEOGYz) |
| 89 | xcx100 | [Codepen](https://codepen.io/c13026/pen/vYqLKxY) |
| 90 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/abgdZjx) |
| 91 | abab016001 | [Codepen](https://codepen.io/abab016001Jin/pen/NWZxpdz) |
|92 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/abgvajm)
| 93 | LKP | [Codepen](https://codepen.io/qtghjujs-the-sasster/pen/qBzNOQL?editors=1100)
| 94 | ho_yc | [Codepen](https://codepen.io/Ho_HYC/pen/dyBXxXB)
| 95 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/oNrzNYq) |
| 96 | skyderry | [Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/RwzGPBx) |
| 97 | zen | [Codepen](https://codepen.io/zen742937/pen/RwzGQmQ) |
| 98 | Heidi | [Codepen](https://codepen.io/Heidi-Hsiao/pen/PorbYGj) |
| 99 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/LYKbWqo?editors=1100) |
| 100 | eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/GRbNPja)|
| 101 | iamcan| [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/YzopmPJ?editors=1100)|
| 102 | Antonio| [Codepen](https://codepen.io/gwhvusel-the-builder/pen/rNEjbdz)|
| 103 | qet1717 | [Codepen](https://codepen.io/gwteqexi-the-bold/pen/PormZQV?editors=1100) |
| 104 | Toung | [Codepen](https://codepen.io/Toung/pen/jOjmYro) |
| 105 | Emma | [Codepen](https://codepen.io/Emma0919/pen/RwzgBzp) |
| 106 | 星雨 | [Codepen](https://codepen.io/ybxyuhcv-the-solid/pen/bGPoYvw) |
| 107 | Judy | [Codepen](https://codepen.io/yangchi/pen/VwJrjgO) |
| 108 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/bGPYjQp) |
| 109 | tung | [Codepen](https://codepen.io/ru-ching/pen/eYwVjyZ) |
| 110 | ji3di | [Codepen](https://codepen.io/jwuuhtxh-the-builder/pen/xxoWMqB) |
| 111 | OZ | [Codepen](https://codepen.io/OZ_design/pen/JjQvVoW?editors=1100) |
| 112 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/jOjROMQ) |
| 113 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/poXBqJo?editors=1100) |

<!--
| No | Discord | [Codepen]() |
-->