TUDOR ANGHELINA

Build a beautiful, single page Business Card using HTML5 and CSS3

Demo Download


1. First, open your favourite text editor and create a new HTML5 file. I am using Aptana Studio 3 which has the option to create a new file based on a predefined template.



If you are using a text editor which does not have this function you can use the code below. You can download exact code I am using at the beginning of this tutorial, here.

2. Find an image you would like to use as a background for your Single Page Business Card. I will use one of the free images from Subtle Patterns:



3. Add the following CSS code before the closing tag of your <header> tag:

body {
 background:#A6AB95;
 background-image:url(bg.jpg);
 background-repeat:repeat;
 text-align: center;
 display: block;
}

4. Your web-page should now look like this:



5. Add the following CSS code to create the Business Card box:

body {
 background:#A6AB95;
 background-image:url(bg.jpg);
 background-repeat:repeat;
 text-align: center;
 display: block;
}
.bcard {
 border: solid 1px rgba(255, 255, 255, 0.6);
 background: rgba(255, 255, 255, 0.5);
 margin-top: -110px;
 position: absolute;
 display: inline-block;
 width: 400px;
 height: 220px;
 top: 50%;
 margin-left: -200px;
 -webkit-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.4);
 box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.4);
}

We have now centered the Business Card div and added a semi-transparent background and border:


6. All that is left now is adding the Business Card details and a few decorative div tags at the top. You can download the final code at the beginning of this tutorial.

This is the result you should now have: