Amazing css with profile card

This post will show you how to create an amazing css with profile card from Darkcode. To see how it works, just click on the button Run Pen below:

Note:

This project also use Font Awesome for creating icons.
This project does not set up a responsive layout. So to see the whole user interface, you can open the pen in a new tab.

Step 1: Add Html

<div class="profile-card">
  <div class="top-section">
    <i class="message fas fa-envelope"></i>
    <i class="notif fas fa-bell"></i>
    <div class="pic">
      <img
        src="https://res.cloudinary.com/drcrre4xg/image/upload/v1578327066/pic_jyrevs.png"
        alt=""
      />
    </div>
    <div class="name">darkcode</div>
    <div class="tag">@darkcodeonline</div>
  </div>

  <div class="bottom-section">
    <div class="social-media">
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fas fa-link"></i></a>
    </div>

    <div class="videos">190 <span>Videos</span></div>
    <div class="border"></div>
    <div class="subscribers">204K <span>Subscribers</span></div>
    <div class="border"></div>
    <div class="views">7.3M <span>Views</span></div>
  </div>
</div>

Step 2: Add CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  background: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1578327067/bg_ajy0uu.jpg)
    no-repeat center;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-card {
  width: 420px;
  overflow: hidden;
  text-align: center;
  position: relative;
  box-shadow: 0 0 10px #00000070;
}

.top-section {
  padding: 60px 40px;
  background: #2c2c54aa;
}

.message,
.notif {
  position: absolute;
  top: 40px;
  font-size: 20px;
  cursor: pointer;
  color: #ffffff50;
}

.message {
  right: 40px;
}

.notif {
  left: 40px;
}

.pic {
  width: 150px;
  height: 150px;
  margin: auto;
  margin-bottom: 20px;
  border: 2px solid #2c3e50;
  border-radius: 50%;
  padding: 8px;
  position: relative;
}

.pic:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid #2c3e50;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 50%;
  animation: wave 1.5s infinite linear;
}

@keyframes wave {
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

.pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.name {
  color: #f1f1f1;
  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tag {
  font-size: 18px;
  color: #222;
}

.bottom-section {
  background: #f1f1f1;
  padding: 60px 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-transform: uppercase;
}

.border {
  width: 1px;
  height: 20px;
  background: #bbb;
  margin: 0 30px;
}

.bottom-section span {
  font-size: 14px;
  display: block;
}

.social-media {
  position: absolute;
  width: 100%;
  top: -30px;
  left: 0;
  z-index: 1;
}

.social-media i {
  width: 60px;
  height: 60px;
  background: #2c3e50;
  border-radius: 50%;
  color: #f1f1f1;
  font-size: 20px;
  line-height: 60px !important;
  margin: 0 10px;
  position: relative;
}

.social-media i:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #2c3e50;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: -1;
  transition: 0.4s linear;
}

.social-media i:hover:after {
  transform: scale(1.4);
  opacity: 0;
}

Web UI Element

Profile Card

How to create an amazing css with profile card

Step 1: Add Html

Step 2: Add CSS