---
tags: 網頁切版直播班
---
# 8/10(二) 每日任務(香水電商)

## 題目
練習 [格線系統](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.

-->