1) Espaçamento e tamanho dos botões

Aqui, o desafio é ajustar o espaçamento e o tamanho dos botões. Após ter alinhado os botões horizontalmente com Flexbox, você precisa garantir que eles tenham um tamanho adequado e um espaçamento consistente entre si, conforme o design do projeto. Altere o CSS para ajustar o tamanho dos botões e adicione margem para criar o espaçamento correto.

style.css
.apresentacao__links {
    padding: 10px 20px; //Espaçamentos entre os botões
    font-size: 16px; //Tamanho da fonte de cada botão
    margin: 5px; //Margem do botão
}

2) Melhorando a visibilidade dos botões

Nesta atividade, seu foco será na acessibilidade e visibilidade dos botões. Guilherme mencionou a dificuldade em enxergar os botões. Portanto, aumente o tamanho da fonte, altere as cores e adicione efeitos como sombra ou borda para torná-los mais visíveis e atrativos. Use suas habilidades em CSS para melhorar a estética e a acessibilidade dos botões na página.

style.css
.apresentacao__links {
    font-size: 24px; //Tamanho da fonte do botão//
    color: #F6F6F6; //Cor do texto do botão//
    border: 3px solid #ffffff; //Borda do botão//
    box-shadow: 3px 2px 5px #F6F6F6; //Sombreamento do botão//
    }

3) Criando uma classe comum para botões

Nesta atividade, você irá criar uma classe CSS comum para os botões "Instagram" e "GitHub" no seu projeto HTML. Essa classe terá propriedades de estilo que farão os botões se parecerem com os do design no Figma, incluindo cor de fundo, tamanho do texto, e arredondamento dos vértices.

style.css
.apresentacao__links__link{
    background-color: ##22D4FD; //Cor do botão//
    font-size: 24px; //Tamanho da fonte do botão//
    border-radius: 16px; //Arredondamento do botão//
    }

4) Ajustando o espaçamento interno dos botões

O objetivo desta atividade é ajustar o espaçamento interno dos botões para que eles correspondam ao design no Figma. Você vai utilizar a propriedade padding para definir o espaço entre o texto do botão e suas bordas, garantindo que o layout seja consistente e visualmente agradável.

style.css
.apresentacao__links__link{
    padding: 21.5px;
    }

5) Importando e aplicando a fonte correta

Nesta atividade, você se concentrará em ajustar a fonte dos botões. Vai importar a fonte Montserrat com o peso 600 do Google Fonts e aplicá-la aos botões, garantindo que o texto corresponda exatamente ao design no Figma. Além disso, você removerá o sublinhado padrão dos links e ajustará a cor do texto.

style.css
@import url('https://fonts.googleapis.com/css2? family= Montserrat:wght@600 & display=swap');

.apresentacao__links__link{
    font-weigth: 600px;
    text-decoretion: none;
    }