Last active
January 19, 2025 19:06
-
-
Save ekumachidi/d0b1289b118e20aa364079124bd574a2 to your computer and use it in GitHub Desktop.
html certificate template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Course Completion Certificate</title> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| margin: 0; | |
| background-color: #f0f0f0; | |
| } | |
| .certificate { | |
| width: 80%; | |
| max-width: 800px; | |
| padding: 50px; | |
| background-color: #ffffff; | |
| border: 10px solid #f4a261; | |
| border-radius: 15px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| } | |
| .pattern-border { | |
| position: absolute; | |
| top: -15px; | |
| left: -15px; | |
| right: -15px; | |
| bottom: -15px; | |
| background: url('https://www.transparenttextures.com/patterns/45-degree-fabric-light.png'); | |
| background-size: cover; | |
| border-radius: 15px; | |
| padding: 15px; | |
| } | |
| .certificate-header { | |
| text-align: center; | |
| font-size: 36px; | |
| font-weight: bold; | |
| color: #2d3748; | |
| margin-bottom: 20px; | |
| } | |
| .certificate-title { | |
| text-align: center; | |
| font-size: 28px; | |
| font-weight: bold; | |
| color: #e76f51; | |
| margin-bottom: 40px; | |
| } | |
| .certificate-body { | |
| text-align: center; | |
| font-size: 20px; | |
| color: #4a4a4a; | |
| margin-bottom: 30px; | |
| } | |
| .certificate-details { | |
| text-align: center; | |
| font-size: 18px; | |
| margin-bottom: 40px; | |
| } | |
| .certificate-footer { | |
| text-align: center; | |
| font-size: 16px; | |
| color: #7f8c8d; | |
| } | |
| .signature { | |
| margin-top: 50px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| color: #e76f51; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="certificate"> | |
| <div class="pattern-border"></div> | |
| <div class="certificate-header">Certificate of Completion</div> | |
| <div class="certificate-title">Course Name</div> | |
| <div class="certificate-body"> | |
| This is to certify that | |
| </div> | |
| <div class="certificate-details"> | |
| <strong>[Student Name]</strong><br> | |
| has successfully completed the course | |
| </div> | |
| <div class="certificate-footer"> | |
| Date: [Completion Date]<br> | |
| Instructor: [Instructor Name]<br> | |
| Institution: [Institution Name] | |
| </div> | |
| <div class="signature"> | |
| Signature of Instructor | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css?family=Open+Sans|Pinyon+Script|Rochester'); | |
| .cursive { | |
| font-family: 'Pinyon Script', cursive; | |
| } | |
| .sans { | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .bold { | |
| font-weight: bold; | |
| } | |
| .block { | |
| display: block; | |
| } | |
| .underline { | |
| border-bottom: 1px solid #777; | |
| padding: 5px; | |
| margin-bottom: 15px; | |
| } | |
| .margin-0 { | |
| margin: 0; | |
| } | |
| .padding-0 { | |
| padding: 0; | |
| } | |
| .pm-empty-space { | |
| height: 40px; | |
| width: 100%; | |
| } | |
| body { | |
| padding: 20px 0; | |
| background: #ccc; | |
| } | |
| .pm-certificate-container { | |
| position: relative; | |
| width: 800px; | |
| height: 600px; | |
| background-color: #154e3d; | |
| padding: 30px; | |
| color: #333; | |
| font-family: 'Open Sans', sans-serif; | |
| box-shadow: 0 0 5px rgba(0, 0, 0, .5); | |
| /*background: -webkit-repeating-linear-gradient( | |
| 45deg, | |
| #618597, | |
| #618597 1px, | |
| #b2cad6 1px, | |
| #b2cad6 2px | |
| ); | |
| background: repeating-linear-gradient( | |
| 90deg, | |
| #618597, | |
| #618597 1px, | |
| #b2cad6 1px, | |
| #b2cad6 2px | |
| );*/ | |
| .outer-border { | |
| width: 794px; | |
| height: 594px; | |
| position: absolute; | |
| left: 50%; | |
| margin-left: -397px; | |
| top: 50%; | |
| margin-top:-297px; | |
| border: 2px solid #fff; | |
| } | |
| .inner-border { | |
| width: 730px; | |
| height: 530px; | |
| position: absolute; | |
| left: 50%; | |
| margin-left: -365px; | |
| top: 50%; | |
| margin-top:-265px; | |
| border: 2px solid #fff; | |
| } | |
| .pm-certificate-border { | |
| position: relative; | |
| width: 720px; | |
| height: 520px; | |
| padding: 0; | |
| border: 1px solid #E1E5F0; | |
| background-color: rgba(255, 255, 255, 1); | |
| background-image: none; | |
| left: 50%; | |
| margin-left: -360px; | |
| top: 50%; | |
| margin-top: -260px; | |
| .pm-certificate-block { | |
| width: 650px; | |
| height: 200px; | |
| position: relative; | |
| left: 50%; | |
| margin-left: -325px; | |
| top: 70px; | |
| margin-top: 0; | |
| } | |
| .pm-certificate-header { | |
| margin-bottom: 10px; | |
| } | |
| .pm-certificate-title { | |
| position: relative; | |
| top: 40px; | |
| h2 { | |
| font-size: 34px !important; | |
| } | |
| } | |
| .pm-certificate-body { | |
| padding: 20px; | |
| .pm-name-text { | |
| font-size: 20px; | |
| } | |
| } | |
| .pm-earned { | |
| margin: 15px 0 20px; | |
| .pm-earned-text { | |
| font-size: 20px; | |
| } | |
| .pm-credits-text { | |
| font-size: 15px; | |
| } | |
| } | |
| .pm-course-title { | |
| .pm-earned-text { | |
| font-size: 20px; | |
| } | |
| .pm-credits-text { | |
| font-size: 15px; | |
| } | |
| } | |
| .pm-certified { | |
| font-size: 12px; | |
| .underline { | |
| margin-bottom: 5px; | |
| } | |
| } | |
| .pm-certificate-footer { | |
| width: 650px; | |
| height: 100px; | |
| position: relative; | |
| left: 50%; | |
| margin-left: -325px; | |
| bottom: -105px; | |
| } | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container pm-certificate-container"> | |
| <div class="outer-border"></div> | |
| <div class="inner-border"></div> | |
| <div class="pm-certificate-border col-xs-12"> | |
| <div class="row pm-certificate-header"> | |
| <div class="pm-certificate-title cursive col-xs-12 text-center"> | |
| <h2>Certificate of Completion</h2> | |
| </div> | |
| </div> | |
| <div class="row pm-certificate-body"> | |
| <div class="pm-certificate-block"> | |
| <div class="col-xs-12"> | |
| <div class="row"> | |
| <div class="col-xs-2"><!-- LEAVE EMPTY --></div> | |
| <div class="pm-certificate-name underline margin-0 col-xs-8 text-center"> | |
| <span class="pm-name-text bold">John Doe</span> | |
| </div> | |
| <div class="col-xs-2"><!-- LEAVE EMPTY --></div> | |
| </div> | |
| </div> | |
| <div class="col-xs-12"> | |
| <div class="row"> | |
| <div class="col-xs-2"><!-- LEAVE EMPTY --></div> | |
| <div class="pm-earned col-xs-8 text-center"> | |
| <span class="pm-earned-text padding-0 block cursive">has earned</span> | |
| <span class="pm-credits-text block bold sans">A badge</span> | |
| </div> | |
| <div class="col-xs-2"><!-- LEAVE EMPTY --></div> | |
| <div class="col-xs-12"></div> | |
| </div> | |
| </div> | |
| <div class="col-xs-12"> | |
| <div class="row"> | |
| <div class="col-xs-2"><!-- LEAVE EMPTY --></div> | |
| <div class="pm-course-title col-xs-8 text-center"> | |
| <span class="pm-earned-text block cursive">For completing the training course entitled</span> | |
| </div> | |
| <div class="col-xs-2"><!-- LEAVE EMPTY --></div> | |
| </div> | |
| </div> | |
| <div class="col-xs-12"> | |
| <div class="row"> | |
| <div class="col-xs-2"><!-- LEAVE EMPTY --></div> | |
| <div class="pm-course-title underline col-xs-8 text-center"> | |
| <span class="pm-credits-text block bold sans">Lorem Ipsum Studies</span> | |
| </div> | |
| <div class="col-xs-2"><!-- LEAVE EMPTY --></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-xs-12"> | |
| <div class="row"> | |
| <div class="pm-certificate-footer"> | |
| <div class="col-xs-4 pm-certified col-xs-4 text-center"> | |
| <span class="pm-credits-text block sans">Authorised Signatory</span> | |
| <span class="pm-empty-space block underline"></span> | |
| <span class="bold block">Jane Doe</span> | |
| </div> | |
| <div class="col-xs-4"> | |
| <!-- LEAVE EMPTY --> | |
| </div> | |
| <div class="col-xs-4 pm-certified col-xs-4 text-center"> | |
| <span class="pm-credits-text block sans">Date Completed</span> | |
| <span class="pm-empty-space block underline"></span> | |
| <span class="bold block">DOB: </span> | |
| <span class="bold block">Social Security # (last 4 digits)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment