Même hauteur et fond de couleur pour les colonnes

Exemple sur https://www.packel-emballages.fr/

/* fond colonnes accueil */

@media (min-width: 768px) {#cc-m-6974213318.j-hgrid { display: flex;}}

@media (min-width: 768px){#cc-m-6974213318 .cc-m-hgrid-column { background-color: #000; background-clip: content-box;}}

@media (max-width: 768px){#cc-m-6974213318 .cc-m-hgrid-column { background-color: #000; background-clip: content-box; margin-bottom:20px;}}

exemple sur https://www.renaudcaperan.fr/mes-services/

/* hauteur pour toute les colonnes d'une page */

.j-hgrid { display: flex; }

.cc-m-hgrid-column { background-clip: content-box;}

#cc-matrix-4286014930, #cc-matrix-4286015030 { box-shadow: 3px 3px 14px #d3d3d3, -3px -3px 4px #c3c3c3; padding: 10px; height: 100%; box-sizing: border-box; margin: 10px; }

Largeur 100%

width: 76vw;

left: 50%;

transform: translateX(-50%);

position: relative;

Exemple sur le site sofermi : https://sofermi.jimdofree.com/

Download PDF (ouverture directe et non téléchargement)

IMPOSSIBLE A FAIRE !

Afficher les sous titres des galeries en dessous

Exemple sur : https://sofermi.jimdofree.com/volets-roulants/r%C3%A9novation/

/*<![CDATA[*/

/* Titre du texte alt sous les images des galeries */

.titre-galerie {

font-weight: bold;

}

/*]]>*/

</style>

//<![CDATA[

/* Ajout du texte alt sous les images des galeries */

document.addEventListener('DOMContentLoaded', function() {

var galleryItems = document.querySelectorAll('.cc-m-gallery-stack-item');

for (var i = 0, length = galleryItems.length; i < length; i++) {

var galleryItem = galleryItems[i],

img = galleryItem.querySelector('img');

if (img.getAttribute('alt')) {

altText = document.createElement('p');

altText.classList.add('j-module', 'n', 'j-text', 'titre-galerie');

altText.textContent = img.getAttribute('alt');

galleryItem.appendChild(altText);

}

});

//]]>

</script>

Animation CSS texte ou image

/*Galerie animation--*/
#cc-m-gallery-8260327215 { animation: slideIn 1s ease-out .4s backwards; }
@keyframes slideIn { from { transform: translateY(50%); opacity: 0; } }

.zoomIn {-webkit-animation-name: zoomIn;animation-name: zoomIn;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}

@-webkit-keyframes zoomIn {0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}50% {opacity: 1;}}

@keyframes zoomIn {0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}50% {opacity: 1;}}

Faire apparaitre un fond en scrollant vers le bas

Fait sur : https://optimumgestion.jimdofree.com/

Mettre :

.jtpl-header { background-color: transparent; transition: background-color .3s; }
.jtpl-header.scrolled {background-color: #000;}

et

//<![CDATA[

window.addEventListener('scroll', function() {

if (window.scrollY > 0) {

document.querySelector('.jtpl-header').classList.add('scrolled');

} else {

document.querySelector('.jtpl-header').classList.remove('scrolled');

}

});

//]]>

</script>

Dimension et taill du header et des menus

exemple sur : https://optimumgestion.jimdofree.com/

/* dimension du header_inner */

@media (max-width: 900px) {.jtpl-header__inner {max-width: 98%;}}

@media (min-width: 900px) and (max-width: 1200px) {.jtpl-header__inner {max-width: 96%;}}

@media (min-width: 1200px) and (max-width: 1400px) {.jtpl-header__inner {max-width: 87%;}}

@media (min-width: 1400px) and (max-width: 1600px) {.jtpl-header__inner {max-width: 79%;}}

@media (min-width: 1600px) {.jtpl-header__inner {max-width: 73%;}}

/* taille et espacement des items du menu */

@media (min-width: 1200px) {.navigation-colors a, .navigation-colors a:link, .navigation-colors a:visited {letter-spacing: 1px; }}

@media (max-width: 1200px) {.navigation-colors a, .navigation-colors a:link, .navigation-colors a:visited {font-family: "Open Sans Condensed",sans-serif,"google"; font-size: 18px; letter-spacing: 1px;}}

@media (max-width: 900px) {.navigation-colors a, .navigation-colors a:link, .navigation-colors a:visited {font-family: "Open Sans Condensed",sans-serif,"google"; font-size: 15px;letter-spacing: 0px;}}

Déclenchement animation au scroll

exemple sur https://quick351.jimdofree.com/

/*animation zoom */
#cc-m-13759094334, #cc-m-13759094334 {opacity:0;}

.zoom {-webkit-animation-name: zoomIn;animation-name: zoomIn;-webkit-animation-duration: 3s;animation-duration: 3s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@-webkit-keyframes zoomIn {0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}50% {opacity: 1;}100% {opacity: 1;}}
@keyframes zoomIn {0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}50% {opacity: 1;}100% {opacity: 1;}}

for (var i = 0, length = elems.length; i < length; i++) {
var elem = elems[i];
if (window.scrollY < elem.offsetTop + elem.offsetHeight && window.scrollY + window.innerHeight > elem.offsetTop) {
elem.classList.add('zoom');
}
}
});
})();
//]]>
</script>