Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga lo que hicimos en el aula

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

  • {
    padding: 0;
    margin:0;
    }

body{
height: 100vh;
box-sizing: border-box;
background-color: #000000;
color: #F6F6F6;
}
.titulo-destaque {
color: #22D4FD; ;
}
.presentacion {
margin: 10% 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__enlaces__subtitulo {
font-family: 'krona One', sans-serif;
font-size: 24px;
font-weight: 400;
}
.presentacion__enlaces__link{
width: 378px;
text-align: center;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #f6f6f6;
font-family: 'Montserrat', sans-serif;
border: 2px solid #22D4FD;
}
Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

Hola Ariel, espero que estés bien

Parece que estás trabajando en un diseño CSS similar al que se muestra en la imagen. Aquí hay algunas sugerencias para asegurarte de que tu código CSS logre un resultado similar:

  1. Verifica las fuentes: Asegúrate de que las fuentes importadas desde Google Fonts estén correctamente aplicadas a los elementos. Por ejemplo, el título principal parece usar la fuente 'Krona One'.

  2. Alineación de texto y elementos: Usa flexbox para alinear los elementos como lo deseas. Ya estás usando display: flex; en .presentacion, lo cual es correcto. Asegúrate de que los elementos hijos estén correctamente alineados usando align-items y justify-content.

  3. Colores y estilos: Verifica que los colores coincidan con los de la imagen. Por ejemplo, el color azul de los enlaces y los bordes es #22D4FD, que ya estás utilizando.

  4. Espaciado y márgenes: Asegúrate de que los márgenes y el espaciado entre los elementos sean los adecuados. Puedes ajustar los valores de margin y gap según sea necesario.

  5. Estilo de los botones: Los botones deben tener un borde azul y texto centrado, lo cual ya estás aplicando con .presentacion__enlaces__link.

Si hay algo específico que no está funcionando como esperabas, revisa el HTML para asegurarte de que las clases CSS estén correctamente aplicadas a los elementos correctos.

Espero que estas sugerencias te sean útiles. ¡Espero haber ayudado y buenos estudios!