Code chronologie

<link rel="stylesheet" href="https://www.aht.li/3512132/variat1.css"><link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><style>:root {--gpTL-bg1: #FFFBF4;/*fond*/--gpTL-bg2: #FFF6E4;/*fond gauche*/--gpTL-dot-clr: #FABCAF;/*point*/--gpTL-line-clr: #fff;/*traits*/--gpTL-font: 'Lato', sans-serif;/*typo*/}.dotted-chrono-one {width: 440px;border-radius: 15px;}</style>

<div class="dotted-chrono-one">
<date>1986<i>october</i></date>

<desc>Mauris, libero risus risus aliquam dignissim mauris. Suspendisse sagittis morbi nisi massa commodo, ipsum. Magna fringilla sociis nunc iaculis aliquam vulputate felis odio egestas. Tempor ut velit, id vel ut sagittis cursus ut. Sit ut malesuada sem molestie. Enim bibendum.</desc>

<date>1989 <i>april</i></date>

<desc>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</desc>

<date>1991<i>january</i></date>

<desc>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi</desc>

<date>1999<i>june</i></date>

<desc>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.</desc>

<date>2000 <i>now</i></date>

</div>

<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://www.aht.li/3512493/variat2.css"><style>:root {--gpTL2-bg1: #FFFBF4;/*fond*/--gpTL2-dot-clr: #fff;/*point*/--gpTL2-line-clr: #FABCAF;/*traits*/--gpTL2-font: 'Lato', sans-serif;/*typo*/}.dotted-chrono-two {width: 440px;border-radius: 15px;}</style>

<div class="dotted-chrono-two">
<date>1986<i>october</i></date>

<desc>Mauris, libero risus risus aliquam dignissim mauris. Suspendisse sagittis morbi nisi massa commodo, ipsum. Magna fringilla sociis nunc iaculis aliquam vulputatefelis odio egestas. Tempor ut velit, id vel ut sagittis cursus ut. Sit ut malesuada sem molestie. Enim bibendum.</desc>

<date>1989<i>april</i></date>

<desc>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</desc>

<date>1991<i>january</i></date>

<desc>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</desc>

<date>1999<i>june</i></date>

<desc>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.</desc>

<date>2000<i>now</i></date>
</div>

<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://www.aht.li/3512133/variat3.css"><style>:root {--gpTL3-bg1: #FFFBF4;/*fond*/--gpTL3-bg2: #FFF6E4;/*fond gauche*/--gpTL3-date-bg: #FABCAF;/*fond date*/--gpTL3-light-clr: #fff;/*traits*/--gpTL3-title-clr: #FABCAF;/*couleur titre*/--gpTL3-font: 'Lato', sans-serif;/*typo*/}.dotted-chrono-three {width: 440px;border-radius: 15px;}</style>

<div class="dotted-chrono-three">

<div class="event"><date>1986</date>kids ain't alright</div>

<desc>Mauris, libero risus risus aliquam dignissim mauris. Suspendisse sagittis morbi nisi massa commodo, ipsum. Magna fringilla sociis nunc iaculis aliquam vulputatefelis odio egestas. Tempor ut velit, id vel ut sagittis cursus ut. Sit ut malesuada sem molestie. Enim bibendum.</desc>

<div class="event"><date>1989</date>old boy</div>

<desc>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</desc>

<div class="event"><date>1991</date> teenage fantasy</div>

<desc>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</desc>

<div class="event"><date>1999</date>manhood</div>

<desc>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.</desc>
</div>