certificate.blade.php 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. </head>
  6. <style>
  7. * {
  8. box-sizing: border-box;
  9. margin: 0;
  10. padding: 0;
  11. }
  12. body {
  13. font-family: DejaVu Sans, sans-serif;
  14. position: relative;
  15. /*height: 100vh;*/
  16. }
  17. .certificate {
  18. position: relative;
  19. /*border: 40px solid #383bff;*/
  20. height: 92.85%;
  21. }
  22. .title {
  23. text-align: center;
  24. font-size: 40px;
  25. margin-top: 200px;
  26. text-transform: uppercase;
  27. color: #4d61a7;
  28. }
  29. .image-top {
  30. display: block;
  31. margin-left: 10px;
  32. margin-top: 30px;
  33. }
  34. .image-bottom-right {
  35. position: absolute;
  36. transform: scale(0.5);
  37. bottom: 730px;
  38. right: 1430px;
  39. }
  40. .event {
  41. margin: 0 auto;
  42. text-align: center;
  43. width: 50%;
  44. font-size: 14px;
  45. margin-top: 20px;
  46. color: #4d61a7;
  47. }
  48. .sub-title {
  49. margin-top: 30px;
  50. text-align: center;
  51. color: #4d61a7;
  52. }
  53. .name {
  54. text-align: center;
  55. color: #4d61a7;
  56. margin-top: 20px;
  57. }
  58. .competition {
  59. color: #4d61a7;
  60. text-align: center;
  61. margin-top: 20px;
  62. font-size: 14px;
  63. }
  64. .footer {
  65. display: flex;
  66. text-transform: uppercase;
  67. font-size: 12px;
  68. }
  69. .city {
  70. /*padding-top: 350px;*/
  71. padding-top: 70%;
  72. color: #4d61a7;
  73. margin-left: 100px;
  74. }
  75. .date {
  76. padding-top: 70%;
  77. color: #4d61a7;
  78. margin-left: 400px;
  79. }
  80. .logo {
  81. position: absolute;
  82. transform: scale(0.3);
  83. top: -130px;
  84. right: 550px;
  85. }
  86. </style>
  87. <body>
  88. <div class="certificate">
  89. <img src="assets/img/combo-cubes.png" class="image-top" alt="">
  90. <img src="assets/img/logo.png" class="logo" alt="">
  91. <h2 class="title">
  92. Сертификат
  93. </h2>
  94. <p class="event">
  95. {{ $certificate->title }}
  96. </p>
  97. <h4 class="sub-title">Конкурсант</h4>
  98. <h3 class="name">{{ $certificate->name }}</h3>
  99. <p class="competition">Компетенция: {{ $certificate->competence }}</p>
  100. <div class="footer">
  101. <p class="city">г. {{ $certificate->city }}</p>
  102. <p class="date">{{ $certificate->before_date }} - {{ $certificate->after_date }} {{ $certificate->month }} {{ $certificate->year }} год</p>
  103. </div>
  104. <img src="assets/img/footer.png" class="image-bottom-right" alt="">
  105. </div>
  106. </body>
  107. </html>