<!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\newsletter.css">
  <script src="..\..\scripts\newsletter.js"></script>

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

  <title>Newsletter</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 mb-4">
          <div class="col">
            <div class="card m-2" style="height: 100%;">
              <div class="card-body">
                <h5 class="card-title">DRIVE-THRU RPG Newsletter</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint culpa atque distinctio ea repudiandae minima molestiae nemo ipsum corrupti odit assumenda, iure velit quam consectetur nihil animi dicta excepturi doloribus ullam sit voluptas laboriosam nobis! Ipsum tenetur nesciunt quas doloribus.</p>
                <form class="d-flex justify-content-center">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference"
                      id="notificationOption1" value="option1">
                    <label class="form-check-label" for="notificationOption1">
                      Subscribe
                    </label>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card m-2" style="height: 100%;">
              <div class="card-body">
                <h5 class="card-title">Dungeon Masters Guild Newsletter</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint culpa atque distinctio ea repudiandae minima molestiae nemo ipsum corrupti odit assumenda, iure velit quam consectetur nihil animi dicta excepturi doloribus ullam sit voluptas laboriosam nobis! Ipsum tenetur nesciunt quas doloribus.</p>
                <form class="d-flex justify-content-center">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference"
                      id="notificationOption1" value="option1">
                    <label class="form-check-label" for="notificationOption1">
                      Subscribe
                    </label>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col">
            <div class="card m-2" style="height: 100%;">
              <div class="card-body">
                <h5 class="card-title">Monsters R Us Newsletter</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint culpa atque distinctio ea repudiandae minima molestiae nemo ipsum corrupti odit assumenda, iure velit quam consectetur nihil animi dicta excepturi doloribus ullam sit voluptas laboriosam nobis! Ipsum tenetur nesciunt quas doloribus.</p>
                <form class="d-flex justify-content-center">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference"
                      id="notificationOption1" value="option1">
                    <label class="form-check-label" for="notificationOption1">
                      Subscribe
                    </label>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card m-2" style="height: 100%;">
              <div class="card-body">
                <h5 class="card-title">TTRPG Madness Newsletter</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint culpa atque distinctio ea repudiandae minima molestiae nemo ipsum corrupti odit assumenda, iure velit quam consectetur nihil animi dicta excepturi doloribus ullam sit voluptas laboriosam nobis! Ipsum tenetur nesciunt quas doloribus.</p>
                <form class="d-flex justify-content-center">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference"
                      id="notificationOption1" value="option1">
                    <label class="form-check-label" for="notificationOption1">
                      Subscribe
                    </label>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col">
            <div class="card m-2" style="height: 100%;">
              <div class="card-body">
                <h5 class="card-title">DRIVE-THRU COMICS Newsletter</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint culpa atque distinctio ea repudiandae minima molestiae nemo ipsum corrupti odit assumenda, iure velit quam consectetur nihil animi dicta excepturi doloribus ullam sit voluptas laboriosam nobis! Ipsum tenetur nesciunt quas doloribus.</p>
                <form class="d-flex justify-content-center">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference"
                      id="notificationOption1" value="option1">
                    <label class="form-check-label" for="notificationOption1">
                      Subscribe
                    </label>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card m-2" style="height: 100%;">
              <div class="card-body">
                <h5 class="card-title">DRIVE-THRU ANIME Newsletter</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint culpa atque distinctio ea repudiandae minima molestiae nemo ipsum corrupti odit assumenda, iure velit quam consectetur nihil animi dicta excepturi doloribus ullam sit voluptas laboriosam nobis! Ipsum tenetur nesciunt quas doloribus.</p>
                <form class="d-flex justify-content-center">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference"
                      id="notificationOption1" value="option1">
                    <label class="form-check-label" for="notificationOption1">
                      Subscribe
                    </label>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </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>