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>MONOLIX</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <a href="index.html">
            <img url="index.html" src ="logo.png" alt="Logo Monolix" class="logo">
        </a>
        <h1 url="index.html">MONOLIX</h1>

        <nav>
            <button id="menu-toggle">☰</button>
            <ul id="slide-menu">
                <li><a href="index.html">Inicio</a></li>
                <li><a href="Monitorar.html">Monitoreo</a></li>
                <li><a href="Resultado.html">Resultado</a></li>
            </ul>

        </nav>
    </header>
    <div class="container">
        <h2>Bem-vindo a MONILIX!</h2> 
        <img src=""></img>
        <P>Este é uma ferramento para o monitoramento de áreas de disposição de residuos sólidos, com o objetivo de determinar seu potencial impacto ao ambiente.</P>
        <div class="hero">
            <img id="hero" src="hero.JPG" alt="Descriçõ da Imagem" class="inicio-imagem">
        </div>
    </div>
  <script>
    const menuToggle = document.getElementById('menu-toggle');
    const slideMenu = document.getElementById('slide-menu');

    menuToggle.addEventListener('click', () => {
        slideMenu.style.right = slideMenu.style.right === '0px' ? '-250px' : '0px';
    });

  </script>
</body>
</html>