1694 views
--- tags: template --- # Timeline 1) - Titre ![](https://picsum.photos/id/24/150/150) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dolor nunc, cursus viverra pulvinar eu, pellentesque malesuada elit. - Nam vitae felis urna. Nullam faucibus turpis libero. Suspendisse potenti. 1) - **Titre** ![](https://picsum.photos/id/29/150/150) - Donec id libero maximus tortor malesuada fermentum. Aliquam sit amet accumsan nunc. - Aliquam sit amet augue aliquet, finibus augue a, porttitor leo. In nec sem nisl. Fusce accumsan eu ex ac pretium. Phasellus eu viverra tellus. 1) - Titre ![](https://picsum.photos/id/28/150/150) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dolor nunc, cursus viverra pulvinar eu, pellentesque malesuada elit. - Nam vitae felis urna. Nullam faucibus turpis libero. Suspendisse potenti. 1) - Titre ![](https://picsum.photos/id/33/150/150) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dolor nunc, cursus viverra pulvinar eu, pellentesque malesuada elit. - Nam vitae felis urna. Nullam faucibus turpis libero. Suspendisse potenti. 1) - **Titre** ![](https://picsum.photos/id/45/150/150) - Donec id libero maximus tortor malesuada fermentum. Aliquam sit amet accumsan nunc. - Aliquam sit amet augue aliquet, finibus augue a, porttitor leo. In nec sem nisl. Fusce accumsan eu ex ac pretium. Phasellus eu viverra tellus. 1) - Titre ![](https://picsum.photos/id/63/150/150) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dolor nunc, cursus viverra pulvinar eu, pellentesque malesuada elit. - Nam vitae felis urna. Nullam faucibus turpis libero. Suspendisse potenti. 1) - **Titre** ![](https://picsum.photos/id/75/150/150) - Donec id libero maximus tortor malesuada fermentum. Aliquam sit amet accumsan nunc. - Aliquam sit amet augue aliquet, finibus augue a, porttitor leo. In nec sem nisl. Fusce accumsan eu ex ac pretium. Phasellus eu viverra tellus. <style> /* Adaptation d'un code proposé par Zed Dash (https://codepen.io/z-/pen/bwPBjY) */ body, .ui-content {background-color: #1D1D1D;min-height: 100vh;margin: 0;font-family: "Droid Sans", sans-serif;}.markdown-body:before {content: "";display:block;position: fixed;top: 0px;left: 50%;bottom: 0px;transform: translateX(-50%);width: 2px!important;background-color: #fff!important;}.ui-content .markdown-body:before {display:none;}h1 {background-color: #1D1D1D;padding:10px;}body ol {width: calc(100% - 80px);max-width: 800px;margin: auto;position: relative;left: -5px;list-style-type: none;padding: 0 !important;}body ol:nth-of-type(1) {margin-top:8em;}ul {list-style-type: none;padding: 0 !important;}body ol>li {width: calc(50% - 80px);float: left;padding: 20px;clear: both;text-align: right;}body ol>li:not(:first-child) {margin-top: -40px;}body ol>li ul li:nth-of-type(1) {font-size: 32px;margin-bottom: 12px;position: relative;color: #fff;}body ol>li ul li:nth-of-type(1):before, body ol>li ul li:nth-of-type(1) strong:before {content: "";position: absolute;width: 8px;height: 8px;border: 4px solid #ffffff !important;background-color: #1D1D1D;border-radius: 100%;top: 50%;transform: translateY(-50%);right: -109px;z-index: 1000;}body ol>li ul li:nth-of-type(1) strong:before {width: 24px;height: 24px;transform: translate(8px, -50%);position: absolute;}body ol>li ul li {color: #aaa;}body ol>li ul li {line-height: 1.4em;}body ol>li:nth-child(2n) {text-align: left;float: right;}body ol>li:nth-child(2n) ul li:nth-of-type(1) strong:before {left: -115px;}ul li:nth-of-type(1) strong {display: inline-block;}body ol>li:nth-child(2n) ul li:nth-of-type(1):before {left: -99px;}ul li:not(:first-child) {width: 300px;text-align: left;}body ol>li:nth-child(2n+1) ul li:not(:first-child) {margin-left: -80px !important;}.ui-infobar, .toc {display: none !important;}.ui-content .ui-infobar {display: initial !important;}#doc.container h1 {position: absolute;left: 5%;color: white;}ul li:nth-of-type(1) img {display: block;border-radius: 70px;position: absolute;left: -300px;}body ol>li:nth-child(2n) ul li:nth-of-type(1) img {left: 350px }blockquote {padding: inherit;border: none !important;}@media screen and (min-width:1311px) {#doc.markdown-body {position:static!important;}}@media screen and (max-width:1310px) {.markdown-body:before {left:40px }body li {width:300px!important;}h1{font-size:1.5em!important}body ol>li ul li:nth-of-type(1) {font-size:1.2em;}img {max-width:100px!important;}body ol>li {}body ol>li:nth-child(2n) {float: none;}body ol>li:nth-child(2n+1) ul li:not(:first-child){margin-left:0px!important;}ul li:nth-of-type(1) img {left:350px;}body ol>li {text-align: left!important;}body ol>li ul li:nth-of-type(1):before {left:-34px;}body ol>li ul li:nth-of-type(1) strong:before {left:-50px!important }body ol>li:not(:first-child) {margin-top: 0px;}body ol>li:nth-child(2n) ul li:nth-of-type(1):before {left:-34px!important;}body ol>li:nth-child(2n) ul li:nth-of-type(1) strong:before {transform:translate(8px,-50%)!important;}.markdown-body {position:absolute;left:0px;}.ui-content .markdown-body{position:static!important;left:none!important;}}</style>