Bootstrap Snippet Coming Soon Counter Snippet using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 ---------->
<div class="container mt-5">
            <div class="row pt-5">
                <div class="col-md-6 mt-5 offset-md-3">
                    <div class="card counter-card">
                        <div class="card-header">
                            <h3>Countdown Timer</h3>
                        </div>
                        <div id="counter-div" class="card-body counter-card-body mt-3">                                                        
                           
                        </div>
                    </div>
                </div>
            </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.counter-card{
    border: none;
    height: 250px;
    text-align: center;
    border-radius: 10px;
    color:#566D7E;
    box-shadow:0px 2px 4px 3px #efefef;
    background: #e4e2de;
}
.card-header{
    background-color: #ffffff;
    border: none;
    background: #e4e2de;
}
.counter-card-body{
   display: flex; 
   margin: auto; 
}
#days-span{
    margin: auto;
    line-height: 5em;
    border: none;
    width: 80px;
    height: 80px;
    margin: 0px 3px;
    border-radius: 40px;
    background-color: #efefef;
    box-shadow: 1px 1px 4px 1px #fff;
    color: #566d7e;
    font-family: sans-serif;
    font-weight: 600;
}
@media (max-width: 800px) { 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var·countDownDate =·new·Date("Oct 16, 2020 15:37:25").getTime();
// Update the count down every 1 second
var·x = setInterval(function() {
··// Get today's date and time
··var·now =·new·Date().getTime();
··// Find the distance between now and the count down date
··var·distance = countDownDate - now;
··// Time calculations for days, hours, minutes and seconds
··var·days = Math.floor(distance /·(1000·*·60·*·60·*·24));   
··var·hours = Math.floor((distance % (1000·*·60·*·60·*·24)) / (1000·*·60·*·60));
··var·minutes = Math.floor((distance·% (1000·*·60·*·60)) / (1000·*·60));
··var·seconds = Math.floor((distance·% (1000·*·60)) /·1000);
··// Display the result in the element 
· $("#counter-div").html( "<p id=\"days-span\">" + days +·"d </p><p id=\"days-span\">"·+·hours +·"h </p><p id=\"days-span\">"
· + minutes +·"m </p><p id=\"days-span\">"·+ seconds +·"s </p>");
··// If the count down is finished, write some text
··if·(distance <·0) {
····clearInterval(x);
··· document.getElementById("demo").innerHTML·=·"EXPIRED";
· }
},·1000);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Coming Soon Counter Snippet"
Bootstrap 4.1.1 Snippet by Webcentcreations

Related: See More

Questions / Comments:

"Coming Soon Counter Snippet" Bootstrap 4.1.1 Snippet by Webcentcreations

Related: See More

Questions / Comments:

"Coming Soon Counter Snippet"
Bootstrap 4.1.1 Snippet by Webcentcreations