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)