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

## position
運用 [position](https://bootstrap5.hexschool.com/docs/5.1/utilities/position/) 通用類別實作出第六週設計稿 - 四角 **border 圓角**與**方塊**
> 需透過 Codepen 繳交 （載入 [Bootstrap CDN](https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/#css)）

### 四個 **border 圓角**（只需要補上 HTML `...` 的部分）
> 

**HTML**

<div class="container py-3">
  <div class="row">
    <div class="col-md-4">
      <div class="card border-0" style="padding: 32px;">
          <div class="squareRounded squareRounded-topLeft ..."></div>
          <div class="squareRounded squareRounded-topRight ..."></div>
          <div class="squareRounded squareRounded-bottomLeft ..."></div>
          <div class="squareRounded squareRounded-bottomRight ..."></div>
          <img src="https://github.com/hexschool/2022-web-layout-training/blob/main/week6-202207/article02.jpg?raw=true" class="card-img-top rounded-0" alt="圖片">
          <div class="card-body p-0">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
      </div>
    </div>
  </div>
</div>

**CSS**

.squareRounded {
  display: none;
  width: 32px;
  height: 32px;
  &-topLeft {
    border-top: 2px solid #62DB54;
    border-left: 2px solid #62DB54;
    border-top-left-radius: 10px;
  }
  &-topRight {
    border-top: 2px solid #62DB54;
    border-right: 2px solid #62DB54;
    border-top-right-radius: 10px;
  }
  &-bottomLeft {
    border-bottom: 2px solid #62DB54;
    border-left: 2px solid #62DB54;
    border-bottom-left-radius: 10px;
  }
  &-bottomRight {
    border-bottom: 2px solid #62DB54;
    border-right: 2px solid #62DB54;
    border-bottom-right-radius: 10px;
  }
}
.card:hover {
  .squareRounded {
    display: block;
  }
}

### **四角方塊**（只需要補上 HTML `...` 的部分）
> 

**HTML**

<div class="container py-3">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="banner text-center ...">
        <div class="square ..."></div>
        <div class="square ..."></div>
        <div class="square ..."></div>
        <div class="square ..."></div>
        <h1>全台最豐富的程式家教<br>在實踐中化理想為現實</h1>
      </div>
    </div>
  </div>
</div>

**CSS**

body {
  background-color: #000;
  color: #fff;
}

.banner {
  padding: 47px 80px;
  border: 1px solid #fff;
}

.square {
  width: 10px;
  height: 10px;
  background-color: #fff;
}

## 回報流程

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


<!-- 解答：
border 圓角：https://codepen.io/hexschool/pen/OJvxKLd?editors=1100
四角方塊：https://codepen.io/hexschool/pen/poLdzxK?editors=1100
-->

回報區
---

| Discord | CodePen / 答案 |
|:-----------------:|:-------------------------------------------------------------------:|
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/OJvBEGO) |
| CloThEs #7837 | [CodePen](https://codepen.io/CloThEsZ/pen/GRxwxZE) |
| Vera#5592 | [CodePen](https://codepen.io/skvera/pen/PoRxQGP) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/qBoQQZd) |
| 黃士桓#7654 | [codenPen](https://codepen.io/shr-huan-huang/pen/ExEOOmx) |
| 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/GRxwwMM?editors=1100) |
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/GRxwwWv) |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/ExEOOdP?editors=1000) |
| Clara Cai#7097 | [CodePen](https://codepen.io/Clara-Snowy/pen/yLKQQow) |
| WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/MWVzzOd?editors=1100) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/poLQQZB) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/YzaRRbE) |
| Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/GRxwwVG) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/oNqQJXG) |
| L0F0#8733 | [Codepen](https://codepen.io/l0f0/pen/abYQPdJ) |
| Hsiu#8767 | [CodePen](https://codepen.io/amy-hsiu/pen/qBoQQrb) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/zYWMyNN?editors=1100) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/RwMqERJ) |
| LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/BarGvWE) |
| 小諾#1866 | [CodePen](https://codepen.io/noichan/pen/LYdXMQd) |
|int#7518|[Codepen](https://codepen.io/intHuang/pen/abYQPYL?editors=1100)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/OJvarZe)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/zYWMybP)|
|Benson#6763|[CodePen](https://codepen.io/kumashow/pen/XWEyOMY)|
|ssozr#4680|[codePen](https://codepen.io/ssozr/pen/QWmJYMv)|
|𝓛𝓊𝒸𝓎#8635|[codePen](https://codepen.io/lucygirl/pen/ZExmwax)|
|Henry#7386|[CodePen](https://codepen.io/h1nr9/pen/MWVzxWP)|
|IreneY #0086|[Code](https://codepen.io/HalfPlannedJourney/pen/zYWMXrK)|
|雷雷#7844|[CodePen](https://codepen.io/lei-yi-jie/pen/eYMQoEd)|
|威0#6919|[Codepen](https://codepen.io/n0918679182/pen/rNdQbGj?editors=1100)|
|NeilLin#3009|[Codepen](https://codepen.io/a0071421/pen/PoRxvpP)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/VwXVoKQ)|
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/QWmJerb?editors=1100) |
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/JjLwPXa)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/oNqJNjX)|
| Yunei#6323 |[Codepen](https://codepen.io/Yunei/pen/Barvyjv)|
| Glamorouscoast#4095 |[Codepen](https://codepen.io/GcTzw/pen/gOeZavX)|
|yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/bGvOEvX)|
|郭芙蘭#6374 | [CodePen](https://codepen.io/flora_Kuo/pen/JjLwJOd)|
| PeggyLiao#1552 |[CodePen](https://codepen.io/PeiJu-Liao/pen/xxWmrJw?editors=1100)|
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/ExEGXGj)|
| 咻蹦#1526 |[CodePen](https://codepen.io/emmasyu/pen/RwMqzXQ)|
|zera#6060 | [codepen](https://codepen.io/zera-tseng/pen/RwMEggK)|
|LinaChen#1796 | [codepen](https://codepen.io/LinaChen/pen/abYPVpe)|
|Melon#0380 | [codepen](https://codepen.io/BalaFang/pen/dymwdwx)|
|鉦勝 #8333 | [codepen](https://codepen.io/atckmax823/pen/xxWmGry)|
|黑白兔#0684 | [codepen](https://codepen.io/johnny329/pen/abYXodE)|
|QOO#8446 | [codepen](https://codepen.io/QOOQOOQ/pen/MWVZOvZ?editors=1100)|
|yo_yo#2678 | [codepen](https://codepen.io/djmliogn-the-flexboxer/pen/jOzdEvO?editors=1100)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/qBogbBN) |
|Joyce#3790|[CodePen](https://codepen.io/joycehuang/pen/XWEOdLB)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/XWEONyq?editors=1100)|
|Vian#7338|[Codepen](https://codepen.io/vianwu31/pen/gOeqoge?editors=1100)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/zYWeWYJ)|
| YU #0618 | [CodePen](https://codepen.io/yoken_/pen/LYdqmvO)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/rNdPRmq?editors=1100)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/QWmYRdb)|
|我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/BarMgMw)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/Barbadp?editors=1100)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/QWmoEBa?editors=1100) |
| Rena#6249 | [CodePen](https://codepen.io/aureate0116/pen/xxWMoqB) |
| Cream#3449 | [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/KKoEabR?editors=1100) |
| Yuna Huang#2692 | [CodePen](https://codepen.io/Yuna1002/pen/OJvGJwR?editors=1100) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/oNqOjaK)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/bGvJoez?editors=1100)|
|piha#9987|[Codepen](https://codepen.io/pihahaha/pen/vYRwOXW)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/dymEowm?editors=1100)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/wvmbmvL?editors=1100)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/JjLQLga)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/eYMwbGr)|
|choubree#4350|[Codepan](https://codepen.io/BreeChou/pen/wvmVJZd)|
|jin.huang#4666|[Codepan](https://codepen.io/haha1196/pen/bGvXWBa)|
|hungya#0773|[Codepan](https://codepen.io/hungya777/pen/YzamaMJ?editors=1100)|
|yuchenye#6119|[CodePen](https://codepen.io/yuchen/pen/abGbQWz)|Shuo#1596https://codepen.io/chiangchungshuo/pen/VwxLxLp
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/WNJQPYQ)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/GRdqWzr)|