Oi gente , tem alguma coisa errada com meu código , sei que os erros foram aumentando KKKK. Mas por exemplo não tem a cor de fundo alguém pode me ajudar segue o código em baixo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AluraBooks</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="reset.css">
</head>
<body>
<header class="cabeçalio"></header>
<div class="container"></div>
<input type="checkbox" id="menu" class="container__botao">
<label for="menu">
<span class="cabeçalio__menu-hamburger"div cless="container"container__imagem></span>
</label>
<ul class="lista-menu">
<li class="lista-menu__titulo">Categorias</li>
<li class="lista-menu__item"></li><a href="#class="lista-menu__link"></a>
<li class="lista-menu__titulo">front end</li>
<li class="lista-menu__titulo">busines</li>
<li class="lista-menu__titulo">Design & UX</li>
</ul>
<img src="Logo.svg" alt="Logo da AluraBooks" class="cabeçalio__menu-hamburger">
<a href="#"><img src="Favoritos.svg"alt="meus favoritos" class="container__imagem"></a>
<a href="#"><img src="compras.svg" alt="carrinho de compras" class="container__imagem"></a>
<a href="#"><img src="Usuario.svg" alt="meus meu perfil" class="container__imagem"></a>
</body>
</html>
@import("styles/header.css");
:root {
--cor-de-fundo: #EBECEE;
--branco:#ffffff;
}
body {
background-color: var(--cor-de-fundo);
}
cabeçalho__menu-hamburguer{
width: 24px;
height: 24px;
background-image: url(../Menu.svg);
background-repeat: no-repeat;
background-position: center;
display: inline-block;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
}
.container{
display: flex;
align-items: center;
}
.container__imagem{
padding: 1em;
}
.lista-menu{
display: none
}
.container__botao:checked ~.lista-menu{
display: block;
}
