We use cookies
We use cookies to enhance your experience and analyse site usage.
Landscape certificate of completion with decorative border, centered text, and signature line.
<!DOCTYPE html>
<html>
<head>
<style>
@page { size: A4 landscape; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Georgia, 'Times New Roman', serif; background: #fffdf7; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.cert { border: 6px double #c9a84c; padding: 40px 56px; text-align: center; position: relative; max-width: 900px; width: 100%; background: white; }
.cert::before { content: ''; position: absolute; inset: 10px; border: 1px solid #e8d5a3; pointer-events: none; }
.cert-header { margin-bottom: 28px; }
.cert-header .org { font-size: 14px; letter-spacing: .15em; text-transform: uppercase; color: #666; }
.cert-header .title { font-size: 42px; font-weight: bold; color: #c9a84c; margin: 8px 0; letter-spacing: .05em; }
.cert-body .present { font-size: 15px; color: #666; margin-bottom: 8px; letter-spacing: .05em; }
.cert-body .recipient { font-size: 36px; font-style: italic; color: #1a1a1a; margin: 12px 0; border-bottom: 1px solid #c9a84c; padding-bottom: 12px; }
.cert-body .detail { font-size: 15px; color: #444; line-height: 1.8; max-width: 560px; margin: 16px auto; }
.cert-body .course { font-size: 20px; font-weight: bold; color: #1e3a5f; }
.cert-footer { display: flex; justify-content: space-around; margin-top: 40px; align-items: flex-end; }
.sig-block { text-align: center; }
.sig-line { width: 160px; border-top: 1px solid #888; margin: 0 auto 8px; }
.sig-name { font-size: 13px; font-weight: bold; }
.sig-title { font-size: 11px; color: #888; }
.cert-date { font-size: 13px; color: #666; margin-top: 4px; }
</style>
</head>
<body>
<div class="cert">
<div class="cert-header">
<div class="org">{{organization_name}}</div>
<div class="title">Certificate of Completion</div>
</div>
<div class="cert-body">
<div class="present">This certifies that</div>
<div class="recipient">{{recipient_name}}</div>
<div class="detail">has successfully completed the requirements for<br>
<span class="course">{{course_name}}</span><br>
{{completion_detail}}
</div>
<div class="cert-date">Awarded on {{award_date}}</div>
</div>
<div class="cert-footer">
<div class="sig-block"><div class="sig-line"></div><div class="sig-name">{{signatory_1_name}}</div><div class="sig-title">{{signatory_1_title}}</div></div>
<div class="sig-block"><div class="sig-line"></div><div class="sig-name">{{signatory_2_name}}</div><div class="sig-title">{{signatory_2_title}}</div></div>
</div>
</div>
</body>
</html>Sign in to open this template in the playground, or copy the HTML and use it with the API.
curl -X POST https://api.htmlpdf.dev/api/pdf \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!DOCTYPE html>\n<html>\n<head>\n<style>\n @page { size: A4 landscape; margin: 0; }...",
"format": "A4"
}' \
--output certificate.pdf