<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 ---------->
<aside class="profile-card">
<header>
<!-- here’s the avatar -->
<a href="http://www.lcweb.it">
<img src="http://images.ticiz.com/2603690_w0_h120_hnn1i...bv9ettdv9dsbugw0py.png">
</a>
<!-- the username -->
<h1> TEBİM/TEBİTAGEM</h1>
<!-- and role or location -->
<h2>7+24 ONLİNE</h2>
</header>
<!-- bit of a bio; who are you? -->
<div class="profile-bio">
<p><a href="http://harunpehlivantebimtebitagem.business.site" target="_blank"> TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ</a><br/><br/></p>
<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="https://bootsnipp.com/harunpehlivan">
<img src="https://pbs.twimg.com/profile_images/378800000689218141/331feffd6ccf6771b77b1eae450b194f_200x200.jpeg">
</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>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300);
@font-face {
font-family: 'lcweb-remix';
src:url('https://dl.dropboxusercontent.com/u/51228196/remix-challenge/lcweb-remix-font/fonts/lcweb-remix.eot?hp3org');
src:url('https://dl.dropboxusercontent.com/u/51228196/remix-challenge/lcweb-remix-font/fonts/lcweb-remix.eot?#iefixhp3org') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/51228196/remix-challenge/lcweb-remix-font/fonts/lcweb-remix.ttf?hp3org') format('truetype'),
url('https://dl.dropboxusercontent.com/u/51228196/remix-challenge/lcweb-remix-font/fonts/lcweb-remix.woff?hp3org') format('woff'),
url('https://dl.dropboxusercontent.com/u/51228196/remix-challenge/lcweb-remix-font/fonts/lcweb-remix.svg?hp3org#lcweb-remix') format('svg');
font-weight: normal;
font-style: normal;
}
/* resetter */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/***********************/
*, *:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
display: table;
height: 100vh;
width: 100%;
vertical-align: middle;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
html:before,
html:after,
body:before,
body:after {
content: "";
position: fixed;
}
html:after {
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
z-index: 15;
opacity: 0.3;
}
html:before {
top: -3%;
bottom: -3%;
left: -3%;
right: -3%;
background: url("http://static-cache.tr.uaprom.net/image/se/busines_head_42.jpg?r=143818") no-repeat center center #333;
background-size: cover;
z-index: 10;
-webkit-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 1;
box-shadow: 0 0 7em rgba(0, 0, 0, 0.55) inset;
}
html:before,
html:after {
-webkit-transform: translateY(103%) translateZ(0);
transform: translateY(103%) translateZ(0);
-webkit-animation: slide_up_bg .7s ease-out 2.15s forwards;
animation: slide_up_bg .7s ease-out 2.15s forwards;
}
@-webkit-keyframes slide_up_bg {
100% {
-webkit-transform: translateY(0%) translateZ(0);
}
}
@keyframes slide_up_bg {
100% {
transform: translateY(0%) translateZ(0);
}
}
body {
font-family: Raleway, sans-serif;
color: #525252;
-webkit-text-stroke: #545454 0.1px;
font-weight: 400;
display:table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
padding: 35px 0 0;
}
body:before {
display: block;
z-index: 170;
top: -25%;
left: 0;
width: 100%;
height: 150%;
background: #272727;
-webkit-transform: skew(0deg, 4deg) scale(1) translateZ(0);
transform: skew(0deg, 4deg) scale(1) translateZ(0);
-webkit-animation: slide_up_loader .9s ease-out 2.2s forwards;
animation: slide_up_loader .9s ease-out 2.2s forwards;
}
@-webkit-keyframes slide_up_loader {
100% {
top: -175%;
}
}
@keyframes slide_up_loader {
100% {
top: -175%;
}
}
body:after {
z-index: 180;
width: 180px;
height: 180px;
top: 150%;
left: 50%;
margin-left: -90px;
margin-top: -90px;
background: #fff;
border-style: solid;
border-color: #0099ff;
border-width: 0;
box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.05);
-webkit-transform: skew(0deg, 4deg) scale(0) translateZ(0);
-ms-transform: skew(0deg, 4deg) scale(0);
transform: skew(0deg, 4deg) scale(0) translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: init_shape 2.65s cubic-bezier(0.680, 0, 0.265, 1) .5s forwards;
animation: init_shape 2.65s cubic-bezier(0.680, -0.550, 0.265, 1.550) .5s forwards;
}
@-webkit-keyframes init_shape {
28%{
top: 50%;
border-width: 0;
-webkit-transform: skew(0deg, 4deg) scale(1) translateZ(0);
box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.05);
}
53% {
top: 50%;
border-width: 180px 0 0 180px;
-webkit-transform: skew(0deg, 4deg) scale(1) translateZ(0);
box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.05);
}
100%{
top: -50%;
border-width: 180px 0 0 180px;
-webkit-transform: skew(0deg, 4deg) scale(0) translateZ(0);
box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.05);
}
}
@keyframes init_shape {
28%{
top: 50%;
border-width: 0;
transform: skew(0deg, 4deg) scale(1) translateZ(0);
box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.05);
}
53% {
top: 50%;
border-width: 180px 0 0 180px;
transform: skew(0deg, 4deg) scale(1) translateZ(0);
box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.05);
}
100%{
top: -50%;
border-width: 180px 0 0 180px;
transform: skew(0deg, 4deg) scale(0) translateZ(0);
box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.05);
}
}
aside {
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 45px 0 93px;
background-color: none;
width: 95%;
max-width: 550px;
z-index: 10;
text-align: left;
position: relative;
z-index: 20;
display: inline-block;
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0.85) translate3d(0, 100px, 0);
-ms-transform: scale(1) translateZ(0);
transform: scale(0.85) translate3d(0, 80px, 0);
-webkit-animation: central_show 0.9s ease 2.6s forwards;
animation: central_show 0.9s ease 2.6s forwards;
}
@-webkit-keyframes central_show {
100%{
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
}
}
@keyframes central_show {
100%{
opacity: 1;
transform: scale(1) translate3d(0, 0, 0);
}
}
/* img block */
header a {
position: relative;
top: -24px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.35);
display: block;
text-align: center;
height: 130px;
overflow: visible;
z-index: 20;
-webkit-transform: skew(0deg, 4deg);
-ms-transform: skew(0deg, 4deg);
transform: skew(0deg, 4deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
header a img {
border-radius: 50%;
border: 5px solid #f1f1f1;
box-shadow: 0 0 0 0 #f1f1f1;
max-width: 170px;
top: -18px;
position: relative;
z-index: 10;
-webkit-transform: skew(0deg, -4deg);
-ms-transform: skew(0deg, -4deg);
transform: skew(0deg, -4deg);
-webkit-transition: border .2s ease-in-out, box-shadow .2s ease-in-out;
-ms-transition: border .2s ease-in-out, box-shadow .2s ease-in-out;
transition: border .2s ease-in-out, box-shadow .2s ease-in-out;
}
header a:hover img {
border: 2px solid #e9e9e9;
box-shadow: 0 0 0 3px #e9e9e9;
}
/* text block */
header h1,
header h2,
.profile-bio {
background-color: #fff;
padding: 0 55px;
position: relative;
}
header h1 {
text-align: center;
font-size: 45px;
line-height: 45px;
font-weight: 300;
color: #555;
-webkit-text-stroke: #555 0.1px;
padding-top: 25px;
padding-bottom: 3px;
}
header h2 {
text-align: center;
font-size: 21px;
line-height: 26px;
font-weight: 300;
color: #888;
-webkit-text-stroke: #888 0.1px;
padding-top: 0px;
padding-bottom: 35px;
postion: relative;
}
header h2:after {
content: "";
width: 60%;
height: 2px;
background: #f1f1f1;
bottom: 0;
left: 20%;
position: absolute;
z-index: 1;
}
.profile-bio {
font-size: 16px;
line-height: 24px;
font-weight: 400;
padding-top: 35px;
padding-bottom: 60px;
text-align: justify;
word-break: break-word;
hyphens: auto;
}
h1:before,
.profile-bio:before {
content: "";
display: block;
height: 50px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
background: #fff;
-webkit-transform: skew(0deg, 4deg) translateZ(0);
-ms-transform: skew(0deg, 4deg);
transform: skew(0deg, 4deg) translateZ(0);
}
h1:before {
top: -25px;
}
.profile-bio:before {
bottom: -25px;
z-index: 2;
}
/* socials */
.profile-social-links {
background: none;
bottom: -37px;
display: table;
height: 70px;
width: 100%;
overflow: visible;
position: relative;
z-index: 19;
-webkit-transform: skew(0deg, 4deg) translateZ(0);
-ms-transform: skew(0deg, 4deg);
transform: skew(0deg, 4deg) translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.profile-social-links li {
display: table-cell;
width: 33.3%;
background: #fff;
background-color: rgba(255, 255, 255, 0.9);
text-align: center;
vertical-align: middle;
padding: 0 2px;
background-clip: content-box;
position: relative;
-webkit-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
font-family: 'lcweb-remix';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.profile-social-links li:first-child {
padding-left: 0;
}
.profile-social-links li:last-child {
padding-right: 0;
}
.profile-social-links:hover li{
width: 31%;
}
.profile-social-links li:hover {
width: 38%;
background-color: rgba(255, 255, 255, 0.25);
}
.profile-social-links li a {
display: inline-block;
width: 100%;
height: 70px;
position: relative;
text-decoration: none;
-webkit-transform: skew(0deg, -4deg) translateZ(0);
-ms-transform: skew(0deg, -4deg);
transform: skew(0deg, -4deg) translateZ(0);
}
.profile-social-links li a:before {
content: "";
border-radius: 50%;
position: absolute;
width: 0;
height: 0;
top: 50%;
left: 50%;
background-color: #fff;
border: 0px solid #f6f6f6;
z-index: -1;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate(-50%, -50%);
transform: translate3d(-50%, -50%, 0);
-webkit-transition: all 0.4s cubic-bezier(0.680, 0, 0.265, 1);
-ms-transition: all 0.4s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: all 0.4s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.profile-social-links li:hover a:before {
width: 103px;
height: 103px;
border-width: 4px;
}
.profile-social-links img {
opacity: 0;
width: 30px;
height: 30px;
}
.profile-social-links li a:after {
position: absolute;
z-index: 25;
top: 50%;
left: 50%;
font-size: 24px;
color: #727272;
opacity: 0.9;
-webkit-transform: translate3d(-50%, -50%, 0) skew(0deg, -4deg);
-ms-transform: translate(-50%, -50%) skew(0deg, -4deg);
transform: translate3d(-50%, -50%, 0) skew(0deg, -4deg);
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.profile-social-links li:nth-child(1) a:after {content: "\e602";}
.profile-social-links li:nth-child(2) a:after {content: "\e601";}
.profile-social-links li:nth-child(3) a:after {content: "\e600";}
.profile-social-links li a:hover:after {
font-size: 28px;
opacity: 1;
}
.profile-social-links li:nth-child(1):hover a:after {color: #55acee;}
.profile-social-links li:nth-child(2):hover a:after {color: #82b541;}
.profile-social-links li:nth-child(3):hover a:after {color: #333;}
header h1,
header h2,
.profile-bio,
h1:before,
.profile-bio:before {
background: #fff;
background: -moz-linear-gradient(left, #0099ff 0%, #0099ff 1%, #ffffff 1%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0099ff), color-stop(1%,#0099ff), color-stop(1%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #0099ff 0%,#0099ff 1%,#ffffff 1%,#ffffff 100%);
background: -o-linear-gradient(left, #0099ff 0%,#0099ff 1%,#ffffff 1%,#ffffff 100%);
background: linear-gradient(to right, #0099ff 0%,#0099ff 1%,#ffffff 1%,#ffffff 100%);
}
/* inner elements animation */
header a, header a:after,
.profile-social-links {
opacity: 0;
}
header a {
top: -54px;
-webkit-animation: top_show .55s ease 2.9s forwards;
animation: top_show .55s ease 2.9s forwards;
}
@-webkit-keyframes top_show {
100%{opacity: 1; top: -24px;}
}
@keyframes top_show {
100%{opacity: 1; top: -24px;}
}
.profile-social-links {
bottom: -67px;
-webkit-animation: social_show .65s ease 2.9s forwards;
animation: social_show .65s ease 2.9s forwards;
}
@-webkit-keyframes social_show {
100%{opacity: 1; bottom: -37px;}
}
@keyframes social_show {
100%{opacity: 1; bottom: -37px;}
}
/* responsiveness */
@media (max-width: 650px), screen and (max-height: 600px) {
body {
padding-top: 15px;
}
aside {
width: 90%;
}
header a {
top: -24px;
height: 100px;
}
header a img {
max-width: 145px;
top: -15px;
}
header h1 {
font-size: 37px;
line-height: 37px;
}
header h2 {
font-size: 18px;
line-height: 23px;
padding-bottom: 30px;
}
.profile-bio {
font-size: 0.95em;
line-height: 22px;
padding-top: 30px;
padding-bottom: 40px;
}
.profile-social-links,
.profile-social-links li,
.profile-social-links li a {
height: 58px;
}
.profile-social-links li:before {
font-size: 22px;
}
header h1,
header h2,
.profile-bio,
h1:before,
.profile-bio:before {
background: #fff;
background: -moz-linear-gradient(left, #0099ff 0%, #0099ff 1.5%, #ffffff 1.5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0099ff), color-stop(1.5%,#0099ff), color-stop(1.5%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #0099ff 0%,#0099ff 1.5%,#ffffff 1.5%,#ffffff 100%);
background: -o-linear-gradient(left, #0099ff 0%,#0099ff 1.5%,#ffffff 1.5%,#ffffff 100%);
background: linear-gradient(to right, #0099ff 0%,#0099ff 1.5%,#ffffff 1.5%,#ffffff 100%);
}
}
