Skip to content

Instantly share code, notes, and snippets.

@jeffersondev

jeffersondev/toti-css-avatar.css

Last active July 6, 2024 00:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jeffersondev/ac1af1c135b432fbeaa27461dc48dca8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jeffersondev/ac1af1c135b432fbeaa27461dc48dca8 to your computer and use it in GitHub Desktop.
Download ZIP
Curso de FrontEnd da TOTI - Módulo de CSS3 - Aula de Avatar (replicação de avatar da página https://forum.adrenaline.com.br)
Raw
toti-css-avatar.css
body {
background-color: #1c1c1c;
}
.avatar {
position: relative;
height: 96px;
width: 96px;
}
.avatar__conteudo {
font-family: "Helvetica Neue", sans-serif;
font-size: 58px;
color: #ffffff;
background-color: #02887a;
height: 100%;
width: 100%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.avatar__imagem {
object-fit: cover;
height: 100%;
width: 100%;
}
.avatar__badge {
position: absolute;
bottom: -9px;
left: calc(50% - 9px);
color: #000000;
background-color: #80b800;
height: 18px;
width: 18px;
border-radius: 50%;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
Raw
toti-css-avatar.html
<html>
<body>
<div class="avatar">
<span class="avatar__conteudo">C</span>
</div>
<hr>
<div class="avatar">
<span class="avatar__conteudo">
<img src="https://www.clipartkey.com/mpngs/m/35-356826_batman-face-png-batman-cartoon-face-png.png" alt="Batman" class="avatar__imagem">
</span>
<span class="avatar__badge">u</span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment