[an error occurred while processing this directive]
[an error occurred while processing this directive]
Recherche actes d'état civil
Recherche
Recherche
Recherche
Recherche
Recherche
Documents
Fonds
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]
[Ctrl+C] / coller [Ctrl+V] avec le clavier et non avec le bouton droit de la souris./htm/imgdocs/monimage.jpg
