How to Create a HTML5 CSS3 Single Page Business Card - Free Download
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:
Comments
Post a Comment