1
resposta

[Bug] Links ainda juntos e não estilizado

Boa noite. Meus links continuam juntos e não receberam estilização de background e sem estilização dos botões:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifólio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>   
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível 
            <strong class="título-destaque">um Front-end de qualidade! </strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Maria, desenvolvedora 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="aprensetacao__links">
                <a class="aprensetacao__links__link" href="https://www.instagram.com/vic.oak"> Instagram</a>
                <a class="aprensetacao__links__link" href="https://github.com/VeronicaDSC">Github</a>
            </div>
        </section>  
         <img src="figma imagem.png" alt="foto da garota programando">
    </main>
    <footer></footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital@0;1&display=swap');

*{
    margin: 0;
    padding: 0;
}



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

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

.apresentacao{
    margin: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}    

.apresentacao__conteudo{
    width: 615px;
}

.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

.apresentacao__links{
    display:flex;
    justify-content: space-between;
}

.apresentacao__links__link{
    background-color: #22D4FD;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá, Veronica. Tudo bem?

O problema ocorre devido a uma diferença nos nomes das classes entre o HTML e o CSS. No HTML, as classes estão como aprensetacao__links e aprensetacao__links__link, enquanto no CSS os seletores são .apresentacao__links e .apresentacao__links__link. Para corrigir isso, basta ajustar os nomes das classes no HTML para que correspondam exatamente aos seletores no CSS. Assim, as classes serão aplicadas corretamente.

Se precisar de mais ajuda, estou à disposição.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado