w3.css
쿠폰
CSS로 “쿠폰”을 만드는 방법을 알아보자.
쿠폰을 만드는 방법
1단계) HTML 추가
<div class="coupon"> <div class="container"> <h3>Company Logo</h3> </div> <img src="hamburger.jpg" alt="Avatar" style="width:100%;"> <div class="container" style="background-color:white"> <h2><b>20% OFF YOUR PURCHASE</b></h2> <p>Lorem ipsum..</p> </div> <div class="container"> <p>Use Promo Code: <span class="promo">BOH232</span></p> <p class="expire">Expires: Jan 03, 2021</p> </div> </div>
2단계) CSS 추가
.coupon { border: 5px dotted #bbb; /* Dotted border */ width: 80%; border-radius: 15px; /* Rounded border */ margin: 0 auto; /* Center the coupon */ max-width: 600px; } .container { padding: 2px 16px; background-color: #f1f1f1; } .promo { background: #ccc; padding: 3px; } .expire { color: red; }
기본 예시
예제 보기참고
W3C School - How TO - Coupon