<HTML><BODY><PRE><head>
<meta id="_moz_text_document">
<HTML><BODY><body
<pre>body {<br> background : #FFFFCC;<br> color :
black;<br> font-family : "Arial", "Helvetica",
sans-serif;<br> font-size : 10pt;<br> margin-bottom :
1em;<br>}<br>*{box-sizing:border-box}<br><br>img{<br><br>max-width:
100%;<br>height : auto;<br>display :
block;<br>}<br><br>/*pour le saut de page, on cree
une class que l'on met en
display:none*/<br>.target{<br><br>display:
none<br><br>}<br><br><br><br><br>/*
englobe le slider
*/<br><br>.cadre_diapo{<br><br>max-width:
600px;<br>margin: 2rem auto;<br>overflow: hidden;<br>
<br> }<br><br>.interieur_diapo{<br>
<br>display: flex;<br>width: 400%;<br>transition:
transform .6s ease-in-out<br> <br>
}<br><br>.description{<br><br>position:
relative;<br><br>}<br><br>.description
span{<br><br>position: absolute;<br>left:
0;<br>top: 2%;<br>font-size: 75%;<br>display:
flex;<br>padding: .5rem;<br>justify-content:
center;<br>color: white;<br>background:
hsla(0,0%,0%,.35)<br> <br> }<br> <br>
<br>#votre_id1:target ~ .cadre_diapo
.interieur_diapo{<br><br>transform:translatex(0)<br><br>}/*image
1*/<br><br>#votre_id2:target ~ .cadre_diapo
.interieur_diapo{<br><br>transform:translatex(-25%)<br><br>}/*image
2*/<br><br>#votre_id3:target ~ .cadre_diapo
.interieur_diapo{<br><br>transform:translatex(-50%)<br><br>}/*image
3*/<br><br>#votre_id4:target ~ .cadre_diapo
.interieur_diapo{<br><br>transform:translatex(-75%)<br><br>}/*image
4*/<br><br><br><br><br><br>/*navigation
avec images miniatures*/<br>.navigation_diapo{<br>
<br>display: flex; /*permet d'aligner les photos les unes à la
suite des autres, on peut aussi utiliser le positionnement
absolu*/<br>list-style-type: none;<br>margin:
0;<br>padding: 0<br> <br>
}<br><br>.navigation_diapo li {<br> <br>
padding: .25rem;<br> <br>
}<br><br>.navigation_diapo img{<br><br>border:
3px solid white;<br>box-shadow:0 0 5px
hsla(0,0%,0%,.4);<br><br> <br> }<br> <br>
<br> @media (min-width:31.25rem){<br> <br>
.description span{<br> <br> font-size: initial<br>
<br> }<br> <br> }<br>
#fondecran {<br> /* Fixe l'image en haut à gauche de la page */
/* Préserve le ratio de l'image */<br> min-width: 70%;<br>
min-height:
70%;<br>backgroundsize:cover:<br>}<br><br></pre>
<br>
</body>
</html>