<div id="title" class="slide header">
    <h1>Revues numériques</h1>
</div>

<div id="slide1" class="slide">
  <div class="title">
      <h1><i>La Lettre de l'OCIM</i></h1>
      <p>Tous les deux mois, <i>la Lettre de l’OCIM</i> présente l’actualité du milieu, notamment des institutions de culture scientifique et technique, et propose des articles de fond écrits par des spécialistes sur la muséologie et la muséographie.</p>
       <a href="http://www.ocim.fr/lettre/">www.ocim.fr/lettre</a> 
  </div>
</div>

<div id="slide2" class="slide">
  <div class="title">
      <h1><i>Culture et Musées</i></h1>
    <p>La revue Culture et Musée est une revue scientifique à comité de lecture. Ses publications sont orientées vers des travaux de recherche inédits sur les publics, les institutions et les médiations de la culture. </p>
      <a href="http://www.persee.fr/web/revues/home/prescript/revue/pumus">www.persee.fr/web/revues/home/prescript/revue/pumus</a>
  </div>
</div>

<div id="slide3" class="slide">
  <div class="title">
      <h1><i>Muséologies : les cahiers d’études supérieures</i></h1>
      <p><i>Muséologies Les cahiers d’études supérieures</i>  est une revue dont les articles sont évalués par un comité scientifique reconnu. Elle a pour mandat de diffuser et promouvoir la recherche interdisciplinaire axée sur la pluralité des fonctions et des enjeux de l’environnement muséal contemporain.</p>
      <a href="http://museologies.org/">www.museologies.org</a>
  </div>
</div>

<div id="slide4" class="slide header">
    <h2>MNM Paris III</h2>
</div>

HTML

class : slide

id: slide1, slide2, silde3...

class: title

@import url(http://fonts.googleapis.com/css?family=Play);
/* USE GOOGLE FONTS */

CHANGER LA POLICE

http://www.google.com/fonts

CHANGER LA TAILLE

vh,vw,...

 padding: 25vh 10%;  /* TOP/BOTTOM + LEFT/RIGHT PADDING: 1vh = 1% of viewport (browser window size) height*/
  min-height: 100vh;  /*  the minimum height: This prevents the value of the height property from becoming smaller than min-height. */
  width: 100vw;

COULEUR AU FOND POUR LE TEXTE

.title {
  width: 50%;
  padding: 5%;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
} /*BACKGROUND OF SLIDES' CONTENT*/

RGBA = red green blue +OPACITE (0-1)

GAUCHE OU DROIT ?

.slide:nth-child(2n) .title {
  margin-left: 0;
  margin-right: auto;
}/*EVEN NUMBER CONTENT (child element): RIGHT*/

.slide:nth-child(2n+1) .title {
  margin-left: auto;
  margin-right: 0;
}/*ODD NUMBER CONTENT : LEFT*/

FIXEE OU MOBILE ?

#slide1:before {
  background-image: url("http://travelinnate.com/wp-content/uploads/2014/05/Louvre-Museum-1.jpg");
  transform: translateZ(-1px) scale(2); /*MOVING*/
  z-index:-1;
}

#slide2 {
  background-image: url("http://www.relais-saint-charles.com/usermedia/photo-634974187333937006-1.jpg");
  background-attachment: fixed;  /*BACKGROUND ON SILDE 2 FIXED*/
}

pseudo-elements :before

.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
}


html {
  height: 100%;
  overflow: hidden;
} /* WAHT FOR ? */

body { 
  margin:0;
  padding:0;
  perspective: 1px;
  transform-style: preserve-3d;  /* HAVE AN INFLUENCE IN PICTURE SIZE */
  height: 100%;
  overflow-y: scroll; /*ADD A SCROLL BAR TOP-BOTTOM*/
  overflow-x: hidden; 
  font-family: Play;
}

transform-style: flat|preserve-3d|initial|inherit

deck

By yi

deck

More from yi