作成方法：クーポン

CSSを使って“クーポン”を作成する方法を学びます。

会社ロゴ
luckin coffee
購入金額20%オフ

Lorem ipsum dolor sit amet, et nam pertinax gloriatur. Sea te minim soleat senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea. In sed nullam laboramus appellantur, mei ei omnis dolorem mnesarchum.

プロモーションコードを使用: BOH232

有効期限: 2025年1月3日

自分で試してみる：

クーポンを作成する方法

第1段 - HTMLを追加：

<div class="coupon">
  <div class="container">
    <h3>会社ロゴ</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>購入金額20%オフ</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>プロモーションコードを使用: <span class="promo">BOH232</span></p>
    <p class="expire">有効期限: 2021年1月3日</p>
  </div>
</div>

第2段 - CSSを追加：

.coupon {
  border: 5px dotted #bbb; /* ドットのボーダー */
  width: 80%;
  border-radius: 15px; /* 円角のボーダー */
  margin: 0 auto; /* 中心にオファー券を配置 */
  max-width: 600px;
}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
}
.promo {
  background: #ccc;
  padding: 3px;
}
.expire {
  color: red;
}

自分で試してみる：