<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.