---
# System prepended metadata

title: "\U0001F3C5 Day 40"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 40

## 偽元素（第六週 - 付款進度條）

### 題目
使用偽元素來做出以下排版
![](https://i.imgur.com/ax9Dloj.png)

HTML：
```htmlembedded=
<div class="bg-dark pt-4 pb-3">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-9 col-md-7 timeline">
      </div>
    </div>
    <div class="row">
      <div class="col-3 col-md-5">
        <div class="timeline-pointer text-center step-1 active">
          <p>課程報名</p>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="timeline-pointer text-center step-2">
          <p>信用卡付款</p>
        </div>
      </div>
      <div class="col-3 col-md-5">
        <div class="timeline-pointer text-center step-3">
          <p>付款成功</p>
        </div> 
      </div>
    </div>
  </div>
</div>
```

CSS（SCSS）：
```css=
.bg-dark {
  background-color: #1C1C1C;
}

.timeline {
  position: relative;
  &::after {
    ...
    ...
    top: 9px;
    left: 0;  
    right: 0;
    height: 2px;
    background-color: #C1C1C1;
  }
  &-pointer {
    position: relative;
    color: #C1C1C1;
    p {
      padding-top: 24px;
      margin-bottom: 0;
      line-height: 1.5;
    }
    &::before {
      ...
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      border: 1px solid #C1C1C1;
      border-radius: 50%;
      background-color: #2D2D2D;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      z-index: 1;
    }
    &.step-1::before {
      content: '1';
    }
    &.step-2::before {
      content: '...';
    }
    &.step-3::before {
      content: '...';
    }
    &.active {
      color: #62DB54;
      &::before {
        color: #FFFFFF;  
        background-color: #62DB54;
        border-color: #62DB54;
      }
    }
  }
}
```

## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：https://codepen.io/hexschool/pen/jOzvPOz?editors=1100 

此解答未載入字型，
實作時若要更貼近設計稿要記得載入
-->




回報區
---


|      Discord      |                           CodePen / 答案                            |
|:-----------------:|:-------------------------------------------------------------------:|
|  Iris Huang#6727  |          [CodePen](https://codepen.io/ythuang/pen/GRxYBKv)          |
|    布魯諾#7239    |         [CodePen](https://codepen.io/bruno-yu/pen/abYPepm)          |
|   Daisy_Li#4231   |    [Codepen](https://codepen.io/lidairong-gmail-com/pen/rNdoXKM)    |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/zYWygaN?editors=1100) |
|    JackC#0411     |          [CodePen](https://codepen.io/key0329/pen/mdxaNqK)          |
|   LinaChen#1796   |         [CodePen](https://codepen.io/LinaChen/pen/KKobOBw)          |
|   WEI_RIO#9342    |    [CodePen](https://codepen.io/wei_wu/pen/BarvXOb?editors=1100)    |
|      YC#2522      |           [CodePen](https://codepen.io/YCLu/pen/rNdoXqW)            |
|  Potatolee#7749   |        [CodePen](https://codepen.io/potatoleee/pen/abYPeMy)         |
|  PeggyLiao#1552   |  [CodePen](https://codepen.io/PeiJu-Liao/pen/mdxvbbv?editors=1100)  |
|    azami#5986     |           [CodePen](https://codepen.io/azami/pen/vYRbBEQ)           |
|     int#7518      |   [Codepen](https://codepen.io/intHuang/pen/QWmYLdE?editors=0100)   |
|  LHchien33#6232   |         [Codepen](https://codepen.io/lin_chien/pen/RwMvbwE)         |
|     yuyu#6310     |   [Codepen](https://codepen.io/yuyu0905/pen/jOzdNpm?editors=1100)   |
| Clara#1275 |   [Codepen](https://codepen.io/bsupixqu/pen/rNdPBQv)   |
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/MWVLgMV?editors=1100)|
|𝓛𝓊𝒸𝓎#8635|[codepen](https://codepen.io/lucygirl/pen/MWVLWmq)|
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/NWYoWJB) |
|大衛#4869|[codepen](https://codepen.io/exnsrpjc/pen/qBogEqR?editors=1100)|
|雷雷#7844|[codepen](https://codepen.io/lei-yi-jie/pen/ZExwYLY)|
|L0F0#8733|[codepen](https://codepen.io/l0f0/pen/poLGgVo)|
| Amberhh#2465 |[Codepen](https://codepen.io/Amberhh/pen/wvmNMOb?editors=0110) |
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/qBogWNK)|
|Hsiu#8767|[codepen](https://codepen.io/amy-hsiu/pen/bGvZNQz)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/bGvZBNy?editors=1100) |
|Joyce#3790|[CodePen](https://codepen.io/joycehuang/pen/jOzJyMw?editors=1100)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/eYMXgQQ)|
|    YU #0618     |          [CodePen](https://codepen.io/yoken_/pen/ZExPJYw)          |
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/ExEMzwX)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/wvmNGbo)|
|鉦勝#8333|[Codepen](https://codepen.io/atckmax823/pen/RwMOKBN)|
 |Ke#1391|[Codepen](https://codepen.io/federerke/pen/NWYmvby)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/jOzRaLB?editors=1100)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/xxWNYZZ?editors=1100)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/jOzjawP?editors=1100)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/abYgMeG)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/ZExgNoP)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/KKoOLBG)|
|piha#9987|[Codepen](https://codepen.io/pihahaha/pen/poVzyOQ)|
|evan |[Codepen](https://codepen.io/Evan_9837/pen/MWGWMMW)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/zYjGpNv)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/gOzpZWe)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/KKRVgYY)|
|Melon#0380|[Codepen](https://codepen.io/BalaFang/pen/mdLwBzY)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/zYjdvEJ)|