Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Problema con el proyecto del curso botones se ven juntos

hola buenas tardes estimados, tengo problema con el portafolio del curso eh seguido tal cual el cursos y desde la parte de los botones me salen junto y la imagen pegada pero cuando bajo la visualizacion del navegador al 80% si se ve igual al del curso incluso descargue el del curso para ver si era mi codigo y sale igual les dejo mi codigo y imagen del navegador

<!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="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presentacion__contenido__titulo">Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad!</strong>
            
            </h1>
            <p class="presentacion__contenido__texto">¡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>
            <div class="presentacion__enlaces">
                <a class="presentacion__enlaces__link" href="https://www.instagram.com/">Instagram</a>
                <a class="presentacion__enlaces__link" href="https://github.com/">GitHub</a>
            </div>
        </section>
            <img src="Imagem.png" alt="imangen de ana garcia">
    </main>
    <footer></footer>
    
</body>
</html>

y el css

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
    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;
    margin:10% 15%;
    justify-content: space-between;
}
.presentacion__contenido{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    
}
.presentacion__contenido__titulo{
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}
.presentacion__contenido__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}
.presentacion__enlaces{
    display: flex;
    justify-content: space-between;
    
}
.presentacion__enlaces__link{
    width: 280px;
    background-color:#22D4FD;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 16px;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration:none;
    color: #000000;
    

}

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

2 respuestas

¡Hola Jose!

Entiendo que estás teniendo problemas con la visualización de tu portafolio en el navegador, específicamente con la ubicación de los botones y la imagen. Parece que el problema puede estar relacionado con el espaciado entre los elementos y el posicionamiento de los mismos.

Después de revisar tu código, noté que estás utilizando la propiedad justify-content: space-between; en la clase .presentacion, lo cual puede estar generando el problema al distribuir los elementos horizontalmente. Te recomendaría que pruebes cambiar esta propiedad por justify-content: center; para que los elementos se centren horizontalmente en el contenedor principal.

Además, para crear un espacio entre los elementos de la sección de presentación de contenido, puedes utilizar la propiedad gap de Flexbox. Esta propiedad permite establecer un espacio entre los elementos hijos. En tu caso, podrías añadir gap: 40px; a la clase .presentacion__contenido para separar el título, el párrafo y los botones.

Después de realizar estos cambios, asegúrate de probar la visualización en diferentes tamaños de pantalla para confirmar que los elementos se muestran correctamente en distintos dispositivos.

Espero que estas sugerencias te ayuden a solucionar el problema. ¡Buena suerte con tu portafolio!

Espero haber ayudado y buenos estudios!

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

Yo diria que es por el navegador que es Edge.