forked from Liinkiing/jquery-timelify
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (117 loc) · 7.81 KB
/
index.html
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timelify | Simple Timeline plugin</title>
<link href="http://fonts.googleapis.com/css?family=Kristi|Alegreya+Sans:300,800" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/timelify.css">
</head>
<body>
<div class="container">
<div class="timeline">
<h2>2013</h2>
<ul class="timeline-items">
<li class="is-hidden timeline-item"> <!-- Normal block, positionned to the left -->
<h3>Title</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet cupiditate, delectus deserunt doloribus earum eveniet explicabo fuga iste magni maxime mollitia nemo neque, perferendis quod reprehenderit ut, vel veritatis voluptas?</p>
<hr>
<time>January 2013</time>
</li>
</ul>
<h2>2014</h2>
<ul class="timeline-items">
<li class="is-hidden timeline-item inverted"> <!-- Normal block, positionned to the right -->
<h3>Title</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aspernatur consequuntur culpa deserunt ea esse est inventore, ipsa laborum officia, quam quia quidem, rem sunt tempora tenetur ullam voluptatem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolore harum iure quod ut! Accusamus aspernatur corporis est excepturi facere laudantium nesciunt nihil optio, quaerat quos rerum sunt suscipit voluptate?.</p>
<hr>
<time>Mars 2014</time>
</li>
<li class="is-hidden timeline-item centered"> <!-- Centered block, positionned in the middle -->
<h3>Title</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, cupiditate dicta dignissimos dolorem doloribus ducimus eos error ex molestiae nobis odio odit optio placeat quasi repudiandae, unde velit voluptate voluptatem!
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consectetur cupiditate ea, eius excepturi expedita illum, incidunt ipsam iste modi obcaecati optio repellendus! Dolore dolores pariatur sint veniam voluptates!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequatur distinctio doloremque eos eum eveniet fuga molestiae mollitia nesciunt nisi nobis nostrum, odio omnis pariatur praesentium quibusdam sequi sint voluptates.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam, aspernatur commodi consequuntur corporis dicta, distinctio enim eos expedita, id iste laborum maxime nesciunt quaerat sed temporibus veniam vero voluptatem.</p>
<p><a
href="http://gamejolt.com/games/slender-the-cursed-forest/30950">Link</a>
</p>
<hr>
<time>Date</time>
</li>
</ul>
<h2>2015</h2>
<ul class="timeline-items">
<li class="is-hidden timeline-item">
<h3>Title</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur blanditiis dolorem, eos excepturi impedit neque nisi recusandae repudiandae tempora. Ad debitis ducimus est et explicabo, id in nam necessitatibus?</p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam, culpa eveniet excepturi fugiat, harum laborum laudantium magni nemo nihil officia possimus quaerat quas quod sapiente sit tempora vel? Veritatis.</span></p>
<hr>
<time>Date</time>
</li>
<li class="is-hidden timeline-item inverted">
<h3>Title</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dignissimos inventore labore maiores mollitia neque nesciunt nulla obcaecati vel velit! Aut, maxime minima? Eos est laborum non optio quidem ut!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem distinctio fugit, harum id magnam perferendis porro sint vel voluptate voluptatibus! Ad adipisci deleniti ea nisi, placeat ratione saepe sunt veritatis.</p>
<hr>
<time>Date</time>
</li>
</ul>
<h2>2016</h2>
<ul class="timeline-items">
<li class="is-hidden timeline-item">
<h3>Title</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsum magnam quis vero vitae. Adipisci at doloribus eius expedita id, nobis officiis perferendis quae sint ut. Consectetur nostrum obcaecati veritatis!</p>
<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit. Aliquam asperiores, cum deserunt dicta est facere fuga fugiat laboriosam perspiciatis quae quia ratione rem. Aspernatur earum, est et facilis nobis repudiandae.</p>
<hr>
<time>Date</time>
</li>
<li class="is-hidden timeline-item">
<h3>Grands Enfants</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi, commodi delectus dolor ea maxime modi nobis obcaecati odit, provident quaerat, soluta voluptates! Ex inventore libero placeat quaerat quod sint?</p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque delectus doloremque inventore iste officiis porro possimus quis, quod repellat sint. Aliquam dolorum explicabo hic illo modi molestias quae, quia reiciendis!</span>
<span>Ab assumenda inventore molestiae optio similique veritatis? Autem cupiditate earum eius fugiat fugit magnam nihil officiis quas qui repudiandae! Assumenda, expedita fugit ipsam natus odio qui similique. Debitis, error, quia.</span></p>
<p><a href="http://grands-enfants-timeline.herokuapp.com/">Link</a></p>
<hr>
<time>Date</time>
</li>
<li class="is-hidden timeline-item centered">
<h3>Title</h3>
<hr>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid animi architecto aspernatur assumenda dicta distinctio ducimus, fugiat fugit hic itaque laudantium maxime nam praesentium rem sint sit sunt voluptatibus!</span><span>Aliquam aliquid consequuntur cum ipsum itaque libero magni maxime, minima necessitatibus, odit, placeat quam quo ratione recusandae repudiandae sapiente tempore! Alias, id, rerum? Cum deserunt, dolorem explicabo illum numquam quibusdam?</span><span>Autem distinctio error magni, maiores praesentium provident voluptatibus. A, ad autem beatae debitis deserunt ducimus exercitationem inventore magni, molestias neque quasi quibusdam quo. Ab dolor modi, neque numquam officiis quam.</span>
<span>Fuga libero nam similique. Animi aut cum cupiditate ducimus, eum laboriosam minima neque numquam odio officia placeat possimus quaerat quidem similique sint ullam vero voluptatem voluptatibus. Accusamus commodi perspiciatis repellendus.</span>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium earum inventore nobis quo! Aspernatur consectetur corporis eaque, eveniet expedita, explicabo ipsum nostrum omnis pariatur, placeat quaerat reprehenderit tempora totam ullam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem blanditiis expedita illo ipsum molestiae, nisi porro quaerat quam quidem reprehenderit sed, sit, ut! At dolorem et, eum facilis quasi sed!
<strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit. Asperiores cumque cupiditate debitis ea ex iure iusto maiores mollitia nihil non obcaecati omnis quidem quod sequi soluta suscipit, tenetur voluptatem voluptatum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi architecto aut cum dolore dolores neque nesciunt nostrum porro quibusdam ratione! Architecto cum distinctio error et in laboriosam molestiae molestias saepe!</p>
<p><a href="http://c-vitae.herokuapp.com">Link</a></p>
<hr>
<time>Date</time>
</li>
</ul>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.timelify.js"></script>
<script>
$('.timeline').timelify({
animLeft: "fadeInLeft",
animCenter: "fadeInUp",
animRight: "fadeInRight",
animSpeed: 600,
offset: 150
});
</script>
</body>
</html>