Certificate Template

Code

<div class="right gray small">
        %{tournament_name}<br/>
        %{date}
      </div>
    </div>
    <div class="heading flex">
      <div class="center" style="margin: 2% 30mm 1% 30mm">
        <span class="fit versal">Certificate</span>
      </div>
    </div>

<div class="middle flex flex-column">
      <div class="who center" style="flex: 0.5; align-items: flex-end">
        <span class="fit">
          %{competitor_name}
        </span>
      </div>

<div class="place">
        has achieved

%{place_ordinal} place in the category

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

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

<div class="footer">
      <div class="logos">
        <img src="%{tournament_logo_url}"/>
        <img src=""/>
        <img src=""/>
      </div>
      <div class="signature flex flex-column">
        <div class="pen">
        </div>
        <div class="signee block">
          <span class="fit">
            %{signature}
            <br/>
            %{club}
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

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

.container {
    position: absolute;
    z-index: 100;
    left: 10.5%;
    top: 12%;
    width: 79%;
    height: 76%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

.container > * {
    min-width: 0;
    min-height: 0;
    flex-basis: 0;
    flex-grow: 1;
  }

.top {
    flex: 0.5;
    display: flex;
    justify-content: space-between;
    padding: 2%;
  }

.top .right {
    font-size: 11pt;
  }

.heading {
    flex: 1;
  }

.middle {
    flex: 2;
    margin-top: 2%;
  }

.middle > * {
    flex: 1;
  }

.footer {
    display: flex;
    flex-direction: row;
  }

.footer > * {
    flex: 1;
  }
  
  .certificate h1 {
    font-size: 60px;
    z-index: 3;
    position: relative
  }
  .certificate .inner {
    top: -110px
  }
  .top img {
    height: 100px;
    position: relative;
    top: -30px
  }
  .certificate .who {
    font-family: versal;
    border-bottom: 1px solid #aaa;
    margin: 0 15% 5mm 15%;
  }

.certificate .who .fit {
    margin-bottom: -1.25%;
  }
  
  .certificate .place, .certificate .participation, .certificate .category {
    font-family: longhand;
    line-height: 45px
  }
  .certificate .place, .certificate .participation {
    font-size: 30px
  }
  .certificate .signature {
    text-align: center;
    margin: 0 2%;
  }

.certificate .signature .pen {
    border-bottom: 1px solid #aaa;
    padding: 3mm;
  }
  
  .certificate .signature .signee {
    margin: 3mm 3mm 5mm 3mm;
  }
  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 {
    text-align: left;
    display: flex;
    align-items: center;
    padding: 2%;
    
  }
  .logos img {
    height: 2cm;
    margin-right: 1cm;
  }
</style>

Orientation: · Margin:

Revert to Default

Demo

Certificate Template

Code

Preview Open in new tab