<div class="container">
<div class="profile-card">
<img src="https://images.pexels.com/photos/6963524/pexels-photo-6963524.jpeg?cs=srgb&dl=pexels-cup-of-couple-6963524.jpg&fm=jpg" alt="pic" class="co-pic">
<img src="https://images.pexels.com/photos/6963515/pexels-photo-6963515.jpeg?cs=srgb&dl=pexels-cup-of-couple-6963515.jpg&fm=jpg" alt="plant" class="pro-pic">
<h1>Mary Willson</h1>
<p>Social Media Infuncer and Social Activist</p>
<a href="#" class="btn"> Follow </a>
<div class="Total-View">
<div>
<p>Followers</p>
<h3>210k</h3>
</div>
<div>
<p>Following</p>
<h3>20</h3>
</div>
<div>
<p>Videos</p>
<h3>130</h3>
</div>
</div>
<a href="#" class="view-btn"> VIEW PROFILE </a>
</div>
</div>
/* @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@1,700&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
/* font-family: 'Merriweather', serif; */
font-family: 'Source Serif Pro', serif;
}
.container{
width: 100%;
min-height: 100vh;
background: #efdecd;
display:flex;
align-items: center;
justify-content: center;
}
.profile-card{
width: 85%;
max-width: 500px;
text-align: center;
background: #fff;
color: #333;
}
.co-pic{
display: block;
width: 100%;
}
.pro-pic{
width: 110px;
border-radius: 50%;
margin-top: -55px;
box-shadow : 0 0 0 0px #ff9966;
transition: box-shadow 0.4s;
}
.pro-pic:hover{
box-shadow : 0 0 0 3px #ff9966;
}
.profile-card h1{
/* font-weight: 600; */
}
.btn{
display: inline-block;
text-decoration:none;
border: 2px solid #cd9575;
color: #555;
padding: 5px 15px;
margin: 8px;
}
.btn:hover{
color: #b2beb5;
}
.Total-View{
display: flex;
justify-content: space-around;
}
.Total-View h3{
/* font-weight: 500; */
font-size: 22px;
}
.view-btn{
display: inline-block;
text-decoration: none;
background: #ff9966;
color: white;
width: 100%;
padding: 15px 0;
margin-top: 6px;
}
.view-btn:hover{
color: wheat;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.