<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 ---------->
<!-- this is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! -->
<aside class="profile-card">
<header>
<!-- here’s the avatar -->
<!-- the username -->
<h1>HARUN PEHLİVAN</h1>
<!-- and role or location -->
<h2> FOUNDER,CEO BLOGGER</h2>
</header>
<!-- bit of a bio; who are you? -->
<div class="profile-bio">
<p><a href="http://harunpehlivantebimtebitagem.ml" target="_blank"> HARUN PEHLİVAN</a></p>
</div>
<!-- some social links to show off -->
<ul class="profile-social-links">
<!-- twitter - el clásico -->
<li>
<a href="https://twitter.com/HTERCUMANP">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
</a>
</li>
<!-- envato – use this one to link to your marketplace profile -->
<li>
<a href="http://themeforest.net/user/harunpehlivan">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
</a>
</li>
<!-- codepen - your codepen profile-->
<li>
<a href="https://codepen.io/harunpehlivan/">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-codepen.svg">
</a>
</li>
<!-- add or remove social profiles as you see fit -->
</ul>
</aside>
<!-- that’s all folks! -->
/* WORKS BEST ON GOOGLE CHROME */
@import url(https://fonts.googleapis.com/css?family=Lato);
html, body {
height: 100%
}
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: Lato;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
body,
.profile-card:before {
background: url('http://d2f0ora2gkri0g.cloudfront.net/bkpam2342416_31012016-122.jpg'); /* background image */
background-size: cover;
background-attachment: fixed
}
.profile-card {
position: absolute;
top: 0px;
bottom: 0px;
left: -52px;
right: 0px;
margin: auto;
width: 443px;
height: 264px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border: solid 1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 5px rgba(255, 255, 255, 0.6), 0px 6.5px 4.75px 0.25px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
cursor: default
}
.profile-card:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: inherit;
z-index: -1;
}
.profile-card:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 99.99%;
height: 100%;
border-radius: inherit;
z-index: -1;
background: -webkit-linear-gradient(-50deg, rgba(0, 0, 0, 0.7) 3%, rgba(255, 255, 255, 0.3) 52%, rgba(255, 255, 255, 0.3) 55%, rgba(0, 0, 0, 0.4) 80%);
background: -moz-linear-gradient(-50deg, rgba(0, 0, 0, 0.7) 3%, rgba(255, 255, 255, 0.3) 52%, rgba(255, 255, 255, 0.3) 55%, rgba(0, 0, 0, 0.4) 80%);
background: -o-linear-gradient(-50deg, rgba(0, 0, 0, 0.7) 3%, rgba(255, 255, 255, 0.3) 52%, rgba(255, 255, 255, 0.3) 55%, rgba(0, 0, 0, 0.4) 80%);
background: -ms-linear-gradient(-50deg, rgba(0, 0, 0, 0.7) 3%, rgba(255, 255, 255, 0.3) 52%, rgba(255, 255, 255, 0.3) 55%, rgba(0, 0, 0, 0.4) 80%);
background: linear-gradient(140deg, rgba(0, 0, 0, 0.7) 3%, rgba(255, 255, 255, 0.3) 52%, rgba(255, 255, 255, 0.3) 55%, rgba(0, 0, 0, 0.4) 80%);
background-size: 120%;
background-repeat: no-repeat
}
.profile-card,
.profile-card:before,
.profile-card:after,
.profile-card header h1,
.profile-card header h2,
.profile-card .profile-bio p,
ul.profile-social-links {
-webkit-transition: .25s;
-moz-transition: .25s;
-o-transition: .25s;
transition: .25s
}
.profile-card:hover {
top: 10px;
box-shadow: inset 0px 0px 5px rgba(255, 255, 255, 0.8), 0px 2px 0.5px 0px rgba(0, 0, 0, 0.7)
}
.profile-card:hover header h1,
.profile-card:hover header h2,
.profile-card:hover .profile-bio p {
box-shadow: inset 0px 3.5px 5px rgba(0, 0, 0, 0.95);
background-color: rgba(0, 0, 0, 0.30)
}
.profile-card:hover::before {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px)
}
.profile-card:hover::after {
background-position: -50px
}
header {
margin: 20px;
display: block
}
header a {
float: left;
position: relative;
top: -40px;
margin-right: 20px
}
header a img {
border-radius: 100%;
border: solid 5px rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 4px 0.30px #000000
}
header h1,
header h2,
.profile-bio p {
display: inline-block;
vertical-align: top;
margin: 0;
background-color: rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 11px;
border: solid 1px rgba(255, 255, 255, 0.25);
box-shadow: inset 0px 3.5px 3px rgba(0, 0, 0, 0.55);
vertical-align: middle;
color: #eeeeee;
letter-spacing: 1px;
font-weight: 400;
text-shadow: -0.5px -0.5px 0 rgba(0, 0, 0, 0.5), 0.5px -0.5px 0 rgba(0, 0, 0, 0.5), -0.5px 0.5px 0 rgba(0, 0, 0, 0.5), 0.5px 0.5px 0 rgba(0, 0, 0, 0.5)
}
header h1 {
font-size: 22px;
margin-bottom: 8px;
display: -webkit-box
}
header h2 {
font-size: 13px
}
.profile-bio {
position: absolute;
margin: 0px 20px 20px
}
.profile-bio p {
left: 0px;
top: 0px
}
/* social links */
ul.profile-social-links {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0px;
bottom: 0px;
left: 100%;
z-index: 0;
background-color: rgba(255, 255, 255, 0.4);
padding: 0px 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border: solid 1px;
border-color: rgba(255, 255, 255, 0.4);
border-left-color: rgba(0, 0, 0, 0.8);
box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.4), 0px 6.5px 4.75px 0.25px rgba(0, 0, 0, 0.4)
}
ul.profile-social-links li {
display: block;
height: 33.3333%;
border-bottom: solid 1px rgba(255, 255, 255, 0.3)
}
ul.profile-social-links li:last-child {
border-bottom: none
}
ul.profile-social-links li img {
width: 30px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
.profile-card:hover ul.profile-social-links {
box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.4), 0px 2px 0.5px 0px rgba(0, 0, 0, 0.7);
background-color: rgba(255, 255, 255, 0.25)
}
