[Dúvida] erro na imagem e botao linkdin | HTML e CSS: cabeçalho, footer e variáveis CSS

<html lang="pt-br">

<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>Portifolio</title>
    <link rel="stylesheet" href="./styles/styles.css">
</head>

<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível<strong 
            class="titulo-destaque">com um Front-end de qualidade!
            </strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Gabriel Matthias, desenvolvedor
            Front-end com especialidade em React, HTML e
            CSS. Ajudo pequenos negócios e designers a
            colocarem em prática boas ideias. Vamos
            conversar?</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse meu linkedin</h2>
                
                </a>
                <a class="apresentacao__links__link" href="https://linkedin.com/in/rafaellaballerini">
                    <img src="./acets/linkedin.png">
                    linkedin
                
                </a>
            </div>
        </section>
        <img src="./acets/foto.jpg" class="foto_gabriel" alt="Foto do Gabriel ">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Gabriel Matthias</p>
    </footer>
</body>

</html>


```@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
    --cor-primaria: #C8AE7D;
    --cor-secundaria: #765827;
    --cor-terciaria: #65451F;
    --cor-hover: #272727;

    --fonte-primaria: 'Krona One', sans-serif;
    --fonte-secundaria: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

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

.cabecalho__menu {
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link {
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;
}

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

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

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: var(--fonte-primaria);
}

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

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: var(--fonte-secundaria);
}

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

.apresentacao__links__subtitulo {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 24px;
}

Olá, Gabriel! Tudo bem?

Vou ajudar a identificar e corrigir os problemas que encontrei:

Erro no HTML: Na seção de links de apresentação, parece que há uma tag em excesso, logo antes da tag <a> do link do LinkedIn. Isso pode estar causando problemas na formatação do seu código.


<div class="apresentacao__links">
    <h2 class="apresentacao__links__subtitulo">Acesse meu linkedin</h2>
    <!-- </a> Remova essa linha -->
    <a class="apresentacao__links__link" href="https://linkedin.com/in/rafaellaballerini">
        <img src="./acets/linkedin.png">
        linkedin
    </a>
</div>

Erro de Fechamento: Na tag <img> do link do LinkedIn, você esqueceu de fechar a tag corretamente. Certifique-se de adicionar uma barra após o fechamento da tag <img>.


 <a class="apresentacao__links__link" href="https://linkedin.com/in/rafaellaballerini">
    <img src="./acets/linkedin.png" alt="LinkedIn">
  linkedin
 </a>

Erro na URL da Imagem: Certifique-se de que o caminho para a imagem do LinkedIn está correto e que a pasta "acets" existe no mesmo diretório do seu HTML.

Depois de fazer essas correções, seu código deve funcionar de forma mais adequada. Lembre-se de sempre conferir a estrutura do HTML, a formatação do CSS e os caminhos dos arquivos para evitar problemas. Se continuar enfrentando dificuldades, considere compartilhar mais detalhes sobre os erros específicos que está enfrentando para que possamos ajudar de forma mais precisa.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em programação