Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Tela diferente

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Posicionando elementos e atividade Margins e paddings

por FELYPE ALVES DA SILVA
| 93.5k xp | 35 posts
: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("imagens/Background.png");
    background-repeat: no-repeat;
    background-size: contain;
}

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

.container__botao {
    background-color: var(--botao-azul);
    border-radius: 10px;
    padding: 1%;
    color: var(--branco-principal);
    display: 1em;
    flex-direction: column;
    text-decoration: none;
    margin-bottom: 1em;
    width: 300px;
}

.botao__secundario {
    background-color: transparent;
    border: 2px solid var(--branco-principal);
    text-decoration: none;
    width: 300px;
}

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

.container__titulo {
    font-size: 30px;
    font-weight: 400;   
}

.container__img {
    margin: 1em 0 2em 0;
    flex-direction: row-reverse;
    flex-direction: column;
}

Oque pode ser?

1 resposta
por RODRIGO SILVA HARDER
| 2301.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Felype, tudo bem?

Notei que na sua classe container__botao você está utilizando algumas propriedades diferentes e que podem estar afetando o seu código e o posicionamento dos elementos na tela, como, o display:1em. Nessa propriedade, utilizamos valores como inline-block, block e flexentre outras. Nesta situação a instrutora utiliza o valor block. Além disso, as propriedades flex-direction, pode ser removida, pois não é aplicada quando o display está com valor diferente de flex. Desta forma o seu código com essas correções ficaria assim:

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

Outro ponto importante é que se a imagem de fundo não estiver aparecendo para você, o problema pode estar relacionado ao caminho d aimagem. Note que a pasta compartilhada pela instrutora tem o nome "img" e você colocou no caminho "imagens". Para corrigir essa situação, você pode alterar o caminho na propriedade background-image para (url("img/Background.png");).

Caso ainda esteja com dificuldade, peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva. Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Espero que dê tudo certo. Caso tenha dúvidas, conte com o fórum. Abraços!

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