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&display=swap');

  • { padding: 0; margin:0; }

:root{ --color-primary: #000000; --color-secondary: #f6f6f6; --color-tertiary: #22D4FD; --color-fourth: #272727; --font-montserrat: 'Montserrat', sans-serif; --font-krona: 'Krona One', sans-serif; }

body { background-color: var(--color-primary); color: var(--color-secondary); box-sizing: border-box; }

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

.header_menu{ display: flex; gap: 80px; }

.header_menu_link{ font-family: var(--font-montserrat); font-weight: 600; color: var(--color-tertiary); text-decoration: none; font-size: 1.5rem; border-radius: 10px; transition: background-color 0.3s ease; }

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

.presentation_home { display: flex; align-items: center; justify-content: space-between; padding: 5% 15%; gap: 82px; }

.presentation_home_content { display: flex; gap: 40px; width: 50%; flex-direction: column; }

.presentation_home_title { font-size: 2.25rem; font-family: var(--font-krona); }

.presentation_home_title_strong { color: var(--color-tertiary); }

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

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

.presentation_home_links_subtitle{ font-family: var(--font-krona); font-size: 1.5rem; font-weight: 400; }

.presentation_home_link { display: flex; justify-content: center; gap: 16px; border: 2px solid var(--color-tertiary); width: 50%; text-align: center; border-radius: 8px; font-size: 1.5rem; font-weight: 600; color: var(--color-secondary); padding: 21.5px 0; text-decoration: none; font-family: var(--font-montserrat); }

.presentation_home_link img { width: 1.5rem; /* Ajusta el tamaño del icono / height: 1.5rem; / Ajusta el tamaño del icono */ }

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

.presentation_about { display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: center; min-height: 80vh; width: 100%; }

.content { display: flex; flex-direction: column; /* Alinea las secciones en columna / max-width: 60%; / Ajuste el ancho del contenido */ width: 50%; }

.photo { max-width: 400px; width: 50%; /* Ajuste para que la imagen se adapte al espacio disponible / border-radius: 10px; flex: 1; / Permite que la imagen ocupe el mismo espacio que el div */ }

.footer{ background-color: var(--color-tertiary); color: var(--color-primary); padding: 24px; text-align: center; font-family: var(--font-krona); font-size: 1.5rem; font-weight: 400; }

.footer p { margin: 0; /* Elimina el margen de los párrafos en el footer / padding: 2px; / Ajusta el relleno para separar los párrafos */ }

1 respuesta

Hola Estudiante, espero que estés bien

Gracias por compartir tu ejercício práctico con nosotros! Tu contribución es fundamental para el crecimiento de nuestra comunidad en Alura. Sigue comprometido y no dudes en regresar al foro en caso que tengas alguna duda o dificultad.

¡Abrazos y buenos estudios!

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