costin/123movies-seo
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add movie page backgrond image

Browse source
This commit is contained in:
Constantin Plaiasu 2024-08-25 02:39:05 +03:00
parent 8c108cd6ec
commit 094c29c083
1 changed files with 155 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
resources/views/movie.blade.php
View file

@ -7,6 +7,29 @@
@section('head')
<style>
/* {!! Vite::content('resources/scss/player.scss') !!} */
picture:after {
position: absolute;
content: "";
top: 0;
left: 0;
bottom: -6px;
width: 100%;
/* height: 100%; */
box-shadow: inset 1px 0 105px 105px #0d0d31;
background: linear-gradient(to bottom, #0d0d3105, #0d0d31);
background-color: #0d0d3188;
position: absolute;
}
picture > img {
/* filter: blur(1px); */
object-fit: cover;
object-position: top;
height: 100%;
width: 100%;
position: absolute;
top: 0;
}
</style>
@endsection
@ -14,12 +37,20 @@
{{-- {!! getMovieMarkupData($movie) !!} --}}
{{-- @endsection --}}
@section('app')
<section class="inner-hero bg_img dark--overlay lazy" data-bg="{{asset('images/breadcrumb.webp')}}" style="background-image: data:image/svg+xml,%3Csvg width='1920' height='500' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1920' height='500' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E">
<section class="inner-hero bg_img dark--overlay lazy">
<picture style="position: absolute; width:100%; top:0; min-height:720px">
@if(isset($movie['backdrop']) && $movie['backdrop'] !== '')
<source type="image/webp" data-srcset="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}} 576w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1200w">
@endif
<img @if(isset($movie['backdrop']) && $movie['backdrop'] !== '') data-src="{{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}}" @endif width="100%" height="720" class="lazy" alt="{{ str($movie['title'])->apa() }} ({{ $movie['year'] }})" src="data:image/svg+xml,%3Csvg width='1280' height='720' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1280' height='720' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E">
</picture>
<div class="container position-relative">
<div class="row">
<div class="col-lg-12">
<h1 class="text-center ">{{ str($movie['title'])->apa() }}</h1>
@if($movie['tagline'])
<p class="text-center" style="font-style:italic; font-size:1.3rem">"{{ $movie['tagline'] }}"</p>
@endif
<ul class="page-breadcrumb d-flex justify-content-center">
<li><a href="{{route('home')}}" class="">Home</a></li>
<li><a href="{{route('movies')}}" class="">Movies</a></li>
@ -30,18 +61,10 @@
</div>
</section>
<div class="pt-80 pb-80">
<div class="pt-80 pb-80 position-relative">
<div class="container">
<div class="row">
<div class="col-lg-12">
{{-- <div class="main-video cover" style="position: relative;width:100%">
<picture>
@if(isset($movie['backdrop']) && $movie['backdrop'] !== '')
<source type="image/webp" data-srcset="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}} 576w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1200w">
@endif
<img @if(isset($movie['backdrop']) && $movie['backdrop'] !== '') data-src="{{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}}" @endif width="1280" height="720" class="lazy" alt="{{ str($movie['title'])->apa() }} ({{ $movie['year'] }})" src="data:image/svg+xml,%3Csvg width='1280' height='720' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1280' height='720' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E">
</picture>
</div> --}}
<div class="movie-content">
<div class="movie-content-inner d-sm-flex justify-content-between align-items-center flex-wrap">
<div class="movie-content-left">
@ -93,6 +116,8 @@
<div class="col-lg-6">
<h4 class="mb-3">Details</h4>
<p>{{ $movie['overview'] }}</p>
<ul class="movie-details-list mt-3">
<li>
<span class="caption">Genres:&nbsp</span>
<span class="value">
@ -109,6 +134,7 @@
@endforeach
</span>
</li>
</ul>
</div>
<div class="col-lg-6 mt-lg-0 mt-4">
<h4 class="mb-3">Cast & Crew</h4>
@ -153,7 +179,7 @@
</div>
</div>
<section class="movie-section pb-80">
<section class="movie-section pb-80 position-relative">
<div class="container">
<div class="row">
<div class="col-xl-12">