Table of Contents
Have you ever wanted to build simple coming soon page? And, what coming soon page with working countdown? This short and easy tutorial will help you achieve both. We will start with outlining simple HTML structure. Then, we will add custom CSS to add some style and sparkle to our coming soon page. Finally, we will add a few lines of JavaScript to make the countdown work. Now, it is time to build your coming soon page!
Demo is available on Codepen.
Briefing
As mentioned, the subject of this tutorial will be building simple coming soon page with working countdown. This project will require only minimum amount of resources. In the terms of CSS and fonts, I used two assets. The first one is font Montserrat provided by Google Fonts for body copy. The second is Font Awesome for icons used in the footer. And, when it comes to JavaScript, I used two, Autoprefixer plugin and Babel compiler. That’s all. We are ready to go.
HTML
The whole coming soon page will be composed of three main parts. These parts will be header, main content and footer. Inside the header will be simple SVG image. It will be a placeholder for a logo you may want to use on your coming soon page. The main content will contain h1 heading, countdown, paragraph of text and simple form that will allow people to subscribe for notifications. Finally, footer will contain list with five links to social media, Github and Dribbble.
The majority of the HTML will be quite simple and short. Even the countdown component will have very simple structure. We will use one container with class “countdown”. This container will contain four boxes. One for days, one for hours, one for minutes and one for seconds. Each of these boxes will contain div inside which we will render the numbers. We will give this div class “number”. Then, there will be span with text to specify what time unit the number is.
As I mentioned, footer will contain list with five links. So, we will use five list items with anchor tag in each. And, each of these anchor tags will also contain span. We will use this span as a placeholder for icons provided by Font Awesome. A lot of people use i tag for these icons. I think that spans are a better choice. i tag defines text in an alternate voice or mood. And, it is also usually displayed in italic. Icons don’t have alternate voice or mood. And, they don’t need italics. Spans are neutral, just like icons. Let’s create the HTML structure for our coming soon page.
Code:
<div class="wrapper">
<header>
<svg class="header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 318.5 100 125" enable-background="new 0 318.5 100 100"><path d="M88.888 349.937c-.109-.298-.405-.481-.718-.463-5.109.383-11.558.865-18.163 1.358l9.538-12.475c.182-.237.195-.563.033-.814-.162-.25-.46-.376-.756-.307-6.694 1.549-38.692 8.971-43.12 10.304l-6.457-5.539c-.108-.093-.241-.15-.382-.166l-6.908-.774-.053.006-.167.018-.126.032-.044.012-10.098 4.926c-.244.119-.398.366-.398.638 0 .271.155.518.399.637l10.442 5.075.226 3.224.007.024-.001.026 2.333 16.271.012.042.02.066.079.17.033.052.184.169.008.007.019.005.141.066 19.376 5.903 5.754 3.548 1.262 2.943-2.657 14.021c-.04.212.019.431.159.594.135.157.332.247.538.247l.025-.001c.154-.006 15.421-.557 16.007-.572.221-.006.45-.129.579-.308.243-.335.609-.843-4.467-17.763l-.05-.094-.026-.075c-.375-.606-3.278-5.282-4.554-7.092l31.722-23.125c.257-.187.358-.52.249-.816zm-20.773 1.036c-14.051 1.048-28.297 2.104-31.539 2.321l-.293-4.463c3.457-1.007 25.228-6.127 40.94-9.77l-9.108 11.912zm-17.659 29.556l-4.189-2.583 7.808-2.803-3.619 5.386zm-26.808-24.333l10.913-1.279-8.965 14.862-1.948-13.583zm12.112-.522l7.724 21.011-17.23-5.25 9.506-15.761zm-7.272-12.455l6.365 5.46.312 4.74-11.666 1.368-.856-12.224 5.845.656zm-15.092 3.47l7.845-3.827.554 7.909-8.399-4.082zm36.868 51.644l2.459-12.979 7.688-3.065c1.93 6.464 3.891 13.442 4.275 15.528-2.614.09-11.537.412-14.422.516zm2.215-14.407l-1.011-2.36 4.459-6.637c.893 1.301 2.583 3.965 3.894 6.069l-7.342 2.928zm3.106-10.83l-10.522 3.777-8.154-22.182c6.186-.423 39.375-2.906 48.886-3.618l-30.21 22.023z"/></svg>
</header>
<main class="content">
<h1>COMING SOON!</h1>
<div class="countdown">
<div class="countdown__days">
<div class="number"></div>
<span class>Days</span>
</div>
<div class="countdown__hours">
<div class="number"></div>
<span class>Hours</span>
</div>
<div class="countdown__minutes">
<div class="number"></div>
<span class>Minutes</span>
</div>
<div class="countdown__seconds">
<div class="number"></div>
<span class>Seconds</span>
</div>
</div>
<p>Our website is under construction. We`ll be here soon<br />with our new awesome site. Subscribe to be notified.</p>
<form action="">
<input id="form-email" name="form-email" type="email" placeholder="Your email address" />
<input type="submit" value="Notify me" />
</form>
</main>
<footer>
<ul class="footer__links">
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
<li><a href="#"><span class="fa fa-google-plus"></span></a></li>
<li><a href="#"><span class="fa fa-github"></span></a></li>
<li><a href="#"><span class="fa fa-dribbble"></span></a></li>
</ul>
</footer>
</div>
CSS (Sass)
HTML part is complete. Now, we have to add some style to spice up our coming soon page. First, we will take care about the outermost elements such as html, body and wrapper div. We want the coming soon page to be full-height. So, we will need to select all these three elements and set their height to “100%”. Then, we will remove any default padding and margin from html and body elements. We can also change the font-size and font-family.
Finally, we can add some nice background to the wrapper div, along with subtle dark overlay. I chose photo from Unsplash, made by Anders Jildén. How to create the dark overlay? We will use :before pseudo-element to create a full-width and full-height layer which we will lay over the wrapper. In order to render this layer, we will need to set content to “”. Then, we will need to set its position to “absolute” and top and left to “0”. Finally, we will add a semi-transparent background.
Code:
html,
body,
.wrapper {
height: 100%;
}
html,
body {
padding: 0;
margin: 0;
}
body {
font: 1rem / 1.516 'Montserrat', Arial, sans-serif;
}
.wrapper {
position: relative;
background: url(https://source.unsplash.com/vZlTg_McCDo/1920x1080) no-repeat center center / cover;
// Dark overlay
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(33, 33, 33, .25);
}
}
Styles for the main parts and header
It is time to get to the meat of our coming soon page–header, content and footer. All these components will have one thing in common. They all will be positioned “absolutely”. This will give us a lot of flexibility without the need to use flexbox. Don’t get me wrong. There is nothing bad with flexbox. It is great to solve some of the biggest pains in web design very quickly. I love to use it whenever I can. However, I want this coming soon page to work in older browsers, even IE8 and 9.
Flexbox is not supported in these old browsers. So, I decided to stick to “old school” techniques and use position property set to “absolute”. When you set position of some block element to “absolute”, it’s width collapse to the width of the content. We want the header and footer to be full-width. So, we have to set the width to “100%”. Next, we will push the header to the top and center its content (logo). Lastly, we can change the fill color of logo and make it smaller.
Code:
header,
.content,
footer {
position: absolute;
}
header,
footer {
width: 100%;
}
header {
top: 0;
text-align: center;
}
.header__logo {
max-width: 65px;
fill: #fff;
}
Styling the content
After finishing the header, next part of our coming soon page is main content. We will center the content horizontally and vertically using top, left and transform combo. Let’s also center the text and use white color to make it more visible on dark background of the overlay. We should also remove default top margin of the heading. Otherwise, the content will not be precisely in the middle of our coming soon page.
Next on the list is styling the form. I decided to use email and submit inputs sitting next to each other without any space between them. To achieve this, we will use float and set it to “left”. The downside is that it will cause the form to collapse. One way to avoid this is by setting form’s display property to “table”. We should also center the form with margin set to “auto” to align it correctly. For inputs, let’s make sure the font-size is “16px”. We can also use more contrasting border.
For the email input, I decided to use white background. The background of button will be transparent–ghost button. Both input elements will have slightly rounded borders, 4 pixels will be enough. And, we should also use some padding to add a bit of inner white space. When someone hover over the button, it will change its background to white and color to black. We can make this change smoother with transition.
Code:
.content {
top: 50%;
left: 50%;
text-align: center;
color: #fff;
transform: translate(-50%, -50%);
h1 {
margin-top: 0;
}
form {
margin: auto;
display: table;
}
input {
float: left;
font-size: 16px;
border: 1px solid #fff;
}
input[type=email] {
padding: 12px;
background: #fff;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
input[type=submit] {
padding: 12px 24px;
color: #fff;
background: transparent;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
transition: all .235s ease-in-out;
&:hover {
color: #212121;
background: #fff;
}
}
}
Styling the countdown
The last piece of the main content of our coming soon page is the countdown. Styling it will be relatively easy job. First, we need to float boxes for time data to make sure all boxes are on a single line. We will need to use the trick with display set to “table” we used on form. Otherwise, countdown would collapse. We should also center the countdown so it is aligned with the rest of the content. To make it more dominant, let’s increase the font-size and font-weight of the content.
Now, we are free to float the divs for time data. These divs will contain the numbers. And, we should use some min-width to make the size of each box the same. The last piece of this countdown component are span elements with legend for the countdown. These span elements will be under the numbers (divs). This means we will need to change the display property to “block”. Next, let’s make the legend more subtle by decreasing its font-size. Also, let’s center it.
We can make the countdown more aesthetically pleasing by adding subtle divider between the numbers and legend. This can be achieved using :before pseudo-element of the spans. First, we need to set the position of spans to “relative”. In order to render the :before pseudo-element, we need to again use content set to “”. Then, we will create flat rectangle using width and height and set its background to white. Finally, let’s play a bit with top, right, left and margin to position it.
Code:
.countdown {
margin: auto;
display: table;
font-size: 28px;
font-weight: 500;
> div {
float: left;
min-width: 80px;
}
span {
position: relative;
display: block;
font-size: 16px;
text-align: center;
&:before {
content: '';
position: absolute;
top: -2px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
width: 20px;
height: 1px;
background: #fff;
}
}
}
The last part or component of our coming soon page is footer. This will be also very quick and easy job since footer contain only small amount of content. First, let’s push the footer to the bottom of the page by using bottom property set to “0”. Well, some space below the footer could be better. So, let’s add some slight padding. Next, let’s center the links in the list and remove the default bullets. And, we should set display to “inline-block” to put all list items on a single line.
This can be also achieved by using floats or flexbox. However, we already used floats a lot through this tutorial. Also, floats would require adding the “display fix”. And, for flexbox? We discussed this already. So, display set to “inline-block” is the simplest solution. We should also add some space between individual list items with margin. Next are links inside list items. We will create circular icons with the same width. Combo of display, padding, width and border-radius will do the job.
I came up with the values for padding by trying different values and seeing which one will fit the width–create perfect circle. One thing. We should center the text inside the links. After that, we can add slight white border around the icons and change their color to white. For hover effect, let’s decrease the opacity of links to “.5”. And, we can make this effect smoother with transition.
Finally, we can increase the size of icons, by changing font-size of icons, and align them to the middle vertically. This is all when it comes to styles.
Code:
footer {
padding-bottom: 12px;
bottom: 0;
}
.footer__links {
text-align: center;
list-style-type: none;
li {
display: inline-block;
&:nth-of-type(n+2) {
margin-left: 12px;
}
}
a {
padding: 8px 0;
display: block;
width: 41px;
text-align: center;
color: #fff;
border: 1px solid;
border-radius: 50%;
transition: opacity .235s ease-in-out;
&:hover {
opacity: .5;
}
}
.fa {
vertical-align: middle;
font-size: 21px;
}
}
JavaScript
The last piece of the puzzle, or our coming soon page, is making the countdown work. To do so, we will use setInterval() method with Date object. A relatively high number of web designers don’t like math. Well, this is going beyond web design. So, in order to make this tutorial easier and faster I will not dive into the math necessary for the countdown. Instead, I will simply give you the equations. However, we will need to add some code before that.
First, lets specify the deadline date and store it inside a const. Then, we can cache all the placeholder countdown boxes into consts as well. Next, we create new interval, using setInterval() method, that will repeat every one second. Inside this interval, we will always want to find out what is current date and time. Then, we will use this data and deadline date to find the distance between these two numbers. We will subtract these numbers.
After this comes the time for our magical equations to calculate the data for remaining days, hours, minutes and seconds. Finally, we will use our consts from the beginning and innerHTML to insert the data into the HTML. And, since this interval should repeat every second, we will set the delay parameter to “1000” (1000 milliseconds).
Code:
(() => {
// Specify the deadline date
const deadlineDate = new Date('December 31, 2017 23:59:59').getTime();
// Cache all countdown boxes into consts
const countdownDays = document.querySelector('.countdown__days .number');
const countdownHours= document.querySelector('.countdown__hours .number');
const countdownMinutes= document.querySelector('.countdown__minutes .number');
const countdownSeconds= document.querySelector('.countdown__seconds .number');
// Update the count down every 1 second (1000 milliseconds)
setInterval(() => {
// Get current date and time
const currentDate = new Date().getTime();
// Calculate the distance between current date and time and the deadline date and time
const distance = deadlineDate - currentDate;
// Calculations the data for remaining days, hours, minutes and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Insert the result data into individual countdown boxes
countdownDays.innerHTML = days;
countdownHours.innerHTML = hours;
countdownMinutes.innerHTML = minutes;
countdownSeconds.innerHTML = seconds;
}, 1000);
})();
Closing thoughts on building simple coming soon page
Great job! You’ve just built simple coming soon page with working countdown! I hope you enjoyed this tutorial. I also hope that you have learned something new, something you will be able to use in your next project. In the end, it wasn’t that hard. Well, maybe the math, but I’m sure you handled it with ease. Again, congrats to great job, and, until the next week, have a great time!
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
