LO QUE HICIMOS | HTML y CSS: header, footer y variables CSS | Alura Latam

2
respuestas

por Jaime Alberto Loayza Vilcapuna

| 27.1k xp | 60 posts

Accede a mis redes:

/* 1. Estilos generales */ body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }

.presentacion__enlaces { display: flex; flex-direction: column; /* Disposición vertical de los elementos / align-items: center; / Centra los elementos / gap: 32px; / Espaciado entre los elementos */ padding: 50px; }

/* 2. Estilo para el subtítulo / .presentacion__enlaces__subtitulo { font-family: 'Krona One', sans-serif; / Fuente Krona One / font-weight: 400; / Peso de la fuente / font-size: 24px; / Tamaño de la fuente / text-align: center; color: #333; / Color del texto */ }

/* 3. Estilo para los botones / .presentacion__enlaces__link { color: #F6F6F6; / Color del texto en blanco / background-color: transparent; / Fondo transparente / border: 2px solid #22D4FD; / Borde cian / width: 378px; / Ancho de los botones / padding: 12px 20px; / Espaciado interno / border-radius: 8px; / Bordes menos redondeados / text-decoration: none; / Eliminar subrayado / text-align: center; / Alineación del texto */ display: block; }

.presentacion__enlaces__link:hover { background-color: #22D4FD; /* Fondo cian al pasar el ratón / color: #333; / Color de texto oscuro al pasar el ratón */ }

/* 4. Estilos adicionales / @media screen and (max-width: 768px) { .presentacion__enlaces__link { width: 100%; / Botones más pequeños en pantallas pequeñas */ } }

2 respuestas

por Daysibel.pitter

| 343k xp | 1197 posts

Instructor

hace 2 semanas

Hola, Jaime ,

Gracias por compartir tu código con nosotros.Te felicito por tu aprendizaje. Recuerda que estamos aquí para ayudarte. Si necesitas ayuda, no dudes en buscarnos en el foro.

¡Gracias nuevamente!

Saludos,

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!

por Germaini33

| 39.8k xp | 71 posts

Tecnico

hace 5 días

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');


* {
    padding: 0;
    margin:0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-color: #040504;
    color: #F6F6F6;
}


.titulo-destaque {
    color: #22D4FD; ;
}

.presentacion {
    margin: 12% 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.presentacion__contenido{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.presentacion__contenido__titulo{
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

.presentacion__contenido__texto{
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}

.presentacion__enlaces{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.presentacion__enlase__sudtitulos{
    font-family: "kroma One", sans-serif;
    font-size: 24px;
    font-weight: 400;

}

.presentacion__enlaces__link{
    width: 378px;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    color: #F6F6F6;
    border: 2px solid #22D4FD;