<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="profile-card-wrap">
<input id="check" type="checkbox" class="check"><label for="check" class="toggle"> + </label>
<div class="content" data-text="म नेपाली वेब डिजाईनर हुँ ।">
<div class="title">HARUN PEHLİVAN</div>
<p> <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a></p>
</div>
<div class="link-info">
<div class="social">
<a class="link fb" href="https://facebook.com/100008152065270" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="link tw" href="https://twitter.com/HTERCUMANP" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="link cp" href="https://codepen.io/harunpehlivan" target="_blank"><i class="fa fa-codepen"></i></a>
<a class="link pi" href="https://pinterest.com/harunpehlivan" target="_blank"><i class="fa fa-pinterest"></i></a>
<a class="link li" href="https://linkedin.com/in/harun-pehlivan-0aa34252/" target="_blank"><i class="fa fa-linkedin"></i></a>
<a class="link yt" href="https://youtube.com/" user/harunpehlivan1"_blank"><i class="fa fa-youtube-play"></i></a>
<a class="link gp" href="https://plus.google.com/111320383727376607540/" target="_blank"><i class="fa fa-google-plus"></i></a>
</div>
<div class="photo"></div>
</div>
</div>
body{
margin:0;
color:#444;
overflow:hidden;
font:300 16px/18px Roboto, sans-serif;
background:url(http://static-cache.tr.uaprom.net/image/se/busines_head_42.jpg?r=143818) #031b21 no-repeat center fixed;
background-size:cover;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.profile-card-wrap .content:before,
.profile-card-wrap .link-info .photo:after{
content:'';
position:absolute;
}
.profile-card-wrap{
top:50%;
left:50%;
width:500px;
height:275px;
perspective:800px;
position:absolute;
margin-left:-250px;
margin-top:-137.5px;
}
.profile-card-wrap .content{
width:375px;
padding:30px;
height:inherit;
position:relative;
backface-visibility:hidden;
background:rgba(255,255,255,.5);
border:1px solid rgba(0,0,0,.35);
transform:rotateY(180deg);
transition:transform .4s ease-in-out 0s;
}
.profile-card-wrap .content:before{
top:50%;
right:40px;
height:30px;
font-size:18px;
border:inherit;
padding:2px 8px;
margin-top:-10px;
line-height:24px;
background:inherit;
content:attr(data-text);
backface-visibility:visible;
transform:rotateY(-180deg) scale(1);
transition:transform .4s ease-in-out 0s;
text-shadow:1px 1px 0 rgba(255,255,255,.45);
}
.profile-card-wrap .content .title{
font-size:24px;
font-weight:500;
margin-bottom:30px;
}
.profile-card-wrap .content p{
margin:0;
max-width:190px;
line-height:24px;
text-align:center;
}
.profile-card-wrap .link-info{
top:50%;
right:35px;
width:180px;
height:180px;
margin-top:-90px;
position:absolute;
}
.profile-card-wrap .link-info .social{
top:50%;
right:50%;
z-index:1;
width:35px;
height:35px;
position:absolute;
margin-top:-17.5px;
margin-right:-17.5px;
}
.profile-card-wrap .link-info .social .link{
color:#fff;
width:35px;
height:35px;
transform:none;
line-height:33px;
text-align:center;
position:absolute;
border-radius:50%;
border:1px solid #444;
box-shadow:0 3px 4px rgba(47,66,81,.75);
transition:all .3s cubic-bezier(0.680, 1.550, 0.265, 1);
}
.profile-card-wrap .link-info .social .fb{
background:#3b5a9a;
border-color:#384f76;
}
.profile-card-wrap .link-info .social .tw{
background:#29a9e1;
border-color:#2a7a9b;
}
.profile-card-wrap .link-info .social .cp{
background:#000000;
border-color:#474848;
}
.profile-card-wrap .link-info .social .pi{
background:#cd2129;
border-color:#942825;
}
.profile-card-wrap .link-info .social .li{
background:#117bb8;
border-color:#1c5d7d;
}
.profile-card-wrap .link-info .social .yt{
background:#cb312e;
border-color:#933532;
}
.profile-card-wrap .link-info .social .gp{
background:#df4b38;
border-color:#974336;
}
.profile-card-wrap .link-info .photo{
z-index:2;
width:inherit;
height:inherit;
overflow:hidden;
position:relative;
border-radius:50%;
border:5px solid #fff;
transform:scale(.6);
background:url(http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1505286021) #fff no-repeat center / cover;
box-shadow:0 0 2px, 0 5px 5px rgba(47,66,81,.75);
transition:transform .5s ease-in-out 0s;
}
.profile-card-wrap .link-info .photo:after{
width:170px;
height:170px;
border-radius:inherit;
background:rgba(54,106,157,.2);
}
.profile-card-wrap .check{display:none}
.profile-card-wrap .toggle{
top:50%;
z-index:5;
left:-20px;
width:40px;
height:40px;
color:#031b21;
cursor:pointer;
font-size:28px;
line-height:40px;
text-align:center;
margin-top:-15px;
border-radius:50%;
position:absolute;
background:#fff;
-webkit-user-select:none;
box-shadow:0 4px 4px #333;
transition:color, background, transform .1s ease-in-out 0s;
}
.profile-card-wrap .check:checked + .toggle{
color:#fff;
background:#031b21;
transform:rotate(135deg);
box-shadow:2px -2px 4px #333;
}
.profile-card-wrap .check:checked + .toggle + .content{
transform:rotateX(0);
}
.profile-card-wrap .check:checked + .toggle + .content:before{
backface-visibility:hidden;
transform:rotateX(-180deg) scale(0);
}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link{
transform:none;
}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(1){transform:translate(30px,-120px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(2){transform:translate(80px,-100px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(3){transform:translate(115px,-55px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(4){transform:translate(125px,0)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(5){transform:translate(115px,55px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(6){transform:translate(80px,100px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(7){transform:translate(30px,120px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .photo{
transform:scale(1);
animation:bounceIn .4s;
}
@keyframes bounceIn{
0%,20%,40%,60%,80%,100%{animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000)}
0%{opacity:0;transform:scale3d(.3,.3,.3)}
20%{transform:scale3d(1.1,1.1,1.1)}
40%{transform:scale3d(.9,.9,.9)}
60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}
80%{transform:scale3d(.97,.97,.97)}
100%{opacity:1;transform:scale3d(1,1,1)}
}
