protasevich
/
cis-rest-api


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
							<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    body {
        font-family: DejaVu Sans, sans-serif;
        position: relative;
        /*height: 100vh;*/
    }
    .certificate {
        position: relative;
        /*border: 40px solid #383bff;*/
        height: 92.85%;
    }
    .title {
        text-align: center;
        font-size: 40px;
        margin-top: 400px;
        text-transform: uppercase;
        color: #4d61a7;
    }
    .image-top {
        position: absolute;
        display: block;
        transform: scale(0.3);
        top: -350px;
        left: -350px;
    }
    .image-bottom-right {
        position: absolute;
        transform: scale(0.5);
        bottom: 730px;
        right: 1430px;
    }

    .event {
        margin: 0 auto;
        text-align: center;
        width: 50%;
        font-size: 14px;
        margin-top: 20px;
        color: #4d61a7;
    }

    .sub-title {
        margin-top: 30px;
        text-align: center;
        color: #4d61a7;
    }

    .name {
        text-align: center;
        color: #4d61a7;
        margin-top: 20px;
    }

    .competition {
        color: #4d61a7;
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
    }

    .footer {
        display: flex;
        text-transform: uppercase;
        font-size: 12px;
    }

    .city {
        /*padding-top: 350px;*/
        padding-top: 70%;
        color: #4d61a7;
        margin-left: 100px;
    }
    .date {
        padding-top: 70%;
        color: #4d61a7;
        margin-left: 400px;
    }

    .logo {
        position: absolute;
        transform: scale(0.3);
        top: -130px;
        right: 550px;
    }
</style>
<body>
<div class="certificate">

    @switch($certificate->position)
        @case(1)
            <img src="assets/img/gold.png" class="image-top" alt="">
            @break
        @case(2)
            <img src="assets/img/silver.png" class="image-top" alt="">
            @break
        @case(3)
            <img src="assets/img/bronze.png" class="image-top" alt="">
             @break
    @endswitch

    <img src="assets/img/logo.png" class="logo" alt="">
    <h2 class="title">
        Диплом
    </h2>
    <p class="event">
        {{ $certificate->title }}
    </p>
    <h4 class="sub-title">Конкурсант</h4>
    <h3 class="name">{{ $certificate->name }}</h3>
    <p class="competition">Компетенция: {{ $certificate->competence }}</p>
    <div class="footer">
        <p class="city">г. {{ $certificate->city }}</p>
        <p class="date">{{ $certificate->before_date }} - {{ $certificate->after_date }} {{ $certificate->month }} {{ $certificate->year }} год</p>
    </div>
    <img src="assets/img/footer.png" class="image-bottom-right" alt="">
</div>
</body>
</html>