<section class="hero is-fullheight is-default is-bold">
    <div class="hero-head">
      <nav class="navbar">
        <div class="container">
          <div class="navbar-brand">
            <a class="navbar-item" href="../">
              <img src="https://bulma.io/images/bulma-logo.png" alt="Made with Bulma">
            </a>
            <span class="navbar-burger burger" data-target="navbarMenu">
              <span></span>
              <span></span>
              <span></span>
            </span>
          </div>
          <div id="navbarMenu" class="navbar-menu">
            <div class="navbar-end">
              <div class="tabs is-right">
                <ul>
                  <li class="is-active"><a>Home</a></li>
                  <li><a href="">Examples</a></li>
                  <li><a href="">Features</a></li>
                  <li><a href="">Team</a></li>
                  <li><a href="">Help</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
    <div class="hero-body">
      <div class="container has-text-centered">
        <div class="columns is-vcentered">
          <div class="column is-5">
            <figure class="image is-4by3">
              <img class="inverted" src="https://picsum.photos/800/600/?random" alt="Description">
            </figure>
          </div>
          <div class="column is-6 is-offset-1">
            <h1 class="title is-2">
              Superhero Scaffolding
            </h1>
            <h2 class="subtitle is-4">
              Let this cover page describe a product or service.
            </h2>
            <br>
            <p class="has-text-centered">
              <a class="button is-medium is-info is-outlined">
                Learn more
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="hero-foot">
      <div class="container">
        <div class="tabs is-centered">
          <ul>
            <li><a>And this is the bottom</a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

html,
body {
  font-family: "Open Sans";
}

img {
  padding: 5px;
  border: 1px solid #ccc;
}
/* this class will be toggled */
.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}
.invert {
  filter: invert(1) hue-rotate(180deg);
}

window.onload = function () {
  document.onkeypress = function (e) {
    console.log(e);
    e = e || window.event;
    if (e.keyCode === 13) {
      document.documentElement.classList.toggle("dark-mode");
      document.querySelectorAll(".inverted").forEach((result) => {
        result.classList.toggle("invert");
      });
    }
  };
};