exemple

by StepBaro

HTML

<body>

  <div class="quotewrapper">
    <div class="bgquote1">
    </div>
    <div class="bgquote2">
    </div>
    <div class="bgquote3">
    </div>
    <div class="bgquote4">
    </div>
    <div class="bgquote5">
    </div>
    <div class="bgquote6">
    </div>
    <div class="bgquote7">
    </div>
    <div class="bgquote8">
    </div>
    <div class="bgquote9">
    </div>
    <div class="bgquote10">
    </div>
    <div class="bgquote11">
    </div>
  </div>

  <div class="calendar">


    <div class="daydate">
      <h3 class="day">Jeudi 24</h3>

      <h3 class="month">septembre</h3>
    </div>

    <div class="event">
      <h4 class="time">
        17:30</h4>
      <h5 class="title">L’écologie et la création artistique / Remise du Prix du roman d’écologie 2020</h5>
      <h6 class="host">host: Bibliothèque nationale de France</h6>
      <a class="link" href="https://www.bnf.fr//fr/agenda/lecologie-et-la-creation-artistique-remise-du-prix-du-roman-decologie-2020" target="_blank">link</a>
      <p class="description">Depuis 2018, le Prix du roman d’écologie récompense un roman francophone dont l’intrigue consacre une part substantielle aux questions écologiques. La BnF y participe depuis 2019.
        Alors que le besoin d’un grand récit écologique se fait sentir, ce prix littéraire repose sur le pari de la diversité des écritures romanesques, à même de traduire au mieux la complexité des enjeux et le souffle de nouveaux imaginaires.

        Des étudiants de l’École nationale du paysage et du master de création littéraire de l’université du Havre ainsi que des auteurs et des libraires composent le jury présidé cette année par l’écrivain Alexis Jenni, prix Goncourt 2011 pour L’Art français de la guerre.

        Les romans en lice pour cette troisième édition du prix sont :
        • Chimère d’Emmanuelle Pireyre
        • Doggerland d’Élisabeth Filhol
        • Le Bruit des tuiles de Thomas Giraud
        • Nous sommes l’étincelle de Vincent Villeminot
     ...

CSS

html, body {
  position: relative;
  height:auto;
}

.quotewrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


.bgquote1::after {
  content:
    "I don't aim for perfection. But I do want to try and\A come up with something interesting. -Kate Bush";
  font-family: "Palatino";
  top: 10000px;
  left: 20px;
  transform: rotate(-90deg);
  z-index: -1;
  white-space: pre-wrap;
  animation: nudge2 5900s linear infinite alternate;
  position: absolute;
}

.bgquote2:after {
  content:
    "Building art is a synthesis of life in materialised form. We should try to bring\A in under the same hat not a splintered way of thinking, but all in harmony together. -Alvar Aalto";
  position: absolute;
  font-family: "Palatino";
  top: 25rem;
  left: -3rem;
  z-index: -1;
  white-space: pre-wrap;
  animation: nudge 4500s linear infinite alternate;
  /* opacity: 0.5; */
}

.bgquote3:after {
  content:
    "I think the most important thing about music\A is the sense of escape. \A-Thom Yorke";
  position: absolute;
  font-family: "Palatino";
  top: 89rem;
  left: 70rem;
  z-index: -1;
  white-space: pre-wrap;
  animation: nudge3 4000s linear infinite alternate;
}

.bgquote4:after {
  content:
    "Music is a higher revelation than all \Awisdom and philosophy. -Ludwig van Beethoven";
  position: absolute;
  font-family: "Palatino";
  top: 1rem;
  left: 70rem;
  z-index: -1;
  white-space: pre-wrap;
  animation: nudge4 5500s linear infinite alternate;
}

.bgquote5:after {
  content:
    "Without music, life would be a mistake. -Friedrich Nietzsche";
  position: absolute;
  font-family: "Palatino";
  top: 120rem;
  left: 57rem;
  z-index: -1;
  white-space: pre-wrap;
  animation: nudge4 3900s linear infinite alternate;
}

.bgquote6:after {
  content:
    "You're only given a little spark of madness. \AYou mustn't lose it. -Robin Williams";
  position: absolute;
  font-family: "Palatino";
  top: 55rem;
  left: -3rem;
  z-index: -1;
  white-space:...