banner aspect ratio
This commit is contained in:
parent
0f6dbb95e7
commit
06ab0f42a5
|
|
@ -1,50 +1,47 @@
|
|||
<section class="position-relative">
|
||||
<div class="swiper position-absolute top-0 start-0 w-100 h-100"
|
||||
data-swiper='{
|
||||
"effect": "fade",
|
||||
"loop": true,
|
||||
"speed": 400,
|
||||
"pagination": {
|
||||
"el": ".swiper-pagination",
|
||||
"clickable": true
|
||||
},
|
||||
"autoplay": {
|
||||
"delay": 5500,
|
||||
"disableOnInteraction": false
|
||||
}
|
||||
}'
|
||||
data-bs-theme="dark">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="aspect-ratio-container" style="aspect-ratio: 900/446;">
|
||||
<div class="swiper position-absolute top-0 start-0 w-100 h-100"
|
||||
data-swiper='{
|
||||
"effect": "fade",
|
||||
"loop": true,
|
||||
"speed": 400,
|
||||
"pagination": {
|
||||
"el": ".swiper-pagination",
|
||||
"clickable": true
|
||||
},
|
||||
"autoplay": {
|
||||
"delay": 5500,
|
||||
"disableOnInteraction": false
|
||||
}
|
||||
}'
|
||||
data-bs-theme="dark">
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
@foreach ($items as $item)
|
||||
<div class="swiper-slide" style="background-color: #6dafca">
|
||||
{{-- <div class="position-absolute d-flex align-items-center w-100 h-100 z-2">
|
||||
<div class="container mt-lg-n4">
|
||||
<div class="row">
|
||||
<div class="col-9 col-sm-8 col-md-7 col-lg-6">
|
||||
<p class="fs-sm text-white mb-lg-4">🔥 Free shipping - order over
|
||||
<strong>50$</strong>
|
||||
</p>
|
||||
<h2 class="display-4 pb-2 pb-md-3 pb-lg-4">Healthy Food Available to Everyone</h2>
|
||||
<a class="btn btn-lg btn-outline-light rounded-pill"
|
||||
href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop now</a>
|
||||
@foreach ($items as $item)
|
||||
<div class="swiper-slide" style="background-color: #6dafca">
|
||||
{{-- <div class="position-absolute d-flex align-items-center w-100 h-100 z-2">
|
||||
<div class="container mt-lg-n4">
|
||||
<div class="row">
|
||||
<div class="col-9 col-sm-8 col-md-7 col-lg-6">
|
||||
<p class="fs-sm text-white mb-lg-4">🔥 Free shipping - order over
|
||||
<strong>50$</strong>
|
||||
</p>
|
||||
<h2 class="display-4 pb-2 pb-md-3 pb-lg-4">Healthy Food Available to Everyone</h2>
|
||||
<a class="btn btn-lg btn-outline-light rounded-pill"
|
||||
href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
<img src="{{ env('WMS_ASSET_URL') . '/' . $item->filename }}"
|
||||
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
|
||||
</div>
|
||||
@endforeach
|
||||
</div> --}}
|
||||
<img src="{{ env('WMS_ASSET_URL') . '/' . $item->filename }}"
|
||||
class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Slider pagination (Bullets) -->
|
||||
<div class="swiper-pagination pb-sm-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- Slider pagination (Bullets) -->
|
||||
<div class="swiper-pagination pb-sm-2"></div>
|
||||
</div>
|
||||
<div class="d-md-none" style="height: 380px"></div>
|
||||
<div class="d-none d-md-block d-lg-none" style="height: 420px"></div>
|
||||
<div class="d-none d-lg-block d-xl-none" style="height: 580px"></div>
|
||||
<div class="d-none d-xl-block d-xxl-none" style="height: 660px"></div>
|
||||
<div class="d-none d-xxl-block" style="height: 804px"></div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
@extends('layouts.landing', ['title' => config('app.tagline')])
|
||||
|
||||
@section('content')
|
||||
|
||||
|
||||
<x-layout.header-grocery />
|
||||
|
||||
|
||||
|
|
@ -26,7 +24,7 @@
|
|||
|
||||
|
||||
<!-- Banner + Special products -->
|
||||
<x-grocery.special-products/>
|
||||
<x-grocery.special-products />
|
||||
|
||||
|
||||
<!-- Recipes -->
|
||||
|
|
@ -166,12 +164,12 @@
|
|||
class="d-flex flex-column flex-sm-row align-items-center h-100 bg-body-tertiary rounded-5 overflow-hidden">
|
||||
<div class="order-sm-2 text-center text-sm-start pt-4 px-4 pb-2 pb-sm-4 mt-3 mt-sm-0">
|
||||
<h2 class="h4 mb-4">Make online shop easier with our AsiaGolf App</h2>
|
||||
<div
|
||||
class="d-flex flex-sm-wrap justify-content-center justify-content-sm-start gap-2 gap-sm-3">
|
||||
<a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0" href="https://play.google.com/store/apps/details?id=id.asiagolf.app&hl=id"
|
||||
<div class="d-flex flex-sm-wrap justify-content-center justify-content-sm-start gap-2 gap-sm-3">
|
||||
<a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0"
|
||||
href="https://play.google.com/store/apps/details?id=id.asiagolf.app&hl=id"
|
||||
aria-label="Download on Google Play">
|
||||
<svg class="flex-shrink-0 ms-n1 me-2" xmlns="http://www.w3.org/2000/svg"
|
||||
width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<svg class="flex-shrink-0 ms-n1 me-2" xmlns="http://www.w3.org/2000/svg" width="24"
|
||||
height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M19.665 10.561l-3.251-1.878-3.329 3.329 3.328 3.329 3.263-1.884c.509-.309.812-.849.812-1.444s-.304-1.135-.823-1.451z"
|
||||
fill="#ffce00" />
|
||||
|
|
@ -191,7 +189,8 @@
|
|||
d="M24.575 9.45c-2.184 0-3.914 1.704-3.914 4.071 0 2.272 1.729 4.071 3.914 4.071s3.914-1.704 3.914-4.071c0-2.461-1.729-4.071-3.914-4.071zm0 6.438c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.184.947 2.184 2.462c0 1.42-1.001 2.462-2.184 2.462zM16.11 9.45c-2.184 0-3.914 1.704-3.914 4.071 0 2.272 1.729 4.071 3.914 4.071s3.914-1.704 3.914-4.071c0-2.461-1.729-4.071-3.914-4.071zm0 6.438c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.184.947 2.184 2.462c0 1.42-1.001 2.462-2.184 2.462zM6.007 10.681v1.704h3.914c-.091.947-.455 1.704-.91 2.177-.546.568-1.456 1.231-3.004 1.231-2.457 0-4.278-1.988-4.278-4.544s1.911-4.544 4.278-4.544c1.274 0 2.275.568 3.004 1.231l1.183-1.231C9.193 5.757 7.918 5 6.098 5 2.822 5 0 7.84 0 11.249s2.822 6.249 6.098 6.249c1.82 0 3.095-.568 4.187-1.799 1.092-1.136 1.456-2.745 1.456-3.976 0-.379 0-.757-.091-1.041H6.007zm41.322 1.325c-.364-.947-1.274-2.556-3.277-2.556s-3.641 1.61-3.641 4.071c0 2.272 1.638 4.071 3.823 4.071 1.729 0 2.822-1.136 3.186-1.799l-1.274-.947c-.455.663-1.001 1.136-1.911 1.136s-1.456-.379-1.911-1.231l5.188-2.272-.182-.473zm-5.279 1.326c0-1.515 1.183-2.367 2.002-2.367.637 0 1.274.379 1.456.852l-3.459 1.515zm-4.278 3.882h1.729V5.379h-1.729v11.834zm-2.73-6.911c-.455-.473-1.183-.947-2.093-.947-1.911 0-3.732 1.799-3.732 4.071s1.729 3.976 3.732 3.976c.91 0 1.638-.473 2.002-.947h.091v.568c0 1.515-.819 2.367-2.093 2.367-1.001 0-1.729-.757-1.911-1.42l-1.456.663C30.036 19.675 31.128 21 33.039 21c2.002 0 3.641-1.231 3.641-4.166V9.639h-1.638v.663zm-2.002 5.586c-1.183 0-2.184-1.041-2.184-2.462s1.001-2.462 2.184-2.462 2.093 1.041 2.093 2.462-.91 2.462-2.093 2.462zM55.247 5.379h-4.096v11.834h1.729v-4.45h2.367c1.911 0 3.732-1.42 3.732-3.692s-1.82-3.692-3.732-3.692zm.091 5.681h-2.457V6.988h2.457c1.274 0 2.002 1.136 2.002 1.988-.091 1.041-.819 2.083-2.002 2.083zm10.467-1.704c-1.274 0-2.549.568-3.004 1.799l1.547.663c.364-.663.91-.852 1.547-.852.91 0 1.729.568 1.82 1.515v.095c-.273-.189-1.001-.473-1.729-.473-1.638 0-3.277.947-3.277 2.651 0 1.609 1.365 2.651 2.821 2.651 1.183 0 1.729-.568 2.184-1.136h.091v.947h1.638v-4.544c-.182-2.083-1.729-3.314-3.641-3.314zm-.182 6.533c-.546 0-1.365-.284-1.365-1.041 0-.947 1.001-1.231 1.82-1.231.728 0 1.092.189 1.547.379-.182 1.136-1.092 1.894-2.002 1.894zm9.557-6.249l-1.911 5.112h-.091l-2.002-5.112h-1.82l3.004 7.195-1.729 3.976h1.729L77 9.639h-1.82zm-15.291 7.574h1.729V5.379h-1.729v11.834z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0" href="https://apps.apple.com/us/app/asiagolf-points/id6633417013"
|
||||
<a class="btn btn-market btn-lg btn-light rounded-pill flex-shrink-0"
|
||||
href="https://apps.apple.com/us/app/asiagolf-points/id6633417013"
|
||||
aria-label="Download on App Store">
|
||||
<i class="ci-apple lead ms-n1 me-2"></i>
|
||||
<svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="77"
|
||||
|
|
|
|||
Loading…
Reference in New Issue