DEV Community

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

Posted on

2 2

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);

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)