Certificate

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Certificate of completion</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700" />
<style>
  @page {
    margin: 0;
  }

  html,
  body {
    margin: 0;
    height: 100%;
  }

  body {
    font-family: sans-serif;
    color: #1f2937;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
  }

  .frame {
    position: absolute;
    inset: 12mm;
    border: 6px solid transparent;
    border-radius: 8px;
    background:
      linear-gradient(#fffbeb, #fffbeb) padding-box,
      linear-gradient(135deg, #b45309, #f59e0b, #b45309) border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .kicker {
    font-size: 12pt;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #92400e;
  }

  h1 {
    font-family: "Playfair Display", serif;
    font-size: 40pt;
    font-weight: 700;
    margin: 6mm 0;
  }

  .name {
    font-family: "Playfair Display", serif;
    font-size: 32pt;
    border-bottom: 1px solid #b45309;
    padding: 0 12mm 2mm;
    margin: 4mm 0 6mm;
  }

  .details {
    font-size: 12pt;
    max-width: 180mm;
    line-height: 1.5;
  }

  .footer {
    display: flex;
    gap: 40mm;
    margin-top: 14mm;
    font-size: 10pt;
  }

  .footer div {
    border-top: 1px solid #9ca3af;
    padding-top: 2mm;
    min-width: 50mm;
  }
</style>
</head>
<body>
  <div class="frame">
    <div class="kicker">Acme Corp Academy</div>
    <h1>Certificate of Completion</h1>
    <div>This certifies that</div>
    <div class="name">Jane Doe</div>
    <div class="details">has completed the course <strong>Introduction to Document Design</strong>, twelve hours of instruction and a final project.</div>
    <div class="footer">
      <div>October 28, 2026</div>
      <div>Course director</div>
    </div>
  </div>
</body>
</html>