index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Refresh" content="0; url='https://files.community/'" />
    <title>Files</title>
    <!-- META -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:title" content="Files" />
    <meta property="og:description" content="A modern file explorer that pushes the boundaries of the Windows platform." />
    <meta property="og:image" content="https://user-images.githubusercontent.com/39923744/102912796-da431f00-444b-11eb-9f8e-6deab47d0e45.png" />
    <meta name="description" content="A modern file explorer that pushes the boundaries of the platform." />
    <!-- Favicon -->
    <link rel="icon" href="img/favicon.png" sizes="32x32" type="image/png" />

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css" />
    <!-- AOS -->
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <!--  Custom CSS -->
    <link rel="stylesheet" href="css/custom.css" />
  </head>

  <body>
    <!--
           :------------
          ----------------
          -----------------::::::::::::::::::
          ---------------:::::::::::::::::::::
          ::::::::::::::::::::::::::::::::::::
          ::::::::::::::::::::::::::::::::::::
          ::::::::::::::::::::::::::::::::::::
          :::::::::::::::::::::::::::::::::::-
          ----------------------------------+*#-
          -------------------------------=+*####
          -----------------------------=+++*####
          --------------------------=+++++++####
          ------------------------=+++++++==####
          --------------------==+++++++==--=####
          ------------------=++++++++=-----=####
          ---------------==+++++++==-------=####
           ------------==+++++++++++++++++++++++
          Files        +++++++++++++++++++++++++
    -->
    <div class="parallax">
      <!-- Parallaxing background image -->
      <div class="parallax-layer parallax-background-image">
        <div class="image-receiver"></div>
      </div>

      <!-- Parallaxing header-->
      <div class="jumbotron jumbotron-fluid" id="banner">
        <div class="container text-center text-md-center">
          <header>
            <div class="row justify-content-between">
              <div class="col-2">
                <a href="index.html">
                  <img src="img/logo.png" alt="logo" />
                </a>
              </div>
              <div class="col-2 align-self-center">
                <div class="dropdown">
                  <a class="btn btn-light dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                    Languages
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <li><a class="dropdown-item disabled" href="../">English</a></li>
                    <li><a class="dropdown-item" href="/ja-jp/">日本語</a></li>
                    <li><a class="dropdown-item" href="/fa-IR/">فارسی</a></li>
                    <li><a class="dropdown-item" href="/ko-kr/">한국어</a></li>
                    <li><a class="dropdown-item" href="/pt-PT/">Português</a></li>
                    <li><a class="dropdown-item" href="/zh-Hant/">繁體中文</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <h1 class="display-2 text-white fw-bold my-2">Files</h1>
            <h4 class="text-white fw-light my-4">A modern file explorer that pushes the boundaries of the platform.</h4>
            <a href="https://www.microsoft.com/store/apps/9NGHP3DX8HDX" class="btn my-2 mx-2 fw-bold cta cta-white"
              target="_blank">
              Download Now
            </a>
            <a href="https://github.com/files-community/Files" class="btn my-2 mx-2 fw-bold cta cta-white-outline"
              target="_blank">
              View on GitHub
            </a>
          </header>
        </div>
      </div>

      <!-- Rest of the website -->
      <div class="parallax-content-layer">
        <!-- Features -->
        <div class="container my-5 py-2">
          <h2 class="text-center fw-bold my-5">Notable Features</h2>
          <div class="row">
            <div class="col-md-4 text-center">
              <img src="img/icons/tabs.svg" class="mx-auto my-5" alt="Tabs Icon" height="110" height="110" />
              <h4>Multiple Tabs</h4>
              <p>Multiple tabs to increase your productivity</p>
            </div>
            <div class="col-md-4 text-center">
              <img src="https://img.icons8.com/fluent/96/000000/paint-palette.png" alt="Fluent Design"
                class="mx-auto my-5" width="110" height="110" />
              <h4>Fluent Design</h4>
              <p>The best of Fluent to enhance usability</p>
            </div>
            <div class="col-md-4 text-center">
              <img src="img/icons/quicklook.png" alt="QuickLook Icon" class="mx-auto my-5" width="110" height="110" />
              <h4>QuickLook Support</h4>
              <p>Full support for QuickLook to quickly preview your files</p>
            </div>
          </div>
        </div>

        <!-- Information -->
        <div class="jumbotron jumbotron-fluid info" id="info">
          <div class="container my-5">
            <div class="row justify-content-between text-center text-md-left">
              <div class="col-md-6">
                <h2 class="fw-bold">Take a look inside</h2>
                <p class="my-4">Check out the documentation to find tips &amp; tricks and to learn more about Files</p>
                <a href="docs/" class="btn my-4 cta cta-darkblue" target="_blank">Documentation</a>
              </div>
              <div class="col-md-6 align-self-center">
                <img src="img/laptop-splash.png" alt="Laptop Demo" class="mx-auto d-block" />
              </div>
            </div>
          </div>
        </div>

        <!-- Copyright -->
        <div class="jumbotron jumbotron-fluid" id="copyright">
          <div class="container">
            <div class="row justify-content-between">
              <div class="col-md-6 text-white align-self-center text-center text-md-left my-2">Copyright © 2021 Files
                Community</div>
                <div class="col-md-6 align-self-center text-center text-md-right my-2" id="social-media">
                  <div class="icons-container">
                    <a href="https://github.com/files-community" rel="external" class="d-inline-block ml-2">
                      <i class="bi-github"></i>
                    </a>
                    <a href="https://discord.gg/mr5hVu8" rel="external" class="d-inline-block ml-2">
                      <i class="bi-discord"></i>
                    </a>
                    <a href="http://paypal.me/yaichenbaum" rel="external" class="d-inline-block text-center ml-2 icon-paypal"></a>
                  </div>
                </div>
              </div>
          </div>
        </div>

        <!-- Analytics -->
        <script type="text/javascript">
          (function (c, l, a, r, i, t, y) {
            c[a] =
              c[a] ||
              function () {
                (c[a].q = c[a].q || []).push(arguments);
              };
            t = l.createElement(r);
            t.async = 1;
            t.src = "https://www.clarity.ms/tag/" + i;
            y = l.getElementsByTagName(r)[0];
            y.parentNode.insertBefore(t, y);
          })(window, document, "clarity", "script", "4q1wajdktz");
        </script>
      </div>
    </div>

    <div id="translation-toast-ja-jp" class="translation-toast bottom toast-hidden" aria-level="1" aria-live="assertive">
      <p>This page is also available in Japanese.</p>
      <p>To view this page in Japanese <a aria-label="Japenese version of this page" href="./ja-jp/">click here.</a></p>
      <button id="close-button" aria-label="Close translation popup button"
        aria-label="Close information popup" aria-live="assertive"
        onclick="toastCloseButtonClick()">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 30 30">
          <line x1="0" y1="0" x2="30" y2="30" stroke="black" stroke-width="2" />
          <line x1="30" y1="0" x2="0" y2="30" stroke="black" stroke-width="2" />
        </svg>
      </button>
    </div>

    <div id="translation-toast-zh-TW" class="translation-toast bottom toast-hidden" aria-level="1" aria-live="assertive">
      <p>This page is also available in Chinese (Traditional).</p>
      <p>要使用繁體中文瀏覽此網站請 <a aria-label="Chinese Traditional version of this page" href="./zh-Hant/">點擊這裡</a>。</p>
      <button id="close-button" aria-label="Close translation popup button"
        aria-label="Close information popup" aria-live="assertive"
        onclick="toastCloseButtonClick()">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 30 30">
          <line x1="0" y1="0" x2="30" y2="30" stroke="black" stroke-width="2" />
          <line x1="30" y1="0" x2="0" y2="30" stroke="black" stroke-width="2" />
        </svg>
      </button>
    </div>

    <script src="./js/index.js"></script>
  </body>
</html>