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

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

  <title>Promotions</title>
</head>

<body style="background-color: black;">
  <div class="container-fluid">
    <%- include('header') %>
    <%- include('searchBanner') %>

    <!-- breadcrumbs -->
    <div class="row">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li style="color: white;" class="breadcrumb-item"><a href="#">Home</a></li>
          <li style="color: white;" class="breadcrumb-item"><a href="#">Library</a></li>
          <li style="color: white;" class="breadcrumb-item active" aria-current="page">Data</li>
        </ol>
      </nav>
    </div>

    <!-- title and description -->
    <div class="row">
      <div class="col-4"></div>
      <div class="col">
        <div class="row text-center">
          <h3 style="color: white;">Promotion Title</h3>
        </div>
        <div class="row text-center">
          <p style="color: white;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam adipisci excepturi eaque exercitationem porro unde quasi optio recusandae nisi animi. Delectus optio in vel eveniet suscipit laboriosam quasi aliquam doloremque?</p>
        </div>
      </div>
      <div class="col-4"></div>
    </div>

    <!-- products -->
    <div class="row my-4">
      <div class="col-3"></div>
      <div class="col-2 d-flex justify-content-center">
        <a href="product.ejs">
          <div style="height: 250px; width: 200px; background-color: red;"></div>
        </a>
      </div>
      <div class="col-2 d-flex justify-content-center">
        <a href="product.ejs">
          <div style="height: 250px; width: 200px; background-color: red;"></div>
        </a>
      </div>
      <div class="col-2 d-flex justify-content-center">
        <a href="product.ejs">
          <div style="height: 250px; width: 200px; background-color: red;"></div>
        </a>
      </div>
      <div class="col-3"></div>
    </div>


    <%- include('footer') %>

  </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>