---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/30(五) 每日任務

## 題目

只需要更改 CSS 內的程式碼，更改為 SCSS 的寫法，需使用到「＆」
例如：

.header{

}
.header-title{

}

等於以下 SCSS 寫法

.header{
  &-title{

  }
}

需透過 Codepen 繳交 (使用 SCSS 模式)


HTML

<div class="card">
  <img class="card-img" src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/student-week1/p-1.png" alt="">
  <p class="card-tag">本日精選</p>
  <div class="card-text">
    <h3 class="card-title">焦糖馬卡龍</h3>
    <p class="card-title">NT$ 450</p>
  </div>
  <button class="card-btn">加入購物車</button>
</div>

CSS

img{
  display: block;
}
.card {
  width: 300px;
  position: relative;
}
.card-tag {
  position: absolute;
  top: 0;
  left: 20px;
  writing-mode: vertical-lr;
  letter-spacing: 5px;
  padding: 10px;
  background: #3F5D45;
  color: #EAF0ED;
}
.card-text{
  display: flex;
}
.card-title {
  font-size: 20px;
  line-height:24px;
  border: 1px solid #EAF0ED;
  padding: 14px 28px; 
  color: #3F5D45;
  font-weight: bold;
}
.card-btn {
  display: block;
  padding: 16px 90px;
  border: none;
  font-size:24px ;
  line-height:20px;
  background:#EAF0ED;
  color: #3F5D45;
}
.card-btn:hover{
  background: #3F5D45;
  color: white;
}

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


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/pobKGoe?editors=1100) -->

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

<!-- 1. 焦糖
Codepen：https://codepen.io/yen-kg/pen/vYxQgjp
-->

<!--2Alpha
Codepen:https://codepen.io/alphatero/pen/wvdjKRQ
-->

<!-- 3.Jasmin
Codepen：https://codepen.io/thejasmin/pen/MWpeGBJ?editors=1100
-->

<!-- 4.Lina Chen
codepen:https://codepen.io/LinaChen/pen/RwVyWmM
-->

<!-- 5.肉鬆
codepen: https://codepen.io/klrkicog/pen/gOWzPaB
-->

<!-- 6.lumei
codepen: https://codepen.io/l_umei/pen/poPVgbJ
-->
<!-- 7.群嘉
Condepen:https://codepen.io/efzdamnp-the-lessful/pen/BaRxjKb?editors=1100
-->

<!-- 8. 雷古娜
codepen:https://codepen.io/tinahopo/pen/dyWeGMd -->

<!-- 9. curry
codepen:https://codepen.io/Ted19851223/pen/qBmYbRV -->

<!-- 10. Sz
codepen: https://codepen.io/szyln/pen/gOWzPWq
-->

<!-- 11. Jean
codepen: https://codepen.io/jean-liu/pen/VwbxevQ
-->

<!-- 12. Gui
https://codepen.io/guitimliu/pen/MWmGKOj -->

<!-- 13. Gill
codepen:https://codepen.io/Gill-Chin/pen/ZEKoQrL?editors=1100
-->

<!-- 14. Sam li
codepen:https://codepen.io/sam830623/pen/yLbjepJ
--->

<!-- 15. Fleur
codepen:https://codepen.io/swwlee/pen/OJmjqLL
--->

<!--16. yijun
codpen:https://codepen.io/sandy3068/pen/poPVgOE
-->

<!-- 17. Cate Chang
https://codepen.io/tutz/pen/mdmLVMa
--->
<!-- 18. 陳sam
https://codepen.io/euldpliv/pen/ExmLPdo
-->

<!-- 19.大衛
https://codepen.io/exnsrpjc/pen/PomeZgY?editors=1100
-->

<!-- 20. peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/OJmZMqJ?editors=1100
-->

<!-- 21. huanan
codepen: https://codepen.io/hua_nan/pen/jOmxqqm
-->

<!-- 22. Jun Chan
codepen: https://codepen.io/chujunchan/pen/GRmdZJR
-->

<!-- 23. kk
codepen: https://codepen.io/potatokaka/pen/xxdjVOy?editors=0100
-->

<!-- 24.roger
codepen:
https://codepen.io/rogerchuang/pen/eYWrZZV?editors=0100
-->

<!-- 25.Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/vYmjGQL?editors=1100
-->

<!-- 26. ZOE WU
https://codepen.io/Zoechiueh/pen/XWRqdvQ?editors=0100
-->

<!-- 27. hellocrab
https://codepen.io/hellocrab/pen/jOmxrxd?editors=1100
-->

<!-- 28. 黃士桓
https://codepen.io/shr-huan-huang/pen/XWRqKLd
-->

<!-- 29. 蔡 Andrew
Codepen: https://codepen.io/bmzpfyxe/pen/MWmmdjJ?editors=0100
-->

<!-- 30. Oober
Codepen: https://codepen.io/xtsjrjdv/pen/bGWMwMG
-->

<!-- 31.阿瓜
Codepen: https://codepen.io/hoick/pen/BaRxLxX?editors=0100 -->

<!-- 32.Meng
Codepen: https://codepen.io/MGHN/pen/KKmNjoO -->

<!-- 33.Irene Wang
Codepen: https://codepen.io/irene-wang-the-looper/pen/YzVLpyb -->

<!--34.童筱涵
codepen:https://codepen.io/hsiaohan/pen/MWmGJgP
-->

<!-- 35.沈依蓉
https://codepen.io/lily-oa/pen/BaRxpdr
-->

<!--36. 阿和
codepen: https://codepen.io/shnny/pen/ExmLZEV?editors=0100
-->

<!-- 37. 佳文
https://codepen.io/chiawen81/pen/QWvrpZy?editors=0110
-->

<!-- 38. Hi Annie
https://codepen.io/lhohdalu/pen/QWvrMWR
-->

<!-- 39 Katie Zhao
https://codepen.io/katiezhao/pen/yLbjoyL
-->

<!-- 40.Sylvia-H https://codepen.io/Cosmosheart/pen/NWjMwLO?editors=1100 -->

<!-- 41. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/VwbxQBw
-->

<!-- 42. axlrock1021
https://codepen.io/andy1021/pen/ZEKoqdM
-->

<!-- 43. Gillian
https://codepen.io/gillianyy/pen/jOmxQNz
-->

<!-- 44. Karen Huang
https://codepen.io/Coding_Snorlax/pen/QWvrJGx?editors=1100
-->

<!-- 45.WilsonHan
https://codepen.io/wi0821/pen/QWvrYrg?editors=1100
-->

<!-- 46.Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/poPLjoG
-->

<!-- 47. Elaine Liu
https://codepen.io/elaine7598/pen/dyWKMva
-->

<!-- 48. Jim Hwang
https://codepen.io/jimh1129/pen/MWmXyxG
-->
<!-- 49.Shani
https://codepen.io/ShaniMa/pen/dyWKpRZ -->

<!-- 50.Tori
codepen: https://codepen.io/hayen/pen/VwbdPXK?editors=1000
-->

<!-- 51. Jamie
codepen: https://codepen.io/JamieChenWs/pen/wvdXONm
-->

<!-- 52. Benson
codepen: https://codepen.io/polarBear712/pen/JjNZqKL
-->

<!-- 53. jimmyFang
codepen: https://codepen.io/pohxiqqo/pen/abWKrJq
-->

<!-- 54. AKI
codepen: https://codepen.io/akichen27/pen/ExmpZeB
-->

<!-- 55. Yurie
codepen: https://codepen.io/_u_jung/pen/eYWjroZ
-->

<!-- 56. Jessie Cheng
codepen: https://codepen.io/JessieMosbi/pen/ExmppGB
-->

<!-- 57. ellie
https://codepen.io/hsu-yu/pen/YzVjBNO
-->

<!-- 58. Una(點子數位)
https://codepen.io/xbsapbas-the-vuer/pen/QWvVNBy?editors=1100
-->

<!-- 59.Alberto
https://codepen.io/AlbertoLL/pen/QWvVprz
-->

<!-- 60. WA
https://codepen.io/ldddl/pen/YzVOjwM
-->

<!-- 61. 袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/vYmzzRm?editors=0100
-->

<!-- 62. Min Chun Tsai
https://codepen.io/Tsai0926/pen/ExmOYqX
-->

<!-- 63.Page
https://codepen.io/kanawin821/pen/poPQgmq
-->

<!-- 64.Erin Huang
https://codepen.io/ErinHuang/pen/MWmzbMK
-->

<!-- 65.ted31539
https://codepen.io/Ted31539/pen/yLbQZEm
-->

<!-- 66. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/GRmwaQQ
-->

<!-- 67.陳品宏
https://codepen.io/wtka/pen/dyWwmVe
-->

<!-- 68. shanglin
https://codepen.io/rmovuagr-the-selector/pen/NWjeoyB
-->

<!-- 69. YOYO
https://codepen.io/lumedkle/pen/ExmJOvx
-->

<!-- 70. Joe Kuo
https://codepen.io/alertislow/pen/KKmLBOJ
-->

<!-- 80. YJ kung
https://codepen.io/bagelover/pen/poPMZad?editors=1100
-->