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

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

:root { --color-primario: #000000; --color-secundario: #F6F6F6; --color-terciario: #22D4FD; --color-hover: #272727;

--fuente-krona: 'Krona One', sans-serif;
--fuente-montserrat: 'Montserrat', sans-serif;

}

  • { padding: 0; margin:0; }

body{ box-sizing: border-box; background-color: var(--color-primario); color: var(--color-secundario); }

.header{ padding: 2% 0% 0% 15%; }

.header__menu{ display: flex; gap: 80px; } .header__menu__link{ font-family: var(--fuente-montserrat); font-size: 1.5rem; font-weight: 600; color: var(--color-terciario); text-decoration: none;

}

.presentacion { padding: 5% 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: 2.25rem; font-family: var(--fuente-krona); }

.titulo-destaque { color: var(--color-terciario); ; }

.presentacion__contenido__texto{ font-size: 1.5rem; font-family: var(--fuente-montserrat); }

.presentacion__enlaces{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; }

.presentacion__enlaces__subtitulo{ font-family: var(--fuente-krona); font-weight: 400; font-size: 1.5rem; } .presentacion__enlaces__link{ display: flex; justify-content: center; gap: 16px; border: 2px solid var(--color-terciario); width: 378px; text-align: center; border-radius: 8px; font-size: 1.5rem; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: var(--color-secundario); font-family: var(--fuente-montserrat); }

.presentacion__enlaces__link:hover{ background-color: var(--color-hover); }

.footer{ color:var(--color-primario); background-color: var(--color-terciario); padding: 24px; text-align: center; font-family: var(--fuente-montserrat); font-size: 1.5rem; font-weight: 400; }

1 respuesta

Hola Marcelo, espero que estés bien

Sugerencia: compartir tu actividad (caso no tiene duda) en el servidor ONE / Alura Latam en Discord ;)

Parece que estás trabajando en el diseño de un sitio web utilizando CSS y has compartido el código que estás utilizando. No estoy seguro de cuál es tu pregunta específica, pero si estás buscando una revisión o sugerencias sobre cómo mejorar o solucionar algún problema en tu código, aquí van algunas ideas:

  1. Organización del Código: Asegúrate de que tu CSS esté bien organizado para facilitar su mantenimiento. Puedes considerar agrupar estilos relacionados o añadir comentarios para secciones específicas.

  2. Uso de Variables CSS: Estás utilizando variables CSS para colores y fuentes, lo cual es excelente para mantener la consistencia en todo tu diseño. Esto también facilita el cambio de temas o estilos globales.

  3. Flexbox para Layouts: Veo que estás utilizando display: flex; para varios contenedores, lo cual es una buena práctica para crear layouts responsivos. Asegúrate de probar tu diseño en diferentes tamaños de pantalla para verificar que todo se vea bien.

  4. Hover Effects: Has añadido un efecto hover para los enlaces, lo cual mejora la experiencia del usuario al interactuar con tu sitio. Considera añadir transiciones suaves para que el cambio sea más fluido.

  5. Accesibilidad: No olvides considerar aspectos de accesibilidad, como el contraste de colores y el uso de etiquetas semánticas en HTML, para asegurarte de que tu sitio sea accesible para todos los usuarios.

Si tienes una pregunta más específica o un problema que necesitas resolver, por favor házmelo saber para poder ayudarte mejor.

Espero haber ayudado y buenos estudios!