carrousel
This commit is contained in:
@@ -205,9 +205,12 @@ body#top.modular.fullwidth.title-center.title-h1h2 {
|
||||
// padding-bottom: 3rem;
|
||||
}
|
||||
p {
|
||||
text-transform: uppercase;
|
||||
// text-transform: uppercase;
|
||||
padding-right: 15%;
|
||||
}
|
||||
.chapeau{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@media (max-width: 442px) {
|
||||
margin-left: 30%;
|
||||
h1 {
|
||||
@@ -242,25 +245,45 @@ body#top.modular.fullwidth.title-center.title-h1h2 {
|
||||
}
|
||||
|
||||
|
||||
.programmes {
|
||||
// position: relative;
|
||||
// min-height:cover;
|
||||
//
|
||||
// // background-size: contain;
|
||||
// top: -440px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// //présentation en mosaique//
|
||||
// .programmes {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// justify-content: center;
|
||||
// padding-left: 15%;
|
||||
// padding-right: 15%;
|
||||
// padding-top: 8rem;
|
||||
// padding-bottom: 8rem;
|
||||
// }
|
||||
|
||||
|
||||
///présentation en carroussel////
|
||||
.programmes{
|
||||
justify-content: center;
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
padding-top: 8rem;
|
||||
// padding-bottom: 40rem;
|
||||
padding-bottom: 8rem;
|
||||
|
||||
.slick-slider{
|
||||
|
||||
}
|
||||
.slick-list{
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
padding: 0px 150px !important;
|
||||
.slick-slide{
|
||||
width: min-content;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.programme {
|
||||
// position: relative;
|
||||
// top: 440px;
|
||||
z-index: 1;
|
||||
max-width: 35%;
|
||||
min-width: 26rem;
|
||||
@@ -286,23 +309,72 @@ body#top.modular.fullwidth.title-center.title-h1h2 {
|
||||
}
|
||||
|
||||
|
||||
.programme:hover {
|
||||
background-color: #000;
|
||||
transition:0.2s ease-in-out;
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
h4 {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
// .programme:hover {
|
||||
// background-color: #000;
|
||||
// transition:0.2s ease-in-out;
|
||||
// p {
|
||||
// color: #fff;
|
||||
// }
|
||||
// h4 {
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// #ressources {
|
||||
// position: relative;
|
||||
// top: -440px;
|
||||
// }
|
||||
/*CSS pour afficher/masquer un texte via un bouton*/
|
||||
|
||||
/*Style du module TEXTE*/
|
||||
.texte-cache-raisondetre {
|
||||
|
||||
position: relative;
|
||||
max-height: 200px; /*Hauteur du texte visible avant le clic*/
|
||||
overflow: hidden; /*On cache tout ce qui dépasse des 400px*/
|
||||
transition: max-height 1s ease; /* Transition CSS entre l'ouverture et la fermeture*/
|
||||
@media (max-width: 1024px) {
|
||||
max-height: 200px;
|
||||
}
|
||||
@media (max-width:442px) {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*Style du module TEXTE lorsqu'il est ouvert*/
|
||||
.texte-cache-raisondetre.ouvert {
|
||||
max-height: 300vh; /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/
|
||||
}
|
||||
|
||||
|
||||
/*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
|
||||
.texte-cache-raisondetre:not(.ouvert)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 400px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
// background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/
|
||||
|
||||
}
|
||||
|
||||
.bouton-raisondetre{
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: solid;
|
||||
border-radius: 0px !important;
|
||||
background-color: transparent;
|
||||
text-transform: uppercase;
|
||||
left: 45%;
|
||||
// margin-top: 3rem;
|
||||
margin-bottom: 2rem !important;
|
||||
@media (max-width: 442px) {left: 0%;}
|
||||
|
||||
}
|
||||
/*CSS pour afficher/masquer un texte via un bouton*/
|
||||
|
||||
/*Style du module TEXTE*/
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Default Variables
|
||||
|
||||
// Slick icon entity codes outputs the following
|
||||
// "\2190" outputs ascii character "←"
|
||||
// "\2192" outputs ascii character "→"
|
||||
// "\2022" outputs ascii character "•"
|
||||
|
||||
$slick-font-path: "./fonts/" !default;
|
||||
$slick-font-family: "slick" !default;
|
||||
$slick-loader-path: "./" !default;
|
||||
$slick-arrow-color: white !default;
|
||||
$slick-dot-color: black !default;
|
||||
$slick-dot-color-active: $slick-dot-color !default;
|
||||
$slick-prev-character: "\2190" !default;
|
||||
$slick-next-character: "\2192" !default;
|
||||
$slick-dot-character: "\2022" !default;
|
||||
$slick-dot-size: 6px !default;
|
||||
$slick-opacity-default: 0.75 !default;
|
||||
$slick-opacity-on-hover: 1 !default;
|
||||
$slick-opacity-not-active: 0.25 !default;
|
||||
|
||||
@function slick-image-url($url) {
|
||||
@if function-exists(image-url) {
|
||||
@return image-url($url);
|
||||
}
|
||||
@else {
|
||||
@return url($slick-loader-path + $url);
|
||||
}
|
||||
}
|
||||
|
||||
@function slick-font-url($url) {
|
||||
@if function-exists(font-url) {
|
||||
@return font-url($url);
|
||||
}
|
||||
@else {
|
||||
@return url($slick-font-path + $url);
|
||||
}
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
|
||||
.slick-list {
|
||||
.slick-loading & {
|
||||
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
@if $slick-font-family == "slick" {
|
||||
@font-face {
|
||||
font-family: "slick";
|
||||
src: slick-font-url("slick.eot");
|
||||
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* Arrows */
|
||||
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
&:before {
|
||||
opacity: $slick-opacity-on-hover;
|
||||
}
|
||||
}
|
||||
&.slick-disabled:before {
|
||||
opacity: $slick-opacity-not-active;
|
||||
}
|
||||
&:before {
|
||||
font-family: $slick-font-family;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
color: $slick-arrow-color;
|
||||
opacity: $slick-opacity-default;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: 5%;
|
||||
[dir="rtl"] & {
|
||||
left: auto;
|
||||
right: 5%;
|
||||
}
|
||||
&:before {
|
||||
content: url("../../images/fleche_blanche.svg");
|
||||
[dir="rtl"] & {
|
||||
content: url("../../images/fleche_blanche.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
[dir="rtl"] & {
|
||||
left: -25px;
|
||||
right: auto;
|
||||
}
|
||||
&:before {
|
||||
content: url("../../images/fleche_blanche.svg");
|
||||
[dir="rtl"] & {
|
||||
content: url("../../images/fleche_blanche.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
|
||||
.slick-dotted.slick-slider {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
outline: none;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
&:before {
|
||||
opacity: $slick-opacity-on-hover;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: $slick-dot-character;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-family: $slick-font-family;
|
||||
font-size: $slick-dot-size;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: $slick-dot-color;
|
||||
opacity: $slick-opacity-not-active;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
&.slick-active button:before {
|
||||
color: $slick-dot-color-active;
|
||||
opacity: $slick-opacity-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
/* Slider */
|
||||
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.slick-list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
}
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
&.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: none;
|
||||
|
||||
&.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slick-initialized & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-vertical & {
|
||||
display: block;
|
||||
height: auto;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user