food-service page integration
This commit is contained in:
Sebastien Hattry
parent
eca0ea4047
commit
2ac023676f
14 changed files with 216 additions and 79 deletions
BIN
public/assets/images/entete_food.jpg
Normal file
BIN
public/assets/images/entete_food.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
BIN
public/assets/images/food-service-active.png
Normal file
BIN
public/assets/images/food-service-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
68
public/css/app.css
vendored
68
public/css/app.css
vendored
|
|
@ -4177,11 +4177,8 @@ img{
|
|||
}
|
||||
|
||||
#search{
|
||||
background-image:url(/assets/images/search.png?90bbe543d5d60da59e33cc8ad9986e8a);
|
||||
background-size:contain;
|
||||
background-repeat:no-repeat;
|
||||
width:25px;
|
||||
height:25px;
|
||||
width:28px;
|
||||
height:28px;
|
||||
margin-left:25px;
|
||||
}
|
||||
|
||||
|
|
@ -4405,6 +4402,11 @@ ul.infos span{
|
|||
flex-direction:column;
|
||||
}
|
||||
|
||||
.blue-products.is-flex{
|
||||
flex-direction:initial;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.smrt-align-center{
|
||||
text-align:center;
|
||||
}
|
||||
|
|
@ -4445,6 +4447,18 @@ h1:not(.maintitle):after,
|
|||
background-color:#fccf1d;
|
||||
}
|
||||
|
||||
h1.blue-line:not(.maintitle):after,
|
||||
.sectiontitle.blue-line:after,
|
||||
.page-subtitle.blue-line:after{
|
||||
background-color:#222f5c;
|
||||
}
|
||||
|
||||
h1.white-line:not(.maintitle):after,
|
||||
.sectiontitle.white-line:after,
|
||||
.page-subtitle.white-line:after{
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
h1:not(.maintitle){
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
|
|
@ -4587,6 +4601,18 @@ h3:not(.item__title, .product-card__title){
|
|||
box-shadow:0 2px 8px rgba(12, 20, 23, 0.15);
|
||||
z-index:99;
|
||||
}
|
||||
.site-header svg .cls-1{
|
||||
fill:#000;
|
||||
}
|
||||
.site-header svg .cls-2{
|
||||
fill:transparent;
|
||||
}
|
||||
.site-header.blue-bg{
|
||||
background-color:#222f5c;
|
||||
}
|
||||
.site-header.blue-bg svg .cls-1{
|
||||
fill:#fff;
|
||||
}
|
||||
.site-header .wrapper{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
|
|
@ -4637,6 +4663,14 @@ h3:not(.item__title, .product-card__title){
|
|||
justify-content:space-between;
|
||||
height:100px;
|
||||
}
|
||||
.site-header.blue-bg nav a:not(.featured-link),
|
||||
.site-header.blue-bg .traduction li a{
|
||||
color:white;
|
||||
}
|
||||
.site-header.blue-bg nav a:not(.featured-link):hover,
|
||||
.site-header.blue-bg .traduction li a:hover{
|
||||
color:#ff0400;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 799px){
|
||||
.site-header .wrapper{
|
||||
|
|
@ -4826,6 +4860,9 @@ h3:not(.item__title, .product-card__title){
|
|||
font-size:15px;
|
||||
background-color:#fccf1d;
|
||||
}
|
||||
.footer-content.blue-bg{
|
||||
background-color:#222f5c;
|
||||
}
|
||||
.footer-content ul{
|
||||
margin-bottom:25px;
|
||||
}
|
||||
|
|
@ -5928,8 +5965,12 @@ input[type=text]{
|
|||
content:"";
|
||||
background-color:#0c1417;
|
||||
}
|
||||
#values .sectiontitle.white-line:after{
|
||||
background-color:white;
|
||||
}
|
||||
#values > img{
|
||||
height:110%;
|
||||
max-width:100%;
|
||||
}
|
||||
#values ul{
|
||||
display:flex;
|
||||
|
|
@ -6045,6 +6086,11 @@ input[type=text]{
|
|||
color:#ff0400;
|
||||
}
|
||||
|
||||
.blue-bg .featured-link{
|
||||
background-image:url(/assets/images/food-service-active.png?2e2bf7035544edbac65d65338c1fbd7c);
|
||||
background-position:center top;
|
||||
}
|
||||
|
||||
.best{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
|
|
@ -6112,14 +6158,20 @@ input[type=text]{
|
|||
|
||||
.featured-link{
|
||||
bottom:-63px;
|
||||
right:-190px;
|
||||
width:145px;
|
||||
padding-top:25px;
|
||||
right:-250px;
|
||||
width:280px;
|
||||
padding-top:37px;
|
||||
padding-bottom:35px;
|
||||
line-height:1;
|
||||
color:#222f5c;
|
||||
background-image:url(/assets/images/food-service.png?0516f121d7754c28b2cb3055ce991861);
|
||||
background-repeat:no-repeat;
|
||||
background-position:center 12px;
|
||||
transition:all 0.3s ease-in-out;
|
||||
}
|
||||
.featured-link:hover{
|
||||
background-image:url(/assets/images/food-service-active.png?2e2bf7035544edbac65d65338c1fbd7c);
|
||||
background-position:center top;
|
||||
}
|
||||
|
||||
.featured-link span{
|
||||
|
|
|
|||
BIN
resources/assets/images/entete_food.jpg
Normal file
BIN
resources/assets/images/entete_food.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
BIN
resources/assets/images/food-service-active.png
Normal file
BIN
resources/assets/images/food-service-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
21
resources/sass/_custom.scss
vendored
21
resources/sass/_custom.scss
vendored
|
|
@ -76,8 +76,12 @@
|
|||
content: "";
|
||||
background-color: $color-dark;
|
||||
}
|
||||
.sectiontitle.white-line:after {
|
||||
background-color: white;
|
||||
}
|
||||
> img {
|
||||
height: 110%;
|
||||
max-width: 100%;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
|
|
@ -212,6 +216,10 @@
|
|||
.blue .featured-link {
|
||||
color: $color-second;
|
||||
}
|
||||
.blue-bg .featured-link {
|
||||
background-image: url(~@/images/food-service-active.png);
|
||||
background-position: center top;
|
||||
}
|
||||
|
||||
.best {
|
||||
display: flex;
|
||||
|
|
@ -299,14 +307,21 @@
|
|||
}
|
||||
.featured-link {
|
||||
bottom: -63px;
|
||||
right: -190px;
|
||||
width: 145px;
|
||||
padding-top: 25px;
|
||||
right: -250px;
|
||||
width: 280px;
|
||||
padding-top: 37px;
|
||||
padding-bottom: 35px;
|
||||
line-height: 1;
|
||||
color: $color-blue;
|
||||
background-image: url(~@/images/food-service.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 12px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-image: url(~@/images/food-service-active.png);
|
||||
background-position: center top;
|
||||
}
|
||||
}
|
||||
.featured-link span {
|
||||
display: block;
|
||||
|
|
|
|||
4
resources/sass/_footer.scss
vendored
4
resources/sass/_footer.scss
vendored
|
|
@ -37,6 +37,10 @@
|
|||
font-size: 15px;
|
||||
background-color: $color-main;
|
||||
|
||||
&.blue-bg {
|
||||
background-color: $color-blue;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
|
|
|||
10
resources/sass/_globals.scss
vendored
10
resources/sass/_globals.scss
vendored
|
|
@ -70,11 +70,11 @@ img {
|
|||
}
|
||||
|
||||
#search {
|
||||
background-image: url("~@/images/search.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
// background-image: url("~@/images/search.png");
|
||||
// background-size: contain;
|
||||
// background-repeat: no-repeat;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
|
|
|
|||
127
resources/sass/_header.scss
vendored
127
resources/sass/_header.scss
vendored
|
|
@ -1,77 +1,104 @@
|
|||
.site-header{
|
||||
position:fixed;
|
||||
left:0;
|
||||
right:0;
|
||||
.site-header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-family: $fontbarlow-bold;
|
||||
background-color:$color-main;
|
||||
box-shadow: 0 2px 8px rgba($color-dark, .15);
|
||||
z-index:99;
|
||||
|
||||
.wrapper{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background-color: $color-main;
|
||||
box-shadow: 0 2px 8px rgba($color-dark, 0.15);
|
||||
z-index: 99;
|
||||
|
||||
svg {
|
||||
.cls-1 {
|
||||
fill: #000;
|
||||
}
|
||||
.cls-2 {
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.logotype{
|
||||
top:0;
|
||||
left:1em;
|
||||
&.blue-bg {
|
||||
background-color: $color-blue;
|
||||
|
||||
svg {
|
||||
.cls-1 {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logotype {
|
||||
top: 0;
|
||||
left: 1em;
|
||||
width: 25%;
|
||||
z-index:1;
|
||||
img{
|
||||
width:200px;
|
||||
z-index: 1;
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
> span{
|
||||
width:25%;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
nav li{
|
||||
display:inline-block;
|
||||
> span {
|
||||
width: 25%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav a{
|
||||
color:$color-blue;
|
||||
text-decoration:none;
|
||||
&:hover{
|
||||
color:$color-second;
|
||||
nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: $color-blue;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $color-second;
|
||||
}
|
||||
}
|
||||
|
||||
.traduction{
|
||||
display:flex;
|
||||
li{
|
||||
margin-right:15px;
|
||||
a{
|
||||
color:$color-blue;
|
||||
text-transform:uppercase;
|
||||
text-decoration:none;
|
||||
.traduction {
|
||||
display: flex;
|
||||
li {
|
||||
margin-right: 15px;
|
||||
a {
|
||||
color: $color-blue;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
&.current a{
|
||||
color:$color-second;
|
||||
&.current a {
|
||||
color: $color-second;
|
||||
}
|
||||
&:last-of-type{
|
||||
margin-right:0;
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px){
|
||||
.site-header{
|
||||
.wrapper{
|
||||
@media screen and (min-width: 800px) {
|
||||
.site-header {
|
||||
.wrapper {
|
||||
justify-content: space-between;
|
||||
height:100px;
|
||||
height: 100px;
|
||||
}
|
||||
&.blue-bg {
|
||||
nav a:not(.featured-link),
|
||||
.traduction li a {
|
||||
color: white;
|
||||
&:hover {
|
||||
color: $color-second;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 799px){
|
||||
.site-header{
|
||||
.wrapper{
|
||||
@media screen and (max-width: 799px) {
|
||||
.site-header {
|
||||
.wrapper {
|
||||
justify-content: flex-end;
|
||||
height:50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
resources/sass/_texts.scss
vendored
10
resources/sass/_texts.scss
vendored
|
|
@ -33,6 +33,16 @@ h1:not(.maintitle):after,
|
|||
margin-right: auto;
|
||||
background-color: $color-main;
|
||||
}
|
||||
h1.blue-line:not(.maintitle):after,
|
||||
.sectiontitle.blue-line:after,
|
||||
.page-subtitle.blue-line:after {
|
||||
background-color: $color-blue;
|
||||
}
|
||||
h1.white-line:not(.maintitle):after,
|
||||
.sectiontitle.white-line:after,
|
||||
.page-subtitle.white-line:after {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
h1:not(.maintitle) {
|
||||
display: inline-block;
|
||||
|
|
|
|||
4
resources/sass/_utils.scss
vendored
4
resources/sass/_utils.scss
vendored
|
|
@ -89,6 +89,10 @@
|
|||
.is-flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
.blue-products.is-flex {
|
||||
flex-direction: initial;
|
||||
justify-content: center;
|
||||
}
|
||||
.smrt-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,23 +7,40 @@
|
|||
<main class="blue">
|
||||
<section class="jumbotron">
|
||||
<h1 class="maintitle ttu animate__animated fadeIn animate__slow">Food service</h1>
|
||||
<img src="{{ asset('assets/images/a-propos.jpg') }}" alt="">
|
||||
<img class="img-zoom" src="{{ asset('assets/images/entete_food.jpg') }}" alt="Cuisine de chef">
|
||||
<div class="banner">
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.76 59.99">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: transparent;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M1919.67,58c-.42.62,1,2.12-1,2-1.17-.07-2.34,0-3.5,0H0V55c3-.06,6,.08,9-.22,28.32-2.84,56.61-6,85-8.6q59.19-5.38,118.44-10c46.65-3.58,93.32-7,140-9.88,49.7-3.05,99.43-5.85,149.18-7.9,68.4-2.81,136.83-5,205.26-7.06,38.63-1.14,77.28-1.58,115.92-1.94,78.47-.74,156.93-.9,235.39.32,37.81.59,75.62,1.2,113.42,2.09q64.44,1.5,128.85,4,76.89,2.85,153.71,6.91,63.36,3.32,126.66,7.44,43.86,2.85,87.7,6,33.13,2.4,66.22,5.17,38.82,3.23,77.61,6.72c20.06,1.79,40.11,3.73,60.16,5.6Z" />
|
||||
<path class="cls-2" d="M1919.67,58l-47.21-4.36c-20-1.87-40.1-3.81-60.16-5.6q-38.79-3.47-77.61-6.72-33.09-2.74-66.22-5.17-43.83-3.18-87.7-6-63.3-4.11-126.66-7.44-76.83-4-153.71-6.91-64.41-2.4-128.85-4c-37.8-.89-75.61-1.5-113.42-2.09-78.46-1.22-156.92-1.06-235.39-.32-38.64.36-77.29.8-115.92,1.94-68.43,2-136.86,4.25-205.26,7.06-49.75,2-99.48,4.85-149.18,7.9-46.7,2.87-93.37,6.3-140,9.88q-59.27,4.54-118.44,10c-28.35,2.58-56.64,5.76-85,8.6-3,.3-6,.16-9,.22V0H1919.67Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<div class="wrapper">
|
||||
<div class="header-title align-center p-rel">
|
||||
<h1 class="align-center"><i class="mascotte"></i>Doux Food Service</h1>
|
||||
<h1 class="align-center animate__animated fadeInUp animate__slow blue-line"><i class="mascotte"></i>Doux Food Service</h1>
|
||||
</div>
|
||||
<h2 class="align-center">La marque française des professionnels</h2>
|
||||
<div class="is-flex">
|
||||
<div class="w50">
|
||||
<div class="w50 animate__animated fadeInLeft animate__slow">
|
||||
<img src="{{ asset('assets/images/prez-img.jpg') }}" alt="photo">
|
||||
</div>
|
||||
<div class="w50">
|
||||
<p>Entièrement dédiée aux professionnels ; boucheries, restaurations traditionnelles et points chauds, ID HALAL est un acteur majeur sur le marché du halal. La marque bénéficie d’une expertise et d’un savoir-faire uniques qui sont aujourd’hui reconnus sur le marché. Depuis plus de 20 ans, elle a su construire une relation de confiance et de transparence avec ses clients. </p>
|
||||
<p>Id Halal met à profit quotidiennement ses compétences et son historique dans le domaine du halal, afin de proposer une offre complète de produits savoureux et incontournables adaptés aux professionnels des métiers de bouche pour varier les plaisirs et répondre aux attentes des consommateurs </p>
|
||||
<a href="/" class="cta">En savoir plus</a>
|
||||
<p class="align-justify animate__animated fadeInRight animate__slow">Entièrement dédiée aux professionnels ; boucheries, restaurations traditionnelles et points chauds, ID HALAL est un acteur majeur sur le marché du halal. La marque bénéficie d’une expertise et d’un savoir-faire uniques qui sont aujourd’hui reconnus sur le marché. Depuis plus de 20 ans, elle a su construire une relation de confiance et de transparence avec ses clients. </p>
|
||||
<p class="align-justify animate__animated fadeInRight animate__slow">Id Halal met à profit quotidiennement ses compétences et son historique dans le domaine du halal, afin de proposer une offre complète de produits savoureux et incontournables adaptés aux professionnels des métiers de bouche pour varier les plaisirs et répondre aux attentes des consommateurs </p>
|
||||
<a href="{{ route('wasup') }}/#notre-histoire" class="cta">En savoir plus</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,8 +48,8 @@
|
|||
|
||||
<section id="values" class="container">
|
||||
<div class="values-content wrapper align-center">
|
||||
<h2 class="sectiontitle">Les avantages de Food Service</h2>
|
||||
<p>Doux lance sa marque consacrée aux professionnels de la restauration. Une sélection de produits pensée pour faciliter la vie grâce à une offre évolutive en fonction des besoins.</p>
|
||||
<h2 class="sectiontitle animate__animated fadeInUp animate__slow white-line">Les avantages de Food Service</h2>
|
||||
<p class="align-justify">Doux lance sa marque consacrée aux professionnels de la restauration. Une sélection de produits pensée pour faciliter la vie grâce à une offre évolutive en fonction des besoins.</p>
|
||||
<ul class="values-list">
|
||||
<li class="item">
|
||||
<img src="{{ asset('assets/images/savoir-faire.png') }}" alt="">
|
||||
|
|
@ -62,10 +79,10 @@
|
|||
|
||||
<section class="container">
|
||||
<div class="wrapper">
|
||||
<h2 class="sectiontitle align-center">Les produits</h2>
|
||||
<h2 class="sectiontitle align-center animate__animated fadeInUp animate__slow blue-line">Les produits</h2>
|
||||
<p class="align-center">Nous travaillons toujours pour améliorer nos recettes et proposer des produits de meilleur qualité</p>
|
||||
|
||||
<div class="is-flex wrap space-between">
|
||||
<div class="blue-products is-flex wrap space-between desk-mt50">
|
||||
<div class="product-card align-center">
|
||||
<img src="{{ asset('assets/images/panes.jpg') }}" alt="">
|
||||
<h3 class="product-card__title">Produit 1</h3>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container footer-content align-center">
|
||||
<div class="container footer-content align-center @if (Route::current()->getName() == 'food') blue-bg @endif">
|
||||
<ul>
|
||||
<li><a href="{{ route('cgu') }}">Mentions légales</a></li>
|
||||
<li><a href="{{ route('policy') }}">Charte de confidentialité</a></li>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<button id="backtotop"><i class="arrow up"></i></button>
|
||||
<header class="site-header">
|
||||
<header class="site-header @if (Route::current()->getName() == 'food') blue-bg @endif">
|
||||
<div class="wrapper p-rel">
|
||||
<div class="logotype p-abs">
|
||||
<a href="{{ route('home') }}" title="accueil"><img src="{{ asset('assets/images/logo-doux.png') }}" alt="logo" /></a>
|
||||
|
|
@ -33,7 +33,15 @@
|
|||
<li><a href="">en</a></li>
|
||||
<li><a href="">es</a></li>
|
||||
</ul>
|
||||
<button id="search"></button>
|
||||
<button id="search">
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
|
||||
<path class="cls-1" d="M13.06,0h7a17.46,17.46,0,0,1,8,8v7c-5.38,8.15-9,9.37-18.37,5.94l-6.52,7c-2.49.5-3.48-.5-3-3l7-6.52C3.7,9,4.92,5.38,13.06,0ZM16.6,3.74a7.41,7.41,0,0,0-7.54,7.41,7.49,7.49,0,0,0,7.67,7.79,7.4,7.4,0,0,0,7.52-7.43A7.31,7.31,0,0,0,16.6,3.74Z" />
|
||||
<path class="cls-2" d="M13.06,0C4.92,5.38,3.7,9,7.12,18.37l-7,6.52V0Z" />
|
||||
<path class="cls-2" d="M3.11,27.87l6.52-7C19,24.3,22.62,23.08,28,14.93V27.87Z" />
|
||||
<path class="cls-2" d="M28,8a17.46,17.46,0,0,0-8-8h8Z" />
|
||||
<path class="cls-2" d="M16.6,3.74a7.31,7.31,0,0,1,7.65,7.77,7.4,7.4,0,0,1-7.52,7.43,7.49,7.49,0,0,1-7.67-7.79A7.41,7.41,0,0,1,16.6,3.74Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
Loading…
Add table
Reference in a new issue