2
respostas

Código do visual studio code com erro

Boa tarde!!

Fiz o desafio do footer da aula praticando HTML e CSS , porém a lista link não fica como na página do Figma. O código está igual o da professora, mas a página fica diferente. Segue meu código.

:root {
    --branco-principal: #FFFFFF;
    --cinza-secundario: #C0C0C0;
    --botao-azul: #167BF7;
    --cor-de-fundo: #00030C;
    --fonte-principal: 'Inter';

}

body {
    background-color: var(--cor-de-fundo);
    color: var(--branco-principal);
    font-family: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
}

*.{
    margin: 0;
    padding: 0;
}

    .principal {
        background-image: url("img/Background.png");
        background-repeat: no-repeat;
        background-size: contain;
        align-items: center;
        text-align: center;
    }

    .container {
        height: 100vh;
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .container__botao {
        background-color: var(--botao-azul);
        border-radius: 5px;
        padding: 1em;
        color: var(--branco-principal);
        display: block;
        text-decoration: none;
        margin-bottom:  1em;
    }

    .botao_secundario {
        background-color: transparent;
        border: 2px solid var(--branco-principal)
    }

    .container__aviso {
        font-size: 12px;
        color: var(--cinza-secundario);
    }

    .container__titulo {
        font-size:  28px;
        font-weight: 700;
    }

    .container__imagem {
        margin: 1em 0 2em 0;

    }

    .container__caixa {
        margin: 0 6em;
    }

    .secundario__imagem {
        width: 80%;
    }

    .secundario {
        align-items: center;
        margin: 0 10em;
    }

    .descricao__titulo {
        font-weight: 700;
        font-size: 48px;
        color: var(--branco-principal);
        margin-bottom: 0.1em;
    }

    .descricao__texto {
        color: var(--cinza-secundario)
    }

    .secundario__botao {
        display: inline-block;
        margin-top: 1em;
    }

    .container__descricao {
        padding: 2em;
    }

    .dispositivos__lista {
        display: flex;
        justify-content: center;
        list-style-type: none;
        margin: 5em 0;
    }

    .dispositivos {
        text-align: center;
    }

    .dispositivos__titulo {
        font-size: 48px;
        color: var(--branco-principal);
    }

    .lista__item {
        font-size: 32px;
        color: var(--branco-principal);
    }

    .rodape__lista {
        display: flex;
        justify-content: center;
        list-style-type: none;
        margin-top: 1em;
    }

    .lista__link a {
       text-decoration: none;
       color: var(--branco-principal);
       margin-left: 1em;
    }

    .rodape__texto {
        margin: 1em 0;
        color: var(--cinza-secundario);
        font-size: 14px;   
    }
    .lista__link a:hover{
        color: var(--botao-azul);
    }

    .lista__link a:active {
        color: purple;
    }

    .container__botao:hover {
        background-color:var(--botao-azul-efeito);
        color: var(--cor-de-fundo);
    }

    .rodape {
        text-align: center;
        margin: 5em 3em;
    }
2 respostas

Olá Angela, tudo bem?

De fato, o CSS do footer está igual ao da aula, mas para que eu possa testar e visualizar melhor o que pode estar ocorrendo e tentar te ajudar, eu peço que você me envie também o código do index.html, pois pode haver um erro de sintaxe por lá.

Outro ponto é, você poderia detalhar melhor o que está ocorrendo que não está igual ao figma? É a margem, a cor ou o que que não está funcionando? Se preferir, envie uma imagem de como está para que eu possa analisar.

Fico no aguardo para mais informações, abraços!

Boa noite!!

Eu até tinha deixado este erro de lado, mas hoje fui olhar a página para te enviar e agora parece estar certo. Acredito que não estava atualizando a página no momento que escrevi o código. Segue abaixo o HTML e a página

        <footer class="rodape">
            <img src="img/Logo.png" alt="Alura+" class="rodape__logo">
            <ul class="rodape__lista">
                <li class="lista__link">
                    <a href="#">Idioma</a>
                </li>
                <li class="lista__link">
                    <a href="#">Dispositivos compatíveis</a>
                </li>
                <li class="lista__link">
                    <a href="#">Contrato de assinatura</a>
                </li>
                <li class="lista__link">
                    <a href="#">Política de privacidade</a>
                </li>
                <li class="lista__link">
                    <a href="#">Proteção de dados no Brasil</a>
                </li>
                <li class="lista__link">
                    <a href="#">Anúncios personalizados</a>
                </li>
                <li class="lista__link">
                    <a href="#">Ajuda</a>
                </li>
            </ul>
            <p class="rodape__texto">® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.</p>
            <p class="rodape__texto">Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. O serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33</p>
        </footer>
    </body>
</html>

https://angelaeds.github.io/Alura-Plus/