Horje
Create a Coupon using HTML and CSS

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>

Output:

coupon


 


Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
KBC Game in C++ KBC Game in C++
How To Remove Comments In Google Docs How To Remove Comments In Google Docs
How to Create Survey in Google Forms (8 Easy Steps) How to Create Survey in Google Forms (8 Easy Steps)
How To Remove Table Lines In Google Docs How To Remove Table Lines In Google Docs
How To Create Qr Code For Google Form How To Create Qr Code For Google Form

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje