<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;
	}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.