Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

problemas con mi código

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

¿Cómo puedo separar el texto con la imagen(quiero reducir el tamaño de la imagen)?
no puedo quitar la linea del curriculum del encabezado, a pesar que utilicé text-decoration:none.

mi codigo:
index

<!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="styles/style.css">

</head>
<body>
    <header class="header">
        <nav class="header__menu">
            <a class="header__menu__link" href="index.html">Home</a>
            <a class="header__menu__link" href="about.html">Sobre mí</a>
            <a class="header_menu_link" href="curriculum.html">Curriculum</a>
        </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presentacion__contenido__titulo">
                La Tecnología como herramienta puede
                <strong class="titulo-destaque">abrir puertas, conectar a personas y
                     transformar ideas a productos 
                </strong></h1>
                <p class="presentacion__contenido__texto">¡Hola! Soy Katya Yupanqui García, desarrolladora en java script, html y css. 
                    Comparto mis logros durante mi aprendizaje en el mundo de la programación...

                </p>
                <div class="presentacion__enlaces">
                    <h2 class="presentacion__enlaces__subtitulo">Accede a mis redes</h2>
                    <a class="presentacion__enlaces__link" href="https://github.com/">
                        <img src="./assets/github.png">
                        Github
                    </a>
                    <a class="presentacion__enlaces__link" href="https://linkedin.com/in/">
                        <img src="./assets/linkedin.png">
                        Linkedin
                    </a>
            
                </div>
               
        </section>
            <img src="./assets/katyaa.png" alt="Foto de Ana García desarrolando un proyecto">
    </main>
    <footer class="footer">
        <p>Desarrollado por Katya Yupanqui</p>
    </footer>
</body>
</html>

css

:root{
    --color-primario: #D6A99D;
    --color-secundario: #FBF3D5;
    --color-terciario: #D6DAC8;
    --color-hover: #272727;

    --fuente-montserrat: 'Monserrat', sans serif;
    --fuente-krona: 'Krona one',sans serif;
}

* {
    padding: 0;
    margin:0;
}

body{
    /* height: 100vh; */
    box-sizing: border-box;
    background-color: var(--color-primario);
    color: var(--color-secundario);
}

.header{
    padding: 2% 0% 0% 15%;
}

.header__menu{
    display: flex;
    gap: 80px;
    
}
.header__menu__link{

    font-family: var(--fuente-montserrat);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-terciario);
   text-decoration: none;

}



.presentacion {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.presentacion__contenido{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}


.presentacion__contenido__titulo{
    font-size: 36px;
    font-family: var(--fuente-krona);
    text-align: justify;
}

.titulo-destaque {
    color: var(--color-terciario);
}

.presentacion__contenido__texto{
    font-size: 24px;
    font-family: var(--fuente-montserrat);
    text-align: justify;
}

.presentacion__enlaces{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.presentacion__enlaces__subtitulo{
    font-family: var(--fuente-krona);
    font-weight: 400;
    font-size: 24px;
}

.presentacion__enlaces__link{
    
      display: flex;
      justify-content: center;
      gap: 16px;
      border: 2px solid var(--color-terciario);
      width: 378px;
      text-align: center;
      border-radius: 8px;
      font-size: 24px;
      font-weight: 600;
      padding: 21.5px 0;
      text-decoration: none;
      color: var(--color-secundario);
      font-family: var(--fuente-montserrat);
}

.presentacion__enlaces__link:hover{
    background-color: var(--color-hover);
}

.footer{
    color: #000000;
    background-color: var(--color-terciario);
    padding: 24px;
    text-align: center;
    font-family: var(--fuente-montserrat);
    font-size: 24px;
    font-weight: 400;
}
1 respuesta

¡Hola, Katya, espero que estés bien!

Para resolver tus problemas, aquí tienes algunas sugerencias:

  1. Separar el texto de la imagen y reducir el tamaño de la imagen:

    Puedes ajustar el tamaño de la imagen utilizando CSS. Añade una clase a la imagen y define su tamaño. También puedes añadir un margen para separar la imagen del texto.

    <img class="presentacion__imagen" src="./assets/katyaa.png" alt="Foto de Ana García desarrolando un proyecto">
    
    .presentacion__imagen {
        width: 200px; /* Ajusta el tamaño según tus necesidades */
        margin-left: 20px; /* Espacio entre el texto y la imagen */
    }
    
  2. Quitar la línea del enlace "Curriculum":

    Parece que hay un pequeño error tipográfico en la clase de CSS para el enlace de "Curriculum". Asegúrate de que todas las clases sean consistentes:

    <a class="header__menu__link" href="curriculum.html">Curriculum</a>
    

    Asegúrate de que el CSS se aplique correctamente:

    .header__menu__link {
        text-decoration: none;
    }
    

    Si el enlace sigue mostrando una línea, verifica si hay algún estilo heredado o si el navegador está guardando en caché los estilos antiguos. Intenta limpiar la caché o usar el modo incógnito para probar.

Espero haber ayudado y buenos estudios!