-
Notifications
You must be signed in to change notification settings - Fork 103
/
Copy pathindex.html
159 lines (145 loc) · 11.1 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="stylesheet" href="assets/css/style.css">
<title>Horizontal Timeline | CodyHouse</title>
</head>
<body>
<section class="cd-h-timeline js-cd-h-timeline margin-bottom-md">
<p class="text-center margin-top-md margin-bottom-xl">👈 <a class="text--inherit" href="https://codyhouse.co/gem/horizontal-timeline/">Article & Download</a></p>
<div class="cd-h-timeline__container container">
<div class="cd-h-timeline__dates">
<div class="cd-h-timeline__line">
<ol>
<li><a href="#0" data-date="16/01/2014" class="cd-h-timeline__date cd-h-timeline__date--selected">16 Jan</a></li>
<li><a href="#0" data-date="28/02/2014" class="cd-h-timeline__date">28 Feb</a></li>
<li><a href="#0" data-date="20/04/2014" class="cd-h-timeline__date">20 Mar</a></li>
<li><a href="#0" data-date="20/05/2014" class="cd-h-timeline__date">20 May</a></li>
<li><a href="#0" data-date="09/07/2014" class="cd-h-timeline__date">09 Jul</a></li>
<li><a href="#0" data-date="30/08/2014" class="cd-h-timeline__date">30 Aug</a></li>
<li><a href="#0" data-date="15/09/2014" class="cd-h-timeline__date">15 Sep</a></li>
<li><a href="#0" data-date="01/11/2014" class="cd-h-timeline__date">01 Nov</a></li>
<li><a href="#0" data-date="10/12/2014" class="cd-h-timeline__date">10 Dec</a></li>
<li><a href="#0" data-date="19/01/2015" class="cd-h-timeline__date">29 Jan</a></li>
<li><a href="#0" data-date="03/03/2015" class="cd-h-timeline__date">3 Mar</a></li>
</ol>
<span class="cd-h-timeline__filling-line" aria-hidden="true"></span>
</div> <!-- .cd-h-timeline__line -->
</div> <!-- .cd-h-timeline__dates -->
<ul>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--prev cd-h-timeline__navigation--inactive">Prev</a></li>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--next">Next</a></li>
</ul>
</div> <!-- .cd-h-timeline__container -->
<div class="cd-h-timeline__events">
<ol>
<li class="cd-h-timeline__event cd-h-timeline__event--selected text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Horizontal Timeline</h2>
<em class="cd-h-timeline__event-date">January 16th, 2014</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Event title here</h2>
<em class="cd-h-timeline__event-date">February 28th, 2014</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Event title here</h2>
<em class="cd-h-timeline__event-date">March 20th, 2014</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Event title here</h2>
<em class="cd-h-timeline__event-date">May 20th, 2014</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Event title here</h2>
<em class="cd-h-timeline__event-date">July 9th, 2014</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Event title here</h2>
<em class="cd-h-timeline__event-date">August 30th, 2014</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Event title here</h2>
<em class="cd-h-timeline__event-date">September 15th, 2014</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Event title here</h2>
<em class="cd-h-timeline__event-date">November 1st, 2014</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Event title here</h2>
<em class="cd-h-timeline__event-date">December 10th, 2014</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Event title here</h2>
<em class="cd-h-timeline__event-date">January 29th, 2015</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<h2 class="cd-h-timeline__event-title">Event title here</h2>
<em class="cd-h-timeline__event-date">March 3rd, 2015</em>
<p class="cd-h-timeline__event-description color-contrast-medium">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</div>
</li>
</ol>
</div> <!-- .cd-h-timeline__events -->
</section>
<script src="assets/js/util.js"></script> <!-- util functions included in the CodyHouse framework -->
<script src="assets/js/swipe-content.js"></script> <!-- A Vanilla JavaScript plugin to detect touch interactions -->
<script src="assets/js/main.js"></script>
</body>
</html>