<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Profile Card</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="card">
<div class="card-borders">
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>
</div>
<div class="card-content">
<img src="https://i.loli.net/2020/01/12/xhQRgqyB4Oov3S8.jpg" class="avatar">
<div class="username">alphardex</div>
<div class="social-icons">
<a class="social-icon" href="https://codepen.io/alphardex" target="_blank">
<i class="fab fa-codepen"></i>
</a>
<a class="social-icon" href="https://github.com/alphardex" target="_blank">
<i class="fab fa-github"></i>
</a>
<a class="social-icon" href="https://twitter.com/alphardex007" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.card {
--card-bg-color: hsl(240, 31%, 25%);
--card-bg-color-transparent: hsla(240, 31%, 25%, 0.7);
position: relative;
width: 300px;
}
.card .card-borders {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.card .card-borders .border-top {
position: absolute;
top: 0;
width: 100%;
height: 2px;
background: var(--card-bg-color);
transform: translateX(-100%);
animation: slide-in-horizontal 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.card .card-borders .border-right {
position: absolute;
right: 0;
width: 2px;
height: 100%;
background: var(--card-bg-color);
transform: translateY(100%);
animation: slide-in-vertical 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.card .card-borders .border-bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 2px;
background: var(--card-bg-color);
transform: translateX(100%);
animation: slide-in-horizontal-reverse 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.card .card-borders .border-left {
position: absolute;
top: 0;
width: 2px;
height: 100%;
background: var(--card-bg-color);
transform: translateY(-100%);
animation: slide-in-vertical-reverse 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.card .card-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 0 40px 0;
font-family: Lato, sans-serif;
background: var(--card-bg-color-transparent);
box-shadow: 0 0px 0.6px rgba(0, 0, 0, 0.028), 0 0px 1.3px rgba(0, 0, 0, 0.04), 0 0px 2.5px rgba(0, 0, 0, 0.05), 0 0px 4.5px rgba(0, 0, 0, 0.06), 0 0px 8.4px rgba(0, 0, 0, 0.072), 0 0px 20px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: scale(0.6);
animation: bump-in 0.5s 0.8s forwards;
}
.card .card-content .avatar {
width: 120px;
height: 120px;
border-radius: 50%;
margin-bottom: 40px;
opacity: 0;
transform: scale(0.6);
animation: bump-in 0.5s 1s forwards;
}
.card .card-content .username {
position: relative;
font-size: 26px;
letter-spacing: 2px;
margin-bottom: 40px;
color: transparent;
animation: fill-text-white 1.2s 2s forwards;
}
.card .card-content .username::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
color: black;
background: #35b9f1;
transform: scaleX(0);
transform-origin: left;
animation: slide-in-out 1.2s 1.2s cubic-bezier(0.75, 0, 0, 1) forwards;
}
.card .card-content .social-icons {
display: flex;
}
.card .card-content .social-icons .social-icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 2.5em;
height: 2.5em;
margin: 0 15px;
border-radius: 50%;
color: white;
text-decoration: none;
}
.card .card-content .social-icons .social-icon:nth-child(1)::before {
animation-delay: 2.1s;
}
.card .card-content .social-icons .social-icon:nth-child(1)::after {
animation-delay: 2.2s;
}
.card .card-content .social-icons .social-icon:nth-child(1) i {
animation-delay: 2.3s;
}
.card .card-content .social-icons .social-icon:nth-child(2)::before {
animation-delay: 2.2s;
}
.card .card-content .social-icons .social-icon:nth-child(2)::after {
animation-delay: 2.3s;
}
.card .card-content .social-icons .social-icon:nth-child(2) i {
animation-delay: 2.4s;
}
.card .card-content .social-icons .social-icon:nth-child(3)::before {
animation-delay: 2.3s;
}
.card .card-content .social-icons .social-icon:nth-child(3)::after {
animation-delay: 2.4s;
}
.card .card-content .social-icons .social-icon:nth-child(3) i {
animation-delay: 2.5s;
}
.card .card-content .social-icons .social-icon::before, .card .card-content .social-icons .social-icon::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
transform: scale(0);
}
.card .card-content .social-icons .social-icon::before {
background: #f7f1e3;
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
}
.card .card-content .social-icons .social-icon::after {
background: #2C3E50;
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
}
.card .card-content .social-icons .social-icon i {
z-index: 1;
transform: scale(0);
animation: scale-in 0.5s cubic-bezier(0.75, 0, 0, 1) forwards;
}
@keyframes bump-in {
50% {
transform: scale(1.05);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slide-in-horizontal {
50% {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes slide-in-horizontal-reverse {
50% {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes slide-in-vertical {
50% {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
@keyframes slide-in-vertical-reverse {
50% {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
@keyframes slide-in-out {
50% {
transform: scaleX(1);
transform-origin: left;
}
50.1% {
transform-origin: right;
}
100% {
transform: scaleX(0);
transform-origin: right;
}
}
@keyframes fill-text-white {
to {
color: white;
}
}
@keyframes scale-in {
to {
transform: scale(1);
}
}