72 lines
1.1 KiB
HTML
72 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
@page {
|
|
size: A4;
|
|
margin: 0;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.page {
|
|
position: relative;
|
|
width: 210mm;
|
|
height: 297mm;
|
|
}
|
|
|
|
/* FULL BACKGROUND IMAGE */
|
|
.bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 210mm;
|
|
height: 297mm;
|
|
}
|
|
|
|
/* STUDENT NAME */
|
|
.name {
|
|
position: absolute;
|
|
top: 150mm; /* 🔥 adjust small up/down if needed */
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: #0f172a;
|
|
}
|
|
|
|
/* CERTIFICATE ID */
|
|
.cert-id {
|
|
position: absolute;
|
|
top: 35mm;
|
|
right: 30mm;
|
|
font-size: 12px;
|
|
color: #334155;
|
|
}
|
|
|
|
/* ISSUE DATE */
|
|
.issue-date {
|
|
position: absolute;
|
|
top: 42mm;
|
|
right: 30mm;
|
|
font-size: 12px;
|
|
color: #334155;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="page">
|
|
|
|
<img class="bg" src="assets/certificate_bg.png">
|
|
|
|
<div class="cert-id">Certificate ID: {{CERT_ID}}</div>
|
|
<div class="issue-date">Issue Date: {{ISSUE_DATE}}</div>
|
|
|
|
<div class="name">{{NAME}}</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |