how to create a "coupon" with CSS.
• Create a container div element for the coupon.
• Apply CSS styles to the container div to set its size, background color, border, and position.
• Create a heading element to display the coupon title, and apply CSS styles to it to set its font size, font weight, and color.
• Create a paragraph element to display the coupon description, and apply CSS styles to it to set its font size, font weight, and color.
• Create a span element to display the coupon code, and apply CSS styles to it to set its font size, font weight, color, and background color.
• Use CSS positioning to place the span element inside the container div in a prominent location.
• Optionally, apply CSS hover effects to the container div to make it more visually appealing.
Here is an example code snippet to create a basic coupon using CSS:
code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;
}
.coupon {border: 5px dotted #bbb;
width: 80%;
border-radius: 15px;
margin: 0 auto;
max-width: 600px;
}
.container {padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {background: #ccc;
padding: 3px;
}
.expire {color: red;
}
</style>
</head>
<body>
<div class="coupon">
<div class="container">
<h3>Company Logo</h3>
</div>
<img src="Here is your image link" alt="Avatar" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>20% OFF YOUR PURCHASE</b></h2>
<p>Lorem ipsum dolor sit amet, et nam pertinax gloriatur. Sea te minim soleat senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea. In sed nullam laboramus appellantur, mei ei omnis dolorem mnesarchum.</p>
</div>
<div class="container">
<p>Use Promo Code: <span class="promo">BOH232</span></p>
<p class="expire">Expires: Jan 03, 2021</p>
</div>
</div>
</body>
</html>
Note that you can customize the CSS styles to suit your needs and preferences.
Rate this article
Getting Info...