Exercício um) Espaçamento e tamanho dos botões
Conteúdo HTML:
<div class="apresentacao__links">
<a class="apresentacao__links__link" href="https://instagram.com/rafaballerini">Instagram</a> </span>
<a class="apresentacao__links__link" href="https://github.com/guilhermeonrails">Github</a> </span>
</div>
Conteúdo CSS:
.apresentacao__links {
display: flex;
justify-content: space-between;
padding: 21.5px 0;
font-size: 24px;
margin: 5px;
}
Exercício dois) Melhorando a visibilidade dos botões
Conteúdo CSS:
.apresentacao__links a {
display: flex;
justify-content: space-between;
padding: 21.5px 0;
font-size: 30px;
margin: 5px;
background-color: #22D4FD;
color: #000000;
border-radius: 6px;
text-align: center;
text-decoration: none;
}
Exercício três) Criando uma classe comum para botões
Conteúdo CSS:
.apresentacao__links__botoes {
background-color: #22D4FD;
color: #000000;
width: 280px;
padding: 21.5px 0;
border-radius: 16px;
font-size: 24px;
margin: 5px;
text-align: center;
text-decoration: none;
}
Exercício quatro) Ajustando o espaçamento interno dos botões
Conteúdo CSS:
.apresentacao__links__botoes {
padding: 21.5px 0;
}
Exercício cinco) Importando e aplicando a fonte correta
Conteúdo CSS:
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
.apresentacao__links__botoes {
color: #000000;
font-weight: 600
font-family: "Montserrat", sans-serif;
text-decoration: none;
}