Box de Depoimentos com Css

Neste artigo vamos criar um Box de depoimentos com css

Vamos adicionar o html:

<figure class="depoimento">
  
   <figcaption>
    
        <h1>Loop Nerd</h1>
        <span>Front-End</span>
        <p>Acompanhem o Blog tem vários artigos sobre Html, Css, jQuery e WordPress. </p>
  
   </figcaption>
  
   <div class="avatar">
    
        <a href="https://www.loopnerd.com.br/" target="_blank">
            <img src="uploads/perfil.jpg" title="Loop Nerd - Códigos Html e Css Pronto" alt="perfil" />
        </a>
        
        <div class="redes-sociais">

          <a href="https://twitter.com/LoopNerd" target="_blank"> <i class="icon icon-twitter"></i></a>
          <a href="https://www.facebook.com/loopnerd"> <i class="icon icon-facebook" target="_blank"></i></a>
          <a href="https://br.pinterest.com/loopnerd/"> <i class="icon icon-pinterest" target="_blank"></i></a>
        
        </div>

    </div><!--avatar-->

</figure>

Vamos adicionar o Css:

.depoimento {
  
  font-family:'open_sansregular';
  position: relative;
  display: block;
  margin: auto;
  min-width: 230px;
  max-width: 320px;
  width: 100%;
  color: #141414;
  text-align: left;
  line-height: 1.4em;
  font-size: 14px;
  

}

.depoimento * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.depoimento .avatar img {
  
  border-radius:100%;
  max-width: 100%;
  height: 80px;
  vertical-align: top;
  float: left;
  border: 1px #ccc solid;
  background-color:#fff;
  padding: 3px;
  margin-left:32px;
  margin-right:15px;
  transition:0.4s;
}

.depoimento .avatar img:hover { 

    background-color:#4de4e7; 
    transition:0.4s;
}


.depoimento figcaption {
  width: 100%;
  background-color: #4c4c4c;
  color: #fff;
  padding: 25px;
  display: inline-block;
  margin-bottom: 25px;
  border-radius: 35px;
  position: relative;
}

.depoimento figcaption:after {
  content: '';
  position: absolute;
  left:60px;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: #4c4c4c transparent transparent transparent;
}

.depoimento h1 {

  width: 100%;
  float:left;
  font-family:'open_sansregular';
  font-size: 1.2em;
  margin-bottom:3px;

}

.depoimento span {
 
    width: 100%;
    float: left;
    font-family: 'open_sanslight';
    font-size: 1em;
    color: #4de4e7;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 10px;

}

.depoimento p {

  width: 100%;
  float: left;
  font-family:'open_sanslight';
  font-size:1em;

}

.depoimento .redes-sociais {
  
  padding: 20px 90px;

}

.depoimento i {
  padding: 10px 2px;
  display: inline-block;
  font-size:1.5em;
  color: #4c4c4c;

}

.depoimento i:hover {

  color:#4de4e7;  
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

Veja o resultado!

Baixar Código Veja Funcionando