index.html 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  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_main {
  114. position: absolute;
  115. top: 45%;
  116. left: 50%;
  117. width: 80%;
  118. -webkit-transform: translateY(-50%) translateX(-50%);
  119. -ms-transform: translateY(-50%) translateX(-50%);
  120. transform: translateY(-50%) translateX(-50%)
  121. }
  122. .cert_main p {
  123. font-size: 1.1rem;
  124. font-style: italic;
  125. margin-top: .25em;
  126. margin-bottom: .25em
  127. }
  128. .cert_company {
  129. font-size: 1.25rem;
  130. margin: 1rem;
  131. white-space: pre
  132. }
  133. .cert_title {
  134. font-size: 6.66667rem;
  135. letter-spacing: 5px;
  136. margin: 1rem;
  137. text-transform: uppercase;
  138. position: relative
  139. }
  140. .cert_title::after {
  141. display: block;
  142. content: "";
  143. height: 1px;
  144. width: 80%;
  145. position: absolute;
  146. bottom: 0;
  147. left: 10%;
  148. border-bottom: 1px solid #8c8c8c
  149. }
  150. .cert_student {
  151. font-size: 2rem;
  152. padding: 1rem
  153. }
  154. .cert_course {
  155. font-size: 2rem;
  156. padding: 1rem;
  157. }
  158. .cert_comment {
  159. color: #8c8c8c
  160. }
  161. .cert_details {
  162. position: absolute;
  163. bottom: 2rem;
  164. left: 4rem;
  165. color: #8c8c8c
  166. }
  167. .cert_details dd,
  168. .cert_details dl,
  169. .cert_details dt {
  170. margin: 0;
  171. padding: 0;
  172. text-align: left;
  173. letter-spacing: .025em
  174. }
  175. .cert_details dl {
  176. padding: .5rem 0
  177. }
  178. .cert_details dd {
  179. font-size: .85em
  180. }
  181. .cert_details dt {
  182. font-size: 1.215em
  183. }
  184. .cert_sign {
  185. position: absolute;
  186. bottom: 2rem;
  187. right: 4rem;
  188. max-width: 50%;
  189. text-align: right
  190. }
  191. .cert_sign_list {
  192. display: -webkit-box;
  193. display: -ms-flexbox;
  194. display: flex;
  195. -webkit-box-orient: horizontal;
  196. -webkit-box-direction: normal;
  197. -ms-flex-direction: row;
  198. flex-direction: row;
  199. -ms-flex-wrap: nowrap;
  200. flex-wrap: nowrap;
  201. max-width: none;
  202. width: 50%;
  203. -webkit-box-pack: end;
  204. -ms-flex-pack: end;
  205. justify-content: flex-end
  206. }
  207. .cert_sign_item {
  208. width: 33%;
  209. -webkit-box-flex: 0;
  210. -ms-flex: none;
  211. flex: none;
  212. margin: 0 10px
  213. }
  214. .cert_sign_info {
  215. border-top: 1px solid #8c8c8c;
  216. padding: .25rem;
  217. font-size: .85em;
  218. text-transform: uppercase;
  219. color: #8c8c8c;
  220. white-space: pre-line
  221. }
  222. .cert_sign_img {
  223. padding: 5px
  224. }
  225. .cert_sign_img img {
  226. height: 7rem;
  227. max-width: 100%;
  228. -o-object-fit: contain;
  229. object-fit: contain;
  230. -o-object-position: bottom;
  231. object-position: bottom;
  232. image-rendering: crisp-edges
  233. }
  234. </style>
  235. </head>
  236. <body>
  237. <div class="cert" style="border-color: {{BORDER_COLOR}}">
  238. <div class="cert_logo">
  239. <img src="{{LOGO}}" alt="">
  240. </div>
  241. <div class="cert_main">
  242. <div class="cert_company">{{COMPANY}}</div>
  243. <div class="cert_title">{{CERT_TITLE}}</div>
  244. <p>{{CERT_INTRO}}</p>
  245. <div class="cert_student">
  246. {{STUDENT}}
  247. </div>
  248. <p>{{CERT_COMPLETE_COURSE}}</p>
  249. <div class="cert_course">
  250. <div style=" {{COURSE_TITLE_STYLE}} ">{{COURSE}}</div>
  251. </div>
  252. </div>
  253. <div class="cert_details">
  254. <dl>
  255. <dd>{{CERT_DATE_START}}</dd>
  256. <dt>{{START}}</dt>
  257. </dl>
  258. <dl>
  259. <dd>{{CERT_DATE_END}}</dd>
  260. <dt>{{END}}</dt>
  261. </dl>
  262. </div>
  263. <div class="cert_sign" {{SIGN_HIDE}}>
  264. <div class="cert_sign_img">
  265. <img src="{{SIGN_IMG}}">
  266. </div>
  267. <div class="cert_sign_info">{{SIGN_DESCR}}</div>
  268. </div>
  269. </div>
  270. </body>
  271. </html>