<div class="card">
<div class="card__media">
<img src="https://assets.codepen.io/1061/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1&width=80" alt="Airen">
</div>
<div class="card__body">
<h3 class="card__title">Airen Liao</h3>
<h4 class="card__subtitle">Web Developer</h4>
<div class="card__action">
<button class="card__button">View Profile</button>
</div>
<div class="card__content">
<div class="followers">
<div class="followers__number">405</div>
<h5 class="followers__title">Followers</h5>
</div>
<div class="following">
<div class="following__number">85</div>
<h5 class="following__title">Following</h5>
</div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
line-height: 1.5;
font-size: 15px;
font-weight: 400;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
font-family: "Exo", Arial, sans-serif;
background: url("https://static.fedev.cn/sites/default/files/blogs/2021/2101/glassmorphism-css-15-1.jpg")
no-repeat center fixed;
background-size: cover;
color: #fff;
}
.card {
min-height: 400px;
width: 320px;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
}
.card__media {
height: 120px;
width: 120px;
border-radius: 50%;
margin: 30px 0 20px 0;
}
.card__media img {
max-width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.card__body {
display: flex;
flex-direction: column;
align-items: center;
color: #222e51;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.7px;
width: 100%;
flex: 1;
}
.card__title {
margin-top: 5px;
}
.card__subtitle {
color: #8f95a4;
font-weight: 400;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 15px;
}
.card__content {
display: grid;
width: 100%;
min-height: 70px;
grid-template-columns: repeat(2, 1fr);
border-radius: 0 0 8px 8px;
margin-top: auto;
padding: 5px 0;
}
.card__content > div {
display: flex;
flex-direction: column;
align-items: center;
color: #222e51;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.7px;
}
.followers {
border-right: 2px solid rgba(255, 255, 255, 0.08);
}
.followers__number,
.following__number {
margin: 5px 0;
}
.followers__title,
.following__title {
color: #343d54;
font-weight: 400;
font-size: 14px;
letter-spacing: 1px;
margin: 5px 0;
}
.card__action {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 10px;
}
.card__button {
background-color: #2c303a;
border: none 0;
color: #9b9dad;
padding: 1rem 1.75rem;
font-size: 1.2rem;
transition: all 0.2s linear;
border-radius: 4px;
font-family: "Exo", Arial, sans-serif;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 85%;
}
.card__button:hover {
color: #fff;
background-color: #5a5f73;
}
.card__button:focus:not(:focus-visible) {
outline: none;
box-shadow: 0 0 0 3px #03a9f4d9;
}
.card__button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #03f4e0b8;
}
.card__media img {
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
position: absolute;
z-index: 2;
width: 90%;
height: 90%;
z-index: 2;
}
.card__media {
position: relative;
background-color: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px);
}
.card {
border-radius: 40px;
backdrop-filter: blur(20px);
border: 3px solid transparent;
background-image: linear-gradient(
to right bottom,
rgba(255, 255, 255, 0.4),
rgba(255, 255, 255, 0.1)
),
linear-gradient(
to right bottom,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 72, 219, 0) 55%,
rgba(255, 72, 219, 0.5) 100%
);
background-origin: border-box;
background-clip: padding-box, border-box;
box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
}
.card__content {
background-color: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px);
border-radius: 0 0 40px 40px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.