---
# System prepended metadata

title: "\U0001F3C5 Day 7 - 製作部落格內頁"
tags: [Sponya 體驗營 - 2024]

---

# 🏅 Day 7 - 製作部落格內頁

題目
---
綜合前幾天學到的技巧，參考下方提示，依照設計稿，嘗試製作出下方圖片區塊
（可複製此[模板](https://codepen.io/hexschool/pen/poYMRWr?editors=1100)，調整 `＊` 的地方，也可以嘗試自行製作）

提示：
1. 最上方「`首頁 / .. / ..`」`情人特別企劃`前方頁面可讓使用者點選前往
2. 所有的 hashtag 皆可點選，可使用 a 標籤
3. 整體文章內容與 TAGS 為並排排列
4. 區塊排版可參考：
    <img src="https://hackmd.io/_uploads/B17y0vKn6.png" width="300">

> tags icon `https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/f70f00178a7f0baa31e9c01634303d8562cfe93a/week4/icon-tag.svg`



完成圖：

![image](https://hackmd.io/_uploads/ryN3qPK2T.png)




模板與解答皆有載入 CSS Reset 清除瀏覽器預設設定，
使用 Codepen 可直接在 `Settings > CSS > CSS Base > Reset` 設定


## 回報流程

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

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

<!-- 解答：  
https://codepen.io/hexschool/pen/vYPogYP?editors=1100

-->




回報區
---
<!-- 
將答案貼至下方表格內，格式：
| Discord 暱稱 | [CodePen](連結) |
-->

|   Discord   |    CodePen／答案    |
|:-----------:|:------------------:|
| xxx | [CodePen]() |