Profile Card de Depoimentos

Profile Card de Depoimentos

Neste tutorial vamos fazer um profile Card de Depoimentos com html e css.

Vamos Adicionar o Html:

    <figure class="profile">
      
      <div class="autor">
        <img src="uploads/profile.jpg" title="Loop Nerd" alt="Profile"/>
        <h1>Loop Nerd</h1><span>Front-End</span>
      </div>
    
      <blockquote>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      </blockquote>
    
    </figure><!--Finaliza Profile-->

Vamos Adicionar o Css:

figure.profile {

      font-family: 'open_sansregular';
      position: relative;
      overflow: hidden;
      margin:auto;
      max-width: 300px;
      width: 100%;
      color: #333;
      text-align: left;
      box-shadow: none !important;

    }

    figure.profile * {

      -webkit-box-sizing: border-box;
      box-sizing: border-box;

    }

    figure.profile img {

      max-width: 100%;
      height: 90px;
      width: 90px;
      border-radius: 50%;
      margin-right: 5px;
      display: block;
      z-index: 1;
      position: absolute;
      right: 55%;

    }

    figure.profile blockquote {

      margin: 0;
      display: block;
      border-radius: 8px;
      position: relative;
      background-color: #ffffff;
      padding: 65px 50px 35px 50px;
      font-size: 0.8em;
      font-weight: 500;
      margin: -40px 0 0;
      line-height: 1.6em;
      box-shadow: 1px 0px 1.2px 0px #e3e3e3;
      border-bottom: 2px #dfdfdf solid;

    }

    figure.profile blockquote:before,
    figure.profile blockquote:after {
      font-family: 'untitled-font-1';
      content: "\e13e";
      position: absolute;
      font-size: 12px;
      opacity: 0.2;
      font-style: normal;
    }

    figure.profile blockquote:before {
      top: 55px;
      left: 20px;
    }

    figure.profile blockquote:after {
      content: "\e13f";
      right: 30px;
      bottom: 15px;
    }

    figure.profile .autor {
      margin: 0;
      height: 80px;
      display: block;
      text-align: left;
      padding: 0 35px;
      position: relative;
      z-index: 1;
    }

    figure.profile .autor h1,
    figure.profile .autor span {
      left: 45%;
      position: absolute;
      padding: 3px 5px;
    }

    figure.profile .autor h1 {
      
      bottom: 50%;
      margin: 0;
      font-size:1.3em; 
      color: #4c4c4c;

    }

    figure.profile .autor span {

      font-size: 1em;
      color: #06d3d7;
      top: 55%;
      font-weight: 500;

    }

Veja o Resultado!

Baixar Código Veja Funcionando