_layouts/default.html

<!doctype html>
<html lang="{{ site.lang | default: "en-US" }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC:400|Lora:700" rel="stylesheet">
    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
    <script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="theme-color" content="#FF7F66" />
    <title>{{ site.title }}</title>

    <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="languages">
      <button onclick="buttonFunc()" class="dropbtn">Language</button>
      <div id="langDropdown" class="dropdown-content">
        <a href="/">EN US</a>
        <a href="/index-de_DE.html">DE DE</a>
        <a href="/index-es_CO.html">ES CO</a>
        <a href="/index-pt_BR.html">PT BR</a>
      </div>
    </div>
    <div class="wrapper">
      <div id="background">
        <p id="bg-text">Confidimus in HODL</p>
      </div>
      <header {% unless site.description or site.github.project_tagline %} class="without-description" {% endunless %}>
        <h1><a href="https://hodlermanifesto.com/">{{ site.title | default: site.github.repository_name }}</a></h1>
        {% if site.description or site.github.project_tagline %}
          <p>{{ site.description | default: site.github.project_tagline }}</p>
        {% endif %}
        <p class="view"><a href="{{ site.github.repository_url }}">View the project on GitHub <small>{{ github_name }}</small></a></p>
        <ul>
          <li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
        </ul>
      </header>
      <section>
        {{ content }}
      </section>
    </div>
    <footer>
    {% if site.github.is_project_page %}
      <p>Created by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
    {% endif %}
      <p>Hosted on GitHub Pages</p>
    </footer>
    <!--[if !IE]><script>fixScale(document);</script><![endif]-->
    <script>
$(function() {
  return $("h2, h3, h4, h5, h6").each(function(i, el) {
    var $el, icon, id;
    $el = $(el);
    id = $el.attr('id');
    icon = '<i class="fas fa-link"></i>';
    if (id) {
      return $el.prepend($("<a />").addClass("header-link").attr("href", "#" + id).html(icon));
    }
  });
});
function buttonFunc() {
    document.getElementById("langDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

  </body>
</html>