Entrar Ainda não tem acesso?
1
resposta

Lista de exercicios - manipulando botões

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox

por Zilda Albino Marcelli
| 19.7k xp | 13 posts
Supervisora de Back Office 
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family&familymonteserrat:wght@400;600&display=swap');

*{
  margin: 0;
  padding: 0;
}

body{
  height: 100vh;
  box-sizing: border-box;
  background: #000000;
    color: #f6f6f6;
}

.titulo-destaque{
    color: #24d4FD;
}

.apresentacao {
  margin: 8%;
  display: flex;
  align-items:center;
  justify-content: space-between;
}

.apresentacao__conteudo {
  width: 615px;
}

.apresentacao__conteudo__titulo {
  font-size: 36px;
  font-family:"Krona One", sans-serif;
  color:#24d4FD;
}

.apresentacao__conteudo__texto {
  font-size: 24px;
  font-family: "Montserrat", sans-serif;
}

.apresentacao__links {
  display: flex;
  justify-content: space-between;
}

.apresentacao__links__link {
  background-color: #22D4FD;
  width: 280px;
  text-align: center;
  border-radius: 16px;
  font-size: 24px;
  font-weight: 600;
  padding: 21.5px 0;
  text-decoration: none;
  color:#000000
  }
1 resposta
por Rafaela Petelin Silvério
| 728.4k xp | 1628 posts
Alura Scuba Team Monitora de Fórum

Oi, Zilda! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura.

Gostei de como você estruturou sua estilização com display: flex;, tornando o layout responsivo e alinhado. Uma dica: no seletor .apresentacao, você pode usar gap para ajustar o espaçamento entre os elementos sem precisar definir margens manualmente.

Veja este exemplo: 


.apresentacao {
  margin: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px; /* Adiciona um espaço uniforme entre os itens */
}

Isso ajuda a deixar o código mais limpo e flexível.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!