MoreLesson 199Free preview

Coupon

This lesson is part of How To · All levels

Summary

A coupon is a ticketed promotional component that contains a discount code and a validity period. Its distinctive features are the broken lines as a boundary and small curves at the top and bottom. With border dashed, radial-gradient, and flexbox, coupons can look attractive without requiring images.

Key points

Use a dashed border to mimic the line of the ticket.
Ticket curves can be made with radial-gradients that overlap a particular angle
Give the code a letter-spacing to make it easy to read and copy
Set the code and description section with flexbox to be responsive

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.