[Projeto] Lista de exercícios

1) Espaçamento e Tamanho dos Botões
Para ajustar o espaçamento e o tamanho dos botões, você pode usar Flexbox para alinhar horizontalmente e adicionar margens para espaçamento adequado.

HTML:
html
Copiar
<div class="botoes-container">
  <button class="botao">Botão 1</button>
  <button class="botao">Botão 2</button>
</div>
CSS:
css
Copiar
.botoes-container {
  display: flex;
  justify-content: center; /* Centraliza os botões horizontalmente */
  gap: 10px; /* Espaçamento entre botões */
}

.botao {
  padding: 10px 20px; /* Ajusta o tamanho dos botões */
  font-size: 16px; /* Tamanho adequado da fonte */
}
2) Melhorando a Visibilidade dos Botões
Para aumentar a visibilidade e acessibilidade, aumentamos o tamanho da fonte, ajustamos as cores e adicionamos sombras.

css
Copiar
.botao {
  padding: 10px 20px;
  font-size: 18px; /* Tamanho da fonte aumentado */
  color: #fff; /* Cor do texto */
  background-color: #007bff; /* Cor de fundo */
  border: none;
  border-radius: 5px; /* Arredondamento dos vértices */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidade */
  transition: background-color 0.3s; /* Transição suave para efeito */
}

.botao:hover {
  background-color: #0056b3; /* Efeito hover */
}
3) Criando uma Classe Comum para Botões
Crie uma classe comum chamada botao-comum para aplicar estilos aos botões "Instagram" e "GitHub".

HTML:
html
Copiar
<button class="botao-comum instagram">Instagram</button>
<button class="botao-comum github">GitHub</button>
CSS:
css
Copiar
.botao-comum {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 5px;
}

.instagram {
  background-color: #e4405f; /* Cor específica para Instagram */
}

.github {
  background-color: #333; /* Cor específica para GitHub */
}
4) Ajustando o Espaçamento Interno dos Botões
Use a propriedade padding para ajustar o espaçamento interno dos botões, garantindo consistência visual.

css
Copiar
.botao {
  padding: 15px 25px; /* Ajuste conforme o design do Figma */
}
5) Importando e Aplicando a Fonte Correta
Importe a fonte Montserrat com peso 600 do Google Fonts e aplique-a aos botões.

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

.botao {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; /* Aplicação do peso da fonte */
  text-decoration: none; /* Remove sublinhado padrão */
  color: #fff; /* Garantindo a cor do texto */
}