[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]

Recherche actes d'état civil

 

Recherche

Actes d'état civil

Recherche
Délibérations

 

Recherche

Délibérations

Recherche
Urbanisme

 

Recherche

Urbanisme

Recherche
Ouvrages

 

Recherche

Ouvrages

Recherche
presse

 

Recherche

Presse

Recherche
objets

 

Recherche

Objets

Documents
audio-vidéo

 

Recherche

audio-vidéo

Fonds
numériques

 

Recherche

Fonds numériques
Le style du tableau h2 { background: #666; color: #fff; text-align: center; margin: 0 0 5% 0; padding: 0.5em; } .ImgtBox { float: left; font-size: 1.2em; margin: 1% 0 0 1%; perspective: 800px; transition: all 0.4s ease 0s; width: 20%; } .ImgtBox:hover .imgt { transform: rotateY(180deg); } .imgt { background: transparent; cursor: pointer; height: 250px; transform-style: preserve-3d; transition: transform 0.5s ease 0s; width: 100%; } .imgt p { margin-bottom: 1.8em; } .imgt .front, .imgt .back { backface-visibility: hidden; box-sizing: border-box; color: white; display: block; font-size: 1.2em; height: 100%; padding: 0.8em 0.7em; position: absolute; text-align: center; width: 100%; } .imgt .front strong { background: #fff; border-radius: 100%; color: #222; font-size: 1.5em; line-height: 30px; padding: 0 7px 4px 6px; } .imgt .back { transform: rotateY(180deg); } .imgt .back a { padding: 0.3em 0.5em; background: #333; color: #fff; text-decoration: none; border-radius: 1px; font-size: 0.9em; transition: all 0.2s ease 0s; } .imgt .back a:hover { background: #fff; color: #333; text-shadow: 0 0 1px #333; } .ImgtBox:nth-child(1) .imgt .back { /*Fond colone 1*/ background: #129400; } .ImgtBox:nth-child(2) .imgt .back { /*Fond colone 2*/ background: #129400; } .ImgtBox:nth-child(3) .imgt .back { /*Fond colone 3*/ background: #129400; } .ImgtBox:nth-child(4) .imgt .back { /*Fond colone 4*/ background: #129400; } /* Commentaire : retournement de l'image a l'affichage de la page*/ .ImgtBox:nth-child(1) .imgt { -webkit-animation: giro 1s 1; animation: giro 1s 1; } .ImgtBox:nth-child(2) .imgt { -webkit-animation: giro 1.5s 1; animation: giro 1.5s 1; } .ImgtBox:nth-child(3) .imgt { -webkit-animation: giro 2s 1; animation: giro 2s 1; } .ImgtBox:nth-child(4) .imgt { -webkit-animation: giro 2.5s 1; animation: giro 2.5s 1; } @-webkit-keyframes giro { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } } @keyframes giro { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } /*responsive*/ } /* Commentaire : Affichage du responsive 1600 */ @media screen and (max-width: 1600px) { .ImgtBox { margin-left: 2.8%; margin-top: 3%; width: 40%; } .imgt { height: 315px; } .ImgtBox:last-child { margin-bottom: 3%; } } /* Commentaire : Affichage du responsive 767 */ @media screen and (max-width: 767px) { .ImgtBox { margin-left: 2.8%; margin-top: 3%; width: 46%; } .imgt { height: 285px; } .ImgtBox:last-child { margin-bottom: 3%; } } @media screen and (max-width: 480px) { .ImgtBox { width: 94.5%; } .imgt { height: 260px; } }
Si la feuille de style et associée à la page

Ajoutez un lien a une page interne au site


Ajoutez un lien vers un site externe. ex :avenio.fr









Ajoutez une image a la page

- Choisir votre image, cliquez sur le lien [Voir les images]






- Copier le lien depuis le champ.

Pour copier [Ctrl+C] / coller [Ctrl+V] avec le clavier et non avec le bouton droit de la souris.












- Coller lien de l'image dans la propriétés de l'image dans le champ URL.
Ex : /htm/imgdocs/monimage.jpg