index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sigmar&display=swap" rel="stylesheet">
    <!-- Script and Style -->
    <link rel="stylesheet" href="./Style/estilos.css?v=1.0">
    <link rel="stylesheet" href="./Style/headerSmall.css?v=1.0" media="screen and (min-width: 350px) and (max-width: 900px)" >
    <!-- Title -->
    <script src="./assets/index.js?v=1.0" defer  type="module"></script>
    <title>CATALOGE</title>
</head>
<body>
    <header>
        <nav>
            <input type="text" name="search-bar" id="search-bar" placeholder="¿Buscas una Pelicula?" autocomplete="off">
            <section class="buttons">
                <button class="button-sections" id="popular">Popular</button>
                <button class="button-sections" id="rated">Rated</button>
                <button class="button-sections" id="upcoming">Upcoming</button>
            </section>
        </nav>
    </header>
    <main class="contenedor" id="contenedor">

        
    </main>
    <div class="paginacion">
        <button id="btnAnterior">Anterior</button>
        <button id="btnSiguiente">Siguiente</button>
    </div>
</body>
</html>