Agregando un subtítulo a la página
Cambiando la disposición de los elementos con Flexbox
.presentacion__enlaces { display: flex; flex-direction: column; /* Cambiamos la dirección a columna / align-items: flex-start; / Alineación inicial, se ajustará después */ }
- Ajustando la alineación y el espaciado de los elementos
.presentacion__enlaces { display: flex; flex-direction: column; /* Dirección en columna / align-items: center; / Centra los elementos horizontalmente / gap: 32px; / Espaciado de 32px entre cada elemento */ }
- Creando una clase para el subtítulo
Accede a mis redes:
- Estilizando el subtítulo
.presentacion__enlaces__subtitulo { font-family: 'Krona One', sans-serif; /* Fuente Krona One / font-weight: 400; / Peso de fuente 400 / font-size: 24px; / Tamaño de fuente de 24px */ }
- Modificando el estilo de los botones
.presentacion__enlaces__link { display: inline-block; text-decoration: none; color: #F6F6F6; /* Texto blanco / background-color: transparent; / Fondo transparente / border: 2px solid #22D4FD; / Borde cian de 2px / padding: 12px 24px; / Espaciado interior / width: 378px; / Ancho de 378px / text-align: center; / Centra el texto en el botón / border-radius: 8px; / Bordes menos redondeados / transition: background-color 0.3s ease; / Transición para el cambio de color de fondo */ }
.presentacion__enlaces__link:hover { background-color: #22D4FD; /* Cambia el fondo a cian en hover / color: #333; / Texto oscuro al pasar el ratón */ }