Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Caixa azul

Olá. Esta aparecendo um quadro azul atrás dos elementos das section. Imagem do erroImagem do erroCSS:

:root{
    --branco-principal: #FFFFFF;
    --cinza-secundario: #c0c0c0;
    --botao-azul: #167bf7;
    --cor-de-fundo: #00030c;
    --font-principal: 'Inter';
    --font-secundaria: 
    }

body{
    background-color: var(--cor-de-fundo);
    color: var(--branco-principal);
    font-family: var(--font-principal);
    font-size: 16px;
    font-weight: 400;
}
*{
    margin: 0;
    padding: 0;
}
.principal{
    background-image: url("/assets/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__titulo{
    font-size: 28px;
    font-weight: 700;
}
.container__imagem{
    margin: 1em 0 2em 0;
}
.container__botao{
    background-color: var(--botao-azul);
    border-radius: 5px;
    padding: 1em;
    color: var(--branco-principal);
    display: block;
    margin-bottom: 1em;
}
.botao__secundario{
    background-color: transparent;
    border: 2px solid var(--branco-principal);
}
.container__aviso{
    font-size: 12px;
    color: var(--cinza-secundario);
}
.container__caixa{
    margin: 0 6em;
}
.secundario__imagem{
    margin: 0 9em;
    width: 80%;
    background-color: transparent;
}
.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);
    font-size: 16px;
}
.secundario__botao{
    display:inline-block;
    margin-top: 1em;
}
.container__descricao{
    padding: 2em;
}

Podem ajudar?

2 respostas
solução!

Oii, Roberta! Tudo bem?

Desculpas pela demora em responder a você.

Obrigada por disponibilizar um trecho do seu código e o mesmo não apresenta nenhum erro que pode estar causando este resultado. Para identificarmos o problema será preciso analisar o seu projeto na totalidade, pois o erro pode estar em outros arquivos.

Mas por ora, uma possibilidade é que algum elemento HTML esteja com uma classe que está aplicando o estilo de fundo azul. Outra possibilidade é que algum elemento HTML esteja sem fechamento correto, o que poderia causar problemas de renderização no navegador.

Então sugiro que você observe alguns pontos:

  • Se todos os elementos HTML estão corretamente fechados. Por exemplo:
<div>
...conteúdo
</div>
  • Se possui um elemento HTML que está com a classe no qual é adicionado a cor azul, comparando as classes no arquivo HTML e a estilização no arquivo CSS.

Caso após seguir as sugestões e ainda sim não conseguir identificar o problema, compartilhe aqui o link do seu projeto no Github ou em outra plataforma, contendo os arquivos necessários. Dessa forma, consigo analisar outras partes do seu código para te ajudar de maneira mais assertiva.

Espero que dê certo!

Bons estudos, Roberta!

Obrigada pelo retorno ;)