---
tags: 大學生體驗營 - 2021 夏季班
---
# 7/22(四) 每日任務(香水電商)

## 題目
練習 [格線系統](https://getbootstrap.com/docs/5.0/layout/grid/) 搭配 [no-gutters](https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters) 的使用完成這週設計稿的首頁部分區塊設計，如圖：

只需要在「...」的地方替換程式碼即可，不用額外寫 CSS

HTML

<div class="...">
  <div class="... flex-column-reverse flex-md-row mb-4 mb-md-0">
    <div class="... d-flex align-items-md-center justify-content-md-center">
      <div class="text">
      <h2 class="mb-0">Gabrielle CHANEL</h2>
      <p class="mb-2 mb-md-3">全新嗅覺體驗，花香四溢、明亮馥郁。<br>結合茉莉、依蘭依蘭、橙花和最迷人的<br>格拉斯晚香玉之花香，呈現出夢幻花香<br>氣息。極具女性特質的香奈兒嘉柏麗香<br>水，專為光芒四射的她而生。</p>
      <a href="#" class="text-primary">查看更多</a>
        </div>
    </div>
    <div class="...">
      <img class="img-fluid mb-2 mb-md-0" src="https://zoehyh.github.io/d-Perfume/img/sp-1.png" alt="">
    </div>
  </div>
   <div class="...">
     <div class="...">
      <img class="img-fluid mb-2 mb-md-0" src="https://zoehyh.github.io/d-Perfume/img/sp-1.png" alt="">
    </div>
    <div class="... d-flex align-items-md-center justify-content-md-center">
      <div class="text">
      <h2 class="mb-0">Gabrielle CHANEL</h2>
      <p class="mb-2 mb-md-3">全新嗅覺體驗，花香四溢、明亮馥郁。<br>結合茉莉、依蘭依蘭、橙花和最迷人的<br>格拉斯晚香玉之花香，呈現出夢幻花香<br>氣息。極具女性特質的香奈兒嘉柏麗香<br>水，專為光芒四射的她而生。</p>
      <a href="#" class="text-primary">查看更多</a>
        </div>
    </div>
  </div>
</div>

CSS

img{
  width: 100%;
}

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


<!-- 解答： [Codepen 範例](https://codepen.io/Bingbingboom/pen/gOmGPjp) -->

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

<!-- 1. 小羊
Codepen：
https://codepen.io/eqsmebaz-the-selector/pen/eYWGvZQ
-->

<!-- 2.Cloudia
Codepen:https://codepen.io/hkps87/pen/PomJpbp -->

<!-- 3.小胖
Codepen: https://codepen.io/a1073315/pen/wvdrJdr -->

<!-- 4.JT
Codepen: https://codepen.io/jsht-the-animator/pen/WNjZppM -->

<!--5.廖奕慈
Codepen: https://codepen.io/yiciLiao/pen/ExmwWXB -->

<!--6.黃彩雲
Codepen: https://codepen.io/corin19/pen/jOmGBxv -->

<!-- 7.蕭絜云
Codepen: https://codepen.io/cloudy_77/pen/gOWGWLK -->

<!-- 8.黃郁芳
Codepen: https://codepen.io/YuFang0323/pen/rNmGmmx -->

<!-- 9. Jack
Codepen: https://codepen.io/JackChen89/pen/BaRwRKO -->

<!-- 10. 辰
Codepen: https://codepen.io/dnangelapril/pen/PomJmQx
-->

<!-- 11. Iris
Codepen: https://codepen.io/hungyen/pen/vYmeZXP
-->

<!-- 12. 黃珮雯
Codepen: https://codepen.io/pwh_27/pen/poPWrjL -->

<!-- 13. 莊承叡
Codepen：https://codepen.io/Ray_ty39/pen/YzVrrxe?editors=1000
-->

<!-- 14. 羿宣
Codepen: https://codepen.io/Ann828/pen/JjNrrmr?editors=1000 -->

<!-- 15. 劉子瑜
Codepen: https://codepen.io/superfish195/pen/oNWGpMx
-->

<!-- 16. 薰
Codepen: https://codepen.io/chiaoshin/pen/qBmPPXj -->

<!-- 17. 馮旻
Codepen: https://codepen.io/tboqkvhk/pen/GRmMvxm -->

<!-- 18. 廖仕雅
CodePen: https://codepen.io/sophia0121/pen/NWjazvJ?editors=1000
-->

<!-- 19. Genie
CodePen: https://codepen.io/hcliii/pen/RwVLMRd -->

<!-- 20. 人中
CodePen: https://codepen.io/renchong2424/pen/LYyzJBp -->

<!-- 21.劉永琦
Codepen: https://codepen.io/wjsvypvv-the-decoder/pen/ExmwdgK -->

<!-- 22. Steve
Codepen: https://codepen.io/steve5631/pen/PomJdjp
-->

<!-- 23. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/xxdXzxV?editors=1000 -->

<!-- 24. 姚小芸
Codepen: https://codepen.io/crazzyamy/pen/QWvqJPv -->

<!-- 25. 霈楹
Codepen: https://codepen.io/nrweahgl-the-selector/pen/abWLMOV -->

<!--26. 小松
Codepen：https://codepen.io/120061203/pen/MWmExGv
-->

<!--28. 德德
Codepen：https://codepen.io/Chiouder/pen/PomEQZj?editors=1000 -->

<!--29. 陳書妤
Codepen:https://codepen.io/shuyu227/pen/OJmEzWo -->