Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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, After that comes with coupon code and a text representing when the coupon will expire.
Set the Parent Container for the Coupon
We gave set the parent cdiv here. Within this we will set 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;
}
Coupon Image
Place the coupon image using the <img> −
<img src="https://www.tutorialspoint.com/food_production_operations/images/non_citrus_fruits.jpg"/>
Container for the Details
This is the container for the rest of the content, including the coupon code, expiry date, etc −
<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>
The style for the details container −
.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 i.e., 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 code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
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;
}
.expiryDate {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="couponContainer">
<div class="detailContainer">
<h3>Food Inc ©</h3>
</div>
<img src="https://www.tutorialspoint.com/food_production_operations/images/non_citrus_fruits.jpg"/>
<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>
495 Views
