<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('./partials/head') %>

    <style>

      .card {
        max-width: 500px;
        margin: auto;
        color: black;
        border-radius: 20 px;
      }

      p {
        margin: 0px;
      }

      .container .h8 {
        font-size: 30px;
        font-weight: 800;
        text-align: center;
      }

      .btn.btn-primary {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        background-image: linear-gradient(
          to right,
          #77a1d3 0%,
          #79cbca 51%,
          #77a1d3 100%
        );
        border: none;
        transition: 0.5s;
        background-size: 200% auto;
      }

      .btn.btn.btn-primary:hover {
        background-position: right center;
        color: #fff;
        text-decoration: none;
      }

      .btn.btn-primary:hover .fas.fa-arrow-right {
        transform: translate(15px);
        transition: transform 0.2s ease-in;
      }

      .form-control {
        color: white;
        background-color: #223c60;
        border: 2px solid transparent;
        height: 60px;
        padding-left: 20px;
        vertical-align: middle;
      }

      .form-control:focus {
        color: white;
        background-color: #0c4160;
        border: 2px solid #2d4dda;
        box-shadow: none;
      }

      .text {
        font-size: 14px;
        font-weight: 600;
      }

      ::placeholder {
        font-size: 14px;
        font-weight: 600;
      }
    </style>
  </head>
  <%- include('./partials/nav') %>
<br><br>
  <div class="container p-0">
    <div class="card px-4">
      <p class="h8 py-3">Payment Details</p>
      <div class="row gx-3">
        <div class="col-12">
          <div class="d-flex flex-column">
            <p class="text mb-1">Person Name</p>
            <input
              class="form-control mb-3"
              type="text"
              placeholder="Name"
              value="Barry Allen"
            />
          </div>
        </div>
        <div class="col-12">
          <div class="d-flex flex-column">
            <p class="text mb-1">Card Number</p>
            <input
              class="form-control mb-3"
              type="text"
              placeholder="1234 5678 435678"
            />
          </div>
        </div>
        <div class="col-6">
          <div class="d-flex flex-column">
            <p class="text mb-1">Expiry</p>
            <input
              class="form-control mb-3"
              type="text"
              placeholder="MM/YYYY"
            />
          </div>
        </div>
        <div class="col-6">
          <div class="d-flex flex-column">
            <p class="text mb-1">CVV/CVC</p>
            <input
              class="form-control mb-3 pt-2"
              type="password"
              placeholder="***"
            />
          </div>
        </div>
        <div class="col-12">
          <div class="btn btn-primary mb-3">
            <span class="ps-3">Pay $243</span>
            <span class="fas fa-arrow-right"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <%- include('./partials/footer') %>
  <body>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
