Create a Coupon using HTML and CSS

Last Updated : 26 Dec, 2023

This article will show you how to create a coupon using HTML and CSS. A coupon is like a card containing offer details and Coupon code. We will use HTML to create the coupon structure and then add some CSS styles to make the coupon attractive.

Coupon Card Preview

coupon-card

Example: We will create a coupon cart using HTML and CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title>Coupon Example</title> 
      
    <style> 
        body { 
            margin: 0; 
            padding: 0; 
            background-color: #f0f0f0; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
        } 
  
        .coupon { 
            background-color: #fff; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
            border-radius: 5px; 
            padding: 20px; 
            max-width: 300px; 
            text-align: center; 
        } 
  
        .coupon img { 
            max-width: 100%; 
            height: auto; 
            border-radius: 5px; 
        } 
  
        .coupon h2 { 
            color: #008930; 
            margin-top: 10px; 
        } 
  
        .coupon p { 
            color: #777; 
            line-height: 1.5; 
            margin-top: 10px; 
        } 
  
        .coupon .code { 
            font-size: 24px; 
            color: green; 
            margin-bottom: 10px; 
        } 
  
        .coupon .expiration { 
            color: #e80c0c; 
            font-size: 14px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="coupon"> 
        <div class="logo"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                alt="GFG Logo"> 
        </div> 
  
        <h2>GFG Course Offer</h2> 
        <p> 
            Get <span class="code">SAVE60</span>  
            off your next course purchase! 
        </p> 
          
        <p> 
            Use code at checkout to  
            enjoy the discount. 
        </p> 
          
        <p>Expires: <span class="expiration"> 
            December 31, 2023</span> 
        </p> 
    </div> 
</body> 
  
</html>