index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="icon" href="img/favicon.png" />
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://apihub.vercel.app/" />
    <meta
      property="og:title"
      content="Get collective list of free APIs for your next project."
    />
    <meta property="og:description" content="" />
    <meta
      property="og:image"
      content="https://user-images.githubusercontent.com/47467468/132079037-15f99a49-aa52-45ca-9d4b-50cb941499a3.png"
    />

    <title>Api Hub</title>
  </head>
  <body>
    <nav class="">
      <div class="alert-msg text-center" role="alert">
        The Public APIs project needs your support.
        <a
          class="fw-bold"
          href="https://t.me/hackelite01"
          target="_blank"
          >Join the discussion</a
        >
        and help it stay alive!
      </div>
      <div class="navbar flex">
        <h4>&#128223; Api Hub</h4>
        <a
          href="https://github.com/hackelite01/ApiHub"
          target="_blank"
          class="star-btn"
          >⭐ Star on Github</a
        >
      </div>
    </nav>

    <div class="flex flex-col justify-content-center">
      <div class="main input-data text-center">
        <h1 class="fw-bold display-2 my-5">
          Get collective list of free APIs for your next project.
        </h1>

        <div class="flex flex-row">
          <select class="form-control categories">
            <option>Select Category</option>

            <option>Animals</option>
            <option>Anime</option>
            <option>Anti-Malware</option>
            <option>Art</option>
            <option>Books</option>
            <option>Business</option>
            <option>Calendar</option>
            <option>Cloud Storage</option>
            <option>Continuous Integration</option>
            <option>Cryptocurrency</option>
            <option>Currency Exchange</option>
            <option>Data Validation</option>
            <option>Development</option>
            <option>Dictionaries</option>
            <option>Environment</option>
            <option>Events</option>
            <option>Finance</option>
            <option>Food</option>
            <option>Games</option>
            <option>Geocoding</option>
            <option>Government</option>
            <option>Health</option>
            <option>Jobs</option>
            <option>Machine Learning</option>
            <option>Music</option>
            <option>News</option>
            <option>Open Data</option>
            <option>Open Source Projects</option>
            <option>Patent</option>
            <option>Personality</option>
            <option>Photography</option>
            <option>Productivity</option>
            <option>Science</option>
            <option>Security</option>
            <option>Shopping</option>
            <option>Social</option>
            <option>Sports</option>
            <option>Test Data</option>
            <option>Text Analysis</option>
            <option>Tracking</option>
            <option>Transportation</option>
            <option>URL Shorteners</option>
            <option>Vehicle</option>
            <option>Video</option>
            <option>Weather</option>
          </select>

          <button type="button" class="btn show-btn">Show APIs</button>
        </div>

        <h5 class="count mt-4"></h5>
        <div class="text-center loader"></div>
      </div>
    </div>

    <div class="apis"></div>
    <img src="img/up-arrow.png" class="up-arrow hide" id="top" />

    <footer class="bottom">
      Made with &#10084; By
      <a href="https://mayankrajput.ml" target="_blank">Mayank Rajput</a>
    </footer>
  </body>
  <script src="app.js"></script>
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</html>