Opa! Eu já re-escrevi mais de 30x e tentei de diversos jeitos mas não desaparece o "AluraBooks" e nem a lista criada quando a tela diminui.
HTML
<h1 class="container_titulo"><b class="container_titulo-negrito">Alura</b>Books</h1>
</div>
<ul class="opçoes">
<li class="opçoes_item"><a href="#" class="opçoes_link">Categorias</a></li>
<li class="opçoes_item"><a href="#" class="opçoes_link">Favoritos</a></li>
<li class="opçoes_item"><a href="#" class="opçoes_link">Minha estante</a></li>
</ul>
.container_botao{
display: none;
}
.container_titulo {
display: none;
}
.opcoes{
display: none;
}
@media screen and (min-width: 102px) {
.container_titulo, .container_titulo-negrito {
font-family: var(--fonte-secundario);
font-size: 30px;
}
.container_titulo{
font-weight: 400;
display: block;
}
.container_titulo-negrito{
font-weight:700;
}
.opçoes{
display: flex;
}
.opçoes_item{
padding: 0 1em;
text-transform: uppercase;
}
.opçoes_link{
color: var(--cor-preto);
text-decoration: none;
}