API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 15th, 2019
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <style>
  6.         @font-face {
  7.             font-family: 'FuturaDemiC';
  8.             src: url('{{asset('/fonts/FuturaDemiC.eot')}}');
  9.             src: local('Futura Demi Cyrillic'), local('FuturaDemiC'),
  10.             url('{{asset('fonts/FuturaDemiC.eot')}}?#iefix') format('embedded-opentype'),
  11.             url('{{asset('fonts/FuturaDemiC.woff')}}') format('woff'),
  12.             url('{{asset('fonts/FuturaDemiC.ttf')}}') format('truetype');
  13.             font-weight: normal;
  14.             font-style: normal;
  15.         }
  16.  
  17.         @font-face {
  18.             font-family: 'FuturaMediumC';
  19.             src: url('{{asset('fonts/FuturaMediumaC.eot')}}');
  20.             src: local('Futura Medium Cyrillic'), local('FuturaMediumC'),
  21.             url('{{asset('fonts/FuturaMediumaC.eot')}}?#iefix') format('embedded-opentype'),
  22.             url('{{asset('fonts/FuturaMediumC.woff')}}') format('woff'),
  23.             url('{{asset('fonts/FuturaMediumC.toff')}}') format('truetype');
  24.             font-weight: 500;
  25.             font-style: normal;
  26.         }
  27.  
  28.         @font-face {
  29.             font-family: 'FuturaBookC';
  30.             src: url('{{asset('fonts/FuturaBookC.eot')}}');
  31.             src: local('Futura Book Cyrillic'), local('FuturaBookC'),
  32.             url('{{asset('fonts/FuturaBookC.eot')}}?#iefix') format('embedded-opentype'),
  33.             url('{{asset('fonts/FuturaBookC.woff')}}') format('woff'),
  34.             url('{{asset('fonts/FuturaBookC.tff')}}') format('truetype');
  35.             font-weight: normal;
  36.             font-style: normal;
  37.         }
  38.  
  39.  
  40.         .orange {
  41.             background: #ee7f00;
  42.             width: 45mm;
  43.             height: 58mm;
  44.         }
  45.  
  46.         .right-orange {
  47.             position: absolute;
  48.             background: #ee7f00;
  49.             width: 98mm;
  50.             height: 1.5mm;
  51.             margin-top: 12mm;
  52.             margin-left: 30.4mm;
  53.             display: inline-block;
  54.         }
  55.  
  56.         .right-orange-titul {
  57.             position: absolute;
  58.             background: #ee7f00;
  59.             width: 98mm;
  60.             height: 1.5mm;
  61.             margin-left: 34.1mm;
  62.             margin-top: 13mm;
  63.             display: inline-block;
  64.         }
  65.  
  66.         .blue {
  67.             background: #32388c;
  68.             width: 88mm;
  69.             height: 153.1mm;
  70.         }
  71.  
  72.         .right_panel {
  73.             margin-top: 245px;
  74.             margin-right: 60px;
  75.             float: right;
  76.         }
  77.  
  78.         .portfolio-heading {
  79.             font-family: "FuturaDemiC", serif;
  80.             font-size: 53.122pt;
  81.             color: #32388c;
  82.             margin-top: 7mm;
  83.             display: inline-block;
  84.         }
  85.  
  86.         .name {
  87.             font-family: "FuturaDemiC", serif;
  88.             color: #32388c;
  89.             font-size: 18pt;
  90.             float: right;
  91.         }
  92.  
  93.         .left_panel {
  94.             float: left;
  95.             width: 33px;
  96.         }
  97.  
  98.         .cont {
  99.             height: 211.1mm;
  100.             width: 278mm;
  101.             margin: 0 0 0 0;
  102.             page-break-after: always;
  103.         }
  104.  
  105.         .logo {
  106.             float: right;
  107.             height: 17mm;
  108.             width: 61mm;
  109.         }
  110.  
  111.         .right-logo {
  112.             float: right;
  113.             height: 16.76mm;
  114.             width: 60.75mm;
  115.         }
  116.  
  117.         body {
  118.             margin: 0;
  119.             padding: 0;
  120.         }
  121.  
  122.         .orange-line {
  123.             background: #ee7f00;
  124.             width: 4.199mm;
  125.             height: 165.75mm;
  126.         }
  127.  
  128.         .blue-line {
  129.             background: #32388c;
  130.             width: 4.199mm;
  131.             height: 45.4mm;
  132.         }
  133.  
  134.         .left-decor {
  135.             position: absolute;
  136.             width: 4.199mm;
  137.         }
  138.  
  139.         .center-content {
  140.             position: absolute;
  141.             margin-left: 4.199mm;
  142.             width: 169.723mm;
  143.             height: 169.723mm;
  144.             margin-right: 0;
  145.             padding-left: 15.7795mm;
  146.             padding-right: 15.7795mm;
  147.             padding-top: 20.6885mm;
  148.             padding-bottom: 20.6885mm;
  149.             display: flex;
  150.         }
  151.  
  152.         .right-meta {
  153.             box-shadow: -25px 0 15px -15px rgba(0, 0, 0, 0.4);
  154.             margin-left: 205.481mm;
  155.             width: 91.51mm;
  156.             height: 211.1mm;
  157.             position: absolute;
  158.         }
  159.  
  160.         .meta-logo {
  161.             margin-top: 165.75mm;
  162.         }
  163.  
  164.         .text-portfolio {
  165.             margin-left: 30.6mm;
  166.             display: inline-block;
  167.             font-family: "FuturaDemiC", serif;
  168.             color: #32388c;
  169.             font-size: 15.6pt;
  170.             margin-top: 2mm;
  171.         }
  172.  
  173.         .meta-info {
  174.             margin-left: 30.4mm;
  175.             position: absolute;
  176.             margin-top: 108.67mm;
  177.             font-family: "FuturaDemiC", serif;
  178.         }
  179.  
  180.         .direction {
  181.             font-size: 12pt;
  182.         }
  183.  
  184.         .comment {
  185.             font-size: 12pt;
  186.             font-family: 'FuturaMediumC';
  187.         }
  188.  
  189.  
  190.         .four-photo-one-container {
  191.             width: 82.397mm;
  192.             height: 82.397mm;
  193.             position: absolute;
  194.         }
  195.  
  196.         .two-four {
  197.             margin-left: 87.301mm;
  198.         }
  199.  
  200.         .three-four {
  201.             margin-top: 87.603mm;
  202.         }
  203.  
  204.         .four-four {
  205.             margin-left: 87.301mm;
  206.             margin-top: 87.603mm;
  207.         }
  208.  
  209.         .one-three-landscape {
  210.             width: 100%;
  211.             height: 82.397mm;
  212.             justify-content: center;
  213.             display: flex;
  214.         }
  215.  
  216.         .one-two-landscape {
  217.             width: 100%;
  218.             height: 82.397mm;
  219.             justify-content: center;
  220.             display: flex;
  221.             position: absolute;
  222.         }
  223.  
  224.         .two-landscape-container {
  225.             justify-content: center;
  226.         }
  227.  
  228.         .two-two-landscape {
  229.             width: 100%;
  230.             height: 82.397mm;
  231.             justify-content: center;
  232.             display: flex;
  233.             position: absolute;
  234.         }
  235.  
  236.         .one-three-portrait {
  237.             width: 82.397mm;
  238.         }
  239.  
  240.         .two-three-landscape {
  241.             margin-top: 87.603mm;
  242.         }
  243.  
  244.         .three-three-landscape {
  245.             margin-left: 87.301mm;
  246.             margin-top: 87.603mm;
  247.         }
  248.  
  249.         .two-three-portrait {
  250.             margin-left: 87.603mm;
  251.         }
  252.  
  253.         .three-three-portrait {
  254.             margin-left: 87.301mm;
  255.             margin-top: 87.603mm;
  256.         }
  257.  
  258.         .landscape {
  259.             margin: auto;
  260.             width: 100%;
  261.         }
  262.  
  263.         .portrait {
  264.             margin: auto;
  265.             height: 100%;
  266.         }
  267.  
  268.         .one-four-photo {
  269.             position: absolute;
  270.             bottom: 0px;
  271.             right: 0px;
  272.         }
  273.  
  274.         .two-four-photo {
  275.             position: absolute;
  276.             bottom: 0px;
  277.             left: 0px;
  278.         }
  279.  
  280.         .three-four-photo {
  281.             position: absolute;
  282.             top: 0px;
  283.             right: 0px;
  284.         }
  285.  
  286.         .four-four-photo {
  287.             position: absolute;
  288.             top: 0px;
  289.             left: 0px;
  290.         }
  291.  
  292.         .one-two-portrait {
  293.             width: 82.397mm;
  294.             display: flex;
  295.         }
  296.  
  297.         .two-two-portrait {
  298.             width: 82.397mm;
  299.             margin-left: 4.904mm;
  300.             display: flex;
  301.         }
  302.     </style>
  303. </head>
  304. <body>
  305.  
  306. <div class="cont">
  307.     <div class="left_panel">
  308.         <div class="orange"></div>
  309.         <div class="blue"></div>
  310.     </div>
  311.     <div class="right_panel">
  312.         <img class="logo" src="{{asset('images/logo.svg')}}"><br>
  313.         <div class="right-orange-titul"></div>
  314.         <br>
  315.         <span class="portfolio-heading"><b>Портфолио</b></span><br>
  316.         <span class="name"><b>{{$user->first_name . ' ' . $user->last_name}}</b></span>
  317.     </div>
  318. </div>
  319.  
  320. @foreach($blocks as $title => $block)
  321.     @foreach($block as $page)
  322.         <div class="cont">
  323.             <div class="left-decor">
  324.                 <div class="orange-line"></div>
  325.                 <div class="blue-line"></div>
  326.             </div>
  327.             @if($page['type'] == 'single')
  328.                 <div class="center-content">
  329.                     <img class="{{$page['photos'][0]['orientation']}}" src="{{ asset('storage/photos/' . $page['photos'][0]['path'])}}">
  330.                 </div>
  331.             @endif
  332.             @if($page['type'] == 'four')
  333.                 <div class="center-content">
  334.                     <div class="four-photo-one-container one-four"><img class="one-four-photo {{$page['photos'][0]['orientation']}}"
  335.                                                                        src="{{ asset('storage/photos/' . $page['photos'][0]['path'])}}">
  336.                     </div>
  337.                     <div class="four-photo-one-container two-four"><img class="two-four-photo {{$page['photos'][1]['orientation']}}"
  338.                                                                        src="{{ asset('storage/photos/' . $page['photos'][1]['path'])}}">
  339.                     </div>
  340.                     <div class="four-photo-one-container three-four"><img class="three-four-photo {{$page['photos'][2]['orientation']}}"
  341.                                                                          src="{{ asset('storage/photos/' . $page['photos'][2]['path'])}}">
  342.                     </div>
  343.                     <div class="four-photo-one-container four-four"><img class="four-four-photo {{$page['photos'][3]['orientation']}}"
  344.                                                                         src="{{ asset('storage/photos/' . $page['photos'][3]['path'])}}">
  345.                     </div>
  346.                 </div>
  347.             @endif
  348.             @if($page['type'] == 'two_landscape')
  349.                 <div class="center-content two-landscape-container">
  350.                     <div class="one-two-landscape"><img class="portrait" src="{{ asset('storage/photos/' . $page['photos'][0]['path'])}}"></div>
  351.                     <div class="two-two-landscape three-four"><img class="portrait" src="{{ asset('storage/photos/' . $page['photos'][1]['path'])}}"></div>
  352.                 </div>
  353.             @endif
  354.             @if($page['type'] == 'two_portrait')
  355.                 <div class="center-content">
  356.                     <div class="one-two-portrait"><img class="landscape" src="{{ asset('storage/photos/' . $page['photos'][0]['path'])}}"></div>
  357.                     <div class="two-two-portrait"><img class="landscape" src="{{ asset('storage/photos/' . $page['photos'][1]['path'])}}"></div>
  358.                 </div>
  359.             @endif
  360.             @if($page['type'] == 'two_mixed')
  361.                 <div class="center-content">
  362.                     @if($page['photos'][0]['orientation'] == 'portrait')
  363.                     <div class="one-two-portrait"><img class="landscape" src="{{ asset('storage/photos/' . $page['photos'][0]['path'])}}"></div>
  364.                     <div class="two-two-portrait"><img class="landscape" src="{{ asset('storage/photos/' . $page['photos'][1]['path'])}}"></div>
  365.                     @else
  366.                     <div class="one-two-portrait"><img class="landscape" src="{{ asset('storage/photos/' . $page['photos'][1]['path'])}}"></div>
  367.                     <div class="two-two-portrait"><img class="landscape" src="{{ asset('storage/photos/' . $page['photos'][0]['path'])}}"></div>
  368.                     @endif
  369.                 </div>
  370.             @endif
  371.             @if($page['type'] == 'three_landscape')
  372.                 <div class="center-content">
  373.                     @foreach($page['photos'] as $key=>$photo)
  374.                         @if($photo['orientation'] == 'landscape')
  375.                             <div class="one-three-landscape"><img class="portrait" src="{{ asset('storage/photos/' . $photo['path'])}}"></div>
  376.                         @php
  377.                             unset($page['photos'][$key]);
  378.                             $page['photos'] = array_values($page['photos']);
  379.                         @endphp
  380.                         @endif
  381.                     @endforeach
  382.                     <div class="four-photo-one-container two-three-landscape"><img class="three-four-photo portrait"
  383.                                                                                   src="{{ asset('storage/photos/' . $page['photos'][0]['path'])}}"></div>
  384.                     <div class="four-photo-one-container three-three-landscape"><img class="four-four-photo landscape"
  385.                                                                                     src="{{ asset('storage/photos/' . $page['photos'][1]['path'])}}"></div>
  386.                 </div>
  387.             @endif
  388.             @if($page['type'] == 'three_portrait')
  389.                 <div class="center-content">
  390.                     @foreach($page['photos'] as $key=>$photo)
  391.                         @if($photo['orientation'] == 'portrait')
  392.                             <div class="one-three-portrait"><img class="landscape" src="{{ asset('storage/photos/' . $photo['path'])}}"></div>
  393.                             @php
  394.                                 unset($page['photos'][$key]);
  395.                                 $page['photos'] = array_values($page['photos']);
  396.                             @endphp
  397.                         @endif
  398.                     @endforeach
  399.                     <div class="four-photo-one-container two-three-portrait"><img class="two-four-photo portrait"
  400.                                                                                  src="{{ asset('storage/photos/' . $page['photos'][0]['path'])}}"></div>
  401.                     <div class="four-photo-one-container three-three-portrait"><img class="four-four-photo landscape"
  402.                                                                                    src="{{ asset('storage/photos/' . $page['photos'][1]['path'])}}"></div>
  403.                 </div>
  404.             @endif
  405.             <div class="right-meta">
  406.                 <div class="meta-info">
  407.                     <span class="direction">{{$user->direction->title}}</span><br><br>
  408.                     <span class="comment">{{$title}}</span>
  409.                 </div>
  410.                 <div class="meta-logo">
  411.                     <img class="right-logo" src="{{asset('images/logo.svg')}}"><br>
  412.                     <div class="right-orange"></div>
  413.                     <span class="text-portfolio"><b>П О Р Т Ф О Л И О</b></span>
  414.                 </div>
  415.             </div>
  416.         </div>
  417.     @endforeach
  418. @endforeach
  419. </body>
  420. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!