Como fazer um profile card com HTML e CSS 

Como fazer um profile card com HTML e CSS

Neste tutorial vamos aprender como criar um profile card para o seu website.

Nesta seção, projetaremos uma estrutura simples nas seguintes tags:

<figure>, <figcaption>, <img>, <i>, <p>,  <ul>,<li>, e a <href> para inserir link de destino. 

Essas são as tags que usaremos para criar o nosso profile card com html e css.

Vamos Adicionar o HTML

    <figure class="profile-card">
          
        <div class="profile-header">
              <img src="uploads/capa-perfil.png" alt="Capa Perfil">
        </div>
          
        <div class="profile-body">
          
            <div class="img-perfil">
                <img src="uploads/perfil.png" title="Loop Nerd" alt="perfil">
            </div>
          
                <div class="titulo">Loop Nerd</div>
                <figcaption class="descricao">
                   
                   <p>

                       <b>Front-end Developer</b><br>
                       Códigos HTML e CSS Prontos<br> 
                       Para Agilizar o Seu Tempo.

                   </p>

                </figcaption>

                <div class="redes-sociais">
                    
                    <ul>
                    
                        <li><a href="#" title="Facebook"> <i class="icon icon-facebook"></i> </a></li>
                        <li><a href="#" title="Instagram"> <i class="icon icon-instagram"></i> </a></li>
                        <li><a href="#" title="Twitter"> <i class="icon icon-twitter"></i> </a></li>
                        <li><a href="#" title="Pinterest"> <i class="icon icon-pinterest"></i> </a></li>

                    </ul>
                </div>
          </div>
    
    </figure><!--Profile Card-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o profile card com html e css.

.profile-card{

    width:100%;
    max-width: 360px;
    height: auto;
    text-align: center;
    margin:auto;
    box-shadow: 0px 0px 8px rgba(56, 56, 56, 0.1);

}

.profile-card .profile-header{

    min-height: 88px;

}

.profile-card .profile-body{

    background-color: #ffffff;
    padding: 20px 40px 40px 40px;

}

.profile-card .profile-body .img-perfil{

    margin-top: -85px;
    margin-bottom: 20px;

}

.profile-card .profile-body .img-perfil img{

    width: 120px;
    height: 120px;
    border-radius: 50%; 
    padding: 3px;
    background-color: #ededed;

}

.profile-card .profile-body .titulo{
   
   font-size: 30px;
   color: #007cff;
}

.profile-card .profile-body .descricao{

   font-size: 14px;
   font-weight: 400;
   line-height: 1.6;
   margin: 20px  0px 30px  0px;

}

.redes-sociais ul {

    list-style-type: none;

}

.redes-sociais ul li {

    display: inline-block;

}

.redes-sociais ul li a {
  
  margin-right: 5px;
  width: 40px;
  height: 40px;
  border:1px solid #ddd;
  display: block;
  text-decoration: none;
  border-radius: 50%;
  transition: all 0.5s ease-out;
 
}
 
.redes-sociais ul{
 
  margin:0;
  padding:0;
 
}
 
.redes-sociais ul li a:hover {
 
  background-color: #007cff;
  border:1px solid #007cff;
 
}
  
.redes-sociais ul li a i{
 
   line-height: 40px;
   color:#666;
 
}
  
.redes-sociais ul li a i:hover,
.redes-sociais ul li a:hover i{
 
   color:#ffffff;
  
}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando