DEV Community

Cover image for coming soon page for your website
ANISH SHETTY K
ANISH SHETTY K

Posted on

coming soon page for your website

This page is simple. Built on latest version of bootstrap and it is mobile and desktop friendly.
This page is made with the help of jquery counter library .

view full code at https://github.com/Anishshettyk/coming-soon-page

code for coming soon page.
code is simple and self explanatory

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coming soon page||</title>

    <!-- Vendor CSS Files -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="vendor/icofont/icofont.min.css" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <!-- ======= Header ======= -->
    <header id="header" class="d-flex align-items-center">
        <div class="container d-flex flex-column align-items-center">

            <h1>coming soon</h1>
            <h2>We're working hard on our website we will launch after,</h2>
            <div class="countdown d-flex justify-content-center lead" data-count="2020/12/11">
                <div>
                    <h3>%D</h3>
                    <h4>Days</h4>
                </div>
                <div>
                    <h3>%H</h3>
                    <h4>Hours</h4>
                </div>
                <div>
                    <h3>%M</h3>
                    <h4>Minutes</h4>
                </div>
                <div>
                    <h3>%S</h3>
                    <h4>Seconds</h4>
                </div>
            </div>

            <div class="subscribe">
                <h4>Subscribe now to get the latest updates!</h4>
                <form>
                    <div class="subscribe-form">
                        <input type="email" name="email" placeholder="Please enter your valid email ID"><input
                            type="submit" value="Subscribe">
                    </div>
                </form>
            </div>
            <h3 class="social-links-head">Follow us on</h3>

            <div class="social-links text-center">
                <a href="#" class="twitter"><i class="icofont-twitter"></i></a>
                <a href="#" class="facebook"><i class="icofont-facebook"></i></a>
                <a href="#" class="instagram"><i class="icofont-instagram"></i></a>
                <a href="#" class="whatsapp"><i class="icofont-whatsapp"></i></a>
                <a href="https://in.linkedin.com/" target="blank" class="linkedin"><i class="icofont-linkedin"></i></a>
            </div>

        </div>
    </header><!-- End #header -->

    <main id="main">
        <!-- Vendor JS Files -->
        <script src="vendor/jquery/jquery.min.js"></script>
        <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="vendor/jquery-countdown/jquery.countdown.min.js"></script>
        <!-- Template Main JS File -->
        <script src="js/main.js"></script>

</body>

</html>

css

body {
    font-family: "Open Sans", sans-serif;
    color: #000;

    background: #ff4b1f;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #1fddff, #ff4b1f);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #1fddff, #ff4b1f);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    background-size: cover;
    position: relative;
}

body::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(34, 34, 34, 0.1);
}

@media (min-width: 1024px) {
    body {
        background-attachment: fixed;
    }
}

a {
    color: #ff0000;
}

a:hover {
    color: #ff3333;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Raleway", sans-serif;
}

#main {
    position: relative;
}

#header {
    position: relative;
    width: 100%;
    padding: 100px 0;
    /* countdown */
}

#header h1 {
    margin: 0 0 10px 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 3px;
    border-bottom: 3px solid orangered;
    margin-bottom: 20px;

}

#header h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
    font-size: 22px;
}

#header .countdown {
    margin-bottom: 80px;
}

#header .countdown div {
    text-align: center;
    margin: 10px;
    width: 100px;
    padding: 20px 10px;
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
    background: rgba(255, 255, 255, 0.8);
    border-top: 5px solid orangered;
    border-bottom: 5px solid orangered;
}

#header .countdown div h3 {
    font-weight: 700;
    font-size: 44px;
    margin-bottom: 15px;
}

#header .countdown div h4 {
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 575px) {
    #header h1 {
        font-size: 30px;
    }

    #header h2 {
        font-size: 18px;
    }


    #header .countdown div {
        width: 70px;
        padding: 10px 0;
        margin: 10px 8px;
    }

    #header .countdown div h3 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    #header .countdown div h4 {
        font-size: 14px;
        font-weight: 500;
    }
}

#header .subscribe {
    font-size: 15px;
    text-align: center;
}

#header .subscribe h4 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    position: relative;
    padding-bottom: 12px;
}

#header .subscribe .subscribe-form {
    min-width: 300px;
    margin-top: 10px;
    background: #fff;
    padding: 6px 10px;
    position: relative;
    text-align: left;
}

#header .subscribe .subscribe-form input[type="email"] {
    border: 0;
    padding: 4px 8px;
    width: calc(100% - 100px);
}

#header .subscribe .subscribe-form input[type="submit"] {
    position: absolute;
    top: 0;
    right: -2px;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 20px;
    background: orangered;
    color: #fff;
    transition: 0.3s;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#header .subscribe .subscribe-form input[type="submit"]:hover {
    background: #ed3c0d;
    color: #fff;
}

#header .subscribe .error-message {
    display: none;
    color: #ed3c0d;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

#header .subscribe .sent-message {
    display: none;
    color: #18d26e;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

#header .subscribe .loading {
    display: none;
    text-align: center;
    padding: 15px;
}

#header .subscribe .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    -webkit-animation: animate-loading-notify 1s linear infinite;
    animation: animate-loading-notify 1s linear infinite;
}

@-webkit-keyframes animate-loading-notify {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-loading-notify {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.social-links-head {
    text-align: center;
    font-weight: 900;
    margin-top: 10px;
    color: #fff;
}

#header .social-links {
    margin-top: 0px;
}

#header .social-links a {
    font-size: 24px;
    display: inline-block;
    color: rgba(255, 255, 255);
    line-height: 1;
    padding: 10px;
    margin: 0 10px;
    text-align: center;
    transition: 0.3s;
    border-radius: 50%;
}

#header .social-links a:hover {
    color: #fff;
}

.twitter {
    background-color: #1DA1F2;
}

.facebook {
    background-color: #4267B2;
}

.instagram {
    background-color: #E1606c;
}

.whatsapp {
    background-color: #4AC959;
}

.linkedin {
    background-color: #2867B2;
}

@media (max-width: 575px) {
    #header .social-links a {
        font-size: 15px;
        padding: 7px;
        margin: 0 5px;
    }

}

jquery (js)

!(function ($) {
    "use strict";


    if ($('.countdown').length) {
        var count = $('.countdown').data('count');
        var template = $('.countdown').html();
        $('.countdown').countdown(count, function (event) {
            $(this).html(event.strftime(template));
        });
    }


})(jQuery);

Top comments (0)