5
respostas

PRECISO DE AJUDA PARA AJUSTAR MEU PROJETO

file:///C:/Users/Joice/Desktop/aluraplay/aluraplay-projeto-base%20(3)/aluraplay-projeto-base/index.html#

Símbolo da Alura não aparece(do lado superior esquerdo) Menu itens não está na lateral Barra superior sumiu... Muito obrigada!

*,
*::before,
*::after {
    --azul-escuro: #154580;
    --azul-medio: #3970BE;
    --azul-claro: #E5F1FF;
    --cinza-texto: #444444;
    --cinza-claro: #ECECEC;
    box-sizing: border-box;
}
/* CABECALHO */
.cabecalho__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
}
.cabecalho__pesquisar__item {
    display: none;
}

/* RODAPE */

.rodape__container {
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-flow: column wrap ;
    
}


@media (min-width:834px) {
}
    /* CABECALHO */
.cabecalho__pesquisar__item {
    display: block;
    
}

/* MENU */

.menu__container {
    position: fixed;
    bottom: 0%;
    height: 74px;
    width: 100%;
    background-color: #154580;
}

.menu__lista {
    display: flex;
    justify-content: space-around;
    height: 100%;
}

.menu__lista li {
    align-self: center;

}

.menu__itens {
    display:flex;
    flex-direction: column;
    gap: 5px;

}

.menu__lista:nth-child(2),
.menu__lista:nth-child(3),
.menu__lista:nth-child(4) {
    display: none;
}


/* SUPERIOR SECAO */

.superior__secao__container {
    display: flex;
    align-items: center;
    white-space:nowrap ;
    overflow: scroll;
    gap: 15px;


}

/* VIDEO */
 
.videos__container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}
.videos__item {
    height: 303px;
    width: 280px;
    flex-grow: 1;
}
/* RODAPE */

.rodape__container {
    justify-content: space-between;
    
}

@media(min-width: 1440px) {
    .menu__container {
      width: 239px;
      overflow: scroll;
    }
        
   
.menu__lista:nth-child(2),
.menu__lista:nth-child(3) 
.menu__lista:nth-child(4){
    display: flex;
    }
}
.menu__container {
    left: 0;
    height: 100%;
    width: 74px;
    top: 80%;
}

.menu__lista {
    height: auto;
    padding: 20px 17px 20px 15px;
    gap: 15px;

}

.menu__itens {
    flex-direction: row;
    gap: 15px;
    align-items: center;

}

.menu_lista:nth-child(3){
    flex-direction: column-reverse;
}

.jogos {
     order: 3;
}

.filmes {
     order: 2;
}   

.premium {
    order: 1;
}

.maismagina {
    order: 4;
}
.cabecalho__pesquisar__item {
    display: block;

}





/* SECAO SUPERIOR */


.superior__item {
    color: var(--cinza-texto);
    font-size: 16px;
    background-color: white;
    border-radius: 20px;
    padding: 8px 20px;
    cursor: pointer;
}

.superior__item:hover {
    color: white;
    background-color: var(--azul-escuro);
    transition: .5s;
}




   

    /* ESTILOS RODAPÉ */

    .rodape__container {
        height: 420px;
        padding-left: 74px;
        
    }
5 respostas

Oi, Jocenice, tudo bem?

Com relação ao símbolo da Alura não aparecer, você deve verificar o caminho da imagem para ver se está correto.

O menu lateral, não aparece, pois há necessidade de revisar o código do media query referente a tamanhos mínimos de tela de 1440px. Nele precisamos remover o trecho de código abaixo:

.menu__container {
    left: 0;
    height: 100%;
    width: 74px;
    top: 80%;
} 

Além disso, é necessário alterar o fechamento da chave que envolve as propriedades dentro do @media(min-width: 1440px).

Com essas alterações o código ficaria assim:

@media(min-width: 1440px) {

    .menu__container {
        width: 239px;
        overflow: scroll;
    }

    .menu__lista:nth-child(2),
    .menu__lista:nth-child(3) .menu__lista:nth-child(4) {
        display: flex;
    }

    .menu__lista {
        height: auto;
        padding: 20px 17px 20px 15px;
        gap: 15px;

    }

    .menu__itens {
        flex-direction: row;
        gap: 15px;
        align-items: center;
    }

    .menu_lista:nth-child(3) {
        flex-direction: column-reverse;
    }

    .jogos {
        order: 3;
    }

    .filmes {
        order: 2;
    }

    .premium {
        order: 1;
    }

    .maismagina {
        order: 4;
    }
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

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

Olá Rodrigo, boa tarde! Fiz as alterações mas ainda não ficou igual a proposta do projeto.

Agradeço sua gentileza.

Oi, Jocenice, como vai?

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.

Fico no aguardo!

Ola, Rodrigo! .menu__container { position: fixed; bottom: 0%; height: 100px; width: 74%; display: flex; flex-flow: column wrap; }

.menu__lista { display: flex; justify-content: space-around; height: 100%;

https://github.com/joicemonteiros/ALURAPLAY/tree/main/aluraplay-projeto-base%20(3)/aluraplay-projeto-base/css



Não consigo achar o erro, se puder me ajudar eu agradeço muito.

Muito obrigada

Oi, Jocenice, tudo bem?

Obrigado por compartilhar seu repositório.

Inicialmente, no seu arquivo "flexbox.css" não há nenhum código, caso queira, você pode copiar o código deste link.

Além disso, seu arquivo "estilos.css" apresenta alguns códigos faltando e algumas alterações que podem impactar o seu código e deixar ele desformatado. Recomendo que você analise o código que disponibilizo neste link e faça as alterações necessárias para que seu projeto fique parecido com o apresentado no curso.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

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

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software