Atividade 01
Partindo da estrutura inicial, eu comecei a primeira atividade criando duas novas âncoras com imagens no html:
index.html
<div class="conteudo__links">
<h2 class ="links__subtitulo"> Acesse minhas redes: </h2>
<a class ="links__botoes" href="#"> <img src="./assets/linkedin.png" alt="Logo do Linkedin"> Linkedin</a>
<a class ="links__botoes" href="#"> <img src="./assets/github.png" alt="Logo do Github"> Github</a>
<a class ="links__botoes" href="#"> <img src="./assets/twitch.png" alt="Logo da Twitch"> Twitch</a>
</div>
Atividade 02 - 03
Depois disso, transformei as âncoras em elementos flex, alinhei os itens ao centro em ambos os eixos e adicionei um gap de 16px:
style.css
.links__botoes {
border: 2px solid black;
color: black;
width: 370px;
border-radius: 8px;
text-decoration: none;
text-align: center;
font-size: 24px;
padding: 10px 0px 10px 0px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
display: flex;
justify-content: center;
text-align: center;
gap: 16px;
}
Atividade 04 - 05
Depois disso, adicionei um hover simples aos botões para que o usuário percebesse que estava passando o mouse sobre eles:
style.css
.links__botoes:hover {
background-color: #272727;
border: 2px solid #0000FF;
cursor: pointer;
color: #0000FF;
}
