Profile Card Css

Neste artigo Veja como criar um Profile Card com css

vamos adicionar o Html:

<figure class="profile-user">
  <figcaption>

    <img src="uploads/profile.jpg" title="Loop Nerd" alt="profile.jpg" class="profile" />
    <p>Loop Nerd é um blog que posta artigos em formato de Códigos Html, css, Jquery e Design Responsivo. </p>

    <div class="social">
    
        <a href="https://twitter.com/LoopNerd" target="_blank" title="Twitter" class="btn"> <i class="icon icon-twitter"></i> </a>
        <a href="#" class="btn" title="Facebook"> <i class="icon icon-facebook"></i> </a>
        <a href="#" class="btn" title="Instagram"> <i class="icon icon-instagram"></i> </a>
    
    </div>

  </figcaption>
  <h3>Loop Nerd<span>Front-End</span></h3>
</figure>

Vamos Adicionar o CSS:

.profile-user {

  font-family:'open_sanslight';
  position: relative;
  float: none;
  margin:auto;
  overflow: hidden;
  max-width: 320px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  line-height: 1.4em;
  background-color: #23cad1;
  padding-top: 120px;
  border-radius:6px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.10);

}

.profile-user * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.profile-user img {
  max-width: 100%;
  vertical-align: top;
  opacity: 0.85;
}

.profile-user figcaption {
  width: 100%;
  height:auto;
  float:left;
  background-color: #fff;
  padding: 25px;
  position: relative;
}
.profile-user figcaption:before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px 0 0 400px;
  border-color: transparent transparent transparent #fff;
}
.profile-user .profile {
  
  border-radius: 50%;
  position: absolute;
  bottom: 100%;
  left: 25px;
  z-index: 1;
  max-width: 90px;
  opacity: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);

}

.profile-user h3 {

  font-size: 1.3em;
  margin: 25px;
  font-weight: 300;
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;

}

.profile-user h3 span {

  display: block;
  font-size: 0.65em;
  font-family:'open_sansregular';
  color: #4d4d4d;

}

.profile-user p {
  
  margin: 0 0 12px;
  padding: 0 0 25px;
  float:left;
  font-family:'open_sanslight';
  color:#4c4c4c;

}

.profile-user .social      { 

    float: left;
    width: 100%;
    text-align: center;
    border-top: 1px #f0f0f0 solid;
    padding-top: 20px;

}

.profile-user .social .btn { 

    width: 40px;
    height:40px;
    line-height:30px;
    text-align: center;
    display: inline-block;
    border: 1px #00d0d9 solid;
    color:#00d0d9;
    padding: 0.3em;
    text-decoration: none;
    font-size: 1.2em;
    border-radius:50px;
    transition:0.3s;

}

.profile-user .social .btn:hover { background-color:#4c4c4c; border: 1px #4c4c4c solid; color:#fff; }

Veja o código Funcionando.

Baixar Código Veja Funcionando