|
|
@@ -0,0 +1,334 @@
|
|
|
+<!doctype html>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <style>
|
|
|
+ @font-face {
|
|
|
+ font-family: UCfont;
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Light.eot);
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Light.eot?#iefix) format("embedded-opentype"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Light.woff2) format("woff2"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Light.woff) format("woff"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Light.ttf) format("truetype");
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 300
|
|
|
+ }
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: UCfont;
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-LightItalic.eot);
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-LightItalic.eot?#iefix) format("embedded-opentype"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-LightItalic.woff2) format("woff2"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-LightItalic.woff) format("woff"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-LightItalic.ttf) format("truetype");
|
|
|
+ font-style: italic;
|
|
|
+ font-weight: 300
|
|
|
+ }
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: UCfont;
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Regular.eot);
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Regular.eot?#iefix) format("embedded-opentype"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Regular.woff2) format("woff2"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Regular.woff) format("woff"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Regular.ttf) format("truetype");
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400
|
|
|
+ }
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: UCfont;
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Italic.eot);
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Italic.eot?#iefix) format("embedded-opentype"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Italic.woff2) format("woff2"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Italic.woff) format("woff"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Italic.ttf) format("truetype");
|
|
|
+ font-style: italic;
|
|
|
+ font-weight: 400
|
|
|
+ }
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: UCfont;
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Bold.eot);
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Bold.eot?#iefix) format("embedded-opentype"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Bold.woff2) format("woff2"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Bold.woff) format("woff"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Bold.ttf) format("truetype");
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 700
|
|
|
+ }
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: UCfont;
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-BoldItalic.eot);
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-BoldItalic.eot?#iefix) format("embedded-opentype"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-BoldItalic.woff2) format("woff2"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-BoldItalic.woff) format("woff"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-BoldItalic.ttf) format("truetype");
|
|
|
+ font-style: italic;
|
|
|
+ font-weight: 700
|
|
|
+ }
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: UCfont;
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Heavy.eot);
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Heavy.eot?#iefix) format("embedded-opentype"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Heavy.woff2) format("woff2"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Heavy.woff) format("woff"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Heavy.ttf) format("truetype");
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 800
|
|
|
+ }
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: UCfont;
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-HeavyItalic.eot);
|
|
|
+ src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-HeavyItalic.eot?#iefix) format("embedded-opentype"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-HeavyItalic.woff2) format("woff2"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-HeavyItalic.woff) format("woff"), url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-HeavyItalic.ttf) format("truetype");
|
|
|
+ font-style: italic;
|
|
|
+ font-weight: 800
|
|
|
+ }
|
|
|
+
|
|
|
+ body,
|
|
|
+ html {
|
|
|
+ height: initial;
|
|
|
+ width: initial;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.3;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background: #fff;
|
|
|
+ font-weight: 400;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ * {
|
|
|
+ -webkit-box-sizing: inherit;
|
|
|
+ box-sizing: inherit
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert {
|
|
|
+ font-family: UCfont, "Open Sans", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 13px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: cover;
|
|
|
+ display: block;
|
|
|
+ -webkit-box-flex: 0;
|
|
|
+ -ms-flex: none;
|
|
|
+ flex: none;
|
|
|
+ border: 1rem solid #2785ce;
|
|
|
+ padding: 4rem;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 200;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert p {
|
|
|
+ margin: .5em 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_logo {
|
|
|
+ position: absolute;
|
|
|
+ top: 4rem;
|
|
|
+ left: 4rem
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_logo img {
|
|
|
+ max-height: 100px;
|
|
|
+ max-width: 250px
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_main {
|
|
|
+ position: absolute;
|
|
|
+ top: 45%;
|
|
|
+ left: 50%;
|
|
|
+ width: 80%;
|
|
|
+ -webkit-transform: translateY(-50%) translateX(-50%);
|
|
|
+ -ms-transform: translateY(-50%) translateX(-50%);
|
|
|
+ transform: translateY(-50%) translateX(-50%)
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_main p {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ font-style: italic;
|
|
|
+ margin-top: .25em;
|
|
|
+ margin-bottom: .25em
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_company {
|
|
|
+ font-size: 1.25rem;
|
|
|
+ margin: 1rem;
|
|
|
+ white-space: pre
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_title {
|
|
|
+ font-size: 6.66667rem;
|
|
|
+ letter-spacing: 5px;
|
|
|
+ margin: 1rem;
|
|
|
+ text-transform: uppercase;
|
|
|
+ position: relative
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_title::after {
|
|
|
+ display: block;
|
|
|
+ content: "";
|
|
|
+ height: 1px;
|
|
|
+ width: 80%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 10%;
|
|
|
+ border-bottom: 1px solid #8c8c8c
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_student {
|
|
|
+ font-size: 2rem;
|
|
|
+ padding: 1rem
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_course {
|
|
|
+ font-size: 2rem;
|
|
|
+ padding: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_comment {
|
|
|
+ color: #8c8c8c
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_details {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 2rem;
|
|
|
+ left: 4rem;
|
|
|
+ color: #8c8c8c
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_details dd,
|
|
|
+ .cert_details dl,
|
|
|
+ .cert_details dt {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ text-align: left;
|
|
|
+ letter-spacing: .025em
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_details dl {
|
|
|
+ padding: .5rem 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_details dd {
|
|
|
+ font-size: .85em
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_details dt {
|
|
|
+ font-size: 1.215em
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_sign {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 2rem;
|
|
|
+ right: 4rem;
|
|
|
+ max-width: 50%;
|
|
|
+ text-align: right
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_sign_list {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: horizontal;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ -ms-flex-direction: row;
|
|
|
+ flex-direction: row;
|
|
|
+ -ms-flex-wrap: nowrap;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ max-width: none;
|
|
|
+ width: 50%;
|
|
|
+ -webkit-box-pack: end;
|
|
|
+ -ms-flex-pack: end;
|
|
|
+ justify-content: flex-end
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_sign_item {
|
|
|
+ width: 33%;
|
|
|
+ -webkit-box-flex: 0;
|
|
|
+ -ms-flex: none;
|
|
|
+ flex: none;
|
|
|
+ margin: 0 10px
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_sign_info {
|
|
|
+ border-top: 1px solid #8c8c8c;
|
|
|
+ padding: .25rem;
|
|
|
+ font-size: .85em;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: #8c8c8c;
|
|
|
+ white-space: pre-line
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_sign_img {
|
|
|
+ padding: 5px
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_sign_img img {
|
|
|
+ height: 7rem;
|
|
|
+ max-width: 100%;
|
|
|
+ -o-object-fit: contain;
|
|
|
+ object-fit: contain;
|
|
|
+ -o-object-position: bottom;
|
|
|
+ object-position: bottom;
|
|
|
+ image-rendering: crisp-edges
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_bg_img {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 100;
|
|
|
+ object-position: right top;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cert_wrapper {
|
|
|
+ position: relative;
|
|
|
+ height: 702px;
|
|
|
+ width: 1092px;
|
|
|
+ padding: 26px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="cert_wrapper">
|
|
|
+ <div class="cert" style="border-color: {{BORDER_COLOR}}">
|
|
|
+ <!-- <div class="cert" style="border-color: #012169;"> -->
|
|
|
+ <div class="cert_logo">
|
|
|
+ <!-- <img src="{{LOGO}}" alt=""> -->
|
|
|
+ <img src="https://dd.unicraft.org/static/branding/transportir/cert/logo.png" />
|
|
|
+ </div>
|
|
|
+ <div class="cert_main">
|
|
|
+ <div class="cert_company">Academy TRANSPORTIR Group</div>
|
|
|
+ <!-- <div class="cert_company">{{COMPANY}}</div> -->
|
|
|
+ <div class="cert_title">{{CERT_TITLE}}</div>
|
|
|
+ <p>{{CERT_INTRO}}</p>
|
|
|
+ <div class="cert_student">
|
|
|
+ {{STUDENT}}
|
|
|
+ </div>
|
|
|
+ <p>{{CERT_COMPLETE_COURSE}}</p>
|
|
|
+ <div class="cert_course">
|
|
|
+ <div style=" {{COURSE_TITLE_STYLE}} ">{{COURSE}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cert_details">
|
|
|
+ <dl>
|
|
|
+ <dd>{{CERT_DATE_START}}</dd>
|
|
|
+ <dt>{{START}}</dt>
|
|
|
+ </dl>
|
|
|
+ <dl>
|
|
|
+ <dd>{{CERT_DATE_END}}</dd>
|
|
|
+ <dt>{{END}}</dt>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+ <div class="cert_sign" {{SIGN_HIDE}}>
|
|
|
+ <div class="cert_sign_img">
|
|
|
+ <!-- <img src="{{SIGN_IMG}}"> -->
|
|
|
+ <img src="https://dd.unicraft.org/static/branding/transportir/cert/sign.png" />
|
|
|
+ </div>
|
|
|
+ <div class="cert_sign_info">{{SIGN_DESCR}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img class="cert_bg_img" src="https://dd.unicraft.org/static/branding/transportir/cert/bg.png" />
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|