Html

<html>
    <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>
      <script src="http://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>
      <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;}

 

 @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="https://www.kwiklearners.com" 
    target="_blank" class="btn">Register Now</a>
</div>
 

 
<script type="text/javascript">
 
var promoCode = '';
var bg1 = '.jpeg';
var bg2 = '.jpeg';
var bg3 = '.jpeg';
var bg4 = '.jpeg';

var bgArray= [ bg1, bg2, bg3, bg4 ],
selectBG = bgArray[Math.floor(Math.random() * bgArray.length)];
if (selectBG == bg1) {
    promoCode = 'SCRATCH400';
  } else if (selectBG == bg2) {
    promoCode = 'SCRATCH500';
}else if (selectBG == bg3) {
    promoCode = 'SCRATCH500';
  } if (selectBG == bg4) {
    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://jennamolby.com/scratch-and-win/images/overlay.png',
    // The cursor (coin) image
    'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png")
    
    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>

<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="https://www.kwiklearners.com" target="_blank" class="btn">Register Now</a> </div>

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;} @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>