Menu hamburguer | Front-end

Oi Nathalia, tudo bem?

Fiz algumas mudanças no seu código para que o Menu aparecesse, comentei no código CSS o que mudei:

<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documento</title>
    <link rel="stylesheet" href="style.css">
    
</head>

<body>
    <h1>Coding <span style="color: #0000ff;">Addict</span></h1>
    <div id="menu">
        <label for="menu-checkbox" id="logo"></label>
        <input type="checkbox" id="menu-checkbox">
        <div id="menu-content">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Projetos</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 25px;
            margin: 0; /* Remover margens padrão do corpo da página */
            padding: 0; /* Remover preenchimento padrão do corpo da página */
        }

        h1 {
            padding: 30px;
            margin: 0; /* Remover margens padrão do h1 */
        }

        #menu {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }

        #logo,
        #menu-icon {
            background: url('https://raw.githubusercontent.com/alura-cursos/alurabooks/2c2d01dce8fb86198de987b04a64befeb3b72ba1/img/Menu.svg') no-repeat;
            width: 30px;
            height: 30px;
            display: block;
            cursor: pointer;
        }

        #menu-content {
            display: none;
            position: absolute;
            top: 60px; /* Ajuste conforme necessário para a posição do menu suspenso */
            right: 10px; /* Ajuste conforme necessário para a posição do menu suspenso */
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
        }

        #menu-checkbox {
            display: none; /* Ocultar a checkbox padrão */
        }

        #menu-checkbox:checked+#menu-content {
            display: block; /* Exibir o menu quando a checkbox estiver marcada */
        }

        a {
            text-decoration: none;
            color: black;
        }

        li {
            margin: auto;
            text-align: end;
            display: inline;
            margin-right: 10px;
        }

Utilizei uma checkbox oculta para controlar o estado do menu. Quando a checkbox está marcada, o menu é exibido. Essa abordagem é puramente baseada em HTML e CSS. Você pode ajustar a posição do menu suspenso e outros estilos conforme necessário.

Ah eu usei uma imagem da web pois não tinha a sua imagem para testar. Você precisa mudar para a sua imagem de volta.

Um abraço e bons estudos.