diff --git a/public/assets/images/entete_food.jpg b/public/assets/images/entete_food.jpg new file mode 100644 index 0000000..650629e Binary files /dev/null and b/public/assets/images/entete_food.jpg differ diff --git a/public/assets/images/food-service-active.png b/public/assets/images/food-service-active.png new file mode 100644 index 0000000..cea9aff Binary files /dev/null and b/public/assets/images/food-service-active.png differ diff --git a/public/css/app.css b/public/css/app.css index f10c3ed..befdb69 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -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{ diff --git a/resources/assets/images/entete_food.jpg b/resources/assets/images/entete_food.jpg new file mode 100644 index 0000000..650629e Binary files /dev/null and b/resources/assets/images/entete_food.jpg differ diff --git a/resources/assets/images/food-service-active.png b/resources/assets/images/food-service-active.png new file mode 100644 index 0000000..cea9aff Binary files /dev/null and b/resources/assets/images/food-service-active.png differ diff --git a/resources/sass/_custom.scss b/resources/sass/_custom.scss index dd8d0c0..8871920 100644 --- a/resources/sass/_custom.scss +++ b/resources/sass/_custom.scss @@ -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; diff --git a/resources/sass/_footer.scss b/resources/sass/_footer.scss index edeab83..6ca2d53 100644 --- a/resources/sass/_footer.scss +++ b/resources/sass/_footer.scss @@ -37,6 +37,10 @@ font-size: 15px; background-color: $color-main; + &.blue-bg { + background-color: $color-blue; + } + ul { margin-bottom: 25px; } diff --git a/resources/sass/_globals.scss b/resources/sass/_globals.scss index 570fcab..82ef743 100644 --- a/resources/sass/_globals.scss +++ b/resources/sass/_globals.scss @@ -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; } diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss index eca0fd1..7165608 100644 --- a/resources/sass/_header.scss +++ b/resources/sass/_header.scss @@ -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; } } -} \ No newline at end of file +} diff --git a/resources/sass/_texts.scss b/resources/sass/_texts.scss index 346ac9a..03ae9dd 100644 --- a/resources/sass/_texts.scss +++ b/resources/sass/_texts.scss @@ -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; diff --git a/resources/sass/_utils.scss b/resources/sass/_utils.scss index 816461d..defd68d 100644 --- a/resources/sass/_utils.scss +++ b/resources/sass/_utils.scss @@ -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; } diff --git a/resources/views/food-service.blade.php b/resources/views/food-service.blade.php index 1f4edd4..a92f717 100644 --- a/resources/views/food-service.blade.php +++ b/resources/views/food-service.blade.php @@ -7,23 +7,40 @@

Food service

- + Cuisine de chef +
-

Doux Food Service

+

Doux Food Service

La marque française des professionnels

-
+
photo
-

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.

-

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

- En savoir plus +

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.

+

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

+ En savoir plus
@@ -31,8 +48,8 @@
-

Les avantages de Food Service

-

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.

+

Les avantages de Food Service

+

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.

  • @@ -62,10 +79,10 @@
    -

    Les produits

    +

    Les produits

    Nous travaillons toujours pour améliorer nos recettes et proposer des produits de meilleur qualité

    -
    +

    Produit 1

    diff --git a/resources/views/layouts/app-footer.blade.php b/resources/views/layouts/app-footer.blade.php index b14e353..1f28cc5 100644 --- a/resources/views/layouts/app-footer.blade.php +++ b/resources/views/layouts/app-footer.blade.php @@ -57,7 +57,7 @@
    -
    +
    • Mentions légales
    • Charte de confidentialité
      • diff --git a/resources/views/layouts/app-header.blade.php b/resources/views/layouts/app-header.blade.php index 50ad905..25130c3 100644 --- a/resources/views/layouts/app-header.blade.php +++ b/resources/views/layouts/app-header.blade.php @@ -1,5 +1,5 @@ -
      +
      logo @@ -33,7 +33,15 @@
    • en
    • es
    - +
    \ No newline at end of file