@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