import typo asset, transition boutons, css flickity, champs obligatoire form, media queries section asso, sup de uncat dans wordpress, fail : css form, sou cat burger

This commit is contained in:
Chloe Listrat 2020-06-22 17:51:41 +02:00
parent 0742536fae
commit 20ff0d38cc
4 changed files with 119 additions and 15 deletions

View File

@ -1,5 +1,3 @@
var Home = document.querySelector('.hero .slide'); var Home = document.querySelector('.hero .slide');
var flkty = new Flickity( Home, { var flkty = new Flickity( Home, {
// options // options
@ -25,6 +23,13 @@ for (var i = 0; i < slide_tpsF.length; i++) {
}); });
} }
var Partenaires = document.querySelector('.container_slide .row');
var flkty = new Flickity( Partenaires, {
// options
groupCells: true,
pageDots: false
});
var msnry = new Masonry( '.tableau_engagements.row', { var msnry = new Masonry( '.tableau_engagements.row', {
columnWidth: '.engagement', columnWidth: '.engagement',
itemSelector: '.engagement', itemSelector: '.engagement',
@ -39,7 +44,6 @@ hamburgers.addEventListener("click", function() {
nav.classList.toggle("is-active"); nav.classList.toggle("is-active");
}); });
var elem = document.querySelector('.grid'); var elem = document.querySelector('.grid');
var iso = new Isotope( elem, { var iso = new Isotope( elem, {
@ -49,8 +53,6 @@ var iso = new Isotope( elem, {
var filtersElem = document.querySelector('.filter-button-group'); var filtersElem = document.querySelector('.filter-button-group');
filtersElem.addEventListener( 'click', function( event ) { filtersElem.addEventListener( 'click', function( event ) {
var filterValue = event.target.getAttribute('data-filter'); var filterValue = event.target.getAttribute('data-filter');
iso.arrange({ filter: filterValue }); iso.arrange({ filter: filterValue });
}); });

View File

@ -45,9 +45,14 @@ section{
} }
/* START KEVIN */ /* START KEVIN */
.burger{
position: fixed;
top: 0;
right: 0;
}
.nav-main{ .nav-main{
display: none; display: none;
position: absolute; position: fixed;
right: 0; right: 0;
top: 70px; top: 70px;
background: white; background: white;
@ -58,6 +63,21 @@ section{
} }
/* END KEVIN */ /* END KEVIN */
.menu-item {
font-family: Millimetre, sans-serif;
text-transform: uppercase;
padding: 15px;
}
/*.nav-main li:first-child {display: none;}
.nav-main li:first-child:hover .menu-item ul {display:block;}*/
.menu-item a:hover {
background-color: black;
color: white;
}
.titre_page, .titre { .titre_page, .titre {
position: absolute; position: absolute;
top: -100px; top: -100px;
@ -127,7 +147,7 @@ section{
content: "Picto"; content: "Picto";
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: grey; background: black;
border-radius: 50px; border-radius: 50px;
} }
@ -152,7 +172,15 @@ section{
background-color: white; background-color: white;
border: 8px solid yellow; border: 8px solid yellow;
} }
@media screen and (min-width: 200px) and (max-width: 640px) {
.image_sectionasso {
display: none;
width: 100%;
}
.content_asso {
width: 100%;
}
}
/* responsive iframe */ /* responsive iframe */
#section_MineVideo .wrapper__content { #section_MineVideo .wrapper__content {
position: relative; position: relative;
@ -247,6 +275,28 @@ section{
} }
/*fin sections page accueil*/ /*fin sections page accueil*/
/*page collecte avec formulaire*/
/*trouver comment styliser les champs du formulaire*/
/*.af-input acf-input{
background-color: pink;
}*/
.af-submit-button{
position: relative;
margin: 50px auto 10px auto;
display:flex;
border: 4px solid black;
border-radius: 0%;
text-align: center;
padding: 5px;
transform: scale(1) rotate(0deg);
transition: transform 0.3s ease;
}
.af-submit-button:hover{
transform: scale(1.1) rotate(-10deg);
transition: all 0.3s ease;
}
/*fin collecte et form*/
/*page évent*/ /*page évent*/
.titre_event { .titre_event {
@ -363,7 +413,7 @@ section{
border-radius: 0%; border-radius: 0%;
text-align: center; text-align: center;
padding: 5px; padding: 5px;
transform: scale(1); transform: scale(1) rotate(0deg);
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.__bouttons #bouton_asso { .__bouttons #bouton_asso {
@ -375,7 +425,7 @@ section{
top: -30px; top: -30px;
} }
.__bouttons div:hover, .telechargement_plaquette:hover, .bouton_asso:hover, .redirection_page:hover, .tout_voir:hover { .__bouttons div:hover, .telechargement_plaquette:hover, .bouton_asso:hover, .redirection_page:hover, .tout_voir:hover {
transform: scale(1.1); transform: scale(1.1) rotate(-10deg);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.group_link { .group_link {
@ -393,10 +443,44 @@ section{
border: none; border: none;
border-radius: 0%; border-radius: 0%;
} }
.hero .slide .flickity-button{
.flickity-button {
background: transparent;
} }
.flickity-prev-next-button {
width: 100px;
height: 100px;
}
.flickity-button-icon {
fill: white;
}
.flickity-button-icon:hover {
fill: black;
}
.flickity-prev-next-button:hover {
background: transparent;
}
.flickity-button:disabled {
display: none;
}
/*FIN BOUTON*/ /*FIN BOUTON*/
/*gestion des dots*/
.flickity-page-dots {
bottom: 0px;
}
.flickity-page-dots .dot {
width: 12px;
height: 12px;
opacity: 1;
background: transparent;
border: 2px solid white;
}
.flickity-page-dots .dot.is-selected {
background: white;
}
/*fin gestion des dots*/
footer{ footer{
background-color: rgba(240, 240, 240, 240); background-color: rgba(240, 240, 240, 240);
width: 100%; width: 100%;
@ -413,6 +497,24 @@ footer img {
._rs{ ._rs{
margin-left: 5%; margin-left: 5%;
} }
.container_slide .row {
width: 100%;
height: 200px;
margin-right: 10px;
background: #333;
}
.container_slide .row .flickity-prev-next-button{
width: 50px;
height: 50px;
}
.container_slide .row li {
width: 100%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
/* START KEVIN */ /* START KEVIN */
header{ header{
@ -441,12 +543,12 @@ footer img {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.hero .slide .flickity-page-dots{ /*.hero .slide .flickity-page-dots{
bottom: 20px; bottom: 20px;
} }
.hero .slide .flickity-page-dots li{ .hero .slide .flickity-page-dots li{
background: white; background: white;
} }*/
.hero .__head{ .hero .__head{
width: 100%; width: 100%;
text-align: center; text-align: center;

View File

@ -14,7 +14,7 @@
{% endfor %} {% endfor %}
<div class="btn tout_voir"> <div class="btn tout_voir">
<a href="{{agenda.url}}">Tout voir</a> <a href="/agenda">Tout voir</a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -36,7 +36,7 @@
<div class="partenaires row-"> <div class="partenaires row-">
<div class="_titre">{{options.titre}}</div> <div class="_titre">{{options.titre}}</div>
<div class="logo_partenaires"> <div class="logo_partenaires">
<div class="container d-flex"> <div class="container_slide d-flex">
<div class="row justify-content align-items"> <div class="row justify-content align-items">
{% for partner in options.partenaire %} {% for partner in options.partenaire %}
<ul><li><a href="{{partner.lien_site_partenaire}}"><img src="{{ Image(partner.logo).src }}" /></li></ul></a> <ul><li><a href="{{partner.lien_site_partenaire}}"><img src="{{ Image(partner.logo).src }}" /></li></ul></a>