nounix/Site_tohubohu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
nounix
2023-08-09 13:01:16 +02:00
commit 8f04a81a78
10 changed files with 718 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
assets/css/timeline.css Normal file
View File

@@ -0,0 +1,183 @@
/* 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;
}
}