<section class="infosUsuario">
<img class="infosUsuario__avatar infosUsuario__avatar--circular" src="https://placehold.it/200x200" alt="">
<h2 class="infosUsuario__nome">
Nome do Usuário
</h2>
<img class="infosUsuario__label" src="https://cursos.alura.com.br/images/gnarus/profile/label-Moderador.svg" alt="">
</section>
/* infousuario.css */
.infosUsuario {
text-align: center;
}
.infosUsuario__avatar {
margin-top: 20px;
border: 9px solid #8db7d2;
}
.infosUsuario__avatar--circular {
border-radius: 50%;
}
.infosUsuario__nome {
color: #747c81;
margin: 0;
margin-top: 20px;
}
.infosUsuario__label {
margin-top: 15px;
transition: .3s;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.