---
# System prepended metadata

title: 7/27(三) 週任務
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---


# 7/27(三) 週任務
## 實作 Footer 響應式版型 

使用[ Tailwind CSS 的響應式斷點](https://tailwindcss.com/docs/responsive-design#overview)製作出三個不同尺寸的 Footer 版型
建議從手機尺寸開始製作

桌機尺寸(lg):
![](https://i.imgur.com/qWPt41F.png)
平板尺寸(md):
![](https://i.imgur.com/FML3oPN.png)
手機尺寸(sm):
![](https://i.imgur.com/2CixP7V.png)


---

Tailwind CSS CDN
```
<script src="https://cdn.tailwindcss.com"></script>
```

提供含結構、顏色、間距的程式碼：
```htmlembedded=
<footer class="p-8 text-slate-500">
  <section class="mb-6">
    <div class="">
      <a href="#" class="block mb-4">
        <img class="block h-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
             alt="Workflow">
      </a>
      <p class="mb-4">Making the world a better place through <br> constructing elegant hierarchies.</p>
      <span class="space-x-6">
        <a href="#" class=""><i class="fab fa-facebook"></i></a>
        <a href="#" class=""><i class="fab fa-instagram"></i></a>
        <a href="#" class=""><i class="fab fa-twitter"></i></a>
      </span>
    </div>
    <ul class="">
      <li>
        <h5 class="text-slate-400 mb-3">SOLUTIONS</h5>
        <ul class="space-y-3">
          <li><a href="#" class="">Marketing</a></li>
          <li><a href="#" class="">Analytics</a></li>
          <li><a href="#" class="">Commerce</a></li>
          <li><a href="#" class="">Insights</a></li>
        </ul>
      </li>
      <li>
        <h5 class="text-slate-400 mb-3">SUPPORT</h5>
        <ul class="space-y-3">
          <li><a href="#" class="">Pricing</a></li>
          <li><a href="#" class="">Documentation</a></li>
          <li><a href="#" class="">Guides</a></li>
          <li><a href="#" class="">API Status</a></li>
        </ul>
      </li>
      <li>
        <h5 class="text-slate-400 mb-3">COMPANY</h5>
        <ul class="space-y-3">
          <li><a href="#" class="">About</a></li>
          <li><a href="#" class="">Blog</a></li>
          <li><a href="#" class="">Jobs</a></li>
          <li><a href="#" class="">Press</a></li>
          <li><a href="#" class="">Partners</a></li>
        </ul>
      </li>
      <li>
        <h5 class="text-slate-400 mb-3">LEGAL</h5>
        <ul class="space-y-3">
          <li><a href="#" class="">Claim</a></li>
          <li><a href="#" class="">Privacy</a></li>
          <li><a href="#" class="">Terms</a></li>
        </ul>
      </li>
    </ul>
  </section>
  <hr>
  <h6 class=""> © 2022 Workflow, Inc. All rights reserved.</h6>
</footer>
```


## 回報流程

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

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

<!-- 解答：[Codepen 連結](https://codepen.io/AliceChiang/pen/YzYdMwO) -->


回報區
---


|    Discord    |                              CodePen                              |
|:-------------:|:-----------------------------------------------------------------:|
|  黃士桓#7654  |     [codePen](https://codepen.io/shr-huan-huang/pen/LYdzByx)      |
|   Chi#7605    |         [Codepen](https://codepen.io/YoChi84/pen/wvmrxER)         |
| annanna#6011  |       [Codepen](https://codepen.io/annaprosty/pen/wvmrYWg)        |
|  Chaoci#2460  |        [Codepen](https://codepen.io/gmailchao/pen/jOzGovz)        |
|  布魯諾#7239  |  [Codepen](https://codepen.io/bruno-yu/pen/LYdzKxR?editors=1100)  |
|   威爾#1694   |         [CodePen](https://codepen.io/WILL_Wu/pen/qBoVVPN)         |
|   雷雷#7844   | [CodePen](https://codepen.io/lei-yi-jie/pen/xxWPjrX?editors=1000) |
|   How#5806    |       [CodePen](https://codepen.io/howtobefine/pen/VwXyZNY)       |
|   Tori#1248   |  [CodePen](https://codepen.io/FlyTori/pen/JjLMYZG?editors=1000)   |
| NeilLin#3009  |  [CodePen](https://codepen.io/a0071421/pen/rNdpyXw?editors=1100)  |
|  Joyce#3790   | [CodePen](https://codepen.io/joycehuang/pen/jOzYZJG?editors=1100) |
| EmilyLin#0526 |  [CodePen](https://codepen.io/c199615/pen/GRxyBaO?editors=1000)   |
| LinaChen#1796 |        [CodePen](https://codepen.io/LinaChen/pen/xxWprWG)         |
|   yuyu#6310   |  [CodePen](https://codepen.io/yuyu0905/pen/QWmQGyj?editors=1000)  |
| 家洋#6999|[Codepen](https://codepen.io/aa235553756/pen/BarYXLr)|
|瑞追#8227|[Codepen](https://codepen.io/owlu0905/pen/gOevoLv)
|aki|[coedpen](https://codepen.io/aki168/pen/GRxxyaG)|
|Fang #4680|[Codepen](https://codepen.io/std95174/pen/LYddzRe?editors=1000)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/yLKjygQ?editors=1000)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/YzajKRY)
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/yLKRxaJ?editors=1010)|