basic-business-template/content/lists/aktuelles.blade.php

@extends('template.'.config('settings.template').'.content.master')
@section('content')




    <div class="container">
        <div class="row mb-5">
            <div class="col-12">
                <h1 class="mb-5 mt-5">{{ $list->name }}</h1>

                <p class="fs-5 mb-5">
                    {{ $list->description }}
                </p>
            </div>

            <div class="col-12">



                <style>

                    .block {
                        width: 100%;
                        height: 100%;
                        position: relative;
                        overflow: hidden;
                        font-size: 16px;
                    }

                    .block h2 {
                        position: relative;
                        display: block;
                        text-align: center;
                        margin: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        font-size: 10vw;
                        color: white;
                        font-weight: 400;
                    }

                    .img-parallax {
                        width: 100vmax;
                        z-index: -1;
                        position: absolute;
                        top: 0;
                        left: 50%;
                        transform: translate(-50%, 0);
                        pointer-events: none;
                    }
                </style>

                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

                <div class="block">
                    <img src="https://unsplash.it/1920/1920/?image=1003" data-speed="-1" class="img-parallax">
                    <h2>Parallax 1</h2>
                </div>




                <script>
                    $('.img-parallax').each(function() {
  var $image = $(this);
  var $imageParent = $(this).parent();

  function parallaxImg () {
    var speed = $image.data('speed');
    var imageY = $imageParent.offset().top;
    var winY = $(this).scrollTop();
    var winH = $(this).height();
    var parentH = $imageParent.innerHeight();
    // The next pixel to show on screen
    var winBottom = winY + winH;

    // If block is shown on screen
    if (winBottom > imageY && winY < imageY + parentH) {
      // Number of pixels shown after block appear
      var imgBottom = ((winBottom - imageY) * speed);
      // Max number of pixels until block disappear
      var imgTop = winH + parentH;
      // Percentage between start showing until disappearing
      var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
    }

    $image.css({ top: imgPercent + '%', transform: 'translate(-50%, -' + imgPercent + '%)' });
  }

  $(document).on({
    scroll: function () {
      parallaxImg();
    }, ready: function () {
      parallaxImg();
    }
  });
});
                </script>
                <x-img src="{{ $list->image }}" class="img-fluid rounded" alt=""/>

            </div>


            @if(count($contents) > 0)

                @foreach($contents as $index => $content)

                    <div class="col-12 col-md-6 col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="{{$index * 250}}">
                        <div class="card shadow-sm h-100">
                            <a href="{{ $content->path }}" class="text-decoration-none">
                                <x-img src="{{ $content->image() }}" sizes="(max-width: 330px) 330px,(max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 992px) 993px, 500" class="img-fluid card-img-top"/>
                            </a>

                            <div class="card-body">
                                <h3 class="h5 mb-2">
                                    <a href="{{ $content->path }}" class="text-decoration-none">
                                        {{$content->title}}

                                    </a>
                                </h3>

                                <div class="text-muted small my-3">
                                <span title="{{$content->created_at}}">
                                     <svg style="fill: currentColor;width:15px;margin-bottom: 5px;margin-right: 3px;}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M112 0c8.8 0 16 7.2 16 16V64H320V16c0-8.8 7.2-16 16-16s16 7.2 16 16V64h32c35.3 0 64 28.7 64 64v32 32V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 160 128C0 92.7 28.7 64 64 64H96V16c0-8.8 7.2-16 16-16zM416 192H32V448c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V192zM384 96H64c-17.7 0-32 14.3-32 32v32H416V128c0-17.7-14.3-32-32-32z"/></svg>
                                {{ $content->updated_at->diffForHumans() }}
                                </span>

                                </div>

                                {!! Str::limit($content->vorschau, 280) !!}

                            </div>

                            <div class="card-footer text-end">
                                <a class="btn btn-sm btn-ci" href="{{ $content->path }}" onclick="gtag('event', 'See Job', {'event_category' : 'Home', 'event_label' : '{{$content->title}}'});">
                                    Mehr lesen
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                                    </svg>
                                </a>
                            </div>

                        </div>
                    </div>


                @endforeach
            @else

                <script src="http://lumino.xps/admin-assets/libs/lottie-player.js"></script>
                <div class="col-12 text-center" style="margin-bottom: 30vh; margin-top: 5vh;">
                    <lottie-player src="http://lumino.xps/admin-assets/animations/no-results.json" background="transparent" speed="1" style="width: 200px; height: 200px; margin: 0 auto;" loop="" autoplay=""></lottie-player>

                    <i>
                        Derzeit keine Inhalte in {{ $list->name }} veröffentlicht.
                    </i>
                </div>

            @endif


        </div>



    </div>








@stop