---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/20(五) 每日任務

## 題目

加入 [AOS](https://michalsnik.github.io/aos/) 效果實現第七週版型的部分如圖：


效果參考 [此影片](https://www.youtube.com/watch?v=Zr-Tmn7JrFo&feature=youtu.be) 0:14 秒的地方

HTML

<section class="container">
  <div class="row">
    <div class="col-4">
      <div class="card" ...>
        <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/week7/img5.jpg?raw=true" class="card-img-top mb-3" alt="...">
        <div class="card-body">
          <h4 class="card-title fst-italic fw-bold mb-2">All who cycle are my friends</h4>
          <p class="card-text text-muted mb-2">2020.4.27</p>
          <p class="card-text text-secondary">A rider from Stockholm interviewed for an article about the phenomenon
            notes that riding
            a
            bike imparts a feeling of freedom to the rider…</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="card" data-aos="fade-up" ...>
        <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/week7/img6.jpg?raw=true" class="card-img-top mb-3" alt="...">
        <div class="card-body">
          <h4 class="card-title fst-italic fw-bold mb-2">Swedish riders and enthusiasts</h4>
          <p class="card-text text-muted mb-2">2020.3.11</p>
          <p class="card-text text-secondary">There are also several bicycle clubs throughout Sweden with a fixed-gear
            niche. Komet
            Club
            Rouler is a club based in Gothenburg, annually arranging Svart Kat…</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="card" data-aos="fade-up" ...>
        <img src="https://github.com/hexschool/webLayoutTraining1st/blob/master/week7/img7.jpg?raw=true" class="card-img-top mb-3" alt="...">
        <div class="card-body">
          <h4 class="card-title fst-italic fw-bold mb-2">The Australian fixie culture</h4>
          <p class="card-text text-muted mb-2">2020.2.29</p>
          <p class="card-text text-secondary">Online stores in Australia ship partially-assembled bikes directly to
            consumers,
            considerably undercutting prices at typical brick and mortar stores…</p>
        </div>
      </div>
    </div>
  </div>
</section>

JS

AOS.init();

載入 CDN
CSS：
* https://unpkg.com/aos@2.3.1/dist/aos.css
* https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

JS：
* https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/rNMNOVY?editors=1010) 有更好的解答也歡迎討論-->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/mdWxjGE
-->

<!-- 1. Alpha
Codepen: https://codepen.io/alphatero/pen/YzVmxZN
-->

<!-- 2. 肉鬆
codepen: https://codepen.io/klrkicog/pen/dyWxzOX
-->

<!-- 3. YuriT
codepen: https://codepen.io/wenfisht/pen/GRmVvNE?editors=1010
-->

<!-- 4. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/vYmMvaV
-->

<!-- 5. Jean
codepen: https://codepen.io/jean-liu/pen/gOWVxGX
-->

<!-- 6. 雷古娜
codepen: https://codepen.io/tinahopo/pen/ZEKgJyN -->

<!-- 7. Cate Chang
codepen: https://codepen.io/tutz/pen/ExmqvLV -->

<!-- 8. 陳sam
codepen:https://codepen.io/euldpliv/pen/wvdVqZQ
-->

<!-- 9. Lina Chen
codepen: https://codepen.io/LinaChen/pen/KKmOvEj
-->

<!-- 10. lumei
codepen: https://codepen.io/l_umei/pen/RwVXLwy
-->

<!-- 11. kevinhes
codepen: https://codepen.io/kevinhes/pen/XWRveYg?editors=1010
-->

<!-- 12. Sz
codepen: https://codepen.io/szyln/pen/zYwgPNL
-->

<!-- 13. Joe Kuo
codepen: https://codepen.io/alertislow/pen/OJmKOGm
-->

<!-- 14. 群嘉
codepen:https://codepen.io/efzdamnp-the-lessful/pen/PomMEeR?editors=0100
-->

<!-- 15. Gill
codepen:https://codepen.io/Gill-Chin/pen/PomMQYd
-->

<!-- 16. 蔡明達
CodePen: https://codepen.io/bmzpfyxe/pen/NWjZNWK?editors=1000
-->

<!-- 17. axlrock1021
CodePen: https://codepen.io/andy1021/pen/OJmKQeJ
-->

<!-- 18. 大衛
codepen: https://codepen.io/exnsrpjc/pen/PomMRVW
-->

<!-- 19. Min Chun Tsai
Codepen: https://codepen.io/Tsai0926/pen/VwboXNL
-->

<!-- 20. 阿和
codepen:https://codepen.io/shnny/pen/oNWKdxb?editors=1000
-->

<!-- 21. WilsonHan
https://codepen.io/wi0821/pen/MWmNGpL
-->

<!-- 22. 沈依蓉
https://codepen.io/lily-oa/pen/WNjVyyb
-->

<!-- 23. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/zYwgaxB
-->

<!-- 24. hellocrab
https://codepen.io/hellocrab/pen/xxdvaZK
-->

<!-- 25. curry
https://codepen.io/Ted19851223/pen/rNmXZrN
-->

<!-- 26.黃士桓
https://codepen.io/shr-huan-huang/pen/XWRvoXQ
-->

<!--27. jimmyFang
https://codepen.io/pohxiqqo/pen/GRmVPWE?editors=1000
-->

<!-- 28. Hi Annie
https://codepen.io/lhohdalu/pen/abwobOY
-->

<!-- 29. Gui
https://codepen.io/guitimliu/pen/ZEyzpxZ -->

<!-- 30. Sylvia-H
https://codepen.io/Cosmosheart/full/MWogOLQ -->

<!-- 31. Elaine Liu
https://codepen.io/elaine7598/pen/dyRbJyy -->

<!-- 32. ZOE WU
https://codepen.io/Zoechiueh/pen/dyRbJeX?editors=1000
-->

<!-- 33. Oober
https://codepen.io/xtsjrjdv/pen/vYZBwOJ
-->

<!-- 34. Jessie Cheng
https://codepen.io/JessieMosbi/pen/VwWwNpZ
-->

<!-- 35. Erin Huang
https://codepen.io/ErinHuang/pen/BaZyoPa
-->

<!-- 36. Tori
codepen: https://codepen.io/hayen/pen/yLbWPxZ?editors=1010
-->

<!-- 37. Jun Chan
codepen: https://codepen.io/chujunchan/pen/GREgqQe
-->

<!-- 38. Alberto
https://codepen.io/AlbertoLL/pen/WNOvmea
-->

<!-- 39. Sihle Huang
code : https://codepen.io/bugbug777/pen/yLXYpGX
-->

<!-- 40.AKI
https://codepen.io/akichen27/pen/gORMmOX
-->

<!-- 50. Joy Cheng
codepen : https://codepen.io/joycheng5432/pen/abwmvZR?editors=1000
-->
<!-- 51. Tina Yen
codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/yLXaVqV
-->
<!-- 52 袁祥恩
codepen:https://codepen.io/ovfxsavp-the-bashful/pen/MWoJJNr
-->

<!-- 53 yurie
codepen:https://codepen.io/_u_jung/pen/bGRyEGV
-->