1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col p-0">
<div class="h-timeline-wrapper">
<div class="h-timeline">
<div class="timeline-item" data-content="<p><b>Lorem ipsum dolor sit amet consectetur adipisicing elit.</b> Culpa, tempore. Doloremque error officia, officiis amet laborum, labore placeat vitae, dolore similique quasi ea laboriosam numquam cum adipisci? Illum, quaerat itaque commodi ad delectus, eos sapiente officiis non dolorum, ut autem fugiat quae similique. Sed tenetur autem dolorum doloribus nihil pariatur ipsum ipsam voluptas quae iusto dolores, porro quo cum maxime.</p>">
2010
</div>
<div class="timeline-item" data-content="<p><b>Lorem ipsum dolor sit amet consectetur adipisicing elit.</b> Culpa, tempore. Doloremque error officia, officiis amet laborum, labore placeat vitae, dolore similique quasi ea laboriosam numquam cum adipisci? Illum, quaerat itaque commodi ad delectus, eos sapiente officiis non dolorum, ut autem fugiat quae similique. Sed tenetur autem dolorum doloribus nihil pariatur ipsum ipsam voluptas quae iusto dolores, porro quo cum maxime.</p>">
2012
</div>
<div class="timeline-item" data-content="<p><b>Lorem ipsum dolor sit amet consectetur adipisicing elit.</b> Culpa, tempore. Doloremque error officia, officiis amet laborum, labore placeat vitae, dolore similique quasi ea laboriosam numquam cum adipisci? Illum, quaerat itaque commodi ad delectus, eos sapiente officiis non dolorum, ut autem fugiat quae similique. Sed tenetur autem dolorum doloribus nihil pariatur ipsum ipsam voluptas quae iusto dolores, porro quo cum maxime.</p>">
2014
</div>
<div class="timeline-item" data-content="<p><b>Lorem ipsum dolor sit amet consectetur adipisicing elit.</b> Culpa, tempore. Doloremque error officia, officiis amet laborum, labore placeat vitae, dolore similique quasi ea laboriosam numquam cum adipisci? Illum, quaerat itaque commodi ad delectus, eos sapiente officiis non dolorum, ut autem fugiat quae similique. Sed tenetur autem dolorum doloribus nihil pariatur ipsum ipsam voluptas quae iusto dolores, porro quo cum maxime.</p>">
2017
</div>
<div class="timeline-item" data-content="<p><b>Lorem ipsum dolor sit amet consectetur adipisicing elit.</b> Culpa, tempore. Doloremque error officia, officiis amet laborum, labore placeat vitae, dolore similique quasi ea laboriosam numquam cum adipisci? Illum, quaerat itaque commodi ad delectus, eos sapiente officiis non dolorum, ut autem fugiat quae similique. Sed tenetur autem dolorum doloribus nihil pariatur ipsum ipsam voluptas quae iusto dolores, porro quo cum maxime.</p>">
2018
</div>
<div class="timeline-item active" data-content="<p><b>Lorem ipsum dolor sit amet consectetur adipisicing elit.</b> Culpa, tempore. Doloremque error officia, officiis amet laborum, labore placeat vitae, dolore similique quasi ea laboriosam numquam cum adipisci? Illum, quaerat itaque commodi ad delectus, eos sapiente officiis non dolorum, ut autem fugiat quae similique. Sed tenetur autem dolorum doloribus nihil pariatur ipsum ipsam voluptas quae iusto dolores, porro quo cum maxime.</p>">
2020
</div>
</div>
<div class="content-line-wrapper" style="visibility: hidden;">
<i class="content-line"></i>
<div class="content-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
<script src="main.js"></script>
</body>
</html>