category page integration
This commit is contained in:
Sebastien Hattry
parent
2e27c21020
commit
f72bb50f18
3 changed files with 67 additions and 8 deletions
16
public/css/app.css
vendored
16
public/css/app.css
vendored
|
|
@ -5088,6 +5088,7 @@ input[type=text]{
|
|||
height:100%;
|
||||
-o-object-fit:cover;
|
||||
object-fit:cover;
|
||||
max-width:none;
|
||||
}
|
||||
.product-card a,
|
||||
.gamme-card a{
|
||||
|
|
@ -5154,13 +5155,18 @@ input[type=text]{
|
|||
bottom:50px;
|
||||
}
|
||||
|
||||
#list .wrapper > div:first-child{
|
||||
padding-top:0;
|
||||
}
|
||||
#list .title{
|
||||
color:#fff;
|
||||
font-size:calc(18px * 3.25);
|
||||
}
|
||||
#list .is-flex{
|
||||
justify-content:space-between;
|
||||
-moz-column-gap:20px;
|
||||
column-gap:20px;
|
||||
flex-wrap:wrap;
|
||||
flex-direction:initial;
|
||||
}
|
||||
#list .section-header{
|
||||
margin-bottom:50px;
|
||||
|
|
@ -5306,6 +5312,14 @@ input[type=text]{
|
|||
object-fit:cover;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px){
|
||||
#list .section-header{
|
||||
margin-bottom:80px;
|
||||
}
|
||||
#list .is-flex{
|
||||
justify-content:center;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px){
|
||||
.posts-list{
|
||||
width:100%;
|
||||
|
|
|
|||
21
resources/sass/_list.scss
vendored
21
resources/sass/_list.scss
vendored
|
|
@ -10,6 +10,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
max-width: none;
|
||||
}
|
||||
a {
|
||||
top: 0;
|
||||
|
|
@ -79,13 +80,17 @@
|
|||
}
|
||||
|
||||
#list {
|
||||
.wrapper > div:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.title {
|
||||
color: $color-light;
|
||||
font-size: calc(#{$globalfont} * 3.25);
|
||||
}
|
||||
.is-flex {
|
||||
justify-content: space-between;
|
||||
column-gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: initial;
|
||||
}
|
||||
.section-header {
|
||||
margin-bottom: 50px;
|
||||
|
|
@ -293,6 +298,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#list {
|
||||
.section-header {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.is-flex {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.posts-list {
|
||||
width: 100%;
|
||||
|
|
@ -305,6 +321,9 @@
|
|||
|
||||
@media (max-width: 768px) {
|
||||
#list {
|
||||
// .wrapper > div:not(:last-child) {
|
||||
// margin-bottom: 2rem;
|
||||
// }
|
||||
.section-header {
|
||||
.content {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -6,10 +6,27 @@
|
|||
|
||||
<main>
|
||||
<section class="jumbotron">
|
||||
<p class="maintitle ttu">Elaboré cuits
|
||||
<p class="maintitle ttu animate__animated fadeIn animate__slow">Elaboré cuits
|
||||
<!-- <span class="title-icon"><img src="{{ asset('assets/images/') }}title-icon.png" alt="icone"></span> -->
|
||||
</p>
|
||||
<img src="{{ asset('assets/images/cuit.jpg') }}" alt="">
|
||||
<img class="img-zoom" src="{{ asset('assets/images/entete_sous_gammes.jpg') }}" alt="">
|
||||
<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">
|
||||
|
|
@ -20,16 +37,16 @@
|
|||
</div>
|
||||
<!-- <h1 class="align-center">Qui sommes-nous ?</h1> -->
|
||||
|
||||
<h1 class="align-center"><i class="mascotte"></i>Nos produits de la gammes</h1>
|
||||
<h1 class="align-center animate__animated fadeInUp animate__slow"><i class="mascotte"></i>Nos produits de la gammes</h1>
|
||||
</div>
|
||||
<!-- <h2 class="align-center sectiontitle">Nos produits de la gammes</h2> -->
|
||||
<p class="align-center">Des produits incontournables, Authentiques et Innovants !</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="list" class="container">
|
||||
<section id="list">
|
||||
<div class="wrapper align-center">
|
||||
<div class="is-green">
|
||||
<div class="is-green container">
|
||||
<header class="section-header p-rel">
|
||||
<div class="content p-abs">
|
||||
<h3 class="title ttu">Gamme family</h3>
|
||||
|
|
@ -56,9 +73,18 @@
|
|||
<span>Découvrir</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-card align-center">
|
||||
<!-- <span class="label fresh"></span> -->
|
||||
<img src="{{ asset('assets/images/produit-samplebis.jpg') }}" alt="">
|
||||
<h3 class="product-card__title">Bouchées de Volaille</h3>
|
||||
<a href="{{ route('product') }}"></a>
|
||||
<span class="overlay">
|
||||
<span>Découvrir</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-pink">
|
||||
<div class="is-pink container">
|
||||
<header class="section-header p-rel">
|
||||
<div class="content p-abs">
|
||||
<h3 class="title ttu">Gamme Little Treats</h3>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue