index.html 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <style>
  6. @font-face {
  7. font-family: UCfont;
  8. src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Light.eot);
  9. 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");
  10. font-style: normal;
  11. font-weight: 300
  12. }
  13. @font-face {
  14. font-family: UCfont;
  15. src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-LightItalic.eot);
  16. 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");
  17. font-style: italic;
  18. font-weight: 300
  19. }
  20. @font-face {
  21. font-family: UCfont;
  22. src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Regular.eot);
  23. 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");
  24. font-style: normal;
  25. font-weight: 400
  26. }
  27. @font-face {
  28. font-family: UCfont;
  29. src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Italic.eot);
  30. 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");
  31. font-style: italic;
  32. font-weight: 400
  33. }
  34. @font-face {
  35. font-family: UCfont;
  36. src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Bold.eot);
  37. 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");
  38. font-style: normal;
  39. font-weight: 700
  40. }
  41. @font-face {
  42. font-family: UCfont;
  43. src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-BoldItalic.eot);
  44. 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");
  45. font-style: italic;
  46. font-weight: 700
  47. }
  48. @font-face {
  49. font-family: UCfont;
  50. src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-Heavy.eot);
  51. 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");
  52. font-style: normal;
  53. font-weight: 800
  54. }
  55. @font-face {
  56. font-family: UCfont;
  57. src: url(https://dd.unicraft.org/style/fonts/ucfont/hinted-subset-Lato-HeavyItalic.eot);
  58. 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");
  59. font-style: italic;
  60. font-weight: 800
  61. }
  62. body,
  63. html {
  64. height: initial;
  65. width: initial;
  66. font-size: 13px;
  67. line-height: 1.3;
  68. -webkit-box-sizing: border-box;
  69. box-sizing: border-box
  70. }
  71. body {
  72. background: #fff;
  73. font-weight: 400;
  74. margin: 0;
  75. padding: 0
  76. }
  77. * {
  78. -webkit-box-sizing: inherit;
  79. box-sizing: inherit
  80. }
  81. .cert {
  82. font-family: UCfont, "Open Sans", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  83. font-weight: 400;
  84. font-size: 13px;
  85. background-repeat: no-repeat;
  86. background-position: center;
  87. background-size: cover;
  88. background-color: #fff;
  89. display: block;
  90. -webkit-box-flex: 0;
  91. -ms-flex: none;
  92. flex: none;
  93. margin: 2rem;
  94. border: 1rem solid #2785ce;
  95. padding: 4rem;
  96. text-align: center;
  97. position: relative;
  98. height: 50rem;
  99. width: 80rem
  100. }
  101. .cert p {
  102. margin: .5em 0
  103. }
  104. .cert_logo {
  105. position: absolute;
  106. top: 4rem;
  107. left: 4rem
  108. }
  109. .cert_logo img {
  110. max-height: 100px;
  111. max-width: 250px
  112. }
  113. .cert_icons {
  114. position: absolute;
  115. top: 4rem;
  116. right: 4rem
  117. }
  118. .cert_icons img {
  119. max-height: 100px;
  120. max-width: 450px
  121. }
  122. .cert_main {
  123. position: absolute;
  124. top: 45%;
  125. left: 50%;
  126. width: 80%;
  127. -webkit-transform: translateY(-50%) translateX(-50%);
  128. -ms-transform: translateY(-50%) translateX(-50%);
  129. transform: translateY(-50%) translateX(-50%)
  130. }
  131. .cert_main p {
  132. font-size: 1.1rem;
  133. font-style: italic;
  134. margin-top: .25em;
  135. margin-bottom: .25em
  136. }
  137. .cert_company {
  138. font-size: 1.25rem;
  139. margin: 1rem;
  140. white-space: pre
  141. }
  142. .cert_title {
  143. font-size: 6.66667rem;
  144. letter-spacing: 5px;
  145. margin: 1rem;
  146. text-transform: uppercase;
  147. position: relative
  148. }
  149. .cert_title::after {
  150. display: block;
  151. content: "";
  152. height: 1px;
  153. width: 80%;
  154. position: absolute;
  155. bottom: 0;
  156. left: 10%;
  157. border-bottom: 1px solid #8c8c8c
  158. }
  159. .cert_student {
  160. font-size: 2rem;
  161. padding: 1rem
  162. }
  163. .cert_course {
  164. font-size: 2rem;
  165. padding: 1rem
  166. }
  167. .cert_comment {
  168. color: #8c8c8c
  169. }
  170. .cert_details {
  171. position: absolute;
  172. bottom: 2rem;
  173. left: 4rem;
  174. color: #8c8c8c
  175. }
  176. .cert_details dd,
  177. .cert_details dl,
  178. .cert_details dt {
  179. margin: 0;
  180. padding: 0;
  181. text-align: left;
  182. letter-spacing: .025em
  183. }
  184. .cert_details dl {
  185. padding: .5rem 0
  186. }
  187. .cert_details dd {
  188. font-size: .85em
  189. }
  190. .cert_details dt {
  191. font-size: 1.215em
  192. }
  193. .cert_sign {
  194. position: absolute;
  195. bottom: 2rem;
  196. right: 4rem;
  197. max-width: 50%;
  198. text-align: right
  199. }
  200. .cert_sign_list {
  201. display: -webkit-box;
  202. display: -ms-flexbox;
  203. display: flex;
  204. -webkit-box-orient: horizontal;
  205. -webkit-box-direction: normal;
  206. -ms-flex-direction: row;
  207. flex-direction: row;
  208. -ms-flex-wrap: nowrap;
  209. flex-wrap: nowrap;
  210. max-width: none;
  211. width: 50%;
  212. -webkit-box-pack: end;
  213. -ms-flex-pack: end;
  214. justify-content: flex-end
  215. }
  216. .cert_sign_item {
  217. width: 33%;
  218. -webkit-box-flex: 0;
  219. -ms-flex: none;
  220. flex: none;
  221. margin: 0 10px
  222. }
  223. .cert_sign_info {
  224. border-top: 1px solid #8c8c8c;
  225. padding: .25rem;
  226. font-size: .85em;
  227. text-transform: uppercase;
  228. color: #8c8c8c;
  229. white-space: pre-line
  230. }
  231. .cert_sign_img {
  232. padding: 5px
  233. }
  234. .cert_sign_img img {
  235. height: 7rem;
  236. max-width: 100%;
  237. -o-object-fit: contain;
  238. object-fit: contain;
  239. -o-object-position: bottom;
  240. object-position: bottom;
  241. image-rendering: crisp-edges
  242. }
  243. </style>
  244. </head>
  245. <body>
  246. <div class="cert" style="border-color: {{BORDER_COLOR}}">
  247. <div class="cert_logo">
  248. <img src="https://dd.unicraft.org/static/branding/1marka/cert_custom/logo.png">
  249. </div>
  250. <div class="cert_icons">
  251. <img src="https://dd.unicraft.org/static/branding/1marka/cert_custom/icons.png">
  252. </div>
  253. <div class="cert_main">
  254. <!-- <div class="cert_company">{{COMPANY}}</div> -->
  255. <div class="cert_title">{{CERT_TITLE}}</div>
  256. <p>{{CERT_INTRO}}</p>
  257. <div class="cert_student">
  258. {{STUDENT}}
  259. </div>
  260. <p>{{CERT_COMPLETE_COURSE}}</p>
  261. <div class="cert_course">
  262. {{COURSE}}
  263. </div>
  264. </div>
  265. <div class="cert_details">
  266. <dl>
  267. <dd>{{CERT_DATE_START}}</dd>
  268. <dt>{{START}}</dt>
  269. </dl>
  270. <dl>
  271. <dd>{{CERT_DATE_END}}</dd>
  272. <dt>{{END}}</dt>
  273. </dl>
  274. </div>
  275. <div class="cert_sign" {{SIGN_HIDE}}>
  276. <div class="cert_sign_img">
  277. <img src="{{SIGN_IMG}}">
  278. </div>
  279. <div class="cert_sign_info">{{SIGN_DESCR}}</div>
  280. </div>
  281. </div>
  282. </body>
  283. </html>