Untitled

<html>
<head>
    <meta charset="UTF-8">
    <title>PDF Diploma</title>

    <style type="text/css">
    @font-face {
      font-family: 'Oswald';
      src: url('Diploma/assets/fonts/OSWALD_0.ttf');
      font-weight: 400;
    }

    @font-face {
      font-family: 'Oswald';
      src: url('Diploma/assets/fonts/OSWALD-DEMIBOLD.ttf');
      font-weight: 700;
    }

    @font-face {
      font-family: 'Oswald';
      src: url('Diploma/assets/fonts/OSWALD-LIGHT.ttf');
      font-weight: 200;
    }

    body {
      background: rgb(204, 204, 204);
    }

    .color {
      color: {{PrimaryColor}};
    }

    page {
      width: 21cm;
      height: 29.7cm;
      font-family: 'Oswald', sans-serif;
      font-weight: 400;
      background-color: white;
      display: block;
      margin: 0 auto;
      margin-bottom: 0.5cm;
      position: relative;
      box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
    }

	.background-image{
		width: 21cm;
		height: 29.7cm;
		z-index: -1;
	}

    .title {
      font-size: 2cm;
      width: 100%;
      position: absolute;
      top: 2.5cm;
      left: 0cm;
      text-align: center;
    }

    .company {
      font-size: 0.7cm;
      width: 100%;
      position: absolute;
      top: 5cm;
      left: 0cm;
      text-align: center;
    }

    .company img {
      vertical-align: middle;
      width: 4cm;
    }

    .pupil {
      width: 65%;
      margin: 0 17.5%;
      position: absolute;
      top: 8.3cm;
      left: 0cm;
      text-align: center;
      font-size: 1.5cm;
      font-weight: 700;
      border-bottom: 3px solid {{PrimaryColor}};
    }

    .description {
      width: 65%;
      margin: 0 17.5%;
      position: absolute;
      top: 10.5cm;
      left: 0cm;
      text-align: left;
      font-size: 0.4cm;
      font-weight: 400;
    }

    .description .row {
      width: 80%;
      margin: 0 10%;
      padding-top: 0.4cm;
    }

    .description .row .col {
      width: 39.5%;
      padding: 0 5%;
      text-align: left;
      float: left;
    }

    .description .row .col:first-child {
      border-right: 1px dotted {{PrimaryColor}};
    }

    .sign {
      width: 30%;
      position: absolute;
      bottom: 3cm;
      left: 4cm;
      text-align: center;
      font-size: 0.35cm;
      font-weight: 200;
    }

    .sign .dotted-line {
      width: 100%;
      height: 1px;
      border-top: 1px dotted black;
      margin: 2cm 0 0.4cm 0;
    }

    .main-border {
      position: absolute;
      width: 89%;
      height: 92%;
      top: 4%;
      left: 5.5%;
      border: 1px dotted {{PrimaryColor}};
    }

    @media print {
      body, page {
        margin: 0;
        box-shadow: 0;
      }
    }
    </style>
</head>
<body>
    <page>

        <div class="main-border"></div>

        <div>
            <svg class="background-image" viewBox="0 0 592 840" stroke-dasharray="none" shape-rendering="auto" xmlns="http://www.w3.org/2000/svg" font-family="Dialog" text-rendering="auto" fill-opacity="1" contentScriptType="text/ecmascript" color-interpolation="auto" color-rendering="auto" preserveAspectRatio="xMidYMid meet" font-size="12" fill="black" xmlns:xlink="http://www.w3.org/1999/xlink" stroke="black" image-rendering="auto" stroke-miterlimit="10" zoomAndPan="magnify" version="1.0" stroke-linecap="square" stroke-linejoin="miter" contentStyleType="text/css" font-style="normal" stroke-width="1" stroke-dashoffset="0" font-weight="normal" stroke-opacity="1">
                <!--Generated by the Batik Graphics2D SVG Generator-->
                <defs id="genericDefs" />
                <g>
                    <defs id="defs1">
                        <clipPath clipPathUnits="userSpaceOnUse" id="clipPath1">
                            <path d="M0 0 L595 0 L595 841 L0 841 L0 0 Z" />
                        </clipPath>
                    </defs>
                    <g fill="{{PrimaryColor}}" text-rendering="geometricPrecision" stroke-miterlimit="4" stroke-width="2" stroke="{{PrimaryColor}}" image-rendering="optimizeQuality">
                        <path fill="none" d="M89.7952 49.2992 L89.7952 88.9052 L89.7952 89.9052 L88.7952 89.9052 L49.1892 89.9052 L49.1892 752.2052 L88.7952 752.2052 L89.7952 752.2052 L89.7952 753.2052 L89.7952 792.8112 L505.4802 792.8112 L505.4802 753.2052 L505.4802 752.2052 L506.4802 752.2052 L546.0862 752.2052 L546.0862 89.9052 L506.4802 89.9052 L505.4802 89.9052 L505.4802 88.9052 L505.4802 49.2992 L89.7952 49.2992 Z" clip-path="url(#clipPath1)" />
                        <path fill="none" d="M69.077 109.812 L111.24 109.812 L111.24 67.649 L69.077 67.649 L69.077 109.812" clip-path="url(#clipPath1)" />
                        <path fill="none" d="M69.077 774.461 L111.24 774.461 L111.24 732.298 L69.077 732.298 L69.077 774.461" clip-path="url(#clipPath1)" />
                        <path fill="none" d="M484.036 109.812 L526.199 109.812 L526.199 67.649 L484.036 67.649 L484.036 109.812" clip-path="url(#clipPath1)" />
                        <path fill="none" d="M484.036 774.461 L526.199 774.461 L526.199 732.298 L484.036 732.298 L484.036 774.461" clip-path="url(#clipPath1)" />
                        <path d="M152.0747 103.2418 L146.4527 108.8638 L152.0747 114.4868 L157.6967 108.8638 Z" clip-path="url(#clipPath1)" stroke="none" />
                        <path d="M446.2683 103.2418 L440.6463 108.8638 L446.2683 114.4868 L451.8903 108.8638 Z" clip-path="url(#clipPath1)" stroke="none" />
                    </g>
                </g>
            </svg>
        </div>

        <div class="title color">CERTIFIKAT</div>

        <div class="company color">
            <img src="{{CompanyLogoPath}}"> {{CompanyName}}
        </div>

        <div class="pupil">{{PupilFirstName}} {{PupilLastName}}</div>

        <div class="description">
            <p>Has performed <b>{{CompanyName}}</b> course <b>{{EducationName}}</b>.</p>
            <p>The course has contained the following areas:</p>

            <div class="row">
                <div class="col">
                    <p>
                        <b>Section name</b><br>
                        - Chapter name<br>
                        - Chapter name<br>
                    </p>

                    <p>
                        <b>Section name</b><br>
                        - Chapter name<br>
                        - Chapter name<br>
                    </p>
                </div>
                <div class="col">
                    <p>
                        <b>Section name</b><br>
                        - Chapter name<br>
                        - Chapter name<br>
                    </p>

                    <p>
                        <b>Section name</b><br>
                        - Chapter name<br>
                        - Chapter name<br>
                    </p>
                </div>
            </div>
        </div>

        <div class="sign">
            <p>{{CityName}} {{FinishDate}}</p>
            <div class="dotted-line"></div>
            <p>
                {{ContactPersonFirstName}} {{ContactPersonLastName}}<br>
                {{CompanyName}}
            </p>
        </div>
    </page>
</body>
</html>