<div class="creative_card">
<div class="card">
<div class="inner">
<div class="head">
<img src="https://images.unsplash.com/photo-1557825834-45cfd416dd62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
class="img_cover">
</div>
<div class="center">
<img src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
class="img_cover">
</div>
<div class="bottom">
<div class="text_wrap">
<div class="name">
<h2>Vincy Lok</h2>
<h3>Professional Designer</h3>
</div>
<ul>
<li>
<p>Posts</p>
<span class="count">32</span>
</li>
<li>
<p>Followers</p>
<span class="count">140</span>
</li>
<li>
<p>Following</p>
<span class="count">56</span>
</li>
</ul>
<button class="btn">Follow</button>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
:root {
--bg_color: #0F4242
}
body {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 100px 0;
background: var(--bg_color);
}
a {
display: inline-block;
text-decoration: none;
}
ul {
list-style-type: none;
}
img {
max-width: 100%;
vertical-align: middle;
}
.creative_card {
position: relative;
width: 420px;
max-width: 100%;
margin: 0 auto;
padding-left: 70px;
}
.creative_card .card {
position: relative;
margin-left: auto;
}
.creative_card .card .inner {
position: relative;
}
.creative_card .card .inner .head {
position: relative;
height: 220px;
border-radius: 15px;
margin-bottom: 7px;
overflow: hidden;
}
.creative_card .card .inner .head::before,
.creative_card .card .inner .head::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: transparent;
z-index: 111;
border-radius: 50%;
}
.creative_card .card .inner .head::before {
bottom: 85px;
left: 0px;
box-shadow: -5px 7px 0 -3px var(--bg_color);
}
.creative_card .card .inner .head::after {
bottom: 0;
left: 110px;
box-shadow: -5px 7px 0 -3px var(--bg_color);
}
.creative_card .card .inner .center {
position: absolute;
top: 50%;
left: -70px;
transform: translateY(-50%);
width: 180px;
height: 180px;
border-radius: 50%;
overflow: hidden;
z-index: 1;
border: 7px solid var(--bg_color);
}
.img_cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.creative_card .card .inner .bottom {
position: relative;
height: 220px;
background-color: #fff;
border-radius: 15px;
}
.creative_card .card .inner .bottom::before,
.creative_card .card .inner .bottom::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: transparent;
z-index: 111;
border-radius: 50%;
}
.creative_card .card .inner .bottom::before {
top: 85px;
left: 0px;
box-shadow: -6px -6px 0 -3px var(--bg_color);
}
.creative_card .card .inner .bottom::after {
top: 0;
left: 110px;
box-shadow: -6px -7px 0 -3px var(--bg_color);
}
.creative_card .card .inner .bottom .text_wrap {
position: relative;
}
.creative_card .card .inner .text_wrap::before,
.creative_card .card .inner .text_wrap::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: transparent;
z-index: 111;
border-radius: 50%;
}
.creative_card .card .inner .text_wrap::before {
bottom: 11px;
left: 49px;
box-shadow: 5px -6px 0 -2px #fff;
}
.creative_card .card .inner .text_wrap::after {
bottom: 11px;
right: 49px;
box-shadow: -4px -6px 0 -2px #fff;
}
.creative_card .card .inner .bottom .text_wrap .name {
position: relative;
padding: 25px;
padding-left: 130px;
}
.creative_card .card .inner .bottom .text_wrap .name h2 {
position: relative;
font: 500 22px /1.5 "Poppins";
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
}
.creative_card .card .inner .bottom .text_wrap .name h3 {
position: relative;
font: 500 16px /1.5 "Poppins";
color: #ff4079;
letter-spacing: 1px;
}
.creative_card .card .inner .bottom .text_wrap ul {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.creative_card .card .inner .bottom .text_wrap ul li {
position: relative;
width: calc(100% / 3);
text-align: center;
}
.creative_card .card .inner .bottom .text_wrap ul li p {
font: 300 16px /1.5 "Poppins";
color: #adadad;
}
.creative_card .card .inner .bottom .text_wrap ul li .count {
font: 400 22px /1.5 "Poppins";
color: #111;
}
.creative_card .card .inner .bottom .btn {
position: relative;
font: 400 18px /1.5 "Poppins";
padding: 10px 50px;
color: #fff;
background-color: #1792BE;
margin: 30px auto 0;
display: block;
border: none;
border: 5px solid var(--bg_color);
box-shadow: 0px 0px 0 10px #fff;
border-radius: 40px;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
}
@media(max-width: 575.98px) {
.creative_card {
transform: scale(0.8);
}
}
@media(max-width: 419.98px) {
.creative_card {
padding-left: 65px;
transform: scale(0.7);
}
.creative_card .card .inner .bottom .text_wrap .name {
padding: 20px 15px;
padding-left: 120px;
}
.creative_card .card .inner .bottom .text_wrap .name h3 {
font-size: 14px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.