CSS Coupon

In this example below you will see how to do a CSS Coupon with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by anitorious, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright anitorious ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Coupon</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="c-coupon">
  <h1>Manager's Toolkit + Manager's Insights<br/><strong>10% </strong><br/><a>Apply to Basket</a></h1>
  <div class="c-coupon__tearaway"></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/anitorious/css-coupon-XedWja */
html, body {
  background: #09f;
  color: #333;
  font-family: helvetica, sans-serif;
}

.c-coupon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #FFF;
  padding: 24px 128px 24px 64px;
  border-radius: 4px;
  transform-origin: 50% 50%;
}
.c-coupon:before, .c-coupon:after {
  content: '';
  display: block;
  position: absolute;
  height: 48px;
  width: 48px;
  background: #09f;
  border-radius: 64px;
  top: 50%;
}
.c-coupon:before {
  left: 0;
  transform: translate(-50%, -50%);
}
.c-coupon:after {
  right: 0;
  transform: translate(50%, -50%);
}

.c-coupon__tearaway {
  display: block;
  position: absolute;
  width: 80px;
  height: 100%;
  right: 0;
  top: 0;
  border-left: 8px dotted #CCC;
}

h1 {
  font-size: 18px;
  font-weight: 500;
}

Comments