Concept: Mini Online Profile

preview-featured
41 Flares 41 Flares ×

Concept: Mini Online Profile

Recently I was working on a user online profile and one idea clicked. To design a very minimalistic and simple online profile where I can introduce about me in brief. And I started designing this piece of Mini Online Profile or you can say a mini portfolio. In this tutorial I would like to share it with you all.

Online portfolio for an individual artist or a freelancer is very important. As it gives you an appearance on a very large platform and that is Internet. You can use this concept to design a nice and minimal online profile of yourself. Where you can share about yourself in short. It actually started with a pencil and paper.

So let’s start with some basic HTML. The following markup will create a basic structure of our design. And gradually we will accommodate our stuff into it. This code will go directly after the opening body tag.

Markup


<div class="pro_cover">
      <img src="img/avatar.jpg" class="pro_dp" /> <span class="name">Akash Bhadange</span>
      <p class="tw-name">Freelance Web Designer</p>
      <ul class="social_icons">
        <li><a href="#"><i class="icon-twitter-circled"></i></a></li>
        <li><a href="#"><i class="icon-facebook-circled"></i></a></li>
        <li><a href="#"><i class="icon-dribbble-circled"></i></a></li>
        <li><a href="#"><i class="icon-github-circled"></i></a></li>
      </ul>
</div>

This piece of code will add our profile image, name and social links and also our cover image. Adding some styling to this


.pro_cover {
	width:390px;
	min-height:400px;
	background:#fff url(img/cover.png) top center no-repeat;
	margin:100px auto 0;
	text-align:center;
	border-radius: 7px 7px 0 0;
	}
	.pro_cover .name {
		font-size:30px;
		color:#fff;
		margin:10px 0;
		}
	.pro_cover .tw-name {
		color:#eee;
		font-size: 15px;
		font-style: italic;
		font-weight: 600;
		margin: 0 0 10px;
		}
	.pro_dp {
		border: 8px solid #fff;
		border-radius:50%;
		box-shadow: 0 0 7px #898989;
    	margin: -20% 24% 5%;
    	width: 150px;
		}
	ul.social_icons {
		list-style:none;
		}
	ul.social_icons li{
		display:inline-block;
		margin:0 5px;
		font-size:36px;
		}
	ul.social_icons li a {
		text-decoration:none;
		outline:none;
		opacity:0.8;
		color:#fff;
		}
	ul.social_icons li a:hover {
		opacity:1;
		}

After adding this styling to our markup, the result will be somewhat like this,

Preview 01

Now let’s add the bottom tabs and the content in each tab container. The functionality of tabs and Skill bars which we are using is totally done using CSS3.

<section class="tabs">
 <input class="tab-selector-1" id="tab-1" type="radio" checked="checked" name="radio-set" />
 <label class="tab-label-1" for="tab-1"><i class="icon-about-me"></i></label>

 <input class="tab-selector-2" id="tab-2" type="radio" name="radio-set" />
 <label class="tab-label-2" for="tab-2"><i class="icon-trophy"></i></label>

 <input class="tab-selector-3" id="tab-3" type="radio" name="radio-set" />
 <label class="tab-label-3" for="tab-3"><i class="icon-mail"></i></label>
<div class="clear-shadow"></div>
<div class="content">
<div class="content-1">
<h2>About Me</h2>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
 when an unknown printer took a galley of type and scrambled it.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="content-2">
<h2>My Skills</h2>
<ul id="skill">
	<li><span class="expand html5">HTML 5</span></li>
	<li><span class="expand css3">CSS 3</span></li>
	<li><span class="expand jquery">jQuery</span></li>
	<li><span class="expand photoshop">Photoshop</span></li>
	<li><span class="expand dreamweaver">Dreamweaver</span></li>
</ul>
</div>
<div class="content-3">
<h2>Contact Me</h2>
<form class="form-wrapper-01"><input class="inputbox" id="" type="text" placeholder="Your Name" />
 <input class="inputbox" id="" type="text" placeholder="Email id" />
 <textarea class="message_box" id="" placeholder="Message"></textarea>
 <input class="button" id="" type="button" value="Submit" /></form></div>
</div>
</section>
<pre>

And after adding our style to this markup, our final design will look like this

Preview 2

Ohhk, so we are done with the coding and now let’s see what we have done and how it actually looks into a browser. And yes, don’t forget to share it on social network. ;)

Behind the Scene

It actually started on a simple piece of paper and pencil. In the end, with lots of improvisations it took a beautiful shape.

Behind scenes

Credits

41 Flares Twitter 19 Facebook 10 Google+ 10 LinkedIn 0 Pin It Share 2 41 Flares ×
author avatar

Akash is a freelance web designer and developer and also the founder of Dzyngiri.com You can get connected with him on Twitter and Facebook

Connect with us

11 Comments

  1. Love the concept.
    I am planning to use this as a mini profile.
    I would really appreciate if you could include a working contact form.
    It would really mean a lot.
    Thanks for the download again!

  2. I’m planning to learn css and javascript.. can you tell me any nice book to start with that will meet most the requirement :) Thanks in advance :)

  3. A sincere thank you Akash! This template is beautiful and I am working on using it for my simple website which is just a profile with links.

    One thing though, I don’t understand how the content div swapping works, I want to do the same for a subset in the “My Skills” content div. So like in the My Skills content div I want to put 3 buttons in there that swaps 3 divs in there. Would you be able to chat with me about it?

Leave a Reply

(*) Required, Your email will not be published