@import url("https://fonts.googleapis.com/css2?family=poppins:wght@300;400;500;600&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}
.container{
width: 100%;
height: 100vh;
background: #f0fff3;
display: flex;
align-items: center;
justify-content: center;
}
.coupon-card{
background: linear-gradient(135deg,#7158fe, #9d4de6 );
color: #fff;
text-align: center;
padding: 40px 80px;
border-radius: 15px;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0,0.15 );
position: relative;
}
.logo{
width: 100px;
border-radius: 8px;
margin-bottom: 20px
}
.coupon-card h3{
font-size: 28px;
font-weight: 400;
line-height: 40px;
}
.coupon-card p{
font-size: 15px;
}
.coupon-row{
display: flex;
align-items: center;
margin: 25px auto;
width: fit-content;
font-size: 15px;
}
#cpncode{
border: 1px dashed #fff;
padding: 10px 20px;
border-right: 0;
}
#cpnbtn{
border: 1px solid #fff;
background: #fff;
padding: 10px 20px;
color: #7158fe;
cursor: pointer;
}
.circle1,.circle2{
background: #f0fff3;
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.circle1{
left: -25px;
}
.circle2{
right: -25px;
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter