disappearing countdown timer

by Craig Haywood

HTML

<!-- Creat Countdown Timer -->
 <div style="max-width: 1092px; width: 100%; align-content: center; text-align: center; margin: auto" class="col-md-6 order-1 order-md-2 d-flex justify-content-center align-items-center" data-aos="fade-left">
     <img width="1000" height="850" loading="lazy" style="max-width: 1000px; width: 100%; height: auto" src="https://landingpages.reallysmart.art/img/pricedrop.webp" class="img-fluid" alt="">
 </div>
 <link href="https://fonts.googleapis.com/css2?family=Dosis:[email protected]&display=swap" rel="stylesheet">
 <div class="arrow_box"><br/>
YOURS<br/>FOR<br/>ONLY<br/><br/>
</div>
<div style="margin: auto; max-width: 800px; ">
<img style="text-align: center;" src="https://landingvideos.b-cdn.net/img/167.png"/>
</div>


<!-- only content between these lines are needed -->
<article class="clock" id="model3">
  <h3>Random Fast Action $20 Discount</h3>
  

  <div class="count">
    <div id="timer"></div>
  </div>
  <div style="font-size: 11px; color: white; ">
  <table style="margin-left: auto; margin-right: auto;">
  <tr>
    <td><img src="https://www.reallysmart.art/img/warning.png"/></td>
    <td>Do not move away or refresh this page.<br/>Discount coupon will not appear again.</td>
    <td><img src="https://www.reallysmart.art/img/warning.png"/></td>
  </tr>
</table>
  
  </div>
</article>
<!-- only content between these lines are needed -->


<div style="max-width: 755px; width: 100%; align-content: center; text-align: center; margin: auto" class="col-md-6 order-1 order-md-2 d-flex justify-content-center align-items-center" data-aos="fade-down">
    <img style="cursor: alias;"  width="755" height="140" loading="lazy" style="max-width: 755px; width: 100%; height: auto" src="https://landingpages.reallysmart.art/img/buynow.webp" class="img-fluid" alt="">
     <div style="max-width: 535px; width: 100%; align-content: center; text-align: center; margin: auto" class="col-md-6 order-1 order-md-2 d-flex justify-content-center...

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    font: normal bold 20px/normal tahoma;
}

article {
    max-width: 600px;
    text-align: center;
    background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 26%, rgba(226,50,3,1) 78%);
    margin: 10px auto 20px;
    padding: 15px;
    overflow: hidden;
    box-shadow: 3px 3px 10px #000;
    border-radius: 20px;
}

article h3 {
    padding: 10px;
    color: #333;
    text-shadow:  0 0 5px yellow, 0 0 10px yellow, 0 0 15px yellow, 0 0 20px yellow, 0 0 25px yellow;
    margin-bottom: 5px;
}
article .count {
    padding: 5px;
    font: normal bold 26px/normal tahoma;
}
article #timer{
    padding: 5px;
    color: red;
    background-color: yellow;
    border-radius: 6px;
    
}
.arrow_box {
	position: relative;
	font-weight: 800;
	border: 6px solid #de0209;
  width: 190px;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  font-family: "Dosis", sans-serif;
  text-align: center;
  border-radius: 16px;
  font-size: 55px;
  
text-shadow: #000 2px 2px 0;
color: #de0209;
background: #fff;
background: linear-gradient(0deg, rgba(255,255,255,1) 26%, rgba(254,228,199,1) 78%);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.95);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.95);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.95);
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(102, 102, 102, 0);
	border-top-color: #fff;
	border-width: 27px;
	margin-left: -27px;
  
}
.arrow_box:before {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #de0209;
	border-width: 36px;
	margin-left: -36px;
}

JavaScript

var sec         = 180,
    countDiv    = document.getElementById("timer"),
    secpass,
    countDown   = setInterval(function () {
        'use strict';
        
        secpass();
    }, 1000);

function secpass() {
    'use strict';
    
    var min     = Math.floor(sec / 60),
        remSec  = sec % 60;
    
    if (remSec < 10) {
        
        remSec = '0' + remSec;
    
    }
    if (min < 10) {
        
        min = '0' + min;
    
    }
    countDiv.innerHTML = "Expires in " + min + ":" + remSec + "<br/><span style='color: #000;'>Use Code: FAST20FRZ";
    
    if (sec > 0) {
        
        sec = sec - 1;
        
    } else {
        
        clearInterval(countDown);
        
        countDiv.innerHTML = 'Expired';
      document.getElementById("model3").style.display = "none";
        
    }
}