<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./public/images/favicon-32x32.png"
    />
    <link href="/dist/output.css" rel="stylesheet" />
    <link
      href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap"
      rel="stylesheet"
    />

    <title>Frontend Mentor | Order summary card</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body>
    <!-- too bad that images in TailwindCSS classes are referenced from output.css -->
    <div
      class="bg-[url('../public/images/pattern-background-mobile.svg')] fixed h-screen w-screen bg-no-repeat bg-contain md:bg-[url('../public/images/pattern-background-desktop.svg')]"
    ></div>
    <!-- main container -->
    <div class="bg-pale-blue w-screen h-screen grid place-content-center">
      <div th:replace="order-summary" />
    </div>
    <div class="attribution fixed bottom-0 inset-x-0">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Source code at <a href="https://github.com/efim/Learning-HTMX">Your Name Here</a>.
    </div>
  </body>
</html>
