138 lines
7.6 KiB
PHP
138 lines
7.6 KiB
PHP
<div>
|
|
<section class="pt-0 cover-background ipad-top-space-margin sm-pb-0"
|
|
style="background-image:
|
|
linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
|
|
url('{{ $news->thumbnail }}');">
|
|
<div class="shape-image-animation bottom-0 p-0 w-100 d-none d-md-block">
|
|
<svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="400" viewBox="0 180 2500 200" fill="#ffffff">
|
|
<path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
|
|
<animate attributeName="d" dur="5s"
|
|
values="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250;
|
|
M 0 250 C 400 50 400 400 3000 250 L 3000 550 L 0 550 L 0 250;
|
|
M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250"
|
|
repeatCount="indefinite" />
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center h-500px sm-h-300px">
|
|
<div class="col-12 col-lg-6 col-md-10 position-relative text-center page-title-extra-large d-flex flex-wrap flex-column align-items-center justify-content-center"
|
|
data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<span
|
|
class="ps-25px pe-25px pt-5px pb-5px mb-15px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-flex"><i
|
|
class="bi bi-megaphone text-white icon-small me-10px"></i>{{ $pageTitle }}</span>
|
|
<h5 class="mb-20px text-white fw-600 ls-minus-1px">{{ $pageDescription }}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- start section -->
|
|
<section class="p-0">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10 overlap-section text-center">
|
|
<div class="p-10 box-shadow-extra-large border-radius-4px bg-white text-center">
|
|
<h3 class="alt-font text-dark-gray fw-600 ls-minus-1px mb-15px">{{ $news->title }}</h3>
|
|
<div class="lg-20px sm-mb-0">
|
|
<span>{{ $news->author_name }}</span>
|
|
<span class="ms-10px">{{ $news->formatted_date }}</span>
|
|
<span class="ms-10px"><i class="feather icon-feather-eye"></i>
|
|
{{ $news->formatted_views }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
|
|
<!-- start section -->
|
|
<section class="overlap-section text-center p-0 sm-pt-30px">
|
|
<img class="rounded-circle box-shadow-extra-large w-130px h-130px border border-8 border-color-white"
|
|
src="{{ $news->author_avatar }}" alt="{{ $news->author_name }}">
|
|
</section>
|
|
<!-- end section -->
|
|
|
|
<!-- start section -->
|
|
<section class="pb-0 pt-3">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-9 last-paragraph-no-margin"
|
|
data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
|
<div class="text-medium-gray entry-content">
|
|
{!! $news->content !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
|
|
<!-- start section -->
|
|
<section class="half-section pb-0">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-9"
|
|
data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
|
|
<div class="row mb-30px">
|
|
<div class="tag-cloud col-md-12 text-center text-md-start sm-mb-15px">
|
|
@foreach ($news->tags as $tag)
|
|
<a href="{{ route('news.index', ['tag' => $tag->name]) }}">{{ $tag->name }}</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
|
|
<!-- start section -->
|
|
<section class="bg-solitude-blue position-relative sm-pb-20px mt-5">
|
|
<div class="container">
|
|
<div class="row justify-content-center mb-1">
|
|
<div class="col-lg-7 text-center">
|
|
<span
|
|
class="bg-white box-shadow-quadruple-large text-uppercase fs-13 ps-25px pe-25px alt-font fw-600 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-25px"
|
|
data-anime='{ "translateY": [30, 0], "opacity": [0,1], "delay": 500, "staggervalue": 100, "easing": "easeOutQuad" }'>Mungkin
|
|
Anda suka</span>
|
|
<h3 class="alt-font text-dark-gray fw-600 ls-minus-1px"
|
|
data-anime='{ "el": "lines", "translateY": [30, 0], "opacity": [0,1], "delay": 500, "staggervalue": 100, "easing": "easeOutQuad" }'>
|
|
Berita Terkait</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 px-0">
|
|
<ul class="blog-classic blog-wrapper grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-double-extra-large"
|
|
data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
|
|
<li class="grid-sizer"></li>
|
|
@foreach ($relatedNews as $related)
|
|
<!-- start blog item -->
|
|
<li class="grid-item">
|
|
<div class="card bg-transparent border-0 h-100">
|
|
<div class="blog-image position-relative overflow-hidden border-radius-4px">
|
|
<a href="{{ route('news.show', $related->slug) }}"><img
|
|
src="{{ $related->thumbnail }}" alt="{{ $related->title }}"
|
|
class="w-100" /></a>
|
|
</div>
|
|
<div class="card-body px-0 pb-30px pt-30px xs-pb-15px last-paragraph-no-margin">
|
|
<span class="fs-13 text-uppercase mb-5px d-block">
|
|
<a href="javascript:void(0)"
|
|
class="blog-date">{{ $related->formatted_date }}</a>
|
|
</span>
|
|
<a href="{{ route('news.show', $related->slug) }}"
|
|
class="card-title mb-0 fw-500 fs-18 lh-30 text-dark-gray d-inline-block">{{ $related->title }}</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- end blog item -->
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
</div>
|