Site_tohubohu/assets/css/timeline.css

/* La timeline verticale */
.timeline {
  font-family: montserrat400;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  justify-content: space-evenly;
}

/* La timeline verticale (la règle) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #B56308;
  top: 25px;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
/*  background-image: linear-gradient(to bottom, #ccd1d1 0%, #ccd1d1 50%, #B56308 50%, #B56308 100%); */
  background-image: linear-gradient(to bottom, #ccd1d1 0%, #ccd1d1 25%, #B56308 25%, #B56308 100%);


}
/* Le cercle du 1er point */
.timeline > .boxt:nth-child(1)::after {
  background: #ccd1d1;
}
/* 1ere fleche de gauche */
.left:nth-child(1)::before {
  border-color: transparent transparent transparent #ccd1d1;
}
/* Le cercle du 2ème point */
.timeline > .boxt:nth-child(2)::after {
  background:  #ccd1d1;
}
/* 1ere fleche de droite
.right:nth-child(2)::before {
  border-color: transparent #ccd1d1 transparent transparent;
}
*/
/* Le cercle plus grand autour du 3ème point */
.timeline > .boxt:nth-child(2)::after {
  position: absolute;
  background: #B56308;
  border-color: #B56308;
  border: 0 solid #B56308;
  width: 35px;
  height: 35px;
  border-radius :20%;
}

/* Le conteneur autour du contenu */
.boxt {
  padding: 10px 40px;
  position: relative;
  width: 50%;
}

/* Les cercles sur la timeline */
.boxt::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color :#B56308;
  border :4px solid white;
  top :15px;
  border-radius :50%;
  z-index :1;
  }

/* Placez le conteneur à gauche */
.left {
left :0; }

/* Placez le conteneur à droite */
.right {
left :50%; }

/* Ajoutez des flèches au conteneur gauche (pointant vers la droite) */
.left::before {
  content :" ";
  height :0;
  position :absolute;
  top :22px;
  width :0;
  z-index :1;
  right :30px;
  border :medium solid white;
  border-width :10px 0 10px 10px;
  border-color :transparent transparent transparent #B56308;
   }

/* Ajoutez des flèches au conteneur droit (pointant vers la gauche) */
.right::before {
  content :" ";
  height :0;
  position :absolute;
  top :22px;
  width :0;
  z-index :1;
  left :30px;
  border :medium solid white;
  border-width :10px 10px 10px 0;
  border-color :transparent #B56308 transparent transparent;
   }

/* Corrigez le cercle pour les conteneurs du côté droit */
.right::after {
  left:-16px;
  }

/* Le contenu réel */
.content {
  padding :20px
  30px;
  background-color :white;
  position :relative;
  border-radius :6px;
  box-shadow: -5px -5px 15px rgba(255,255,255,0.1), 5px 5px 15px rgba(0,0,0,0.1);
  transition: transform .3s ease-in-out;
}

/* Augmentez l'échelle du contenu au survol */
.content:hover {
  transform: scale(1.05);
  }


/* Pour les écrans de moins de 600px de large */
@media only screen and (max-width: 600px) {

  /* La timeline verticale */
  .timeline::after {
    left: 10%;
  }

  /* Le conteneur autour du contenu */
  .boxt {
    width: 80%;
    margin-left: 10%;
  }

  /* Les cercles sur la timeline */
  .boxt::after {
  left: -16px;
  }

  /* correction pour la fleche du 1er boxt */
  .left:nth-child(1)::before {
  border: 10px solid #ccd1d1;
  border-color: transparent transparent transparent #ccd1d1;
  transform: rotate(180deg);
  left: 50px;
  }

  /* Placez le conteneur à gauche */
  .left {
    left: 0%;
  }

  /* Placez le conteneur à droite */
  .right {
    left: 0%;
  }

  /* Ajoutez des flèches au conteneur gauche (pointant vers la droite) */
  .left::before {
    left: 60px;
    border-width: 10px 10px 10px 0;
    border-color: transparent #B56308 transparent transparent;
  }

  /* Ajoutez des flèches au conteneur droit (pointant vers la gauche) */
  .right::before {
    left: 60px;
    border-width: 10px 10px 10px 0;
    border-color: transparent #B56308 transparent transparent;
  }
}