1. 作業網址(GitHub Repo)：https://github.com/tingjuanhuang/chat_talker
2. 作業網址(GitHub Pages)： https://tingjuanhuang.github.io/chat_talker/index.html
3. YouTube網址：https://youtu.be/GSNYxh3kl8U

批改建議

1. 你三顆圓球的作法是透過背景圖案去處理，很棒的嘗試！但可能會有的問題是說，因為整個網頁佈局很大，會導致只要網頁新增一些東西，就還會需要去做很遠的微調，在維護上會比較麻煩。比較好的作法，還是能在特定 section 區塊上做相對絕對定位的方式，移動圓球會比較合適
2. 建議可將共用的 js ，拉出一個額外的 js 統一管理，例如 all.js ，放你 top 回最上面的內容
3. 透過 BS5 的 tab 來切換定價也是個很棒的嘗試，覺得 ok
4. main .areaTitle 裡面只有寫 text-align，BS5 有個 class 叫做 .text-center 可以取代，其他部分也可以多看看 BS5 util 有沒有內建 class 可以使用。這樣就能大幅減少自己自定義 class 的語法，讓樣式更簡潔
5. 有看到你的斷點是設置為 xl，例如 col-xl-4，但 xl 是 1200px，但在空間還能有效利用時，還是建議不要太過暴力變成單欄，例如在 768px iPad 直式上，還是需要使用者體驗，所以會建議都使用 .col-md-4，有些可以嘗試用 lg，也就是 col-lg-4
6. 這裡的階層有些過長，main .area_05 .owl-carousel .reviewItem .reviewInfo ul，可以只用 .reviewItem .reviewInfo ul 也能達到效果。SCSS 很容易階層寫得過長，這樣會有個問題是 CSS 渲染上，會因為要匹配對應的選擇器，導致畫面顯示上會變得過慢，尤其在效能不好的 android 手機會更明顯，請 class 階層盡量不要寫超過四層
7. footer 滿版嘗試得不錯，不過若是 1920px，得衡量是否可能會有背景圖案模糊問題，因為預設背景圖寬度只有 1366px
8. bootstrap 本身就有 css reset，所以可以不用載入 reset.scss
9. 請不要嘗試直接寫死樣式在 HTML 標籤上，因為這樣會導致樣式覆蓋上比較麻煩，例如你所寫的 h5 ，因為一個網頁會有很多的 h5 樣式，這樣寫很容易樣式打架，還是多善用 class 類別選擇器會比較合適
10. 請盡量不要用編號式 class 命名，可採以語意命名，例如 area_04 可以寫成 .area_advantage
11. @media screen and (max-width: 1200px) { 可以嘗試使用 BS5 的斷點 Mixin