## position＋transform 與 Modal 實作
### position 第一部分
運用 [position](https://getbootstrap.com/docs/5.3/utilities/position/) 通用類別實作出第六週設計稿。

如下圖
> 

>原設計稿內容標題部分有角度，但此部分先以無傾斜先嘗試練習。

只需要將下方 HTML `***` 的部分增加 Boostrap position 通用類別，CSS 的部分不須更動。

**HTML**

<div class="container">
  <ul class="row list-unstyled mt-60">
    <li class="col">
      <div class="item border border-2 border-dark p-3 pb-5 position-***">
        <h2 class="position-*** *** *** *** fs-6 bg-white px-3 py-2 fw-bold h2-transform">社群活動</h2>
        <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/album/01.jpg?raw=true" class="img-fluid w-100" alt="社群活動">
        <p class="pt-3">無聲派對-閉閉嘴dancing</p>
      </div>
    </li>
  </ul>
</div>

**CSS**

body {
  background-color: #f3f1e5;
  font-family: "Noto Serif TC";
}

.mt-60 {
  margin-top: 60px;
}

.item {
  img {
    object-fit: cover;
    height: 274px;
  }
}

### position 第二部分
了解 position 中 [.translate-middle](https://getbootstrap.com/docs/5.3/utilities/position/#center-elements) 的屬性，將其移除後使用自行編寫的 CSS 作替代，營造如同設計稿標題的角度。

傾斜角度須使用 [transform](https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform) 的語法。

>此次僅需修改 CSS 中的語法，HTML 不須更動。

>第一區塊的 HTML 沒有改變，可直接複製後面三個 li 即可。

**HTML**

<div class="container">
  <ul class="row mt-60 list-unstyled">
    <li class="col">
      <div class="item border border-2 border-dark p-3 pb-5 position-relative">
        <h2 class="position-absolute top-0 start-50 translate-middle fs-6 bg-white px-3 py-2 fw-bold h2-transform">社群活動</h2>
        <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/album/01.jpg?raw=true" class="img-fluid w-100" alt="社群活動">
        <p class="pt-3">無聲派對-閉閉嘴dancing</p>
      </div>
    </li>
    <li class="col">
      <div class="item border border-2 border-dark p-3 pb-5 position-relative">
        <h2 class="position-absolute top-0 start-50 fs-6 bg-white px-3 py-2 fw-bold h2-transform">藝文活動</h2>
        <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/album/02.jpg?raw=true" class="img-fluid w-100" alt="藝文活動">
        <p class="pt-3">搶救老店大作戰</p>
      </div>
    </li>
    <li class="col">
      <div class="item border border-2 border-dark p-3 pb-5 position-relative">
        <h2 class="position-absolute top-0 start-50 fs-6 bg-white px-3 py-2 fw-bold h2-transform">自我覺察</h2>
        <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/album/03.jpg?raw=true" class="img-fluid w-100" alt="自我覺察">
        <p class="pt-3">內觀修行-部落篇</p>
      </div>
    </li>
    <li class="col">
      <div class="item border border-2 border-dark p-3 pb-5 position-relative">
        <h2 class="position-absolute top-0 start-50 fs-6 bg-white px-3 py-2 fw-bold h2-transform">聯誼活動</h2>
        <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/album/04.jpg?raw=true" class="img-fluid w-100" alt="聯誼活動">
        <p class="pt-3">賞櫻野餐</p>
      </div>
    </li>
  </ul>
</div>

>因 translate-middle 的設定為
> ```css
> transform: translate(-50%,-50%) !important;
> ```
>若在 CSS 內再次設定 transform 是無法正常運作的，所以這邊會將此 `.translate-middle` 移除後，將其內容屬性加入自訂的 CSS 內並增加自己所需的參數。

>補充知識 =>
>[img-fluid](https://getbootstrap.com/docs/5.3/content/images/#responsive-images) 此為 bootstrap 中預設 img 響應式畫面的語法，便可減少 CSS 中設定 img 的部分。
>[list-unstyled](https://getbootstrap.com/docs/5.3/content/typography/#unstyled) 可以嘗試將此部分移除，觀察版型的變化，可以發現 ul > li 的部分會有預設樣式，此語法便是將此預設語法移除。

**CSS**

body {
  background-color: #f3f1e5;
  font-family: "Noto Serif TC";
}
.mt-60 {
  margin-top: 60px;
}
.h2-transform {
  transform: translate(-50%, -50%) rotate(-4deg);
}
li {
  &:nth-child(2n) {
    ***
  }
  &:nth-child(3) {
    ***
  }
}
.item {
  img {
    object-fit: cover;
    height: 274px;
  }
}

>補充知識 =>
>
>[:nth-child](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child) 可在一連串連續的程式碼中，選擇出需要個別設定的程式碼，像是此次程式碼中的 `:nth-child(2n)` 便是每兩個套用一次。

完成上方 CSS `***` 區塊程式碼，最後會呈現下圖
> 
>
> 第一個部分為無特別角度
> 2-4 的標題是同樣的角度
> 2 與 4 的外框角度相同
> 3 是自己獨立的角度

### Modal 實作

接下來是 [modal](https://getbootstrap.com/docs/5.3/components/modal/) 的實際操作，相同是以第六周的設計稿為架構，以下圖為例，在點擊「開賣中」即會彈出 modal 的頁面（modal 需增加寬度並置於畫面中央）。
> 

請運用下方三個 HTML 完成這次的作業

>☟主頁的 HTML（有一處需增加程式碼）
**HTML**

<div class="container">
  <div class="row my-4">
    <div class="col-4 mx-auto">
      <h2 class="border-bottom border-dark border-3">19 MAY 2023</h2>
      <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/event/01.jpg?raw=true" alt="邪典電影派對——房間">
      <h3 class="fs-4 fw-bold">邪典電影派對——房間</h3>
      <p class="lh-base pb-3 border-bottom border-2 border-dark mb-0">你有聽說過「大災難家」裡面的主角 Tommy Wiseau 製作的「史上最爛的電影」——房間嗎？在美國甚至演變成一種邪教、一種派對的形式，在電影播放的對著螢幕丟湯匙都...</p>
      <div class="bottom-btn d-flex justify-content-between border-bottom border-2 border-dark">
        <a href="#" class="d-flex align-items-center hover-text-decoration"><img src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week6/sparkler.png?raw=true" class="btn-left img-fluid" alt="社群活動">社群活動</a>
        <a href="#" class="d-flex align-items-center hover-bg-yellow"data-bs-toggle="modal" data-bs-target="***">開賣中 &raquo;</a>
      </div>
    </div>
  </div>
</div>

>☟ modal 的按鈕部分（請複製此段可運用的內容放至上方 HTML 中）
**HTML**

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

>☟ modal 的實體（了解 modal 後，修改 `***` 內容將實體能正確開啟、置中與擴展寬度）

<div class="modal fade" id="***" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog *** ***">
    <div class="modal-content text-center rounded-0">
      <div class="modal-header border-bottom border-3 border-dark d-flex justify-content-center">
        <h4 class="modal-title fs-4 fw-bold mx-auto" id="exampleModalLabel">立刻成為7TAO會員</h4>
        <button type="button" class="btn-close ms-0 text-dark" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body py-5">
        <p>
          立刻成為七逃會員，加速活動報名流程並取得活動優惠資訊。<br>
          您也可以先報名活動，日後再註冊帳號，<br>
          系統會在認證您的Email後，協助您找回舊的訂單。
        </p>
        <button type="button" class="btn btn-primary mt-4 px-4 py-2 modal-btn rounded-0">立即成為會員</button>
      </div>
    </div>
  </div>
</div>

**CSS**

body {
  background-color: #f3f1e5;
  font-family: 'Noto Sans TC', sans-serif;
}
h2{
  font-family: "Yeseva One";
  padding-bottom: 12px;
  margin-bottom: 12px;
  font-size: 48px;
}
h3{
  font-family: 'Noto Serif TC', sans-serif;
}
img{
  display: block;
  width:100%;
}
h3{
  margin: 12px 0px;
}
a{
  text-decoration: none;
  color: black;
}
.bottom-btn{
  padding: 12px 0px;
}
.btn-left{
  height: 24px;
  width: 24px;
}
.hover-text-decoration:hover{
  text-decoration: underline;
}
.hover-bg-yellow:hover{
  background-color: yellow;
  border-radius: 50px;
}
.modal-btn{
  background-color: #000;
  border: 0px;
  color: #FFFF00;
}
.modal-btn:hover{
  background-color: #000;
  color: #ffffff;
}
.modal{
  h4{
    font-family: 'Noto Serif TC', sans-serif;
  }
}
.btn-close{
  opacity:1;
}

> 實際樣式請再依照設計稿調整，這邊僅提供簡易樣式設定
> 可以嘗試修改 Bootstrap 變數設定製作，
> 另外箭頭與關閉 modal 的 icon 實際製作時使用 icofont 會更符合設計稿哦

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
position：
https://codepen.io/jmimiding4104/pen/KKrRXNz
modal：

-->

回報區
---

| # | Discord | CodePen / 答案 |
|:---:|:-------:|:-------------------------------------------------------- |
| 01 | AYA | [Codepen-1](https://codepen.io/NoNameNote/pen/XWyvjLr) / [Codepen-2](https://codepen.io/NoNameNote/pen/PoxMbwQ)|
| 02 | Berlin | [Codepen-1](https://codepen.io/3qberlin/pen/jOQgVOX) / [Codepen-2](https://codepen.io/3qberlin/pen/QWJeGbz) |
| 03 | ann6212 | [Codepen-1](https://codepen.io/yqmegupa-the-styleful/pen/oNQKYNY) / [Codepen-2](https://codepen.io/yqmegupa-the-styleful/pen/ExOqNPV) |
| 04 | deli0529 | [Codepen-1](https://codepen.io/delichaomoon/pen/oNQrYZo) / [Codepen-2](https://codepen.io/delichaomoon/pen/RwqXorL) |
| 05 | Yu | [Codepen-1](https://codepen.io/yuch3n_chen/pen/gOQVLpv) / [Codepen-2](https://codepen.io/yuch3n_chen/pen/abQeBzv) |
| 06| hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/oNQKYXB) |
| 07 | 銀光菇 | [Codepen-1](https://codepen.io/genesynthesis/pen/xxQvRgE) / [Codepen-2](https://codepen.io/genesynthesis/pen/vYQoymp)|
| 08 | bf_tsai | [Codepen-1](https://codepen.io/BF-Tsai/pen/abQeBZN) / [Codepen-2](https://codepen.io/BF-Tsai/pen/OJaKbjo) |
| 09 | Rochel | [Codepen-1](https://codepen.io/rochelwang1205/pen/poQMNNX?editors=1010) / [Codepen-2](https://codepen.io/rochelwang1205/pen/ExOqNWK) |
| 10 | townyuan | [Codepen-1](https://codepen.io/townyuan/pen/bGQXBpm) / [Codepen-2](https://codepen.io/townyuan/pen/rNQXWpx) |
| 11 | xuan#0808 | [Codepen-1](https://codepen.io/xuan0915/pen/oNQKYYW) / [Codepen-2](https://codepen.io/xuan0915/pen/bGQXBRO) |
| 12 | ovo.yun | [Codepen-1](https://codepen.io/yun-the-scripter/pen/PoxMbEd) / [Codepen-2](https://codepen.io/yun-the-scripter/pen/qBQeqoj?editors=1000) |
| 12 | kuanju27 | [Codepen-1](https://codepen.io/Eero-Chiao/pen/wvQVoYZ) / [Codepen-2](https://codepen.io/Eero-Chiao/pen/YzRmpRL) |
| 13 | Amelia | [Codepen-1](https://codepen.io/Amelia-chin/pen/MWzNbMe) / [Codepen-2](https://codepen.io/Amelia-chin/pen/RwqXoze) |
| 14 | Pinyi_9 | [Codepen-1](https://codepen.io/Wpypy/pen/gOQVLjB) / [Codepen-2](https://codepen.io/Wpypy/pen/xxQvgbP?editors=1100) |
| 15 | stevenchang421 | [Codepen-1](https://codepen.io/vwtrpqmm/pen/zYMgNYz) / [Codepen-2](https://codepen.io/vwtrpqmm/pen/ExOqZNo) |
| 16 | Tina02 | [Codepen-1](https://codepen.io/chjitlox-the-bashful/pen/rNQXjmG) / [Codepen-2](https://codepen.io/chjitlox-the-bashful/pen/GRwVrmb) |
| 17 | lychee_kk | [Codepen-1](https://codepen.io/kakakala/pen/rNQXWgj) / [Codepen-2](https://codepen.io/kakakala/pen/QWJedaK) |
| 18 | awei | [Codepen-1](https://codepen.io/hong-wei/pen/yLQmgpb) / [Codepen-2](https://codepen.io/hong-wei/pen/wvQVgYG) |
| 19 | jacky7035 | [Codepen-1](https://codepen.io/adens123/pen/GRwVryV) / [Codepen-2](https://codepen.io/adens123/pen/WNYVRgo) |
| 20 | dodo_6666 | [Codepen-1](https://codepen.io/MissDouble/pen/RwqXoQy) / [Codepen-2](https://codepen.io/MissDouble/pen/ZEmgLLK) |
| 22 | hao2485 | [Codepen-1](https://codepen.io/Seanfeb16/pen/BaGXWxw) / [Codepen-2](https://codepen.io/Seanfeb16/pen/VwVobwp) |
| 23 | meowmeow | [Codepen-1](https://codepen.io/snow1224/pen/vYQoxqm) / [Codepen-2](https://codepen.io/snow1224/pen/XWyvRbW) |
| 24 | Atsushi#6888 | [Codepen-1](https://codepen.io/atsushi-amuro/pen/gOQVWvj) / [Codepen-2](https://codepen.io/atsushi-amuro/pen/vYQomxW?editors=1100) |
| 25 | Eden | [Codepen-1](https://codepen.io/iseden/pen/dyQxVrd) / [Codepen-2](https://codepen.io/iseden/pen/ExOqbvQ) |
| 26 | soniawu | [Codepen-1](https://codepen.io/YUJOU/pen/BaGXmKX) / [Codepen-2](https://codepen.io/YUJOU/pen/VwVorVN?editors=1100) |
| 27 | ming0712 | [Codepen-1](https://codepen.io/StevenHuang/pen/eYQqGgY) / [Codepen-2](https://codepen.io/StevenHuang/pen/zYMgEdq) |
| 28 | yu.t_liu | [Codepen-1](https://codepen.io/YuT200053/pen/LYXweoN) / [Codepen-2](https://codepen.io/YuT200053/pen/abQeqpN?editors=1000) |
| 29 | hannahTW | [Codepen-1](https://codepen.io/hangineer/pen/xxQvYXR) / [Codepen-2](https://codepen.io/hangineer/pen/dyQxdqZ) |
| 30 | JohnChien | [Codepen-1](https://codepen.io/glqwazid-the-selector/pen/KKrOoBW) / [Codepen-2](https://codepen.io/glqwazid-the-selector/pen/QWJemev) |
| 31 | 泊岸#3466 | [Codepen-1](https://codepen.io/qoq77416416/pen/ZEmgjPv) / [Codepen-2](https://codepen.io/qoq77416416/pen/xxQvaWv?editors=1100) |
| 32 | rjjq | [Codepen-1]() / [Codepen-2]() |
| 33 | shcopy |[Codepen-1](https://codepen.io/shcopy/pen/VwVomYp) / [Codepen-2](https://codepen.io/shcopy/pen/WNYVYJw)|
| 34 | Kimi | [Codepen](https://codepen.io/kimihu91/pen/WNYmwmZ) |
| 35 | 小夏 | [Codepen-1](https://codepen.io/michaelhsia/pen/bGQXaja) / [Codepen-2](https://codepen.io/michaelhsia/pen/PoxMXKb) |
| 36 | Uli | [Codepen-1](https://codepen.io/uli1313/pen/jOQgLJv) / [Codepen-2](https://codepen.io/uli1313/pen/qBQevpK) |
| 37 | m_m | [Codepen-1](https://codepen.io/minnn7716/pen/VwVoRrV) / [Codepen-2](https://codepen.io/minnn7716/pen/oNQKVda) |
| 38 | Renee Wang | [Codepen-1](https://codepen.io/RENEE-WANG-the-looper/pen/XWyvMbx) / [Codepen-2](https://codepen.io/RENEE-WANG-the-looper/pen/oNQKVrV) |
| 39 | Randy | [Codepen-1](https://codepen.io/landy510/pen/yLGBOOZ) / [Codepen-2](https://codepen.io/landy510/pen/ZEVzWpN?editors=1000) |
| 40 | .icesam | [Codepen-1](https://codepen.io/icesam/pen/RwEbRVq) / [Codepen-2](https://codepen.io/icesam/pen/WNLexjb) |
| 41 | Tami | [Codepen-1](https://codepen.io/wqsdqbjn-the-vuer/pen/qBLWqXa) / [Codepen-2](https://codepen.io/wqsdqbjn-the-vuer/pen/zYyONOo) |
| 42 | Johnson3669 | [Codepen-1](https://codepen.io/crpbugqy-the-typescripter/pen/JjegQzm) / [Codepen-2](https://codepen.io/crpbugqy-the-typescripter/pen/MWzNNaQ) |
| 43 | SKey#9905 | [Codepen-1](https://codepen.io/Dale-Chien/pen/wvRwYoy) / [Codepen-2](https://codepen.io/Dale-Chien/pen/ExGYdLV) |
| 44 | 依依 | [Codepen-1](https://codepen.io/Rita-Yang/pen/WNLeaQJ) / [Codepen-2](https://codepen.io/Rita-Yang/pen/qBLWJMq?editors=1100) |
| 45 | andersonshen | [Codepen-1](https://codepen.io/luxyenni-the-bold/pen/vYvBbBK) / [Codepen-2](https://codepen.io/luxyenni-the-bold/pen/OJrLdGo) |
| 46 | SmallP | [Codepen-1](https://codepen.io/smallp/pen/rNQXWLa) / [Codepen-2](https://codepen.io/smallp/pen/MWZgxja) |
| 47 | wind | [Codepen-1](https://codepen.io/wind7y/pen/LYMYRxM) / [Codepen-2](https://codepen.io/wind7y/pen/mdadrBd) |
| 48 | mm_ieat | [Codepen-1](https://codepen.io/MINN3/pen/wvRvNYm) / [Codepen-2](https://codepen.io/MINN3/pen/mdadvvM) |
| 49 | Lianne._. | [Codepen-1](https://codepen.io/Elaina-L/pen/yLGLdBW) / |
| 50 | tanuki5863 | [Codepen-1](https://codepen.io/tanuki320/pen/LYMEEOX) / [Codepen-2](https://codepen.io/tanuki320/pen/PoXwwdP) |
| 51 |yunhsinnnnnnn | [Codepen-1](https://codepen.io/yun___hsin/pen/oNJgzOR?editors=1100) / [Codepen-2](https://codepen.io/yun___hsin/pen/YzdPpPz) |
| 52 | liam9930 | [Codepen-1](https://codepen.io/jgnjfvvt-the-lessful/pen/jOXEqKp) / [Codepen-2](https://codepen.io/jgnjfvvt-the-lessful/pen/GRPgMyr) |
| 53 | Paul#7426 | [Codepen-1](https://codepen.io/paul-1997/pen/OJrPrmK) / [Codepen-2](https://codepen.io/paul-1997/pen/ZEVYVry) |
| 54 | PayRoom#8328 | [Codepen-1](https://codepen.io/water38198/pen/MWZwjje) / [Codepen-2](https://codepen.io/water38198/pen/NWeqRpW) |
| 55 | runweiting | [Codepen-1](https://codepen.io/weiting14/pen/oNJXzMa) / [Codepen-2](https://codepen.io/weiting14/pen/BavNLVa)
| 56 | santu0868 | [Codepen-1](https://codepen.io/HatsumiSan/pen/wvRaVWO) / [Codepen-2](https://codepen.io/HatsumiSan/pen/jOXPgQq) |
| 57 | cura | [Codepen-1](https://codepen.io/curalin/pen/jOXbyBp?editors=1100) / [Codepen-2](https://codepen.io/curalin/pen/JjwYEMY?editors=1000) |
| 58 | adele6199 | [Codepen-1](https://codepen.io/codepen-io-winnie/pen/mdaeXXd) / [Codepen-2](https://codepen.io/codepen-io-winnie/pen/XWomEJo?editors=1000) |
| 59 | Long | [Codepen-1](https://codepen.io/Loonng/pen/KKbVwKE?editors=1100) / [Codepen-2](https://codepen.io/Loonng/pen/xxmZbZO?editors=1010) |
| 60 | peggy3169 | [Codepen-1](https://codepen.io/peggylai/pen/PoXZWPG) / |
| 61 | sinsaki225 | [Codepen-1](https://codepen.io/a8322342/pen/gOZMGVN) / [Codepen-2](https://codepen.io/a8322342/pen/dywXZZL) |
| 62 | RX00#5351 | [Codepen-1](https://codepen.io/llqzknqv-the-styleful/pen/VwqjNVP) / [Codepen-2](https://codepen.io/llqzknqv-the-styleful/pen/MWZedra) |
| 63 | 歐陽龍龍#1061 | [Codepen-1](https://codepen.io/dizzydog-rgb/pen/zYyKpYm) / [Codepen-2](https://codepen.io/dizzydog-rgb/pen/xxmEpXo) |
| 64 | yuan2781 | [Codepen-1](https://codepen.io/ismebir/pen/ZEVyWmj) / [Codepen-2](https://codepen.io/ismebir/pen/xxmrVpm) |
| 65 | patrickpie | [Codepen-1](https://codepen.io/patrickpie/pen/JjwLXYj) / [Codepen-2](https://codepen.io/patrickpie/pen/mdaxPrW?editors=1100) |
| 66 | 阿維#2569 | [Codepen-1](https://codepen.io/iijojpli-the-looper/pen/KKbxoZe?editors=1100) / [Codepen-2](https://codepen.io/iijojpli-the-looper/pen/mdaGLeq?editors=1100) |

---

- 快速複製格式：

| 0 | user | [Codepen-1](https://codepen.io/rjjq/pen/gOQVXNa) / [Codepen-2](https://codepen.io/rjjq/pen/XWyvxGj) |