HTML5 Single Page Business Card

Story Horse?

Some time ago I saw this and decided to do my version.
A page “Business Card” using HTML5 and CSS3


<!DOCTYPE html>
<html lang="en">

<head>
	<title>IGFASOUZA HTML5 EXAMPLE</title>
	<meta name="author" content="Igor Souza">
	<style type="text/css" media="screen">
		body {
			background:#A6AB95;
			background-image:url(bg.jpg);
			background-repeat:repeat;
			text-align: center;
			display: block;
			font-family: Sans-Serif;
		}
		.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);
		}
		h1, h2 {
			float: left;
			width: 90%;
			text-align: left;
			margin: 15px 5% 0 5%;
			font-size: 24px;
			font-weight: 400;
			color:#333;
			text-shadow: 1px 1px 1px #FFFFFF;
		}
		h2 {
			font-size: 14px;
			margin-top: 3px;
			color: #666;
		}
		.border-top {
			float:left;
			border-top:solid 5px;
			margin:0;
		}
		.red {
			border-color:red;
			width:15%;
		}
		.white {
			border-color:white;
			width:30%;
		}
		.green {
			border-color:green;
			width:55%;
		}
		p {
			text-align: left;
			margin: 60px 5% 0 5%;
			width:90%;
			float: left;
			font-weight: 100;
			color: #444;
			font-size: 13px;
			text-shadow: 1px 1px 1px #FFFFFF;
		}
		.mail {
			margin-top:0;
		}
		a{
			text-decoration:none;
			text-shadow: 1px 1px 1px #FFFFFF;
			color:#444;
		}
		footer{
			margin-top:203px;
			width:100%
		}
		footer a {
			bottom: 0;
			margin: 3px 3% 0 0;
			float: right;
			text-align: right;
			display: block;
			font-size: 10px;
		}
	</style>
</head>

<body>
	<div class="bcard">
			
		<header>
			<h1>Igor F. Aragao de Souza</h1>
			<h2>
				Java Web Developer
			</h2>
		</header>
		<p>
			(+353) 087 216 1413
		</p>
		<p class="mail">
			<a href="mailto:igfasouza@gmail.com">igfasouza@gmail.com</a>
		</p>
		<footer>
			<a href="https://plus.google.com/106596329673506031681/posts" target="blank">google +</a>
			<a href="https://twitter.com/Igfasouza" target="blank">twitter</a>
			<a href="https://www.facebook.com/igfasouza" target="blank">facebook</a>
		</footer>
	</div>
</body>
</html>

Business Card Page

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s