"Certificate"
Bootstrap 4.1.1 Snippet by osdeibi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- This snippet shows an example of how you can generate a certificate on your website that is readily printable. Paper CSS makes sure of the correct paper size, while the rest is just some css. --> <body class="A4 landscape"> <!-- Each sheet element should have the class "sheet" --> <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 --> <section class="sheet"> <div id="cert" class="container-fluid"> <div class="row"> <div class="col-md-12"> <h2 id="name">Your Name Here</h2> </div> </div> </div> </section> </body>
/* Using https://github.com/cognitom/paper-css */ @import url("https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.2.3/paper.css"); /* google font for cert name print */ @import url('https://fonts.googleapis.com/css?family=Dancing+Script'); @page { size: A4 landscape } body {background:#fff;} .sheet { margin:0; box-shadow:none; } #cert { /* using certificate background image from code.org as an example */ background-image:url(https://code.org/images/hour_of_code_certificate.jpg); background-size: contain; height:100%; background-repeat:no-repeat; } #name { margin-top:76mm; text-align:center; font-size:14mm; color:#4FC3F7; font-family:'Dancing Script'; font-weight:bold; }

Related: See More


Questions / Comments: