forge-joniko/ldc-agis
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

About page responsive 2/2

Browse source
This commit is contained in:
Sebastien Hattry 2023-11-02 10:52:56 +01:00
parent 480d6394b4
commit 54b3d22d40
4 changed files with 60 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/sass/fo/base/_common.scss
View file

@ -80,6 +80,10 @@ img { max-width: 100%; }
}
}
.rotate-180 {
rotate: 180deg;
}
.rotate-n45 {
rotate: -45deg;
}

19
resources/sass/fo/pages/_about-us.scss
View file

@ -27,36 +27,39 @@
.date-bloc:nth-child(2),
.date-bloc:nth-child(3),
.date-bloc:nth-child(7) {
.year-bloc img { max-width: 50%; }
.year-bloc > img { max-width: 50%; }
}
// 4 : 1991
.date-bloc:nth-child(4) {
.year-bloc img { max-width: 75%; }
.year-bloc > img { max-width: 75%; }
}
// 5 : 1995
// 9 : 2018
.date-bloc:nth-child(5),
.date-bloc:nth-child(9) {
.year-bloc img { max-width: 100%; }
.year-bloc > img { max-width: 100%; }
}
// 6 : 2005
.date-bloc:nth-child(6) {
.year-bloc img { max-width: 10%; }
.year-bloc > img { max-width: 10%; }
}
// 8 : 2009
// 11 : 2021
.date-bloc:nth-child(8),
.date-bloc:nth-child(11) {
.date-bloc:nth-child(8) {
.year-bloc img { max-width: 25%; }
}
// 10 : 2020
.date-bloc:nth-child(10) {
.year-bloc img { max-width: 40%; }
.year-bloc > img { max-width: 40%; }
}
// 11 : 2021
.date-bloc:nth-child(11) {
.year-bloc > img { max-width: 25%; }
}
}

11
resources/sass/fo/utilities/_bootstrap-variables.scss
View file

@ -57,3 +57,14 @@ $h6-font-size: $font-size-base * $heading-multiplicator;
// Enable negative margin
$enable-negative-margins: true;
// Customize bs breakpoints
$grid-breakpoints: (
xs: 0,
mn: 450px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);

49
resources/views/fo/pages/about-us.blade.php
View file

@ -15,7 +15,7 @@
<img class="img-fluid h-lg-100" src="{{ Vite::asset('resources/assets/images/about-us/depuis-1987.png') }}"
alt="{{ __('Depuis 1987') }}" />
</div>
<div class="col-lg-8 col-xl-6 mt-lg-3">
<div class="col-lg-8 col-xl-6 mt-lg-3 z-1">
<div class="d-lg-inline-block text-center">
<h1 class="position-relative d-lg-inline-block f-sheldon ls-1 my-4">{{ __($staticPageModel->title) }}</h1>
</div>
@ -47,7 +47,7 @@
<div class="position-relative mx-4">
<p class="f-sheldon fw-bold h4 lh-base mx-3 mb-2">{{ __('Création de la société') }}</p>
<p class="f-readex-pro fw-bold lh-sm">{!! clean('grâce à l\'innovation<br>de la cuisson sous vide.') !!}</p>
<img class="d-none d-lg-block position-absolute end-100 top-100 translate-middle-y z-1"
<img class="d-none d-lg-block position-absolute end-100 top-100 w-50 translate-middle-y z-1"
src="{{ Vite::asset('resources/assets/images/about-us/pointilles-01.png') }}" alt="{{ __('Des pointillés') }}">
</div>
</div>
@ -55,7 +55,7 @@
{{-- 1988 --}}
<div class="date-bloc col-12 col-lg-6 mt-lg-0 mb-lg-0 my-5">
<div class="ratio ratio-1x1">
<div class="ratio ratio-1x1 mx-auto">
<div
class="year-bloc d-flex flex-column justify-content-center align-items-center rounded-circle bg-light mx-auto text-center">
<img class="img-fluid" src="{{ Vite::asset('resources/assets/images/about-us/plats-cuisines.png') }}"
@ -63,9 +63,12 @@
<p class="f-readex-pro fs-5 fw-bold highlight light-green w-50 mx-auto mb-2 px-3 text-white">
{{ __('1988') }}
</p>
<div class="mx-4">
<p class="f-readex-pro fw-bold text-uppercase mx-4 mb-0">{{ __('Rayon Traiteur coupe :') }}</p>
<p class="f-sheldon fw-bold h4 lh-base mx-5">{{ __('Lancement gamme plats cuisinés') }}</p>
<div class="position-relative pb-lg-4 mx-4">
<p class="f-readex-pro fw-bold text-uppercase mx-4 mb-0">{!! clean('Rayon Traiteur coupe :<br>lancement gamme') !!}</p>
<p class="f-sheldon fw-bold h4 lh-base mx-5">{{ __('plats cuisinés') }}</p>
<img class="d-none d-lg-block position-absolute start-50 start-xl-100 top-100 z-1"
src="{{ Vite::asset('resources/assets/images/about-us/pointilles-02.png') }}"
alt="{{ __('Des pointillés') }}">
</div>
</div>
</div>
@ -73,7 +76,7 @@
{{-- 1989 --}}
<div class="date-bloc col-12 col-lg-6 mt-lg-10 mb-lg-0 my-5">
<div class="ratio ratio-1x1">
<div class="ratio ratio-1x1 mx-auto">
<div
class="year-bloc d-flex flex-column justify-content-center align-items-center rounded-circle bg-light mx-auto text-center">
<img class="position-absolute start-50 translate-middle-y img-fluid top-0"
@ -88,6 +91,9 @@
{{ __('Démarrage des gammes à marque distributeurs') }}
</p>
</div>
<img class="d-none d-lg-block position-absolute top-100 w-25 z-1 end-50 translate-middle-y"
src="{{ Vite::asset('resources/assets/images/about-us/pointilles-03.png') }}"
alt="{{ __('Des pointillés') }}">
</div>
</div>
</div>
@ -108,6 +114,8 @@
</p>
</div>
</div>
<img class="d-none d-lg-block position-absolute top-100 z-1 start-50"
src="{{ Vite::asset('resources/assets/images/about-us/pointilles-04.png') }}" alt="{{ __('Des pointillés') }}">
</div>
</div>
@ -131,17 +139,20 @@
{{-- 2005 --}}
<div class="date-bloc col-12 col-lg-6 mt-lg-n5">
<div class="ratio ratio-1x1">
<div class="ratio ratio-1x1 mx-auto">
<div class="year-bloc d-flex flex-column justify-content-center align-items-center rounded-circle mx-auto text-center">
<img class="img-fluid mb-3" src="{{ Vite::asset('resources/assets/images/global/logo-ldc-traiteur.svg') }}"
alt="{{ __('Logo de l\'entité LDC Traiteur') }}" />
<p class="f-readex-pro fs-5 fw-bold highlight yellow mx-auto mb-2 px-2 text-white">
{{ __('2005') }}
</p>
<div class="mx-4">
<div class="position-relative px-lg-5 mx-4">
<p class="f-readex-pro fw-bold text-uppercase mx-4 mb-0">{{ __('Agis devient') }}</p>
<p class="f-sheldon fw-bold h4 lh-base mx-5">{!! clean('Filiale à 100%<br>du Groupe LDC') !!}
</p>
<img class="d-none d-lg-block position-absolute z-1 start-100 top-0"
src="{{ Vite::asset('resources/assets/images/about-us/pointilles-05.png') }}"
alt="{{ __('Des pointillés') }}">
</div>
</div>
</div>
@ -166,7 +177,7 @@
</div>
{{-- 2009 --}}
<div class="date-bloc col-12 my-5 pb-5">
<div class="date-bloc col-12 mb-mn-10 my-5 pb-5">
<div class="year-bloc position-relative d-flex flex-column justify-content-center align-items-center mx-auto text-center">
<div class="d-flex justify-content-center align-items-center mb-3">
<img class="img-fluid" src="{{ Vite::asset('resources/assets/images/about-us/rouleaux-printemps.png') }}"
@ -177,10 +188,13 @@
<img class="img-fluid" src="{{ Vite::asset('resources/assets/images/about-us/rouleaux-printemps.png') }}"
alt="{{ __('Dessin d\'un rouleau de printemps') }}" />
</div>
<div class="mx-4">
<p class="f-sheldon fw-bold h4 lh-base mx-4">{{ __('Nos premiers rouleaux de printemps') }}
<div class="position-relative mx-4">
<p class="f-sheldon fw-bold h4 lh-base mx-4">{!! clean('Nos premiers<br>rouleaux de printemps') !!}
<p class="f-readex-pro fw-bold text-uppercase mx-3 mb-0">{{ __('arrivent sur le marché') }}</p>
</p>
<img class="d-none d-lg-block position-absolute z-1 end-100 translate-middle-y top-50"
src="{{ Vite::asset('resources/assets/images/about-us/pointilles-06.png') }}"
alt="{{ __('Des pointillés') }}">
</div>
</div>
</div>
@ -203,12 +217,14 @@
</p>
<p class="f-readex-pro fw-bold text-uppercase lh-sm mx-5 mb-0">{{ __('Pour le rayon frais emballé') }}</p>
</div>
<img class="d-none d-lg-block position-absolute z-1 top-50 translate-middle w-50 end-0 rotate-180"
src="{{ Vite::asset('resources/assets/images/about-us/pointilles-02.png') }}" alt="{{ __('Des pointillés') }}">
</div>
</div>
{{-- 2020 --}}
<div class="date-bloc col-12 col-lg-6 my-5 pt-5">
<div class="ratio ratio-1x1">
<div class="date-bloc col-12 col-lg-6 mt-mn-10 my-5 pt-5">
<div class="ratio ratio-1x1 mx-auto">
<div
class="year-bloc d-flex flex-column justify-content-center align-items-center rounded-circle bg-light mx-auto text-center">
<img class="img-fluid mb-2" src="{{ Vite::asset('resources/assets/images/about-us/bo-bun.png') }}"
@ -216,9 +232,12 @@
<p class="f-readex-pro fs-5 fw-bold highlight deep-orange mx-auto mb-2 px-2 text-white">
{{ __('2020') }}
</p>
<div>
<div class="px-lg-5 position-relative">
<p class="f-sheldon fw-bold h4 lh-base mx-0">{{ __('Lancement des Bo Bun') }}</p>
<p class="f-readex-pro fw-bold text-uppercase lh-sm mx-0 mb-0">{!! clean('Au rayon Frais emballé<br>Nouveau savoir-faire Sushi,<br>grâce à Asia General Food') !!}</p>
<img class="d-none d-lg-block position-absolute z-1 top-50 end-100"
src="{{ Vite::asset('resources/assets/images/about-us/pointilles-01.png') }}"
alt="{{ __('Des pointillés') }}">
</div>
</div>
</div>