So finally, here is the code and tutorial about the personal website Ecard template. You can use it as you wish, sell it, delete it, modify it, whatever! You can see the the personal webpage ecard template here.

The css is not that complex so I will focus on the HTML and Javascript. I will follow “read from above” process, which means I will explain the code as it is seen (from top to bottom).

I am using HTML5 Boilerplate (for obvious reasons)

If you search you will find the following code

  <title></title>

Between those tags you should add your name and your specialization. That is a great way of ranking your personal website high on SEO. So the code after your modification will look like this with your name and profession instead:

  <title>Stavros Ferkadis - Information Services Professional and Web Producer</title>

Pretty easy huh? The javascript below is the code that handles our navigation menu. It’s pretty much straightforward. Whenever you click a link at the navigation bar you carry a variable (from 0 to 2 for this occasion) which specifies where you would like to navigate (0 for home, 1 for portfolio and 2 for about section). We call this class in an onclick event at the links.

function toggle(x)
	{

		if(x ==0)
		{
			$("#about").hide();
			$("#connect").show('4000');
			$("#portfolio").hide();
		}
		if(x == 1)
		{
			$("#about").hide();
			$("#connect").hide();
			$("#portfolio").show('4000');
		}
		if(x == 2)
		{
			$("#about").show('4000');
			$("#connect").hide();
			$("#portfolio").hide();

		}

Great! The Javascript that follows is the code that handles that little box when you hover (when you have your mouse over) on the social links (Facebook, LinkedIn). This one is also simple, it just creates the span on mouseover and removes it on mouseout for the Internet Explorer browser. The span is styled in a way that it is shown below the links.

$(function() {
		if ($.browser.msie && $.browser.version.substr(0,1)<7)
		{
		  $('.tooltip').mouseover(function(){
				$(this).children('span').show();
			  }).mouseout(function(){
				$(this).children('span').hide();
			  })
		}
	  });

Now, it’s time to go into the body. What I love is that the code at the body is very short, which gives flexibility in enhancing and altering the looks of it! The first div is the header that also includes the name and your image. Notice that your name should be in <h1> tags and your profession in <h2> for SEO. You can put your image directly from facebook (Copy Image Location) as I did in order to save some kilobytes of bandwidth (oh well!)

<div id="header">
	<div id="name">
		<img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/153/351/0c65588.jpg" alt="profile picture"/>
		<h1>Stavros Ferkadis</h1>
		<h2>Information Services Professional and Web Producer</h2>
	</div>
</div>

What follows is the navigation menu. As said earlier, we trigger an onclick event which handles the navigation menu. All you have to do is decide how many items you want at your menu, specify a unique number for each and then trigger them appropriately at your Javascript by passing the unique numbers through the onclick event.

<div id="menu">
	<a href="#" onclick="toggle(0)" class="blue large button">Connect</a>
	<a href="#" onclick="toggle(1)" class="blue large button">Portfolio</a>
	<a href="#" onclick="toggle(2)" class="blue large button">About</a>
</div>

FInally, we have our content div. This div contains all the other divs of your website that have some information to show (Home, Portfolio etc). So you pretty much place what ever you want between this div and it will show at the tab you want it to show.

<div id="content">
	<div class="tabs" id="connect">
		<div id="links">
			<a class="social tooltip" href="http://www.facebook.com/stavros.ferk" target="_blank" ><img src="img/fb.png" alt="Stavros Ferkadis Facebook"/><span>Stavros Ferkadis Facebook</span></a>
			<a class="social tooltip" href="http://www.linkedin.com/in/sferkadis" target="_blank" ><img src="img/linked.png" alt="Stavros Ferkadis LinkedIn"/><span>Stavros Ferkadis LinkedIn</span></a>
		</div>
	</div>
	<div class="tabs" id="portfolio">
		Portfolio coming soon!  
	</div>
	<div class="tabs" id="about">
		<p>In an attempt to expand my social connections I created this mini-site. You are free to download the theme and alter it for your personal use.</p>
                <p>Download the theme <a href="#">here</a></p>
         </div>
</div>

Well, that’s all the HTML there is! Now about the CSS, if you don’t like the blue, you can always change it. Currently it’s a CSS3 gradient. If you want to change it, check the code below and alter it according to your needs at the style.css file.

In order to change the background colour alter the following background property.

html
{
	height:100%;
	background: rgb(238,238,238); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */
        background: linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

If you want to alter the colour of the header here is the code you should alter:

#name
{
	margin:auto;
	margin-top:5%;
	height:120px;
	text-align:center;
	color: #fff;
	border: 2px dashed #ddd;
	text-shadow: -1px -1px #000;
	position:relative;
	width:75%;
	-moz-box-shadow: 0 0 0 4px #3f4c6b, 2px 1px 4px 4px rgba(10,10,0,.5);
	-webkit-box-shadow: 0 0 0 4px #3f4c6b, 2px 1px 4px 4px rgba(10,10,0,.5);
	box-shadow: 0 0 0 4px #3f4c6b, 2px 1px 6px 4px rgba(10,10,0,.5);
	background: #3f4c6b; /* Old browsers */
background: -moz-linear-gradient(top,  #3f4c6b 0%, #3f4c6b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f4c6b), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #3f4c6b 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #3f4c6b 0%,#3f4c6b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #3f4c6b 0%,#3f4c6b 100%); /* IE10+ */
background: linear-gradient(top,  #3f4c6b 0%,#3f4c6b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
}

Note that if you change the background colour you should also change the box shadow colours as they give the illusion of the stitched effect you see. (it pretty much drops a shadow to all directions and the dashed border of the div is an illusion of a stitched effect). So don’t forget to change these colours as well (the current colour is #3f4c6b):

-moz-box-shadow: 0 0 0 4px #3f4c6b, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #3f4c6b, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #3f4c6b, 2px 1px 6px 4px rgba(10,10,0,.5);

The code for the navigation menu is straight forward. Just change the basic colour and the onhover,active, active on hover colours and you are done. They are the Stackoverflow buttons with pure CSS that I showed you some posts ago!

.blue.button, .blue.button:visited              { background-color: #3f4c6b; }
.blue.button:hover                          { background-color: #258dc8; }
.blue.button.active                             { background-color: #258dc8; }
.blue.button.active:hover                   { background-color: #258dc8; }

In order to change the styles of the content boxes, here is the code you should alter:

#content
{
	height:100px;
	margin-top:30px !important;
	position:absolute;
	text-align:center;
	color: #fff;
	border: 2px dashed #ddd;
	text-shadow: -1px -1px #000;
	position:relative;
	-moz-box-shadow: 0 0 0 4px #3f4c6b , 2px 1px 4px 4px rgba(10,10,0,.5);
	-webkit-box-shadow: 0 0 0 4px #3f4c6b , 2px 1px 4px 4px rgba(10,10,0,.5);
	box-shadow: 0 0 0 4px #3f4c6b , 2px 1px 6px 4px rgba(10,10,0,.5);
	background: #3f4c6b; /* Old browsers */
background: -moz-linear-gradient(top,  #3f4c6b 0%, #3f4c6b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f4c6b), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #3f4c6b 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #3f4c6b 0%,#3f4c6b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #3f4c6b 0%,#3f4c6b 100%); /* IE10+ */
background: linear-gradient(top,  #3f4c6b 0%,#3f4c6b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
}

Don’t forget once again to change the colour of the box shadows!

Finally, the span effect when you mouseover at the social links is styled by the code below:

.tooltip span
{
   color:white;
   font-weight:700;
  visibility: hidden;
  position: absolute;
  top: 70px;
  left: 50%;
  z-index: 999;
  width: 250px;
  margin-left: -127px;
  padding: 10px;
  opacity: 1;
background: #356aa0; /* Old browsers */
background: -moz-linear-gradient(top,  #356aa0 0%, #356aa0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#356aa0), color-stop(100%,#356aa0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #356aa0 0%,#356aa0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #356aa0 0%,#356aa0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #356aa0 0%,#356aa0 100%); /* IE10+ */
background: linear-gradient(top,  #356aa0 0%,#356aa0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#356aa0', endColorstr='#356aa0',GradientType=0 ); /* IE6-9 */
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

Well, that’s it guys! All you have to do now is download the theme from the button below, upload it to your server, alter it in any way you want and you are done! If you have any suggestions PLEASE do not hesitate to enter your comment here so that everyone can see it! Be sure that I will update my post with your recommendations when necessary! Spread the word and have a great day!

Download this Template

Demo

Stavros is from Greece and he is 23 years old. He graduated from the University of Sheffield under the BSc Computer Science and is currently doing his MSc again at University of Sheffield under the course of Business Management and Technology. His passion is web-designing and he is in love with WordPress. At his free time he is most likely to create some web designs at Photoshop, think of a new Smartphone application that will change the world or play real time strategy games with his friends!