---
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
-->

<!-- 2. 小羊
Codepen：
https://codepen.io/eqsmebaz-the-selector/pen/eYWrpXN
-->

<!-- 3. JT
Codepen: https://codepen.io/jsht-the-animator/pen/rNmvxNe?editors=1100
-->

<!-- 4. 黃珮雯
Codepen: https://codepen.io/pwh_27/pen/ZEKoQGQ -->

<!-- 5.黃彩雲
Codepen: https://codepen.io/corin19/pen/mdmLVyj -->

<!-- 6. 小胖
Codepen: https://codepen.io/a1073315/pen/vYmjLLr -->

<!-- 8. 廖仕雅
CodePen: https://codepen.io/sophia0121/pen/poPVyZL?editors=0100 -->

<!-- 9. Genie
CodePen: https://codepen.io/hcliii/pen/OJmZNqm -->

<!-- 10. Iris
Codepen：https://codepen.io/hungyen/pen/BaRxzLJ
-->

<!-- 11. Jack
Codepen: https://codepen.io/JackChen89/pen/ZEKoOyN -->

<!--12.小松
Codepen：
https://codepen.io/120061203/pen/OJmZXwE
-->

<!--13.薰
Codepen:https://codepen.io/chiaoshin/pen/bGWMwwy -->

<!-- 14.Cloudia
Codepen:https://codepen.io/hkps87/pen/KKmRgQV -->

<!--15.廖奕慈
Codepen: https://codepen.io/yiciLiao/pen/oNWdzRQ?editors=1100 -->

<!--16.德德
Codepen: https://codepen.io/Chiouder/pen/VwbxmpJ?editors=0100 -->

<!-- 17. 莊承叡
Codepen：https://codepen.io/Ray_ty39/pen/BaRxQmQ?editors=1100
-->

<!--18. 馮旻
Codepen:https://codepen.io/tboqkvhk/pen/YzVLNLQ
-->

<!--19. 羿宣
Codepen:https://codepen.io/Ann828/pen/xxdjqxq?editors=0110 -->

<!--20. 黃郁芳
Codepen:https://codepen.io/YuFang0323/pen/dyWevOd -->

<!--21. 劉子瑜
Codepen:https://codepen.io/superfish195/pen/ExmLmEG -->

<!-- 22. Steve
Codepen: https://codepen.io/steve5631/pen/gOWzwQN
-->

<!-- 23. 人中
Codepen: https://codepen.io/renchong2424/pen/vYmjmwG
-->

<!-- 24. 辰
Codepen: https://codepen.io/dnangelapril/pen/abWGVgm
-->

<!-- 25. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/qBmYpbj?editors=0100 -->

<!-- 26. 姚小芸
Codepen: https://codepen.io/crazzyamy/pen/RwVYJdd -->