mirror of
https://github.com/twinpath/app-beta.git
synced 2026-01-26 05:45:26 +07:00
63 lines
2.2 KiB
PHP
63 lines
2.2 KiB
PHP
@extends('layouts.app')
|
|
|
|
@php
|
|
$images = [
|
|
[
|
|
'src' => asset('images/grid-image/image-04.png'),
|
|
'alt' => 'Grid image 1',
|
|
],
|
|
[
|
|
'src' => asset('images/grid-image/image-05.png'),
|
|
'alt' => 'Grid image 2',
|
|
],
|
|
[
|
|
'src' => asset('images/grid-image/image-06.png'),
|
|
'alt' => 'Grid image 3',
|
|
],
|
|
];
|
|
@endphp
|
|
|
|
@section('content')
|
|
{{-- Page Breadcrumb --}}
|
|
<x-common.page-breadcrumb pageTitle="Images" />
|
|
|
|
<div class="space-y-5 sm:space-y-6">
|
|
|
|
<x-common.component-card title="Responsive Image">
|
|
<div class="relative">
|
|
<div id="pane" class="overflow-hidden">
|
|
<img src="{{ asset('images/grid-image/image-01.png') }}" alt="Cover"
|
|
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
|
|
</div>
|
|
<div id="ghostpane" class="absolute top-0 left-0 duration-300 ease-in-out"></div>
|
|
</div>
|
|
</x-common.component-card>
|
|
|
|
<x-common.component-card title="Image in 2 Grid">
|
|
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
|
<div>
|
|
<img src="{{ asset('images/grid-image/image-02.png') }}" alt="grid"
|
|
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
|
|
</div>
|
|
|
|
<div>
|
|
<img src="{{ asset('images/grid-image/image-03.png') }}" alt="grid"
|
|
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
|
|
</div>
|
|
</div>
|
|
</x-common.component-card>
|
|
|
|
<x-common.component-card title="Image in 3 Grid">
|
|
<div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
|
|
@foreach ($images as $image)
|
|
<div>
|
|
<img src="{{ $image['src'] }}" alt="{{ $image['alt'] }}"
|
|
class="w-full border border-gray-200 rounded-xl dark:border-gray-800" />
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</x-common.component-card>
|
|
|
|
</div>
|
|
@endsection
|