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 Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay