un ejemplo práctico que combina los conceptos de Flexbox y diseño responsivo, siguiendo los pasos que mencionaste:
HTML (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Flexbox y Diseño Responsivo</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="presentacion">
<section class="presentacion__contenido">
<h1 class="presentacion__contenido__titulo">Descubre la Nueva Generación</h1>
<p class="presentacion__contenido__texto">Texto de ejemplo sobre el producto o servicio innovador que estás presentando. Destaca sus características y beneficios clave.</p>
</section>
<img src="imagen_producto.jpg" alt="Imagen del producto">
</div>
</body>
</html>
CSS (style.css):
/* 1. Espaciado y márgenes */
.presentacion {
display: flex;
align-items: center;
justify-content: space-between; /* Distribuye elementos con espacio entre ellos */
margin: 5%; /* Margen exterior para evitar que toque los bordes */
gap: 20px; /* Espacio entre la imagen y el texto */
}
/* 2. Tamaño de la sección de texto */
.presentacion__contenido {
width: 45%; /* Ajusta según tu diseño en Figma */
}
/* 3. Tamaños de títulos y textos */
.presentacion__contenido__titulo {
font-family: 'Krona One', sans-serif;
font-size: 2.5rem; /* Ajusta según Figma */
}
.presentacion__contenido__texto {
font-family: 'Montserrat', sans-serif;
font-size: 1.2rem; /* Ajusta según Figma */
}
/* Diseño Responsivo (Ejemplo) */
@media (max-width: 768px) {
.presentacion {
flex-direction: column; /* Apila elementos en pantallas pequeñas */
text-align: center; /* Centra el texto */
}
.presentacion__contenido {
width: 90%; /* Ocupa más espacio en pantallas pequeñas */
}
}
Explicación:
Flexbox: El contenedor principal .presentacion usa Flexbox para distribuir sus elementos hijos (texto e imagen) con espacio entre ellos y alinearlos verticalmente al centro.
Márgenes y espaciado: Se aplican márgenes al contenedor y un gap entre los elementos para mejorar la presentación visual.
Tamaño del texto: Se ajusta el ancho de la sección de texto y los tamaños de fuente del título y el párrafo.
Google Fonts: Se importan las fuentes "Krona One" y "Montserrat" desde Google Fonts y se aplican a los elementos de texto correspondientes.
Diseño Responsivo: Se incluye un ejemplo de cómo adaptar el diseño para pantallas más pequeñas, apilando los elementos verticalmente y centrando el texto.
Puntos clave:
Reemplaza "imagen_producto.jpg" por la ruta de tu imagen real.
Ajusta los valores de ancho (width) y tamaño de fuente (font-size) según las medidas exactas de tu diseño en Figma.
Personaliza el diseño responsivo para que se adapte a los diferentes tamaños de pantalla de tus usuarios.
