---
title: 工商系統
tags: 樣板
---

---
<div class="ad-title">工商系統</div>
<div class="ad-wrapper">
<div class="card-wrapper">
<div class="card-header">
<div class="bold">舉辦單位</div>
</div>
<div class="card-image">
<img src="https://i.imgur.com/cB7CInt.png">
</div>
<div class="card-footer">
<div class="bold">Learnweb Taiwan 社群</div>
</div>
</div>
<div class="card-wrapper">
<div class="card-header">
<div class="bold">贊助商</div>
</div>
<div class="card-image">
<img src="https://i.imgur.com/mnmURHG.png">
</div>
<div class="card-footer">
<div class="bold">IG @gleammming.art</div>
</div>
</div>
</div>

---

<style>
/* ad-wrapper */
.ad-title { font-size:24px;font-weight: bold;text-align: center; }
.ad-wrapper { display:flex;justify-content:space-around;flex-wrap:wrap; }

/* card-wrapper */
.card-wrapper { position: relative;margin:20px }
.card-image { width:250px;height:200px;box-shadow:0px 0px 10px 2px #0003; }
.card-image > img { height:100%;width:100%;object-fit:contain; }
.card-header { font-size:18px;font-weight: bold;position:absolute;color:white;background:#0007;padding:2px;top:0;width:100%;text-align:center; }
.card-footer { font-size:18px;font-weight: bold;position:absolute;color:white;background:#0007;padding:2px;bottom:0;width:100%;text-align:center; }
</style>