src/paginas/videos.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vídeos</title>

    <!-- Bootstrap core CSS -->
    <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">

        <header class="d-flex flex-wrap justify-content-between py-4 mb-4 border-bottom">
            <div class="dropdown text-start">
              <nav class="navbar navbar-expand-lg navbar-light">
                  <div class="collapse navbar-collapse">
                      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
                          <li class="nav-item dropdown">
                              <button class="nav-link  border-0" id="navbarScrollingDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="navbar-toggler-icon"></span></button>
                              <ul class="dropdown-menu">
                                <li><a class="dropdown-item fs-3" href="index.html">Home</a></li>
                                <li><a class="dropdown-item fs-3" href="onboarding.html">Onboarding</a></li>
                                <li><a class="dropdown-item fs-3" href="formulario.html">Formulário</a></li>
                                <li><a class="dropdown-item fs-3" href="faleConosco.html">Fale Conosco</a></li>
                              </ul>
                          </li>
                      </ul>
                  </div>
              </nav>
            </div>
    
            <ul class="nav col mt-2">
              <li><a href="#" class="nav-link px-2 link-secondary fs-5">Menu</a></li>
            </ul>

            <form class="w-75 mt-2 me-3">
                <input type="search" class="form-control" placeholder="Pesquisar vídeos" aria-label="Search"
                onkeyup="search(event.target.value)" onchange="search(event.target.value)">
            </form>
    
            <div class="dropdown text-end">
              <a href="#" class="d-block link-dark text-decoration-none" id="dropdownUser1"
                  data-bs-toggle="dropdown" aria-expanded="false">
                  <img src="https://github.com/mdo.png" alt="perfil-usuario" width="60" height="60"
                      class="rounded-circle">
              </a>
            </div>
        </header>

        <main>
            <div class="album py-5">
                <div class="container">

                    <div id="cardsContainer" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div id="mensagem" role="alert"></div>
        </footer>
        <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
        <script src="../js/videos.js"></script>
        <script src="../js/compartilhado.js"></script>
</body>

</html>