-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (98 loc) · 5.73 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
<!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>Responsive Vertical Timeline | CodyHouse</title>
</head>
<body>
<header class="cd-main-header text-center flex flex-column flex-center">
<h1>Responsive Vertical Timeline</h1>
<p class="margin-top-sm">👈<a class="color-inherit" href="https://codyhouse.co/gem/vertical-timeline/">Article & Download</a></p>
</header>
<section class="cd-timeline js-cd-timeline">
<div class="container max-width-lg cd-timeline__container">
<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="../assets/img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->
<div class="cd-timeline__content text-component">
<h2>Title of section 1</h2>
<p class="color-contrast-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">Jan 14</span>
<a href="#0" class="btn btn--subtle">Read more</a>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->
<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--movie">
<img src="../assets/img/cd-icon-movie.svg" alt="Movie">
</div> <!-- cd-timeline__img -->
<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">Jan 18</span>
<a href="#0" class="btn btn--subtle">Read more</a>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->
<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="../assets/img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->
<div class="cd-timeline__content text-component">
<h2>Title of section 3</h2>
<p class="color-contrast-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">Jan 24</span>
<a href="#0" class="btn btn--subtle">Read more</a>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->
<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--location">
<img src="../assets/img/cd-icon-location.svg" alt="Location">
</div> <!-- cd-timeline__img -->
<div class="cd-timeline__content text-component">
<h2>Title of section 4</h2>
<p class="color-contrast-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">Feb 14</span>
<a href="#0" class="btn btn--subtle">Read more</a>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->
<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--location">
<img src="../assets/img/cd-icon-location.svg" alt="Location">
</div> <!-- cd-timeline__img -->
<div class="cd-timeline__content text-component">
<h2>Title of section 5</h2>
<p class="color-contrast-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">Feb 18</span>
<a href="#0" class="btn btn--subtle">Read more</a>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->
<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--movie">
<img src="../assets/img/cd-icon-movie.svg" alt="Movie">
</div> <!-- cd-timeline__img -->
<div class="cd-timeline__content text-component">
<h2>Final Section</h2>
<p class="color-contrast-medium">This is the content of the last section</p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">Feb 26</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->
</div>
</section> <!-- cd-timeline -->
<script src="../assets/js/main.js"></script>
</body>
</html>