"test"
Bootstrap 4.1.1 Snippet by Ganatantra Kumar

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" /> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700' rel='stylesheet' type='text/css'> <title>Scratch Card</title> <style type="text/css"> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .scratchpad{ width: 450px; height: 445px; border: solid 10px #FFFFFF; margin:0 auto; } body { background:#efefef; } .scratch-container { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width:100%; } @media only screen and (max-width : 480px) { .scratchpad {width:400px;height:396px;} .scratch-container {width:400px !important;} } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { .scratchpad {width:290px;height:287px;} .scratch-container {width:290px !important;} } .promo-container { background:#FFF; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:450px; padding:20px; margin:0 auto; text-align:center; font-family:'Open Sans', Arial,Sans-serif; color:#333; font-size:16px; margin-top:20px; } .btn { background:#56CFD2; color:#FFF; padding:10px 25px; display:inline-block; margin-top:15px; text-decoration:none; font-weight:600; text-transform:uppercase; border-radius:3px; -moz-border-radius:3px; -webkit-border-radiuss:3px; } </style> </head> <body> <div class="scratch-container"> <div id="promo" class="scratchpad"></div> </div> <div class="promo-container" style="display:none;"> <div class="promo-code"></div> <a href="htttp://jennamolby.com" target="_blank" class="btn">Register Now</a> </div> <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://jennamolby.com/scratch-and-win/js/wScratchPad.min.js"></script> <script type="text/javascript"> var promoCode = ''; var bg1 = 'https://appboy-images.com/appboy/communication/assets/image_assets/images/600ef50256029006af7076ad/original.png?1611592962'; var bg2 = 'https://appboy-images.com/appboy/communication/assets/image_assets/images/600ef4fd078b9d38e7c5b6a4/original.png?1611592957'; var bg3 = 'https://appboy-images.com/appboy/communication/assets/image_assets/images/600ef4f067b9de598487ddc5/original.png?1611592944'; var bgArray= [ bg1, bg2, bg3 ], selectBG = bgArray[Math.floor(Math.random() * bgArray.length)]; if (selectBG == bg1) { promoCode = 'SCRATCH400'; } else if (selectBG == bg2) { promoCode = 'SCRATCH500'; } if (selectBG == bg3) { var promoCode = ''; } $('#promo').wScratchPad({ // the size of the eraser size : 70, // the randomized scratch image bg: selectBG, // give real-time updates realtime : true, // The overlay image fg: 'https://appboy-images.com/appboy/communication/assets/image_assets/images/600ef6c7ef5b9f4d1c9fabf3/original.png?1611593415', // The cursor (coin) image 'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png") 5 5, default', scratchMove: function (e, percent) { // Show the plain-text promo code and call-to-action when the scratch area is 50% scratched if ((percent > 50) && (promoCode != '')) { $('.promo-container').show(); $('body').removeClass('not-selectable'); $('.promo-code').html('Your code is: ' + promoCode); } } }); </script> </body> </html>

Related: See More

Rotating CSS Card

Questions / Comments: