<!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.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"></script>

  <link rel="stylesheet" href="..\..\stylesheets\join.css">
  <script src="..\..\scripts\join.js"></script>

  <link rel="stylesheet" href="..\..\stylesheets\index.css">
  <script src="..\..\scripts\index.js"></script>

  <title>Join</title>
</head>

<body>
  <div class="container-fluid" style="height: 100vh;">
    <div class="row h-100">
      <%- include('navbar') %>

      <!-- Content -->
      <div class="col-9 scrollable-column p-5" style="background-color: aqua;">

        <div class="row">
          <div class="d-flex justify-content-center">
            <nav aria-label="...">
              <ul class="pagination">
                <li class="page-item active">
                  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Account Type</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">Agreement</a></li>
                <li class="page-item" aria-current="page">
                  <a class="page-link" href="#">Payment Info</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#">Finish</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
        <div class="row" style="height: 80%; background-color: aliceblue;">
          <div class="col-sm-12 my-auto">
            <div class="row">
              <div class="col">
                <div class="card m-2">
                  <div class="card-body">
                    <h5 class="card-title">DRIVE-THRU RPG EXCLUSIVE</h5>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, reiciendis voluptas animi facere exercitationem rerum quae nemo! Delectus tempore ratione harum eveniet ullam? Eaque earum deserunt excepturi quidem debitis aut.</p>
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="radio" role="switch" name="notificationPreference" id="notificationOption1" value="option1">
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card m-2">
                  <div class="card-body">
                    <h5 class="card-title">DRIVE-THRU RPG NON-EXCLUSIVE</h5>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum numquam suscipit impedit quia aperiam officiis eos architecto temporibus veniam, quisquam explicabo assumenda deleniti aliquid voluptatum quidem amet! Explicabo, atque nesciunt?</p>
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="radio" role="switch" name="notificationPreference" id="notificationOption1" value="option1">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
        <div class="row" style="background-color: aliceblue;">
          <button class="btn btn-primary">Next</button>
        </div>
      </div>
    </div>
  </div>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>