Haga lo que hicimos en aula

1 - Agregando un subtítulo a la página

<div class="presentacion__enlaces">
  <h2>Accede a mis redes:</h2>
  <a href="https://instagram.com" class="presentacion__enlaces__link">Instagram</a>
  <a href="https://github.com" class="presentacion__enlaces__link">Github</a>
</div>

2 - Cambiando la disposición de los elementos con Flexbox

.presentacion__enlaces {
  display: flex;
  flex-direction: column; /* Cambia la dirección a vertical */
}

3 - Ajustando la alineación y el espaciado de los elementos

.presentacion__enlaces {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra los elementos horizontalmente */
  gap: 32px; /* Añade un espacio de 32px entre los elementos */
}

4 - Creando una clase para el subtítulo

<div class="presentacion__enlaces">
  <h2 class="presentacion__enlaces__subtitulo">Accede a mis redes:</h2>
  <a href="https://instagram.com" class="presentacion__enlaces__link">Instagram</a>
  <a href="https://github.com" class="presentacion__enlaces__link">Github</a>
</div>

5 - Estilizando el subtítulo

.presentacion__enlaces__subtitulo {
  font-family: 'Krona One', sans-serif; /* Fuente personalizada */
  font-weight: 400; /* Peso de la fuente */
  font-size: 24px; /* Tamaño de la fuente */
  color: #333; /* Color del texto (opcional) */
}

6 - Modificando el estilo de los botones

.presentacion__enlaces__link {
  background-color: transparent; /* Elimina el fondo cian */
  color: #F6F6F6; /* Cambia el color del texto a blanco */
  border: 2px solid #22D4FD; /* Añade un borde sólido cian */
  width: 378px; /* Ancho del botón */
  border-radius: 8px; /* Esquinas menos redondeadas */
  text-align: center; /* Alinea el texto al centro */
  padding: 10px; /* Espaciado interno */
  text-decoration: none; /* Elimina el subrayado */
  font-family: 'Montserrat', sans-serif; /* Fuente opcional */
}