<div class="container">
  <img class="profile-pic" src="https://images.unsplash.com/photo-1598587741472-cb50fcba42be?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjB8fHdvbWVuJTIwbGF1Z2hpbmd8ZW58MHx8MHx8fDI%3D" />
  <div>
    <p class="profile-name">Kitera Dent</p>
    <a href="mailto:kiteradent@gmail.com">kiteradent@gmail.com</a>
    <div />
  </div>
.container {
  /*  This makes the container flex  */
  display: flex;

  /*  giving equal space using gap  */
  gap: 1rem;

  /*  taking entire height & width of the screen  */
  width: 100%;
  min-height: 100vh;

  /*  changed the font-family  */
  font-family: sans-serif;

  /*  this will vertically center align elements  */
  align-items: center;
  /*  this will horizontally center align elements */
  justify-content: center;
}

.profile-pic {
  height: 8rem;
  width: 8rem;
  object-fit: cover;
  border-radius: 999px;
}

.profile-name {
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.