<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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900" rel="stylesheet" type="text/css">
<div class="profile-card-wrap">
<input id="check" type="checkbox" class="check"><label for="check" class="toggle"> + </label>
<div class="content" data-text="Hi there !">
<div class="title">HARUN PEHLİVAN</div>
<p><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a><br/> <br/> TEBİM TEBİTAGEM<br/><a href="https://www.slideshare.net/harunpehlivan581" target="_blank"> SlideShare</a><br/><a href="https://tr.gravatar.com/tebm" target="_blank"> Gravatar </a><br/><a href="https://www.xing.com/profile/HARUN_PEHLIVAN" target="_blank"> XING</a><br/><a href="https://www.facebook.com/profile.php?id=100008152065270" target="_blank"> Facebook</a><br/><a href="https://bootsnipp.com/harunpehlivan" target="_blank"> Bootsnipp</a><br/> </p>
</div>
<div class="link-info">
<div class="social">
<a class="link oc" href="https://www.udemy.com/user/harunpehlivan2" target="_blank"><i class="fa fa-graduation-cap"></i></a>
<a class="link tw" href="https://twitter.com/HTERCUMANP" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="link tw" href="http://harunpehlivan-blog.tumblr.com" target="_blank"><i class="fa fa-tumblr"></i></a>
<a class="link cp" href="https://codepen.io/harunpehlivan" target="_blank"><i class="fa fa-codepen"></i></a>
<a class="link gh" href="https://github.com/harunpehlivan" target="_blank"><i class="fa fa-github"></i></a>
<a class="link li" href="https://fr.linkedin.com/in/harun-pehlivan-0aa34252" target="_blank"><i class="fa fa-linkedin"></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://d2f0ora2gkri0g.cloudfront.net/bkpam2342416_argeprojeegitimesnasndahallerim-1.jpg) #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%;
perspective:1000px;
position:absolute;
margin-left:-250px;
margin-top:-137.5px;
}
.profile-card-wrap .content{
top:0%;
left:7%;
width:500px;
height:290px;
padding:30px;
position:relative;
backface-visibility:hidden;
background:#fff;
border-radius:3px;
box-shadow:0 1px 2px #aaa;
transform:rotateY(540deg);
transition:all 0.5s ease-in-out 0s;
}
.profile-card-wrap .content:before{
width:148px;
height:205px;
top:13%;
left:14%;
font-size:18px;
padding:1.5rem;
margin:0 1rem 1rem;
border-radius:3px;
box-shadow:0 1px 2px #aaa;
line-height:24px;
background:#fff;
content:attr(data-text);
backface-visibility:visible;
transform:rotateY(-540deg) scale(1);
transition:all 0.5s 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 .oc{
background:#FF5722;
border-color:#fff;
}
.profile-card-wrap .link-info .social .tw{
background:#29a9e1;
border-color:#2a7a9b;
}
.profile-card-wrap .link-info .social .cp{
background:#fff;
color:#000000;
border-color:#474848;
}
.profile-card-wrap .link-info .social .gh{
background:#000000;
color:#fff;
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:81%;
z-index:5;
right:105px;
width:40px;
height:40px;
cursor:pointer;
font-size:28px;
line-height:40px;
text-align:center;
margin-top:-15px;
border-radius:50%;
position:absolute;
color:#fff;
background:#F44336;
-webkit-user-select:none;
box-shadow:0 4px 4px #333;
transition: all 0.3s ease-in-out 0s;
}
.profile-card-wrap .check:checked + .toggle{
top:98%;
color:#fff;
background:#F44336;
transform:rotate(135deg);
box-shadow:2px -2px 4px #333;
transition: all 0.3s ease-in-out 0s;
}
.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 0.8s;
}
@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)}
10%{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)}
}
