Entrar ¿Aún no tienes acceso?
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 Clases : Posicionando mas Elementos

Referente al curso HTML y CSS: Clases, Posicionamiento y Flexbox, en el capítulo Posicionando más elementos y actividad Haga lo que hicimos

por Gino Abril Luján Bellantuono
| 28.4k xp | 61 posts

Adjunto código HTML Y CSS

HTML

<!DOCTYPE html>
<html lang="es-mx">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="presentacion">
        <section>
        <h1>
            Eleve tu negocio digital a otro nivel 
            <strong>con un Front-end de calidad!
            </strong></h1>
            <p>¡Hola! Soy Ana García, desarrolladora Front-end con
                especialización en React, HTML y CSS. Ayudo a pequeños
                 negocios y diseñadores a llevar a cabo buenas ideas.
                  ¿Hablamos?

            </p>
            <a href="https://instagram.com/">Instagram</a>
            <a href="https://github.com/">GitHub</a>
        </section>
            <img src="Rectangle 47.png" alt="Foto de Ana García desarrolando un proyecto">
    </main>
    <footer></footer>
</body>
</html>

CSS

* {
    padding: 0;
    margin:0;
}

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

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

.presentacion {
    display: flex;
    align-items: center;
}
1 respuesta
por Brenda Souza
| 6092.4k xp | 22299 posts
Instructor

¡Hola Gino, espero que estés bien!

Gracias por compartir tu código. Parece que estás intentando aplicar el concepto de Flexbox para alinear elementos dentro de tu sección main con la clase presentacion. Tu código HTML y CSS parece estar en orden de acuerdo con el ejercicio que mencionaste.

Sin embargo, si estás buscando alinear más elementos o ajustar el diseño, aquí hay algunas sugerencias que podrías considerar:

  1. Alinear horizontalmente: Si deseas que los elementos dentro de la sección .presentacion estén alineados horizontalmente, asegúrate de que el contenedor tenga suficiente espacio para mostrarlos uno al lado del otro. Puedes ajustar el tamaño de la imagen o el ancho del contenedor si es necesario.

  2. Espaciado entre elementos: Puedes utilizar justify-content para manejar el espaciado entre los elementos. Por ejemplo, justify-content: space-between; colocará espacio igual entre los elementos.

  3. Tamaño de la imagen: Si la imagen es demasiado grande y está afectando el diseño, puedes ajustar su tamaño con CSS:

    img {
    max-width: 100%;
    height: auto;
}

  4. Ajustes responsivos: Asegúrate de que tu diseño es responsivo, especialmente si estás utilizando flexbox. Puedes utilizar media queries para ajustar el diseño en diferentes tamaños de pantalla.

Aquí tienes un ejemplo de cómo podrías ajustar el CSS para mejorar el diseño:

.presentacion {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espacio igual entre elementos */
    padding: 20px; /* Añadir algo de espacio alrededor */
}

img {
    max-width: 50%; /* Ajustar el tamaño de la imagen */
    height: auto;
}

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