Como posso está resolvendo esse problema? desde já obrigado!
Como posso está resolvendo esse problema? desde já obrigado!
Oii Bruno, tudo bem?
Você poderia mandar seu código completo aqui? Assim fica melhor pra te ajudar. Você pode usar a ferramenta de inserir bloco de código </>
.
Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.
Um abraço e bons estudos.
.cabecalho__container {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
.cabecalho__pesquisar__item {
display: none;
}
/*SUPERIOR SEÇÃO*/
.superior__secao__container {
display: flex;
align-items: center;
white-space: nowrap;
gap: 15px;
}
.superior__item {
font-size: 12px;
}
/*MENU*/
.menu__container {
position: fixed;
bottom: 0%;
height: 74px;
width: 100vw;
}
/*MENU*/
.menu__lista {
display: flex;
justify-content: space-around;
font-size: 12px;
height: 100%;
}
.menu__lista li {
align-self: center;
}
.menu__lista:nth-child(2),
.menu__lista:nth-child(3),
.menu__lista:nth-child(4) {
display: none;
}
.menu__itens {
display: flex;
flex-direction: column;
gap: 5px;
}
/*RODAPE*/
.rodape__container {
display: flex;
flex-flow: column wrap;
}
@media(min-width:834px) {
/*CABEÇALHO*/
.cabecalho__pesquisar__item {
display: block;
}
/*RODAPE*/
.rodape__container {
justify-content: space-between;
}
.menu__container {
left: 0;
height: auto;
width: 74px;
top: 80px;
}
.menu__lista {
flex-direction: column;
justify-content: flex-start;
font-size: 12px;
padding-top: 15px;
gap: 33px;
}
}
@media (min-width:1070px) {
.menu__container {
width: 279px;
}
}
amigo voce precisa mandar o código completo, o HTML também! só o css não ajuda :
mas eu diria pra vc revisar o código olhando pro código pronto da aula, deve ser algo bem pequeno
<li>
<a class="menu__itens" href="#">
<i class="icone__ballerini icone-item"></i>
<span>Rafaella Ballerini</span></a>
</li>
<li>
<a class="menu__itens" href="#">
<i class="icone__gaveta icone-item"></i>
<span>Gaveta</span></a>
</li>
<li>
<a class="menu__itens" href="#">
<i class="icone__alura icone-item"></i>
<span>Alura</span></a>
</li>
<li>
<a class="menu__itens inscricoes" href="#">INSCRIÇÕES</a>
</li>
</ul>
<ul class="menu__lista">
<li class="jogos">
<a class="menu__itens" href="#">
<i class="icone__jogos icone-item"></i>
<span>Jogos</span></a>
</li>
</li>
<li class="filmes">
<a class="menu__itens" href="#">
<i class="icone__filmes icone-item"></i>
<span>Filmes</span></a>
</li>
<li class="premium">
<a class="menu__itens" href="#">
<i class="icone__videos icone-item"></i>
<span>Vídeo Premium</span></a>
</li>
<li class="menu__itens maispagina">
<a href="#">MAIS DA PÁGINA</a>
</li>
</ul>
</aside>
<!-- Seção superior -->
<section class="superior__secao__container">
<a class="superior__item" href="#">Tudo</a>
<a class="superior__item" href="#">Debates</a>
<a class="superior__item" href="#">Ao Vivo</a>
<a class="superior__item" href="#">Podcasts</a>
<a class="superior__item" href="#">Fundos de Investimento</a>
<a class="superior__item" href="#">Desenhos</a>
<a class="superior__item" href="#">Data Science</a>
<a class="superior__item" href="#">Apps</a>
<a class="superior__item" href="#">Linguagem de Programação</a>
<a class="superior__item" href="#">Ciência da Computação</a>
<a class="superior__item" href="#">Marketing</a>
</section>
236 mil visualizações - há 8 dias
618 visualizações - Há 1 mês
1,1 mil visualizações - Há 1 mês
3 mil visualizações - Há 3 meses