Certificate Template

Code

<div class="top right gray small">
    %{tournament_name}<br/>
    %{date}
  </div>

<div class="inner">
    <p class="who">%{competitor_name}</p>

<p class="place">
      has achieved

%{place_ordinal} place in the category

<br/> %{category_name}
    </p>

<p class="participation">
      has participated in the category <br/> %{category_name}
    </p>

<div class="logos">
    <img src="%{tournament_logo_url}"/>
    <img src=""/>
    <img src=""/>
  </div>
  <div class="signature">
    <div class="signee block">
      %{signature} <br/>
      %{club}
    </div>
  </div>
</div>

@font-face { font-family: ff2; src: url('https://s3-eu-west-1.amazonaws.com/kihapp-assets/DIN+Alternate+Bold.ttf') format("truetype"); }

@font-face { font-family: longhand; src: url('https://s3-eu-west-1.amazonaws.com/kihapp-assets/SnellRoundhand.ttc') format("truetype"); }

@font-face { font-family: thinxx; src: url('https://s3-eu-west-1.amazonaws.com/kihapp-assets/HoeflerText-Regular.ttf') format("truetype"); }

@font-face { font-family: ff2; src: url('https://s3-eu-west-1.amazonaws.com/kihapp-assets/DIN+Alternate+Bold.ttf') format("truetype"); }

@font-face { font-family: longhand; src: url('https://s3-eu-west-1.amazonaws.com/kihapp-assets/SnellRoundhand.ttc') format("truetype"); }

@font-face { font-family: sourcehan; src: url('https://s3-eu-west-1.amazonaws.com/kihapp-assets/fonts/SourceHanSans-Regular.ttc') format("truetype"); }

.opensans { font-family: opensans; }
      .sourcehan { font-family: sourcehan; }

.block { font-family: ff2; text-transform: uppercase }

.certificate h1 { font-size: 60px; padding: 190px 0; z-index: 3; position: relative }

.certificate .top { top: 15%; font-family: longhand !important; font-size: 14px; font-weight: normal }
      .certificate .left { left: 12% }
      .certificate .right { right: 12%; text-align: right; line-height: 18px }

.certificate .inner { top: -110px }

.top img { height: 100px; position: relative; top: -40px }

.certificate .who { font-family: versal; border-bottom: 1px solid #aaa; width: 50%; height: 38px; margin-left: 25%; padding-bottom: 0 }

.certificate .place, .certificate .participation, .certificate .category { font-family: longhand; line-height: 45px }

.certificate .place, .certificate .participation { font-size: 30px }

.certificate .signature { text-align: center; right: 13%; bottom: 13.5%; width: auto }

.certificate .signature .signee { padding: 10px 60px 0 60px; border-top: 1px solid #aaa }

img.background{ width: 100%; position: absolute; left: 0px; top: 0px; z-index: 1 }

.yellow{ background: #fffbeb; width: 81%; height: 81%; position: absolute; z-index: 0; left: 9.5%; top: 10.5% }

.logos { position: absolute; left: 12%; bottom: 13%; height: 80px }
      .logos img { height: 100%; margin-right: 5px }

</style>

Orientation: · Margin:

Revert to Default

Waiver demo

Certificate Template

Code

Preview Open in new tab