Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a \"coupon\" with CSS?
We will see how to create a coupon with CSS. For that, we need to set the company name on the top, an image below, followed by the coupon code and text representing when the coupon will expire.
Syntax
.coupon-container {
border: dashed;
border-radius: value;
width: percentage;
margin: auto;
}
Set the Parent Container for the Coupon
We set the parent div here. Within this we will place the divs for the text, image, etc −
<div class="couponContainer"> <!-- place the child divs --> </div>
Style the parent container −
.couponContainer {
border: 5px dashed #bbb;
width: 80%;
border-radius: 15px;
margin: 0 auto;
max-width: 600px;
}
Set the Container for the Coupon Heading
Now, we will set the heading of the coupon −
<div class="detailContainer"> <h3>Food Inc ©</h3> </div>
Style the container for the coupon heading −
.detailContainer {
padding: 2px 16px;
background-color: #d4d4d4;
}
Set the Styles for the Promo and Expiry Date
Here, we have set the CSS styles for our promocode text and the expiry date when the coupon code will expire −
.promo {
background: rgb(104, 104, 104);
color: white;
padding: 10px;
}
.expiryDate {
color: red;
font-weight: bold;
}
Example
To create a coupon with CSS, the complete code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
img {
width: 100%;
}
.couponContainer {
border: 5px dashed #bbb;
width: 80%;
border-radius: 15px;
margin: 0 auto;
max-width: 600px;
}
.detailContainer {
padding: 2px 16px;
background-color: #d4d4d4;
}
.promo {
background: rgb(104, 104, 104);
color: white;
padding: 10px;
border-radius: 5px;
display: inline-block;
font-weight: bold;
}
.expiryDate {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="couponContainer">
<div class="detailContainer">
<h3>Food Inc ©</h3>
</div>
<img src="/food_production_operations/images/non_citrus_fruits.jpg" alt="Fresh fruits"/>
<div class="detailContainer" style="background-color:white">
<h2>Fruits</h2>
</div>
<div class="detailContainer">
<p>Use code <span class="promo">Free24</span> to get 24% off</p>
<p class="expiryDate">Expires in 10 days</p>
</div>
</div>
</body>
</html>
A coupon card with dashed border appears, containing: - Company header "Food Inc ©" with gray background - A fruits image spanning the width - "Fruits" title on white background - Promo code "Free24" in dark box with white text - Red expiry text "Expires in 10 days"
Conclusion
Creating a CSS coupon involves using dashed borders, proper padding, and styled containers. The promo code stands out with contrasting colors while the expiry date uses red text to grab attention.
949 Views
