184 lines
3.8 KiB
CSS
184 lines
3.8 KiB
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;
|
|
}
|
|
}
|
|
|