SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials How to Create a Minimalist Coming Soon Page in HTML5 and CSS3

How to Create a Minimalist Coming Soon Page in HTML5 and CSS3

On our last tutorial we created a coming soon page in photoshop. Today we will convert it to a fully working HTML5 and CSS3, and a little bit of Jquery for our timer. We can apply this when we have a newly acquired domain and we are still working on the design on our site.

How to Create a Minimalist Coming Soon Page in HTML5 and CSS3

Let's get down to business, open the PSD and we will crop those images that we will use on the page.

How to Create a Minimalist Coming Soon Page in HTML5 and CSS3

First is the background on the header, I grab the Crop Tool (C) and cropped a smaller part of the header. We will repeat this in CSS, save it as .png and named it bg

How to Create a Minimalist Coming Soon Page in HTML5 and CSS3

Next is the timer image, save it as png and name it timer.

You can download the files here.

You can view the demo here.

Now open your editor, mine is Dreamweaver. First thing that we will do is create the HTML before the CSS styling.

</pre>
<div id="wrapper">
<!-- wrapper -->
<div id="light"></div>
<article><!-- content -->
<div>
<h1>Landing Page</h1>
</div>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit Aenean commodo ligula eget dolor</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

<!--
Site Launch In

 -->
<div id="countdown">
<!-- countdown -->
<div>
<!-- .countdown_text -->
<div>
<!-- contactlist -->
<form>
<div><!-- newsletter -->
<input type="text" />
<input type="submit" value="Submit" /></div>
<!-- newsletter --></form></div>
<!-- contactlist --></div>
</div>
</article>
<!-- content --></div>
<pre>
<!-- wrapper -->

Next, we will download a couple of fonts that we will use as font-face.

Our folder structure should be like this:

We should practice to always organize our folders and files, here is what our fonts folder looks like:

As you can see, our fonts has it's own folder. We copied all the web fonts files and saved it in here from the downloaded fonts.

Next is the CSS, just copy the codes below and I'll explain those new to you.

@font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: 'Lobster13Regular';
src: url('fonts/Lobster_1.3-webfont.eot');
src: url('fonts/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Lobster_1.3-webfont.woff') format('woff'),
url('fonts/Lobster_1.3-webfont.ttf') format('truetype'),
url('fonts/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: 'CapsuulaRegular';
src: url('fonts/Capsuula-webfont.eot');
src: url('fonts/Capsuula-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Capsuula-webfont.woff') format('woff'),
url('fonts/Capsuula-webfont.ttf') format('truetype'),
url('fonts/Capsuula-webfont.svg#CapsuulaRegular') format('svg');
font-weight: normal;
font-style: normal;

}
/*  Main  */
body {
background:#FFF url(../images/bg.png) repeat-x;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#light{
width:980px;
height:436px;
margin:0 auto;
background:url(../images/light.png) no-repeat top;
z-index:1;
}
.content{
width:980px;
margin:-260px auto 0 auto;
}
.logo{
text-align:center;
}
.logo h1{
color:#fff;
text-shadow:0 1px 1px #000, 2px 5px 6px #093356;
font-family: 'Lobster13Regular';
font-size:55px;

}
.content h2{
font-family: 'BebasNeueRegular';
font-size:20px;
color:#fff;
text-shadow:0 1px 1px #093356;
text-align:center;
margin:30px 0 0 0;
}
.content p{
font-family: 'CapsuulaRegular';
line-height:1.4em;
color:#fff;
font-size:16px;
text-align:center;
margin:20px 0 0 0;
}
#countdown{
margin:60px auto 0 auto ;
background: url(../images/timer_bg.png) no-repeat center;
width:462px; height:96px;
color:#fff;

}
#countdown_dashboard {
height: 110px;
}

.dash {
width: 100px;
height: 114px;
float: left;
margin: 10px 0 0 15px;
position: relative;
}

.dash .digit {
color: #FFFFFF;
float: left;
font-family: 'BebasNeueRegular';
font-size: 45pt;
font-weight: bold;
position: relative;
text-align: center;
width: 35px;
}
.dash_title {
position: absolute;
display: block;
top: 60px;
left: 8px;
font-size: 9pt;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
}
/*contactlist*/
.contactlist{
width:400px;
margin:20px auto;
color:#3a3a3a;
}
.contactlist p{
color:#333;
margin-bottom:5px;
}.newsletter{
margin-left:50px;
}
.contactlist input[type="text"]{
float:left;
width:230px;
height:30px;
padding:3px;
color:#999;
font-style:italic;
border:1px solid #ccc;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
border-radius-topleft:5px;
border-radius-bottomleft:5px;
}
.contactlist input[type="submit"]{
background:#186ea5;
border:0;
color:#fff;
padding:10px 5px;
cursor:pointer;
margin:0;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-right-radius:5px;
border-radius-topright:5px;
border-radius-bottomright:5px;
}

Most of the stuff here are pretty self-explanatory, if you're not familiar with CSS3 I used a couple of them, like the double text-shadow (  text-shadow:0 1px 1px #000, 2px 5px 6px #093356;) and a couple of drop shadow and border radius.

Moving on, we have a timer on our coming soon page. We will use Jquery on this one, I found a really neat tutorial that does that. You can find it here, I suggest that you download the jquery.lwtCountdown-1.0.js. Save the file on our js folder and insert the HTML on our page.

</pre>
<div>
<!-- .countdown_text -->
<div id="countdown_dashboard">
<div><span>days</span>
<div>0</div>
<div>0</div>
</div>
<div><span>hours</span>
<div>0</div>
<div>0</div>
</div>
<div><span>minutes</span>
<div>0</div>
<div>0</div>
</div>
<div><span>seconds</span>
<div>0</div>
<div>0</div>
</div>
</div>
<!-- countdown_dashboard --></div>
<pre>
<!-- .countdown_text -->

Insert this inside #countdown. Next is the script that we will put on the footer.

<script type="text/javascript" language="javascript">// <![CDATA[
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetDate: {
'day':         20,
'month':     11,
'year':     2012,
'hour':     11,
'min':         0,
'sec':         0
}
});

$('#email_field').focus(email_focus).blur(email_blur);
$('#subscribe_form').bind('submit', function() { return false; });
});
// ]]></script>

Just after the closing #wrapper, put this script. Also add this following on the header after css  styles link.

<script type="text/javascript" language="Javascript" src="js/jquery-1.4.1.js"></script><script type="text/javascript" language="Javascript" src="js/jquery.lwtCountdown-1.0.js"></script>

Make sure that you saved those files on js folder. You can check the page now, and see if the timer is working (I know it does! )

Like I said, you can use this on your personal project or client's website, no attribution required but linkback is always nice

subscribe to newsletter