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

## 題目

請試著用 [Cards 元件](https://getbootstrap.com/docs/5.0/components/card/) 組合出以下樣式，樣式部分多半可以透過 通用類別以及修改 variables.scss 完成（但因為使用 Codepen 所以只能先寫在 CSS 區塊內）

<div>
<img src="https://i.imgur.com/pqPxixA.png">
<img src="https://i.imgur.com/A7lia20.png">
<img src="https://i.imgur.com/xqlBRsF.png">
<img src="https://i.imgur.com/40mJVY3.png">
<img src="https://i.imgur.com/tWOj4GH.png">
<img src="https://i.imgur.com/SUbff4n.png">
</div>

以下分別示範一種形式

HTML:

<div class="wrap">
<!-- Image overlays -->
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="card ...">
        <img src="https://i.imgur.com/vD7yz7z.jpg" class="card-img" alt="整體健身">
        <div class="card-img-overlay ...">
          <h5 class="card-title">整體健身</h5>
          <p class="card-text">每一個動作，都融入運動解剖學的的觀點強調以身體的中心線為出發點。</p>
        </div>
      </div>
    </div>

    <!-- Card -->
    <div class="col-md-3">
      <div class="card">
        <img src="https://i.imgur.com/a21izSu.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title ...">首次體驗</h5>
          <p class="card-title ...">NT $450 / 次</p>
          <p class="card-text">分基礎、中級、高級可以選擇。初次至 DOYOGA 上課建議選擇此方案。</p>
          <a href="#" class="btn btn-primary ...">選擇課程</a>

        </div>
      </div>
    </div>
    <!-- Titles, text, and links -->
    <div class="col-md-3">
      <div class="card ...">
        <div class="card-body ...">
          <img src="https://i.imgur.com/a21izSu.jpg" class="card-image" alt="Carol Tang 老師">
          <h5 class="card-title ...">Carol Tang 老師</h5>
          <h6 class="card-text ...">教學經歷 10 年</h6>
          <p class="card-text">"因為瑜珈讓我重新認識自己的身體，也讓我有了不一樣的人生。 我希望能跟學生們分享瑜珈的好，讓大 家能藉由瑜珈看見自己的內在與潛能， 並將瑜珈自然的融入自己的生活中。"</p>
          <ul>
            <li class="...">協會認證艾揚格瑜珈老師</li>
            <li class="...">2010 年完成四年的艾揚格師資培訓</li>
            <li>2020 取得艾揚格瑜珈高階認證</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <img src="https://i.imgur.com/a21izSu.jpg" class="card-img" alt="基礎 Basic">
      <div class="card ...">
        <div class="card-body ...">
          <h5 class="card-title">基礎 Basic</h5>
          <p class="card-text">授課老師：Carol Tang</p>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>

CSS:

.wrap{
  margin-top: 60px;
}
.card-title{
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 4px;
}
.card-body{
  padding: 24px;
}
.card-image{
  width: 96px; 
  height: 96px; 
  object-fit: cover;
}
.card{
  border-radius: 16px;
}
.card-img{
  border-radius: 16px;
}
.card-img-top{
  border-radius: 16px 16px 0 0;
}

## 回報流程

1. 請將解答寫在 Codepen 再將連結貼至「回報區」中回報

0
<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/oNWPNer) 若答案有爭議可以提出-->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：
-->

<!-- 1. Jerry Yen
Codepen：https://codepen.io/JerryYen/pen/dyRPJjb?editors=1100
-->

<!-- 2. Lina Chen:
codepen: https://codepen.io/LinaChen/pen/BaZyMeO
-->

<!-- 3. lumei:
codepen: https://codepen.io/l_umei/pen/mdwyoVK
-->

<!-- 4. 雷古娜
codepen: https://codepen.io/tinahopo/pen/LYLEaEL -->

<!-- 5. Gill
codepen: https://codepen.io/Gill-Chin/pen/abwzMaV?editors=1100
-->

<!-- 6.陳sam
codepen :https://codepen.io/euldpliv/pen/BaZyEay
-->

<!-- 7. 肉鬆
codepen: https://codepen.io/klrkicog/pen/abwzxEQ?editors=1100
-->

<!-- 8. Cate Chang
codepen: https://codepen.io/tutz/pen/xxrbedy
-->

<!-- 9. YuriT
codepen: https://codepen.io/wenfisht/pen/zYzOebw?editors=1100
-->

<!-- 10. Sz
https://codepen.io/szyln/pen/bGRNyVY
-->

<!-- 11. Jun Chan
Codepen：https://codepen.io/chujunchan/pen/QWgwPrg?editors=1100
-->

<!-- 12. 大衛
codepen: https://codepen.io/exnsrpjc/pen/BaZyErL?editors=1100
-->

<!-- 13. hellocrab
https://codepen.io/hellocrab/pen/eYRmaoY
-->

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

<!-- 15. curry
Codepen: https://codepen.io/Ted19851223/pen/ExXjYMP
-->

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

<!-- 17. Joe Kuo
CodePen: https://codepen.io/alertislow/pen/NWgqGeW
-->

<!-- 18.黃士桓
codepen: https://codepen.io/shr-huan-huang/pen/oNwXxBj?editors=1100
-->

<!-- 19.沈依蓉
https://codepen.io/lily-oa/pen/NWgqrjV?editors=1100
-->

<!-- 19.Tori
codepen: https://codepen.io/hayen/pen/VwWYaYj?editors=1100
-->

<!-- 20.peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/RwgPMQJ?editors=1000
-->

<!-- 21. ZOE WU
https://codepen.io/Zoechiueh/pen/yLXYaMV?editors=1100
-->

<!-- 22. Sihle Huang
code :https://codepen.io/bugbug777/pen/GREpQMj?editors=1100
-->

<!-- 23. Gui
https://codepen.io/guitimliu/pen/JjJoVYB -->

<!--24. Joy Cheng
https://codepen.io/joycheng5432/pen/powEjOV?editors=1100
-->

<!--25.jimmyFang
https://codepen.io/pohxiqqo/pen/gORmLee?editors=1100
-->

<!--26.yurie
https://codepen.io/_u_jung/pen/qBjGOyx
-->