index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>GitHub Finder</title>

    <!-- Bootstrap core CSS -->
    <link href="https://bootswatch.com/4/simplex/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Primer/3.0.1/css/primer.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js"></script>
  </head>

  <body>

    <header>
      <div class="navbar navbar-dark bg-dark box-shadow">
        <div class="container d-flex justify-content-between">
          <a href="#" class="navbar-brand d-flex align-items-center text-white">
            <img src="img/mark-github.svg">
          </a>
        </div>
      </div>
    </header>

    <main role="main">

      <section class="jumbotron text-center">
        <div class="container">
          <h1 class="jumbotron-heading">GitHub favorite finders</h1>
          <p class="lead text-muted">Look for all the starred projects of a public user</p>
          <input type="text" id="searchUser" class="form-control" placeholder="GitHub name...">

            <div class="btn-group">
                <button id="btnFilter" class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="none">
                    Filter by
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item filter" value="name">Repository Name</a>
                    <a class="dropdown-item filter" value="stargazers_count">Stars</a>
                    <a class="dropdown-item filter" value="open_issues">Open Issues</a>
                    <a class="dropdown-item filter" value="none">None</a>
                </div>
            </div>

            <div class="btn-group">
                <button id="btn-language" class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="none">
                    Language
                </button>
                <div class="dropdown-menu" id="dropdownLanguages">
                        <a class="dropdown-item language" value="JavaScript">JavaScript</a>
                        <a class="dropdown-item language" value="PHP">PHP</a>
                        <a class="dropdown-item language" value="Shell">Shell</a>
                        <a class="dropdown-item language" value="Assembly">Assembly</a>
                        <a class="dropdown-item language" value="Rust">Rust</a>
                        <a class="dropdown-item language" value="Go">Go</a>
                        <a class="dropdown-item language" value="Ruby">Ruby</a>
                        <a class="dropdown-item language" value="Vim script">Vim script</a>
                        <a class="dropdown-item language" value="none">None</a>
                </div>
            </div>
        </div>


      </section>

      <div class="album py-5 bg-light">
        <div class="container">
            <div class="row"></div>
        </div>
      </div>

    </main>

    <footer class="text-muted">
      <div class="container"></div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>

  </body>
</html>