|
|
@@ -10,6 +10,9 @@
|
|
|
*{
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+html{
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
/*START PARALAX*/
|
|
|
.paralax{
|
|
|
z-index: -1;
|
|
|
@@ -21,43 +24,39 @@
|
|
|
left: -20%;
|
|
|
}
|
|
|
.section_accueil .paralax{
|
|
|
- left: 980px;
|
|
|
- top: 1000px;
|
|
|
+ /* left: 50%; */
|
|
|
+}
|
|
|
+
|
|
|
+#section_projets .paralax{
|
|
|
+ left: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+#section_asso .paralax{
|
|
|
+ left: 30%;
|
|
|
}
|
|
|
+
|
|
|
.agenda .paralax{
|
|
|
z-index: -1;
|
|
|
width: 100%;
|
|
|
- top: 340px;
|
|
|
- left: 315px;
|
|
|
}
|
|
|
.les-projets .paralax{
|
|
|
z-index: -1;
|
|
|
- top: 420px;
|
|
|
- left: 940px;
|
|
|
}
|
|
|
.la-collecte .paralax{
|
|
|
z-index: -1;
|
|
|
width: 80%;
|
|
|
- top: -230px;
|
|
|
- left: 580px;
|
|
|
}
|
|
|
.la-benevole-zone .paralax{
|
|
|
z-index: -1;
|
|
|
width: 80%;
|
|
|
- top: -685px;
|
|
|
- left: 580px;
|
|
|
}
|
|
|
.privatiser-lespace .paralax{
|
|
|
z-index: -1;
|
|
|
width: 80%;
|
|
|
- top: -1018px;
|
|
|
- left: 580px;
|
|
|
}
|
|
|
.privacy-policy .paralax{
|
|
|
z-index: -1;
|
|
|
width: 70%;
|
|
|
- top: 255px;
|
|
|
- left: 515px;
|
|
|
}
|
|
|
/*END PARALAX*/
|
|
|
body {
|
|
|
@@ -187,7 +186,6 @@ header > .nav-wrapper{
|
|
|
|
|
|
/* START BURGER */
|
|
|
.burger{
|
|
|
- /* padding-top: 10px; */
|
|
|
height: fit-content;
|
|
|
pointer-events: auto;
|
|
|
}
|
|
|
@@ -196,25 +194,30 @@ header > .nav-wrapper{
|
|
|
background-position: center; /* Center the image */
|
|
|
background-repeat: no-repeat; /* Do not repeat the image */
|
|
|
background-size: contain;
|
|
|
- transform: rotate(0deg);
|
|
|
}
|
|
|
- .fond_burger:hover{
|
|
|
- transform: rotate(10deg);
|
|
|
- }
|
|
|
- .nav-main{
|
|
|
+ #nav-main{
|
|
|
display: none;
|
|
|
position: fixed;
|
|
|
+ top: 0;
|
|
|
right: 0;
|
|
|
- top: 120px;
|
|
|
- width: 280px;
|
|
|
- height: 300px;
|
|
|
+ width: calc(100% / 4);
|
|
|
+ height: 100vh;
|
|
|
background: white;
|
|
|
- border: 4px solid black;
|
|
|
- transition: all 0.2s ease;
|
|
|
+ z-index: -1;
|
|
|
}
|
|
|
- .nav-main.is-active{
|
|
|
- display: block;
|
|
|
+ #nav-main.is-active{
|
|
|
+ display: flex;
|
|
|
pointer-events: auto;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .nav-main > ul{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .nav-main > ul > li{
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
#fl_menu{
|
|
|
position:absolute;
|
|
|
@@ -227,39 +230,45 @@ header > .nav-wrapper{
|
|
|
.menu-item {
|
|
|
font-family: Millimetre, sans-serif;
|
|
|
text-transform: uppercase;
|
|
|
- text-align: left;
|
|
|
+ text-align: center;
|
|
|
pointer-events: auto;
|
|
|
- border-bottom: 4px solid black;
|
|
|
}
|
|
|
+
|
|
|
.menu-item a {
|
|
|
- background-color: pink;
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
+ padding: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ #nav-main > ul > li > ul{
|
|
|
+ display: none;
|
|
|
+ text-transform: lowercase;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ #nav-main > ul > li > a:hover > ul {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ #nav-main > ul > .menu-item{
|
|
|
+ /* border: 4px solid black; */
|
|
|
}
|
|
|
|
|
|
- #nav-main > ul > li > ul {display: none;text-transform: lowercase; border-bottom: none;}
|
|
|
#nav-main > ul > li:first-child > a::after{
|
|
|
content: "";
|
|
|
background-image: url('../images/fleche_menu.svg');
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center;
|
|
|
-
|
|
|
display: inline-block;
|
|
|
width: 20px;
|
|
|
height: 15px;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
- #nav-main > ul > li:first-child:hover > ul {display: block; background-color: #BDBDBD;transition: all 0.2s ease;}
|
|
|
- #nav-main > ul > li:first-child:hover{background-color: #424242; color:white;border-bottom: none;}
|
|
|
|
|
|
-.menu-item a:hover {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: black;
|
|
|
- color: white;
|
|
|
- transition: all 0.2s ease;
|
|
|
+ #nav-main > ul > li:first-child:hover > ul {
|
|
|
+ display: block;
|
|
|
}
|
|
|
+
|
|
|
/* END BURGER */
|
|
|
/* END HEADER */
|
|
|
|
|
|
@@ -282,13 +291,25 @@ body > .content-wrapper{
|
|
|
display: block;
|
|
|
cursor: default!important;
|
|
|
margin: auto;
|
|
|
- transform: scale(1) rotate(0deg);
|
|
|
- transition: transform 0.3s ease;
|
|
|
}
|
|
|
+
|
|
|
#bouton_contact {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
-.btn:hover, #bouton_asso:hover, #bouton_contact:hover{
|
|
|
+
|
|
|
+.btn a,
|
|
|
+#bouton_asso a,
|
|
|
+#bouton_contact a{
|
|
|
+ display: block;
|
|
|
+ width: max-content;
|
|
|
+ margin: auto;
|
|
|
+ transform: scale(1) rotate(0deg);
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.btn a:hover,
|
|
|
+#bouton_asso a:hover,
|
|
|
+#bouton_contact a:hover{
|
|
|
transform: scale(1.05) rotate(-5deg);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
@@ -337,15 +358,8 @@ footer .flickity-prev-next-button{
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
}
|
|
|
-footer .flickity-button-icon {
|
|
|
- fill: grey;
|
|
|
- left: 158%!important;
|
|
|
-}
|
|
|
-
|
|
|
/* END BUTTON */
|
|
|
|
|
|
-
|
|
|
-
|
|
|
/* START PAGE HOME */
|
|
|
.section_accueil {
|
|
|
position: relative;
|
|
|
@@ -378,8 +392,11 @@ footer .flickity-button-icon {
|
|
|
z-index: 9999;
|
|
|
width: 200px;
|
|
|
height: auto;
|
|
|
+ cursor: grab;
|
|
|
+ }
|
|
|
+ .ui-draggable-dragging{
|
|
|
+ cursor: grabbing;
|
|
|
}
|
|
|
-
|
|
|
#drag_1 {
|
|
|
position:absolute;
|
|
|
top:175px;
|
|
|
@@ -425,6 +442,11 @@ footer .flickity-button-icon {
|
|
|
top:515px;
|
|
|
left: 40px;
|
|
|
}
|
|
|
+ @media screen and (max-width: 576px) {
|
|
|
+ .group_drag{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
/*fin ajout chloe drag*/
|
|
|
|
|
|
@@ -1190,17 +1212,23 @@ footer > section{
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
footer .logo_lamine {
|
|
|
- max-width: 150px;
|
|
|
+ /* max-width: 150px; */
|
|
|
height: auto;
|
|
|
- margin: 10px;
|
|
|
+ max-height: 150px;
|
|
|
+ /* margin: 10px; */
|
|
|
}
|
|
|
|
|
|
footer .logo_lamine a{
|
|
|
display: block;
|
|
|
+ height: 100%;
|
|
|
+ width: auto;
|
|
|
}
|
|
|
footer .logo_lamine img{
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
+footer > .information > div > div {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
|
|
|
footer .reseaux_sociaux > div a > img{
|
|
|
display: block;
|
|
|
@@ -1266,3 +1294,18 @@ footer .reseaux_sociaux img {
|
|
|
}
|
|
|
/* END SLIDE */
|
|
|
/* END FOOTER */
|
|
|
+@media screen and (max-width: 576px) {
|
|
|
+ footer p,
|
|
|
+ footer a{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ footer a.d-flex{
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ #Btn_asso a{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .send_actu input{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
