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

<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">
        <h1>
            Eleve tu negocio digital a otro nivel 
            <strong class="titulo-destaque" >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>
            <img src="Imagem.png" alt="Foto de Ana García desarrolando un proyecto">
    </main>
    <footer></footer>
</body>
</html>
*{
    padding: 0;
    margin: 0;
}

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

.titulo-destaque{
    color: #22D4FD;
}
.presentacion{
    display: flex;
    align-items: center;
}
1 respuesta

Hola Justin, espero que estés bien

¡Gracias por compartir tu código! Parece que estás trabajando en un portafolio personal. Vamos a revisar algunos detalles que podrían ayudarte a mejorar o ajustar tu proyecto.

  1. Estructura del HTML: Tu estructura básica está bien organizada. Tienes las etiquetas principales como header, main y footer, lo cual es excelente para mantener un buen orden semántico.

  2. Uso de Flexbox: Veo que has aplicado display: flex en la clase .presentacion. Esto ayudará a alinear los elementos dentro del main. Sin embargo, si deseas que los elementos se distribuyan horizontalmente, podrías considerar agregar flex-direction: row; si es necesario, o flex-direction: column; si quieres que se mantengan en una columna.

  3. Imagen: Asegúrate de que la ruta de tu imagen src="Imagem.png" esté correcta y que la imagen esté en el mismo directorio que tu archivo HTML, o ajusta la ruta según sea necesario.

  4. Estilos CSS:

    • Has aplicado un color de fondo negro al body y un color de texto claro, lo cual proporciona un buen contraste.
    • La clase .titulo-destaque tiene un color diferente, lo que ayuda a resaltar esa parte del texto.
    • Considera agregar un poco de padding o margin a los elementos dentro de .presentacion para que no estén tan pegados entre sí o a los bordes del contenedor.
  5. Links de redes sociales: Los enlaces a Instagram y GitHub están bien, pero podrías añadir target="_blank" a las etiquetas <a> para que se abran en una nueva pestaña. Ejemplo:

    <a href="https://instagram.com/" target="_blank">Instagram</a>
    <a href="https://github.com/" target="_blank">GitHub</a>
    

Espero que estos consejos te sean útiles para seguir mejorando tu proyecto. ¡Espero haber ayudado y buenos estudios!