classroomio/apps/backend/certificate.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen&family=Roboto:wght@300;400;700&display=swap"
    rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Certificate</title>
  <style>
    body {
      width: 1123px;
      height: 794px;
    }

    .student-name {
      font-family: 'Qwitcher Grypen', cursive;
    }
  </style>
</head>

<body>
  <div class="flex items-center justify-center border border-dashed border-blue-400 h-full w-full">
    <div class="h-full flex border-l-8 border-blue-800">
      <div class="h-full w-full px-5 py-10">
        <p class="text-2xl font-normal my-2 mb-10 uppercase text-gray-500">
          Certificate<br /> of completion
        </p>
        <div class="border-b border-gray-500 mb-4">
          <p class="text-xl text-black font-normal">This is to certify that</p>
          <p class="student-name text-center text-9xl">Rotimi Best</p>
        </div>
        <div class="mb-2">
          <p class="text-xl text-black font-normal">
            has successfully completed introductory courses in
          </p>
          <div>
            <p class="bg-transparent font-semibold text-blue-800 text-center uppercase my-10 text-3xl">
              Figma for Beginners
            </p>
          </div>
        </div>
        <p class="text-xl font-light mb-4 text-justify">Netlify Functions can stream data to clients as it becomes
          available, rather
          than returning a buffered payload at the end of the computation. This lets developers and frameworks create
          faster experiences by using streaming and partial hydration to get content and interactions in front of people
          as quickly as possible. For an extended example that demonstrates a more likely response streaming use case,
          consider this function</p>
        <div class="flex items-center gap-1 mt-14">
          <img
            src="https://koxqonvbkeakwvmdegcf.supabase.co/storage/v1/object/public/avatars/user/Coding%20Dojo1684164720355.webp"
            alt="logo" class="w-24 h-24 rounded-md" />
          <p class="font-semibold capitalize text-5xl">Coding Dojo</p>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="flex flex-col items-center justify-center border-4 border-pink-700 py-3 w-full h-full">
    <div class="flex items-center gap-1 my-2 mb-10">
      <img
        src="https://koxqonvbkeakwvmdegcf.supabase.co/storage/v1/object/public/avatars/user/Coding%20Dojo1684164720355.webp"
        alt="logo" class=" w-24 h-24 rounded-md" />
      <p class="font-semibold capitalize text-5xl">Coding Dojo</p>
    </div>
    <div class="w-full px-5 py-3">
      <p class="text-xl text-center font-normal my-2 uppercase tracking-widest text-gray-500 w-full">
        Certificate of completion
      </p>
      <div class="border-b border-gray-500 mb-4">
        <p class="text-xl text-black font-normal">This is to certify that</p>
        <p class="student-name text-center text-8xl">Rotimi Best</p>
      </div>
      <div class="mb-2">
        <p class="text-xl text-black font-normal">
          has successfully completed a courses in
        </p>
        <div class="my-10">
          <p class="bg-transparent font-semibold text-pink-700 text-center uppercase text-3xl">
            Figma for Beginners
          </p>
        </div>
      </div>
      <p class="text-xl text-center text-gray-500 font-light">Netlify Functions can stream data to clients as it becomes
        available,
        rather than
        returning a buffered payload at the end of the computation. This lets developers and frameworks create faster
        experiences by using streaming and partial hydration to get content and interactions in front of people as
        quickly as possible. For an extended example that demonstrates a more likely response streaming use case,
        consider this function</p>
    </div>
  </div> -->

</body>

</html>