index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="canonical" href="https://bsrp.glitch.me/" />
  <meta name="description" content="BSRP RolePlay" />
  <meta name="robots" content="index,follow" />
  <meta property="og:title" content="BSRP Fivem Server" />
  <meta property="og:type" content="site" />
  <meta property="og:url" content="https://bsrp.glitch.me/" />
  <meta property="og:description" content="BSRP RolePlay" />
  <meta property="og:image" content="https://avatars.githubusercontent.com/u/41019610?v=4" />
  <meta name="twitter:card" content="summary" />

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BSRP - BaconSpaceRP</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://baconspacerp.github.io/bootstrap.min.css">
  <!-- FontAwesome CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    /* Customizing the navbar color */
    nav {
      background-color: lightblue;
    }

    /* Adjust the container padding for small screens */
    @media (max-width: 576px) {
      .container {
        padding: 20px;
      }
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
      <a class="navbar-brand" href="https://baconspacerp.github.io/index.html">Home</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="https://baconspacerp.github.io/about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://baconspacerp.github.io/jobs/index.html">Jobs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://baconspacerp.github.io/project/">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://baconspacerp.github.io/character/index.html">Character</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <div class="container mt-3">
    <h1>Welcome to BaconSpaceRP!</h1>
    <p>Your FiveM Roleplay Server</p>

    <!-- Add a section about the character, if needed -->
    <h2>Discover Your Character</h2>
    <p>Explore the diverse characters available in our world. Visit the <a
        href="https://baconspacerp.github.io/character/index.html">Character section</a> for more details.</p>
  </div>

  <!-- Bootstrap JavaScript -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>