Finestra Modal. Contenente:
Testi - Immagini - Video

CODICE DA INSERIRE NEL HEAD

.cf:before, .cf:after { /*pseudo-éléments !!IMPORTANT NE PAS
MODIFIER!!*/
  content:"";
  display:table;
}
.cf:after { /*pseudo-élément !!IMPORTANT NE PAS MODIFIER!!*/
  clear:both;
}
.droite {
  float:right;
}
.oModal {
  position: fixed; /*fixed pour fixer la fenêtre ou absolute
pour lui permettre de défiler à la souris*/
  z-index: 99999; /*index de surperposition élevé: important*/
  top: 0; /*positions*/
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba( 29, 41, 41,
0.9), rgba( 25, 119, 147, 0.9)); /*fond écran*/
  opacity:0; /*opacité = 0 donc invisible*/
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in; /*transition opacité temps
nature*/
  pointer-events: none;
}

.oModal:target {
  opacity:1; /*opacité = 1 donc visible*/
  pointer-events: auto;
}
.oModal:target > div {
  margin: 2% auto; /*marges extérieures*/
  transition: all 0.4s ease-in-out; /*transition tout temps
nature*/
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
.oModal > div {
  width: 80%; /*largeur fenêtre modale*/
  position: relative;
  margin: 1% auto; /*marges extérieures*/
  padding: 8px; /*marges intérieures*/
  border: 4px solid #e7e7e7; /*bordure : épaisseur nature
couleur*/
  border-radius: 8px; /*arrondis*/
  background: linear-gradient(to bottom, rgba( 177, 83, 22,
0.9), rgba( 139, 56, 16, 0.9)); /*fond fenêtre modale*/
  transition: all 0.4s ease-in-out; /*transition tout temps
nature*/
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
.oModal > div header { /*fenêtre modale partie haute*/
  border-bottom: 1px dotted #e7e7e7;  /*bordure basse
: épaisseur nature couleur*/
  color: #e7e7e7; /*couleur texte*/
}
.oModal > div header a { /*fenêtre modale lien partie haute*/
  background: url("close_grey.png") no-repeat; /*chemin icône*/
  margin:-5px 0 0 0 ; /*marges extérieures*/
}
.oModal > div header a:hover { /*fenêtre modale lien survolé
partie haute*/
  background: url("img/close_grey.png") no-repeat; /*chemin
icône*/
  margin:-5px 0 0 0 ; /*marges extérieures*/
}
.oModal > div footer {  /*fenêtre modale partie basse*/
  border-top: 1px dotted #e7e7e7; /*bordure haute : épaisseur
nature couleur*/
  color: #e7e7e7; /*couleur texte*/
}
.oModal > div section { /*fenêtre modale contenu*/
  color: #e7e7e7; /*couleur texte*/
}
.oModal a { /*fenêtre modale lien*/
  color: #FFFFFF; /*couleur texte*/
}

.oModal a:hover { /*fenêtre modale lien survolé*/
  color: #00FF00; /*couleur texte*/
}

.oModal > div h2 { /*fenêtre modale titre*/
  margin:0;  /*marges extérieures*/
}
.oModal > div section, .oModal > div > header,
.oModal > div > footer { /*fenêtre modale différentes
parties*/
  padding:5px 15px; /*marges intérieures*/
}