[Sugestão] Compartilhando Arquivos para quem precisar | HTML e CSS

Vocês sabiam que clicar em no botão exclamação ele ja tras todo o conteudo de cima? rs

Continuando

INDEX.HTML

<!DOCTYPE html>
<html lang="PT-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alura Books</title>
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <header class="cabeçalho">
      <div class="container">
        <input type="checkbox" id="menu" class="container-botão" />
        <label for="menu">
          <span class="cabeçalho__menu-hamburguer container__imagem"></span>
        </label>
        <ul class="lista-menu">
          <li class="lista-menu__titulo">Categorias</li>
          <li class="lista-menu-item">
            <a href="#" class="lista-menu__link">Programação</a>
          </li>
          <li class="lista-menu-item">
            <a href="#" class="lista-menu__link">Front-End</a>
          </li>
          <li class="lista-menu-item">
            <a href="#" class="lista-menu__link">Infraestrutura</a>
          </li>
          <li class="lista-menu-item">
            <a href="#" class="lista-menu__link">Business</a>
          </li>
          <li class="lista-menu-item">
            <a href="#" class="lista-menu__link">Design & UX</a>
          </li>
        </ul>
        <img src="./img/logo.svg" alt="Logo Alura" class="container__imagem" />
      </div>
      <div class="container">
        <a href="#"><img src="img/Favoritos.svg" alt=" Favoritos" class="container__imagem" /></a>
        <a href="#"><img src="img/Compras.svg" alt=" Carrinho" class="container__imagem" /></a>
        <a href="#"><img src="img/Usuario.svg" alt=" Usuario" class="container__imagem" /></a>
      </div>
    </header>
  </body>
</html>

STYLE.CSS

@import url(styles/header.css);

:root {
  --cor-de-fundo: #ebecee;
  --branco: #ffffff;
}

body {
  background-color: var(--cor-de-fundo);
}

STYLE-HEADER.CSS

Geralmente eu ja pego através do site https://cdnjs.com/libraries/meyer-reset . Mas geralmente é melhor conforme a orientadora:

.cabeçalho__menu-hamburguer {
  width: 24px;
  height: 24px;
  background-image: url('../img/Menu.svg');
  background-repeat: no-repeat;
  display: inline-block;
  background-position: center;
}
.cabeçalho {
  background-color: var(--branco);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.container {
  display: flex;
  align-items: center;
}

.container__imagem {
  padding: 1em;
}

.lista-menu {
  display: none;
  position: absolute;
  top: 100%;
}

.container-botão:checked ~ .lista-menu {
  display: block;
}

Obs.: Mudei alguns títulos, para ficar mais fácil pra mim, ok ?

Espero ajudar!