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

Posicionando más elementos: Haga lo que hicimos

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 Anderson Felipe Estrada Sánchez
| 25.3k xp | 68 posts

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <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="presentación">
        <h1>
            Eleve tu negocio digital a otro nivel 
            <strong class="título-destaque">con un Front-end de calidad!
            </strong>
        </h1>
        <p>
            <strong>¡Hola! Soy Ana García,</strong> 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://www.instagram.com/">Instagram</a>
        <a href="https://github.com/">GitHub</a>
        <img src="imagem.png" alt="Ana García"
    </main>
    <footer></footer>
</body>
</html>

CSS:

* {
    padding: 0;
    margin: 0
}

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

.título-destaque {
    color: #22D4FD;
}

.presentación {
    display: flex;
    align-items: center;
}

Resultado: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta
por Brenda Souza
| 4968.2k xp | 17914 posts
Instructor Scuba

¡Hola Anderson, espero que estés bien!

Parece que estás intentando alinear elementos dentro de un contenedor usando Flexbox. He notado algunos detalles que podrían estar causando problemas en tu código:

  1. Etiqueta <link> incompleta: En tu HTML, la etiqueta <link> para el archivo CSS no está cerrada correctamente. Debería ser:

    <link rel="stylesheet" href="style.css">

  2. Imagen no cerrada: La etiqueta <img> no está cerrada. Debería ser:

    <img src="imagem.png" alt="Ana García">

  3. Alineación de los elementos: Si deseas alinear los elementos de manera más específica dentro del contenedor .presentación, puedes ajustar las propiedades de Flexbox. Por ejemplo, si quieres centrar los elementos horizontalmente, puedes usar justify-content: center;. Si quieres que la imagen esté a la derecha y el texto a la izquierda, puedes usar justify-content: space-between;.

Aquí tienes un ejemplo de cómo podría quedar tu CSS con estas modificaciones:

.presentación {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Con estos cambios, deberías ver una mejor alineación de los elementos en tu página.

Espero haber ayudado y buenos estudios!