Coming Soon Style 1

HTML

<section class="count-down-section">
        <div class="cms-container">
            <div class="cms-row">
                <div class="cms-col">
                    <div class="cms-countdown-timer">
                        <h1 class="cms-title">
                            Hang on tight!! <br> Something Exciting is on its way!!
                        </h1>
                        <h3 class="cms-subtitle">
                            We are excited to announce that we will be launching our all new website with better features and we can't wait to dhare the new platform with you.
                        </h3>
                        <div class="cms-timer" id="countdown">
                            <ul class="cms-count-list" style="list-style-type:none;">
                                <li class="cms-count cms-count-days">
                                    <span class="cms-count-number" id="days"></span>
                                    <span class="cms-date">Days</span>
                                </li>
                                <li class="cms-count cms-count-hrs">
                                    <span class="cms-count-number" id="hours"></span>
                                    <span class="cms-date">Hours</span>
                                </li>
                                <li class="cms-count cms-count-min">
                                    <span class="cms-count-number" id="minutes"></span>
                                    <span class="cms-date">Minutes</span>
                                </li>
                                <li class="cms-count cms-count-sec">
                                    <span class="cms-count-number" id="seconds"></span>
                                    <span class="cms-date">Seconds</span>
                                </li>
                            </ul>
                        </div>
                        <h4 class="cms-subscribe-title">
                            Be the First to hear from us
                        </h4>
                        <form action="" class="cms-subscribe-form">
                            <input type="email" id="cms_subscribe_email" name="email" placeholder="Enter your email...">
                            <input type="submit" value="Notify Me">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS

.count-down-section{
        background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/10/section-count-bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 100vh;
        filter: brightness(-1);
        
}
.cms-container {
        display: flex;
        height: 100%;
        align-items: center;
        backdrop-filter: blur(2px);
    justify-content:center;
}
.cms-title {
        font-family: 'Poppins';
        font-size: 50px;
        color: #fff;
        font-weight: 600;
        text-align: center;
        line-height: 1.2;
        margin-block: 0.5em;
}
.cms-subtitle {
        font-family: 'Poppins';
        font-size: 20px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        margin: auto;
        line-height: 1.6;
        width: 50%;
    }
.cms-count-list {
        display: flex;
        border: 2px solid #fff;
        max-width: 610px;
        padding: 30px;
        border-radius: 15px;
        margin: 35px auto;
        background: #b9b9b942;
        width: 100%;
        justify-content: center;
        backdrop-filter: blur(2px);
}
.cms-count {
        display: grid;
        margin-inline: 30px;
        text-align: center;
        color: #fff;
}
.cms-count-number{
        font-size: 36px;
        font-family: 'Poppins';
        line-height: 1.2;
        font-weight: 700;
}
.cms-date {
        font-size: 24px;
        font-family: 'Poppins';
        line-height: 1.2;
        text-align: center;
        font-weight: 500;
}
.cms-subscribe-form {
    text-align: center;
    display: flex;
    justify-content: center;
}
.cms-subscribe-title{
        font-family: 'Poppins';
        font-size: 20px;
        font-weight: 400;
        text-align: center;
        line-height: 1.2;
        color: #fff;
        margin-block: 10px;
}
input#cms_subscribe_email {
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        border: 2px solid white;
        width: 300px;
        height: 60px;
        font-size: 16px;
        background: #b9b9b942;
        color: #fff;
        outline: transparent;
        backdrop-filter: blur(2px);
}
#cms_subscribe_email::placeholder{
        color: #fff;
        font-size: 20px;
}
.count-down-section input[type="submit"] {
        background: transparent;
        border: 0px solid transparent;
        font-family: 'Poppins';
        font-size: 16px;
        outline: transparent;
        margin: 10px;
        padding: 6px 15px;
        border: 2px solid #fff;
        background: #fff;
        border-radius: 5px;
        transition: 0.5s;
        width: max-content;
       
        color: #000000
}
.count-down-section input[type="submit"]:hover {
        background:#b9b9b942;
        color: #fff;
        backdrop-filter: blur(2px);
}
@media(max-width:912px){
        .cms-title{
                font-size: 42px;
        }
        .cms-count{
                margin-inline: 15px;
        }
        .cms-subtitle{
                width: 100%;
        }
        .cms-date {
                font-size: 20px;
        }
}
@media(max-width:480px){
        .cms-count-list{
                padding: 30px 15px;
            width: 85%;
            
        }
        .cms-title {
                font-size: 30px;
            }
        .cms-subtitle {
            font-size: 16px;
            }
        .cms-count-number {
                line-height: 1.2;
            }
        .cms-subscribe-title{
                font-size: 16px;
        }
        .cms-count {
                margin-inline: 8px;
            }
        .cms-date {
                font-size: 14px;
            }
    input#cms_subscribe_email{
    margin: 10px auto;
    }
    .cms-subscribe-form{
        display: block;
    }
    
}

JS

jQuery(document).ready(function(){
    
   (function(){
    const second= 1000,
          minute = second * 60,
          hour = minute * 60,
          day = hour * 24;

    let today = new Date(),
        dd = String(today.getDate()).padStart(2, "0"),
        mm = String(today.getMonth() + 1).padStart(2, "0"),
        yyyy = today.getFullYear(),
        nextYear = yyyy + 1,
        // MM/DD format
        dayMonth = "01/01/",
        targetDate = dayMonth + yyyy;
    
    today = mm + "/" + dd + "/" + yyyy;
    if (today > targetDate) {
        targetDate = dayMonth + nextYear;
    }

    const countDown = new Date(targetDate).getTime(),
        x = setInterval(function(){

            const now = new Date().getTime(),
                  distance = countDown - now;
            
            document.getElementById("days").innerText = Math.floor(distance / (day)),
            document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
            document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
            document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
        }, 0)
}());
    
});

Links

<!-- fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

    <!-- fonts awosome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- jquery    -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />    

    <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css"/>

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
        integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Coming Soon Style 1

Hang on tight!! Something Exciting is on its way!!

We are excited to announce that we will be launching our all new website with better features and we can't wait to dhare the new platform with you.

Be the First to hear from us

HTML

CSS

JS

Links

Scripts

Hang on tight!!
Something Exciting is on its way!!