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

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

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

桌機尺寸(lg):
平板尺寸(md):
手機尺寸(sm):

---

Tailwind CSS CDN

<script src="https://cdn.tailwindcss.com"></script>

提供含結構、顏色、間距的程式碼：

<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 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：[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)|