-
Notifications
You must be signed in to change notification settings - Fork 0
/
page2.html
330 lines (326 loc) · 12 KB
/
page2.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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<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">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<title>Page 2</title>
<link rel="stylesheet" type="text/css" href="./assest/scss/main.css" />
</head>
<body class="white-theme">
<header id="header" class="header mx-auto">
<div class="header-bar mx-auto">
<img src="./assest/svg/logo.svg" class="logo" />
<div class="nav-bar d-none d-xl-block">
<nav>
<ul class="nav nav-link">
<li class="nav-item">
<a href="">Home</a>
</li>
<li class="nav-item">
<a href="">About</a>
</li>
<li class="nav-item">
<a href="">Events</a>
</li>
<li class="nav-item">
<a href="">Membership</a>
</li>
<li class="nav-item">
<a href="">Contact</a>
</li>
<li class="nav-item nav-button">
<a href="" class="text-white">Buy Tickets .</a>
</li>
</ul>
</nav>
</div>
<div class="nav-drop d-block d-xl-none">
<div class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<img src="./assest/svg/drop-bar.svg" width="35" />
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a href="" class="dropdown-item link">Home</a>
<a href="" class="dropdown-item link">About</a>
<a href="" class="dropdown-item link">Events</a>
<a href="" class="dropdown-item link">Membership</a>
<a href="" class="dropdown-item link">Contact</a>
<div class="dropdown-divider"></div>
<a href="" class="dropdown-item">Buy Tickets .</a>
</div>
</div>
</div>
</div>
</header>
<section id="content-up">
<div class="content-up">
<div class="title mx-auto">
<h1>Page<strong>Title H1</strong></h1>
</div>
<div class="logo">
<img src="./assest/img/content_up_image.png" width="1920" height="334" />
</div>
<div class="comment mx-auto">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis odio massa, eget mattis nulla
molestie
eget. Ut vulputate congue diam, non aliquam felis sagittis a. Pellentesque porttitor neque eget risus
mollis
vulputate. Curabitur sodales enim sit amet sem rutrum scelerisque. Curabitur vel justo a purus euismod
aliquam
</p>
</div>
</div>
</div>
</section>
<section id="content-middle">
<div class="content-middle mx-auto">
<div class="title">
<h2>Sub Heading H2</h2>
</div>
<div class="comment mx-auto">
<div class="text">
Morbi sit amet tincidunt mi. Pellentesque efficitur velit non ligula blandit convallis. Donec luctus vulputate
lacus. Vestibulum aliquet a libero quis blandit. Donec congue lacus in pharetra rutrum. Cras ligula ante,
accumsan et tincidunt sit amet, ornare eu ligula. Ut pharetra vehicula enim nec aliquam. Morbi tincidunt
libero vitae justo porttitor dapibus. Fusce varius tincidunt purus, at sollicitudin turpis tristique at.
Vivamus
congue
ac erat sodales venenatis. Sed a ex vitae dolor porta finibus.
</div>
</div>
<div class="content-list">
<ul>
<li>
<a href="">
Praesent quis eros fringilla auctor velit id tempus turpis
</a>
</li>
<li>
<a href="">
Curabitur scelerisque euismod velit eu mollis
</a>
</li>
<li>
<a href="">
Duis lobortis nisi sit amet nisl dapibus viverra
</a>
</li>
<li>
<a href="">
Suspendisse iaculis eros mauris, quis porttitor eros consequat vitae
</a>
</li>
</ul>
</div>
</div>
</section>
<section id="content-down">
<div class="content-down mx-auto">
<div class="content-body">
<div class="title">
<h3>Sub Heading H3</h3>
</div>
<div class="comment-text">
<div class="text">
Integer at eros vitae nibh porta ornare sed sit amet lacus. Sed luctus dignissim lectus, nec volutpat magna
consequat laoreet. Praesent vestibulum purus erat, eu placerat ligula ullamcorper nec. Nam vel sapien nisl.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent
elementum
ac nibh sed bibendum. Curabitur lacinia nibh in nunc convallis, at volutpat arcu varius. In non finibus
dolor.
Mauris ac sem et augue interdum tempor. Sed porttitor, nibh pellentesque tincidunt varius, eros eros viverra
dolor, id venenatis mi nisi et lectus. Aliquam sed commodo ligula. Nulla facilisi. Curabitur eleifend leo
non
maximus tincidunt. Etiam at lectus leo. Aenean eleifend, lectus sed sollicitudin blandit, arcu ante
vestibulum
est, sit amet pulvinar nulla urna et lectus. Phasellus interdum, lacus at accumsan luctus, justo ipsum
bibendum nunc, sed efficitur odio odio a justo.
</div>
</div>
<div class="comment-text">
<div class="text">
Sed a felis a diam sodales sollicitudin. Maecenas tempus mi at consequat tincidunt. Sed dapibus leo nec diam
tincidunt fermentum. Morbi tempor nibh dui. Sed at euismod velit, ut porta nulla. Mauris at convallis erat,
non convallis lacus. Aliquam molestie pulvinar mauris et vehicula. Donec a rhoncus tellus. Vivamus in
fringilla elit. Quisque laoreet, dolor ac luctus tristique, mi neque molestie massa, eget tristique enim
nulla
quis sapien. Aliquam erat volutpat.
</div>
</div>
<div class="image-flap mx-auto">
<div class="title-image">
<img src="./assest/img/content_down_image.png" />
</div>
<div class="bottom-arrow">
<a href="">
<div class="logo">
<img src="./assest/svg/arrow-border.svg" />
</div>
<div class="button-label">
BACK
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="lastnews">
<div class="lastnews mx-auto">
<p class="lastnews-title my-5 px-3">Latest <span class="lastnews-title-bold">news</span></p>
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
<div class="carousel-cell lastnews-card">
<a href="">
<img src="assest/img/news_image.png" class="w-100 h-auto" />
<p class="lastnews-text my-4">A Day in the Life — How Lucy<br /> lives and breathes art</p>
</a>
</div>
<div class="carousel-cell lastnews-card">
<a href="">
<img src="assest/img/news_image.png" class="w-100 h-auto" />
<p class="lastnews-text my-4">A Day in the Life — How Lucy<br /> lives and breathes art</p>
</a>
</div>
<div class="carousel-cell lastnews-card">
<a href="">
<img src="assest/img/news_image.png" class="w-100 h-auto" />
<p class="lastnews-text my-4">A Day in the Life — How Lucy<br /> lives and breathes art</p>
</a>
</div>
<div class="carousel-cell lastnews-card">
<a href="">
<img src="assest/img/news_image.png" class="w-100 h-auto" />
<p class="lastnews-text my-4">A Day in the Life — How Lucy<br /> lives and breathes art</p>
</a>
</div>
</div>
</div>
</section>
<section id="highlights">
<div class="highlights mx-auto">
<div class="highlight">
<img src="./assest/svg/highlights-icon1.svg" width="60" height="59" />
<div class="text">
<div>
<p>Lorem ipsum dolor sit amet<br /> consectetur adipiscing elit</p>
</div>
<div class="text-link">
<a href="">
View career opportunities
</a>
</div>
</div>
</div>
<img src="./assest/svg/logo-line.svg" class="d-xl-block d-none" width="60" height="60" />
<div class="highlight">
<img src="./assest/svg/highlights-icon2.svg" width="60" height="59" />
<div class="text">
<div>
<p>Lorem ipsum dolor sit amet<br /> consectetur adipiscing elit</p>
</div>
<div class="text-link">
<a href="">
View career opportunities
</a>
</div>
</div>
</div>
<img src="./assest/svg/logo-line.svg" class="d-xl-block d-none" width="60" height="60" />
<div class="highlight">
<img src="./assest/svg/highlights-icon3.svg" width="60" height="59" />
<div class="text">
<div class="text-title">
<p>Lorem ipsum dolor sit amet<br /> consectetur adipiscing elit</p>
</div>
<div class="text-link">
<a href="">
View career opportunities
</a>
</div>
</div>
</div>
</div>
</section>
<footer id="footer">
<div class="footer mx-auto py-5">
<div class="top-line">
<hr color="#000000" width="47%">
<div class="logo">
<img src="./assest/svg/graphic-logo.svg" width="30" height="30" />
</div>
<hr color="#B2B2B2" width="47%">
</div>
<div class="middle-line">
<div class="logo">
<img src="./assest/svg/logo.svg" />
</div>
<div class="nav-link">
<div class="link">
<a href="">Home</a>
</div>
<div class="link">
<a href="">About</a>
</div>
<div class="link">
<a href="">Events</a>
</div>
<div class="link">
<a href="">Membership</a>
</div>
<div class="link">
<a href="">Contact</a>
</div>
</div>
</div>
<div class="bottom-line">
<div>
© Umbraco Foundation - 2020 - All Rights Reserved
</div>
<div class="text-flap">
<div>
<a href="">
Web & Cookies
</a>
</div>
<div>
<a href="">
Disclaimer
</a>
</div>
<div>
<a href="">
Terms & Conditions
</a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
<script>
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
// options
cellAlign: 'left',
contain: true,
autoPlay: 3000,
wrapAround: false
});
</script>