Atividade 01
index.html
<div class="apresentacao__links">
<h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
<a class="apresentacao__links__link" href="#">
<img src="./assets/github.png">
Github
</a>
<a class="apresentacao__links__link" href="#">
<img src="./assets/linkedin.png">
linkedin
</a>
<a class="apresentacao__links__link" href="#">
<img src="./assets/twitch.png">
Twitch
</a>
</div>
Atividade 02 - 03
Transformei as âncoras em elementos flex, alinhei os itens ao centro em ambos os eixos e dei espaçamento entre icones e testos adicionando um gap de 16px:
style.css
.apresentacao__links__link{
border: 2px solid #22D4FD;
width: 378px;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #F6F6F6;
font-family: 'Montserrat', sans-serif;
display: flex;
justify-content: center;
text-align: center;
gap: 16px;
}
Atividade 04 - 05
Por fim, depois adicionei um hover aos botões para que o usuário note que estava passando o mouse sobre eles:
style.css
.apresentacao__links__link:hover {
background-color: #272727;
border: 2px solid #00ffea;
cursor: pointer;
color: #00ffea;
}
Para saber mais:
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!