tentative grid pour background image
@@ -847,6 +847,42 @@ ul.pagination {
|
||||
text-align: left;
|
||||
padding-bottom: 3rem; }
|
||||
|
||||
#background {
|
||||
background-color: #d5d2d1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(8, 5vw);
|
||||
grid-gap: 15px; }
|
||||
|
||||
#background img {
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
object-fit: cover; }
|
||||
|
||||
.item-1 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 5; }
|
||||
|
||||
.item-2 {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 5;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 5; }
|
||||
|
||||
.item-3 {
|
||||
grid-column-start: 5;
|
||||
grid-column-end: 1;
|
||||
grid-row-start: 9;
|
||||
grid-row-end: 6; }
|
||||
|
||||
.item-4 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 3; }
|
||||
|
||||
.programmes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -858,7 +894,7 @@ ul.pagination {
|
||||
padding-bottom: 8rem; }
|
||||
|
||||
.programme {
|
||||
max-width: 45%;
|
||||
max-width: 35%;
|
||||
padding: 1.5rem;
|
||||
background-color: white;
|
||||
margin: 0.4rem; }
|
||||
@@ -944,6 +980,9 @@ ul.pagination {
|
||||
.portrait {
|
||||
background: transparent !important; }
|
||||
|
||||
.portrait img {
|
||||
max-width: 15rem !important; }
|
||||
|
||||
img.portrait {
|
||||
width: 20%; }
|
||||
|
||||
@@ -1044,9 +1083,8 @@ img.portrait {
|
||||
padding-right: 50%; }
|
||||
|
||||
.modular .features {
|
||||
padding: 2rem 8rem;
|
||||
text-align: center;
|
||||
align-content: center; }
|
||||
width: 75%;
|
||||
margin: auto; }
|
||||
.modular .features:after {
|
||||
content: "";
|
||||
display: table;
|
||||
|
||||
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 27 MiB |
|
Before Width: | Height: | Size: 313 KiB After Width: | Height: | Size: 313 KiB |
@@ -86,9 +86,52 @@
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
// fond images en grille pour parallax
|
||||
|
||||
#background {
|
||||
background-color: #d5d2d1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: repeat(8, 5vw);
|
||||
grid-gap: 15px;
|
||||
}
|
||||
|
||||
#background img {
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 5;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 5;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 5;
|
||||
}
|
||||
|
||||
.item-3 {
|
||||
grid-column-start: 5 ;
|
||||
grid-column-end: 1;
|
||||
grid-row-start: 9;
|
||||
grid-row-end: 6;
|
||||
}
|
||||
|
||||
.item-4 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
|
||||
.programmes {
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #d5d2d1;
|
||||
@@ -101,7 +144,8 @@
|
||||
}
|
||||
|
||||
.programme {
|
||||
max-width: 45%;
|
||||
max-width: 35%;
|
||||
// min-width:
|
||||
padding: 1.5rem;
|
||||
background-color: white;
|
||||
margin: 0.4rem;
|
||||
@@ -116,6 +160,7 @@
|
||||
.programme img {
|
||||
max-height: 15%;
|
||||
}
|
||||
|
||||
.programme p {
|
||||
font-family: $font-family-default;
|
||||
font-weight: 500;
|
||||
@@ -127,6 +172,10 @@
|
||||
transition:0.2s ease-in-out;
|
||||
}
|
||||
|
||||
// .parallax {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
//
|
||||
// /* .titre_nsb {
|
||||
// display: block;
|
||||
@@ -298,10 +347,14 @@
|
||||
.portrait {
|
||||
// max-width:50% !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.portrait img {
|
||||
max-width: 15rem !important;
|
||||
}
|
||||
|
||||
img.portrait {
|
||||
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,9 +8,10 @@
|
||||
|
||||
.features {
|
||||
|
||||
padding: 2rem 8rem;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
width: 75%;
|
||||
margin: auto;
|
||||
|
||||
|
||||
@include clearfix;
|
||||
|
||||
h2 {
|
||||
|
||||
@@ -1,8 +1,30 @@
|
||||
<!-- <div class="background">
|
||||
<img src="{/pages/02._programmes/10361_web_01.jpg}">
|
||||
</div>
|
||||
-->
|
||||
<div id="background">
|
||||
|
||||
<figure class="item-1">
|
||||
<img src="/user/themes/epau-antimatter/images/14360_default_big.jpg" class="background__img" alt="Image 1">
|
||||
</figure>
|
||||
<figure class="item-2">
|
||||
<img src="/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG" class="background__img" alt="Image 2">
|
||||
</figure>
|
||||
<figure class="item-3">
|
||||
<img src="/user/themes/epau-antimatter/images/10361_web_01.jpg" class="background__img" alt="Image 3">
|
||||
</figure>
|
||||
<figure class="item-4">
|
||||
<img src="/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg" class="background__img" alt="Image 4">
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="programmes{{ page.header.class}}">
|
||||
<!-- <div class="parallax-window" data-parallax="scroll" data-image-src="{/pages/02._programmes/10361_web_01.jpg}"></div> -->
|
||||
{{ content|raw }}
|
||||
|
||||
|
||||
|
||||
{#
|
||||
<div class="paralax-bg">
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<div class="features {{ page.header.class}}">
|
||||
|
||||
|
||||
<div class="feature-items">
|
||||
{% for rapport in page.header.rapports %}
|
||||
|
||||
<div class="feature">
|
||||
@@ -25,5 +25,6 @@
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||