Merge remote-tracking branch 'origin/ticket629' into develop
This commit is contained in:
Olivier Legat
commit
9181731f10
7 changed files with 94 additions and 42 deletions
BIN
resources/assets/images/home/tampon.png
Normal file
BIN
resources/assets/images/home/tampon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
resources/assets/images/ocb/fond-paysage.jpg
Normal file
BIN
resources/assets/images/ocb/fond-paysage.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
1
resources/sass/_variables.scss
vendored
1
resources/sass/_variables.scss
vendored
|
|
@ -54,6 +54,7 @@ $color9: #c6bcb3;
|
|||
$color10: #999595;
|
||||
$color11: #ab9d8e;
|
||||
$color12: #ffc400;
|
||||
$color13: #8d3d16;
|
||||
$orange: #ffb400;
|
||||
$primary-color: $primary;
|
||||
$secondary-color: $secondary;
|
||||
|
|
|
|||
89
resources/sass/front/pages/_home.scss
vendored
89
resources/sass/front/pages/_home.scss
vendored
|
|
@ -271,21 +271,45 @@
|
|||
& .volaillesfr {
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
height: 700px;
|
||||
background-image: url("~@/images/ocb/home-paralax-oui.jpg");
|
||||
height: 800px;
|
||||
background-image: url("~@/images/ocb/fond-paysage.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-position: top center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
|
||||
& img {
|
||||
margin-right: 20px;
|
||||
& picture {
|
||||
width: 18rem;
|
||||
height: auto;
|
||||
& img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@include max-width( $large_screen + 300px ) {
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
@include max-width( $big_screen ) {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
@include max-width( $tablet + 200px ) {
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
@include max-width( $tablet) {
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
@include max-width( $mobile ) {
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
& .container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 7%;
|
||||
|
||||
@include max-width( $tablet + 200px) {
|
||||
flex-direction: column;
|
||||
|
|
@ -296,11 +320,20 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
height: 60%;
|
||||
height: 70%;
|
||||
border-right: 3px dashed #fff;
|
||||
|
||||
@include max-width( $large_screen + 400px ) {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
@include max-width( $large_screen + 200px ) {
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
@include max-width( $tablet + 200px) {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
|
|
@ -323,22 +356,31 @@
|
|||
& .title {
|
||||
text-decoration: none;
|
||||
line-height: 1em;
|
||||
font-size: 6em;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0px 0px 15px #000;
|
||||
font-size: 9em;
|
||||
margin: 10px 0;
|
||||
font-family: "Veneer";
|
||||
color: $color13;
|
||||
|
||||
@include max-width( $mobile) {
|
||||
font-size: 3em;
|
||||
@include max-width( $large_screen + 300px) {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
@include max-width( $tablet + 200px ) {
|
||||
font-size: 7em;
|
||||
}
|
||||
|
||||
@include max-width( $tablet) {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
@include max-width( $mobile ) {
|
||||
font-size: 4em;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
& .sub_title {
|
||||
color: #fff;
|
||||
text-shadow: 0px 0px 15px #000;
|
||||
color: $color13;
|
||||
font-size: 3.2em;
|
||||
font-family: "CreamyScriptRegular";
|
||||
line-height: 90%;
|
||||
|
|
@ -380,12 +422,20 @@
|
|||
|
||||
& .right {
|
||||
width: 50%;
|
||||
height: 60%;
|
||||
height: 80%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include max-width( $large_screen + 400px ) {
|
||||
height: 65%;
|
||||
}
|
||||
|
||||
@include max-width( $large_screen ) {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
@include max-width( $tablet + 200px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -545,8 +595,9 @@
|
|||
& i,
|
||||
[data-icon="chevron-down"] {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 11px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 3em;
|
||||
color: $color5;
|
||||
}
|
||||
|
|
|
|||
26
resources/sass/front/pages/brand/index.scss
vendored
26
resources/sass/front/pages/brand/index.scss
vendored
|
|
@ -140,7 +140,7 @@
|
|||
width: 100%;
|
||||
min-height: 600px;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
order: 2;
|
||||
}
|
||||
.col1 {
|
||||
|
|
@ -159,15 +159,15 @@
|
|||
height: 40%;
|
||||
border-right: 0;
|
||||
img {
|
||||
height: 170px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include max-width($mobile) {
|
||||
top: 0;
|
||||
flex-direction: column-reverse;
|
||||
flex-direction: column;
|
||||
picture {
|
||||
display: none;
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
.txt {
|
||||
|
|
@ -175,9 +175,8 @@
|
|||
h2 {
|
||||
text-decoration: none;
|
||||
line-height: 1em;
|
||||
color: #fff;
|
||||
color: $color13;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0px 0px 15px #000;
|
||||
@include max-width($tablet) {
|
||||
text-align: center;
|
||||
font-size: 3.4em;
|
||||
|
|
@ -185,8 +184,7 @@
|
|||
}
|
||||
}
|
||||
h5 {
|
||||
color: #fff;
|
||||
text-shadow: 0px 0px 15px #000;
|
||||
color: $color13;
|
||||
font-size: 3.2em;
|
||||
font-family: 'CreamyScriptRegular';
|
||||
@include max-width($tablet) {
|
||||
|
|
@ -349,8 +347,9 @@
|
|||
}
|
||||
&:after {
|
||||
content: "";
|
||||
background: url("~@/images/ocb/home-paralax-oui.jpg");
|
||||
background-position: center;
|
||||
background-image: url("~@/images/ocb/fond-paysage.jpg");
|
||||
background-position: top center;
|
||||
background-position-y: -24px;
|
||||
border-radius: 5px;
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
|
|
@ -361,6 +360,11 @@
|
|||
z-index: 1;
|
||||
opacity: 1;
|
||||
transition: opacity 1s, transform 1s;
|
||||
|
||||
@include max-width($tablet) {
|
||||
background-position-y: 0;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
&:hover:after {
|
||||
opacity: 0.8;
|
||||
|
|
|
|||
|
|
@ -40,16 +40,15 @@
|
|||
]) !!}</h2>
|
||||
</div>
|
||||
</a>
|
||||
<div class="volaillesfr">
|
||||
<div class="volaillesfr animated delay-1s fadeInUp">
|
||||
<div class="col1">
|
||||
<picture>
|
||||
<source srcset="{{ asset(resize('assets/images/home/volaillesfr_landing.png', 'landingWebp')) }}" type="image/webp">
|
||||
<img src="{{ asset('assets/images/home/volaillesfr_landing.png') }}" alt="{{ __('volailles 100% Françaises') }}" />
|
||||
<source srcset="{{ asset('assets/images/home/tampon.png') }}" type="image/webp">
|
||||
<img src="{{ asset('assets/images/home/tampon.png') }}" alt="{{__('Volailles 100% Françaises - Le Gaulois') }}">
|
||||
</picture>
|
||||
<div class="txt">
|
||||
<h2>{!! __('Volailles:br100% Françaises', ['br' => ' <br>']) !!}</h2>
|
||||
<h5>{{ __('Découvrez nos engagements qualité') }}</h5>
|
||||
<a href="{{ route('brand.poultry') }}"><button type="button" name="button">{{ __('En Savoir +') }}</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col2">
|
||||
|
|
@ -66,9 +65,7 @@
|
|||
<h5>{{ __('Alimentation :') }}</h5>
|
||||
<ul>
|
||||
<li><i class="fa fa-chevron-right"></i>{{ __('Céréales Entières 100% Françaises') }}</li>
|
||||
<li><i class="fa fa-chevron-right"></i>{!! __('Sans OGM :span < 0.9%:endspan', [
|
||||
'span' => '<span>', 'endspan' => '</span>'
|
||||
]) !!}</li>
|
||||
<li><i class="fa fa-chevron-right"></i>{!! __('Sans traitement antibiotique') !!}</li>
|
||||
<li><span>{{ __('Contrôlé par Certipaq, organisme indépendant') }}</span></li>
|
||||
</ul>
|
||||
<a href="{{ route('ocb.index') }}">{{__('Retrouvez votre éleveur') }}</a>
|
||||
|
|
|
|||
|
|
@ -40,13 +40,12 @@
|
|||
<div class="container">
|
||||
<div class="left">
|
||||
<picture>
|
||||
<source srcset="{{ asset(resize('assets/images/home/volaillesfr_landing.png', 'landingWebp')) }}" type="image/webp">
|
||||
<img src="{{ asset('assets/images/home/volaillesfr_landing.png') }}" width="168" alt="{{__('Volailles 100% Françaises - Le Gaulois') }}">
|
||||
<source srcset="{{ asset('assets/images/home/tampon.png') }}" type="image/webp">
|
||||
<img src="{{ asset('assets/images/home/tampon.png') }}" alt="{{__('Volailles 100% Françaises - Le Gaulois') }}">
|
||||
</picture>
|
||||
<div class="aside">
|
||||
<h2 class="title">{{ __('Volailles 100% Françaises') }}</h2>
|
||||
<h2 class="title">{{ __('Volailles') }}<br>{{ __('100% Françaises') }}</h2>
|
||||
<h3 class="sub_title">{{ __('Découvrez nos engagements qualité') }}</h3>
|
||||
<a href="{{ route('brand.poultry') }}">{{ __('En Savoir +') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
|
@ -69,7 +68,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<i class="fa fa-chevron-right" aria-hidden="true"></i>
|
||||
{{ __('Sans OGM') }} <span>< 0.9%</span>
|
||||
{{ __('Sans traitement antibiotique') }}
|
||||
</li>
|
||||
<li><span>{{ __('Contrôlé par Certipaq, organisme indépendant') }}</span></li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue