@openeuropa/bcl-subscription 0.1.202408021145
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +21 -0
- package/__snapshots__/subscription.test.js.snap +1379 -0
- package/data/data--modal.js +98 -0
- package/data/data.js +45 -0
- package/package.json +28 -0
- package/subscription-modal.html.twig +24 -0
- package/subscription.html.twig +10 -0
- package/subscription.story.js +143 -0
- package/subscription.test.js +27 -0
|
@@ -0,0 +1,1379 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`OE - Subscription renders correctly 1`] = `
|
|
4
|
+
<jest>
|
|
5
|
+
<header
|
|
6
|
+
class="bcl-header bcl-header--eu"
|
|
7
|
+
>
|
|
8
|
+
<!-- navbar_settings -->
|
|
9
|
+
<nav
|
|
10
|
+
aria-label="Top Navigation"
|
|
11
|
+
class="w-100 shadow-sm bcl-header__top-navbar navbar navbar-expand-lg navbar-light"
|
|
12
|
+
>
|
|
13
|
+
<div
|
|
14
|
+
class="container"
|
|
15
|
+
>
|
|
16
|
+
<a
|
|
17
|
+
class="navbar-brand"
|
|
18
|
+
href="/example.html"
|
|
19
|
+
>
|
|
20
|
+
<img
|
|
21
|
+
alt="desktop european union logo"
|
|
22
|
+
class="d-none d-lg-block"
|
|
23
|
+
src="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/standard-version/positive/logo-eu--en.svg"
|
|
24
|
+
/>
|
|
25
|
+
<img
|
|
26
|
+
alt="mobile european union logo"
|
|
27
|
+
class="d-lg-none"
|
|
28
|
+
src="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.0.2/eu/images/logo/condensed-version/positive/logo-eu--en.svg"
|
|
29
|
+
/>
|
|
30
|
+
</a>
|
|
31
|
+
<button
|
|
32
|
+
aria-controls="topNavbarDropdown"
|
|
33
|
+
aria-expanded="false"
|
|
34
|
+
aria-label="Toggle navigation"
|
|
35
|
+
class="navbar-toggler"
|
|
36
|
+
data-bs-target="#topNavbarDropdown"
|
|
37
|
+
data-bs-toggle="collapse"
|
|
38
|
+
type="button"
|
|
39
|
+
>
|
|
40
|
+
<span
|
|
41
|
+
class="navbar-toggler-icon"
|
|
42
|
+
/>
|
|
43
|
+
</button>
|
|
44
|
+
<div
|
|
45
|
+
class="collapse navbar-collapse"
|
|
46
|
+
id="topNavbarDropdown"
|
|
47
|
+
>
|
|
48
|
+
<ul
|
|
49
|
+
class="nav"
|
|
50
|
+
>
|
|
51
|
+
<li
|
|
52
|
+
class="nav-item"
|
|
53
|
+
>
|
|
54
|
+
<a
|
|
55
|
+
class="nav-link"
|
|
56
|
+
data-bs-target="#languageModal"
|
|
57
|
+
data-bs-toggle="modal"
|
|
58
|
+
href="/example.html"
|
|
59
|
+
>
|
|
60
|
+
<svg
|
|
61
|
+
class="me-2-5 bi icon--xs"
|
|
62
|
+
>
|
|
63
|
+
<use
|
|
64
|
+
xlink:href="/icons.svg#chat-left-dots-fill"
|
|
65
|
+
/>
|
|
66
|
+
</svg>
|
|
67
|
+
English
|
|
68
|
+
</a>
|
|
69
|
+
</li>
|
|
70
|
+
<li
|
|
71
|
+
class="nav-item"
|
|
72
|
+
>
|
|
73
|
+
<a
|
|
74
|
+
class="nav-link"
|
|
75
|
+
data-bs-target="#loginModal"
|
|
76
|
+
data-bs-toggle="modal"
|
|
77
|
+
href="/example.html"
|
|
78
|
+
>
|
|
79
|
+
<svg
|
|
80
|
+
class="me-2-5 bi icon--xs"
|
|
81
|
+
>
|
|
82
|
+
<use
|
|
83
|
+
xlink:href="/icons.svg#person-fill"
|
|
84
|
+
/>
|
|
85
|
+
</svg>
|
|
86
|
+
Log in
|
|
87
|
+
</a>
|
|
88
|
+
</li>
|
|
89
|
+
</ul>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</nav>
|
|
93
|
+
<!-- project name -->
|
|
94
|
+
<!-- navbar -->
|
|
95
|
+
<nav
|
|
96
|
+
aria-label="Main Navigation"
|
|
97
|
+
class="bcl-header__navbar navbar navbar-expand-lg navbar-dark"
|
|
98
|
+
>
|
|
99
|
+
<div
|
|
100
|
+
class="container"
|
|
101
|
+
>
|
|
102
|
+
<button
|
|
103
|
+
aria-controls="navbarNavDropdown"
|
|
104
|
+
aria-expanded="false"
|
|
105
|
+
aria-label="Toggle navigation"
|
|
106
|
+
class="navbar-toggler"
|
|
107
|
+
data-bs-target="#navbarNavDropdown"
|
|
108
|
+
data-bs-toggle="collapse"
|
|
109
|
+
type="button"
|
|
110
|
+
>
|
|
111
|
+
<span
|
|
112
|
+
class="navbar-toggler-icon"
|
|
113
|
+
/>
|
|
114
|
+
</button>
|
|
115
|
+
<div
|
|
116
|
+
class="collapse navbar-collapse"
|
|
117
|
+
id="navbarNavDropdown"
|
|
118
|
+
>
|
|
119
|
+
<ul
|
|
120
|
+
class="me-auto navbar-nav"
|
|
121
|
+
>
|
|
122
|
+
<li
|
|
123
|
+
class="nav-item"
|
|
124
|
+
>
|
|
125
|
+
<a
|
|
126
|
+
aria-current="page"
|
|
127
|
+
class="nav-link active"
|
|
128
|
+
href="/example.html"
|
|
129
|
+
>
|
|
130
|
+
Home
|
|
131
|
+
</a>
|
|
132
|
+
</li>
|
|
133
|
+
<li
|
|
134
|
+
class="nav-item"
|
|
135
|
+
>
|
|
136
|
+
<a
|
|
137
|
+
class="nav-link"
|
|
138
|
+
href="/example.html"
|
|
139
|
+
>
|
|
140
|
+
Item 01
|
|
141
|
+
</a>
|
|
142
|
+
</li>
|
|
143
|
+
<li
|
|
144
|
+
class="nav-item"
|
|
145
|
+
>
|
|
146
|
+
<a
|
|
147
|
+
class="nav-link"
|
|
148
|
+
href="/example.html"
|
|
149
|
+
>
|
|
150
|
+
Item 02
|
|
151
|
+
</a>
|
|
152
|
+
</li>
|
|
153
|
+
<li
|
|
154
|
+
class="nav-item dropdown"
|
|
155
|
+
>
|
|
156
|
+
<a
|
|
157
|
+
aria-expanded="false"
|
|
158
|
+
class="nav-link dropdown-toggle"
|
|
159
|
+
data-bs-toggle="dropdown"
|
|
160
|
+
href="#"
|
|
161
|
+
id="navbarDropdownMenuLink"
|
|
162
|
+
role="button"
|
|
163
|
+
>
|
|
164
|
+
Dropdown link
|
|
165
|
+
</a>
|
|
166
|
+
<ul
|
|
167
|
+
aria-labelledby="navbarDropdownMenuLink"
|
|
168
|
+
class="dropdown-menu"
|
|
169
|
+
>
|
|
170
|
+
<li>
|
|
171
|
+
<a
|
|
172
|
+
class="dropdown-item"
|
|
173
|
+
href="/example.html"
|
|
174
|
+
>
|
|
175
|
+
Action
|
|
176
|
+
</a>
|
|
177
|
+
</li>
|
|
178
|
+
<li>
|
|
179
|
+
<a
|
|
180
|
+
class="dropdown-item"
|
|
181
|
+
href="/example.html"
|
|
182
|
+
>
|
|
183
|
+
Another action
|
|
184
|
+
</a>
|
|
185
|
+
</li>
|
|
186
|
+
<li>
|
|
187
|
+
<a
|
|
188
|
+
class="dropdown-item"
|
|
189
|
+
href="/example.html"
|
|
190
|
+
>
|
|
191
|
+
Something else here
|
|
192
|
+
</a>
|
|
193
|
+
</li>
|
|
194
|
+
<li>
|
|
195
|
+
<a
|
|
196
|
+
class="dropdown-item"
|
|
197
|
+
href="/example.html"
|
|
198
|
+
>
|
|
199
|
+
Very long label with custom text and custom link as an example
|
|
200
|
+
</a>
|
|
201
|
+
</li>
|
|
202
|
+
</ul>
|
|
203
|
+
</li>
|
|
204
|
+
</ul>
|
|
205
|
+
<form
|
|
206
|
+
class="d-flex mt-3 mt-lg-0"
|
|
207
|
+
>
|
|
208
|
+
<label
|
|
209
|
+
class="form-label visually-hidden"
|
|
210
|
+
for="inlineFormInputGroupSearch"
|
|
211
|
+
>
|
|
212
|
+
Search
|
|
213
|
+
</label>
|
|
214
|
+
<input
|
|
215
|
+
class="border-start-0 rounded-0 rounded-start form-control"
|
|
216
|
+
id="inlineFormInputGroupSearch"
|
|
217
|
+
placeholder="Search"
|
|
218
|
+
required="true"
|
|
219
|
+
type="text"
|
|
220
|
+
/>
|
|
221
|
+
<button
|
|
222
|
+
class="border-start-0 rounded-0 rounded-end btn btn-light btn-md"
|
|
223
|
+
type="button"
|
|
224
|
+
>
|
|
225
|
+
<span
|
|
226
|
+
class="visually-hidden"
|
|
227
|
+
>
|
|
228
|
+
search
|
|
229
|
+
</span>
|
|
230
|
+
<svg
|
|
231
|
+
class="bi icon--fluid"
|
|
232
|
+
>
|
|
233
|
+
<use
|
|
234
|
+
xlink:href="/icons.svg#search"
|
|
235
|
+
/>
|
|
236
|
+
</svg>
|
|
237
|
+
</button>
|
|
238
|
+
</form>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</nav>
|
|
242
|
+
<!-- breadcrumbs -->
|
|
243
|
+
<div
|
|
244
|
+
class="container"
|
|
245
|
+
>
|
|
246
|
+
<nav
|
|
247
|
+
aria-label="breadcrumb"
|
|
248
|
+
class="mt-3"
|
|
249
|
+
>
|
|
250
|
+
<ol
|
|
251
|
+
class="breadcrumb"
|
|
252
|
+
>
|
|
253
|
+
<li
|
|
254
|
+
class="breadcrumb-item d-none d-md-block"
|
|
255
|
+
>
|
|
256
|
+
<a
|
|
257
|
+
href="/example.html"
|
|
258
|
+
>
|
|
259
|
+
Home
|
|
260
|
+
</a>
|
|
261
|
+
</li>
|
|
262
|
+
<li
|
|
263
|
+
class="breadcrumb-item d-none d-md-block"
|
|
264
|
+
>
|
|
265
|
+
<a
|
|
266
|
+
href="/example.html"
|
|
267
|
+
>
|
|
268
|
+
European Union
|
|
269
|
+
</a>
|
|
270
|
+
</li>
|
|
271
|
+
<li
|
|
272
|
+
class="breadcrumb-item"
|
|
273
|
+
>
|
|
274
|
+
<a
|
|
275
|
+
href="/example.html"
|
|
276
|
+
>
|
|
277
|
+
<svg
|
|
278
|
+
class="d-md-none ms-0 me-2 me-2-5 bi icon--s"
|
|
279
|
+
>
|
|
280
|
+
<use
|
|
281
|
+
xlink:href="/icons.svg#arrow-left"
|
|
282
|
+
/>
|
|
283
|
+
</svg>
|
|
284
|
+
About the European Union
|
|
285
|
+
</a>
|
|
286
|
+
</li>
|
|
287
|
+
<li
|
|
288
|
+
aria-current="page"
|
|
289
|
+
class="breadcrumb-item d-none d-md-block active"
|
|
290
|
+
>
|
|
291
|
+
News
|
|
292
|
+
</li>
|
|
293
|
+
</ol>
|
|
294
|
+
</nav>
|
|
295
|
+
</div>
|
|
296
|
+
</header>
|
|
297
|
+
<div
|
|
298
|
+
aria-hidden="true"
|
|
299
|
+
aria-label="loginModalLabel"
|
|
300
|
+
class="modal fade"
|
|
301
|
+
id="loginModal"
|
|
302
|
+
tabindex="-1"
|
|
303
|
+
>
|
|
304
|
+
<div
|
|
305
|
+
class="modal-dialog"
|
|
306
|
+
>
|
|
307
|
+
<div
|
|
308
|
+
class="modal-content"
|
|
309
|
+
>
|
|
310
|
+
<div
|
|
311
|
+
class="modal-header"
|
|
312
|
+
>
|
|
313
|
+
<h5
|
|
314
|
+
class="modal-title"
|
|
315
|
+
id="loginModalLabel"
|
|
316
|
+
>
|
|
317
|
+
Log in
|
|
318
|
+
</h5>
|
|
319
|
+
<button
|
|
320
|
+
aria-label="Close"
|
|
321
|
+
class="btn-close"
|
|
322
|
+
data-bs-dismiss="modal"
|
|
323
|
+
type="button"
|
|
324
|
+
/>
|
|
325
|
+
</div>
|
|
326
|
+
<div
|
|
327
|
+
class="modal-body"
|
|
328
|
+
>
|
|
329
|
+
<h5>
|
|
330
|
+
Disclaimer 1
|
|
331
|
+
</h5>
|
|
332
|
+
<p>
|
|
333
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
334
|
+
<br />
|
|
335
|
+
Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa.
|
|
336
|
+
<br />
|
|
337
|
+
</p>
|
|
338
|
+
<h5>
|
|
339
|
+
Disclaimer 2
|
|
340
|
+
</h5>
|
|
341
|
+
<p>
|
|
342
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
343
|
+
<br />
|
|
344
|
+
Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa.
|
|
345
|
+
<br />
|
|
346
|
+
</p>
|
|
347
|
+
</div>
|
|
348
|
+
<div
|
|
349
|
+
class="modal-footer"
|
|
350
|
+
>
|
|
351
|
+
<button
|
|
352
|
+
class="btn btn-secondary"
|
|
353
|
+
data-bs-dismiss="modal"
|
|
354
|
+
type="button"
|
|
355
|
+
>
|
|
356
|
+
Close
|
|
357
|
+
</button>
|
|
358
|
+
<button
|
|
359
|
+
class="btn btn-primary"
|
|
360
|
+
type="button"
|
|
361
|
+
>
|
|
362
|
+
Access EU login
|
|
363
|
+
</button>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
<div
|
|
369
|
+
aria-hidden="true"
|
|
370
|
+
aria-label="languageModalLabel"
|
|
371
|
+
class="bcl-language-list-modal bcl-language-list-modal--eu modal fade"
|
|
372
|
+
id="languageModal"
|
|
373
|
+
tabindex="-1"
|
|
374
|
+
>
|
|
375
|
+
<div
|
|
376
|
+
class="modal-dialog modal-fullscreen"
|
|
377
|
+
>
|
|
378
|
+
<div
|
|
379
|
+
class="modal-content"
|
|
380
|
+
>
|
|
381
|
+
<div
|
|
382
|
+
class="modal-header"
|
|
383
|
+
>
|
|
384
|
+
<div
|
|
385
|
+
class="container"
|
|
386
|
+
>
|
|
387
|
+
<div
|
|
388
|
+
class="border-bottom mx-n3 px-3 px-md-0 pt-md-4-5"
|
|
389
|
+
>
|
|
390
|
+
<div
|
|
391
|
+
class="py-3-5 px-3 px-sm-0 px-md-3"
|
|
392
|
+
>
|
|
393
|
+
<div
|
|
394
|
+
class="d-flex justify-content-between align-items-center"
|
|
395
|
+
>
|
|
396
|
+
<div
|
|
397
|
+
class="d-flex align-items-center"
|
|
398
|
+
>
|
|
399
|
+
<svg
|
|
400
|
+
class="bi icon--s"
|
|
401
|
+
>
|
|
402
|
+
<use
|
|
403
|
+
xlink:href="/icons.svg#globe2"
|
|
404
|
+
/>
|
|
405
|
+
</svg>
|
|
406
|
+
<h5
|
|
407
|
+
class="mb-0 ms-2"
|
|
408
|
+
>
|
|
409
|
+
Select your language
|
|
410
|
+
</h5>
|
|
411
|
+
</div>
|
|
412
|
+
<button
|
|
413
|
+
aria-label="Close"
|
|
414
|
+
class="btn-close"
|
|
415
|
+
data-bs-dismiss="modal"
|
|
416
|
+
type="button"
|
|
417
|
+
/>
|
|
418
|
+
</div>
|
|
419
|
+
</div>
|
|
420
|
+
</div>
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
<div
|
|
424
|
+
class="modal-body"
|
|
425
|
+
>
|
|
426
|
+
<div
|
|
427
|
+
class="bcl-language-list bcl-language-list--eu"
|
|
428
|
+
>
|
|
429
|
+
<div
|
|
430
|
+
class="main pt-4"
|
|
431
|
+
>
|
|
432
|
+
<div
|
|
433
|
+
class="container"
|
|
434
|
+
>
|
|
435
|
+
<div
|
|
436
|
+
class="pb-2"
|
|
437
|
+
>
|
|
438
|
+
<h5
|
|
439
|
+
class="mb-4"
|
|
440
|
+
>
|
|
441
|
+
EU official languages
|
|
442
|
+
</h5>
|
|
443
|
+
<div
|
|
444
|
+
class="row"
|
|
445
|
+
>
|
|
446
|
+
<div
|
|
447
|
+
class="col-12 col-md"
|
|
448
|
+
>
|
|
449
|
+
<a
|
|
450
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
451
|
+
href="/example.html#bg"
|
|
452
|
+
hreflang="bg"
|
|
453
|
+
lang="bg"
|
|
454
|
+
>
|
|
455
|
+
български
|
|
456
|
+
</a>
|
|
457
|
+
<a
|
|
458
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
459
|
+
href="/example.html#es"
|
|
460
|
+
hreflang="es"
|
|
461
|
+
lang="es"
|
|
462
|
+
>
|
|
463
|
+
español
|
|
464
|
+
</a>
|
|
465
|
+
<a
|
|
466
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
467
|
+
href="/example.html#cs"
|
|
468
|
+
hreflang="cs"
|
|
469
|
+
lang="cs"
|
|
470
|
+
>
|
|
471
|
+
čeština
|
|
472
|
+
</a>
|
|
473
|
+
<a
|
|
474
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
475
|
+
href="/example.html#da"
|
|
476
|
+
hreflang="da"
|
|
477
|
+
lang="da"
|
|
478
|
+
>
|
|
479
|
+
dansk
|
|
480
|
+
</a>
|
|
481
|
+
<a
|
|
482
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
483
|
+
href="/example.html#de"
|
|
484
|
+
hreflang="de"
|
|
485
|
+
lang="de"
|
|
486
|
+
>
|
|
487
|
+
Deutsch
|
|
488
|
+
</a>
|
|
489
|
+
<a
|
|
490
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
491
|
+
href="/example.html#et"
|
|
492
|
+
hreflang="et"
|
|
493
|
+
lang="et"
|
|
494
|
+
>
|
|
495
|
+
eesti
|
|
496
|
+
</a>
|
|
497
|
+
<a
|
|
498
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
499
|
+
href="/example.html#el"
|
|
500
|
+
hreflang="el"
|
|
501
|
+
lang="el"
|
|
502
|
+
>
|
|
503
|
+
ελληνικά
|
|
504
|
+
</a>
|
|
505
|
+
<a
|
|
506
|
+
class="w-100 mb-2-5 btn selected justify-content-between"
|
|
507
|
+
href="/example.html#en"
|
|
508
|
+
hreflang="en"
|
|
509
|
+
lang="en"
|
|
510
|
+
>
|
|
511
|
+
English
|
|
512
|
+
<svg
|
|
513
|
+
class="ms-2-5 bi icon--s"
|
|
514
|
+
>
|
|
515
|
+
<use
|
|
516
|
+
xlink:href="/icons.svg#check2"
|
|
517
|
+
/>
|
|
518
|
+
</svg>
|
|
519
|
+
</a>
|
|
520
|
+
<a
|
|
521
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
522
|
+
href="/example.html#fr"
|
|
523
|
+
hreflang="fr"
|
|
524
|
+
lang="fr"
|
|
525
|
+
>
|
|
526
|
+
français
|
|
527
|
+
</a>
|
|
528
|
+
<a
|
|
529
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
530
|
+
href="/example.html#ga"
|
|
531
|
+
hreflang="ga"
|
|
532
|
+
lang="ga"
|
|
533
|
+
>
|
|
534
|
+
Gaeilge
|
|
535
|
+
</a>
|
|
536
|
+
<a
|
|
537
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
538
|
+
href="/example.html#hr"
|
|
539
|
+
hreflang="hr"
|
|
540
|
+
lang="hr"
|
|
541
|
+
>
|
|
542
|
+
hrvatski
|
|
543
|
+
</a>
|
|
544
|
+
<a
|
|
545
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
546
|
+
href="/example.html#it"
|
|
547
|
+
hreflang="it"
|
|
548
|
+
lang="it"
|
|
549
|
+
>
|
|
550
|
+
italiano
|
|
551
|
+
</a>
|
|
552
|
+
</div>
|
|
553
|
+
<div
|
|
554
|
+
class="col-12 col-md"
|
|
555
|
+
>
|
|
556
|
+
<a
|
|
557
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
558
|
+
href="/example.html#lv"
|
|
559
|
+
hreflang="lv"
|
|
560
|
+
lang="lv"
|
|
561
|
+
>
|
|
562
|
+
latviešu
|
|
563
|
+
</a>
|
|
564
|
+
<a
|
|
565
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
566
|
+
href="/example.html#lt"
|
|
567
|
+
hreflang="lt"
|
|
568
|
+
lang="lt"
|
|
569
|
+
>
|
|
570
|
+
lietuvių
|
|
571
|
+
</a>
|
|
572
|
+
<a
|
|
573
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
574
|
+
href="/example.html#hu"
|
|
575
|
+
hreflang="hu"
|
|
576
|
+
lang="hu"
|
|
577
|
+
>
|
|
578
|
+
magyar
|
|
579
|
+
</a>
|
|
580
|
+
<a
|
|
581
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
582
|
+
href="/example.html#mt"
|
|
583
|
+
hreflang="mt"
|
|
584
|
+
lang="mt"
|
|
585
|
+
>
|
|
586
|
+
Malti
|
|
587
|
+
</a>
|
|
588
|
+
<a
|
|
589
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
590
|
+
href="/example.html#nl"
|
|
591
|
+
hreflang="nl"
|
|
592
|
+
lang="nl"
|
|
593
|
+
>
|
|
594
|
+
Nederlands
|
|
595
|
+
</a>
|
|
596
|
+
<a
|
|
597
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
598
|
+
href="/example.html#pl"
|
|
599
|
+
hreflang="pl"
|
|
600
|
+
lang="pl"
|
|
601
|
+
>
|
|
602
|
+
polski
|
|
603
|
+
</a>
|
|
604
|
+
<a
|
|
605
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
606
|
+
href="/example.html#pt"
|
|
607
|
+
hreflang="pt"
|
|
608
|
+
lang="pt"
|
|
609
|
+
>
|
|
610
|
+
português
|
|
611
|
+
</a>
|
|
612
|
+
<a
|
|
613
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
614
|
+
href="/example.html#ro"
|
|
615
|
+
hreflang="ro"
|
|
616
|
+
lang="ro"
|
|
617
|
+
>
|
|
618
|
+
română
|
|
619
|
+
</a>
|
|
620
|
+
<a
|
|
621
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
622
|
+
href="/example.html#sk"
|
|
623
|
+
hreflang="sk"
|
|
624
|
+
lang="sk"
|
|
625
|
+
>
|
|
626
|
+
slovenčina
|
|
627
|
+
</a>
|
|
628
|
+
<a
|
|
629
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
630
|
+
href="/example.html#sl"
|
|
631
|
+
hreflang="sl"
|
|
632
|
+
lang="sl"
|
|
633
|
+
>
|
|
634
|
+
slovenščina
|
|
635
|
+
</a>
|
|
636
|
+
<a
|
|
637
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
638
|
+
href="/example.html#fi"
|
|
639
|
+
hreflang="fi"
|
|
640
|
+
lang="fi"
|
|
641
|
+
>
|
|
642
|
+
suomi
|
|
643
|
+
</a>
|
|
644
|
+
<a
|
|
645
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
646
|
+
href="/example.html#sv"
|
|
647
|
+
hreflang="sv"
|
|
648
|
+
lang="sv"
|
|
649
|
+
>
|
|
650
|
+
svenska
|
|
651
|
+
</a>
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
<div
|
|
656
|
+
class="pb-2"
|
|
657
|
+
>
|
|
658
|
+
<h5
|
|
659
|
+
class="mb-4"
|
|
660
|
+
>
|
|
661
|
+
Other languages
|
|
662
|
+
</h5>
|
|
663
|
+
<div
|
|
664
|
+
class="row"
|
|
665
|
+
>
|
|
666
|
+
<div
|
|
667
|
+
class="col-12 col-md"
|
|
668
|
+
>
|
|
669
|
+
<a
|
|
670
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
671
|
+
href="/example.html#zh"
|
|
672
|
+
hreflang="zh"
|
|
673
|
+
lang="zh"
|
|
674
|
+
>
|
|
675
|
+
中文
|
|
676
|
+
</a>
|
|
677
|
+
<a
|
|
678
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
679
|
+
href="/example.html#tr"
|
|
680
|
+
hreflang="tr"
|
|
681
|
+
lang="tr"
|
|
682
|
+
>
|
|
683
|
+
Türk
|
|
684
|
+
</a>
|
|
685
|
+
<a
|
|
686
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
687
|
+
href="/example.html#ru"
|
|
688
|
+
hreflang="ru"
|
|
689
|
+
lang="ru"
|
|
690
|
+
>
|
|
691
|
+
pусский
|
|
692
|
+
</a>
|
|
693
|
+
</div>
|
|
694
|
+
<div
|
|
695
|
+
class="col-12 col-md"
|
|
696
|
+
>
|
|
697
|
+
<a
|
|
698
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
699
|
+
href="/example.html#ca"
|
|
700
|
+
hreflang="ca"
|
|
701
|
+
lang="ca"
|
|
702
|
+
>
|
|
703
|
+
Català
|
|
704
|
+
</a>
|
|
705
|
+
<a
|
|
706
|
+
class="w-100 mb-2-5 btn justify-content-start"
|
|
707
|
+
href="#"
|
|
708
|
+
hreflang="ar"
|
|
709
|
+
lang="ar"
|
|
710
|
+
>
|
|
711
|
+
عَرَبِيّ
|
|
712
|
+
</a>
|
|
713
|
+
</div>
|
|
714
|
+
</div>
|
|
715
|
+
</div>
|
|
716
|
+
</div>
|
|
717
|
+
</div>
|
|
718
|
+
</div>
|
|
719
|
+
</div>
|
|
720
|
+
</div>
|
|
721
|
+
</div>
|
|
722
|
+
</div>
|
|
723
|
+
<main>
|
|
724
|
+
<div
|
|
725
|
+
class="bcl-content-banner pb-md-4-75 pb-4 pt-4 pt-md-4-75 bg-lighter"
|
|
726
|
+
>
|
|
727
|
+
<div
|
|
728
|
+
class="container"
|
|
729
|
+
>
|
|
730
|
+
<article
|
|
731
|
+
class="bg-transparent border-0 card"
|
|
732
|
+
>
|
|
733
|
+
<div
|
|
734
|
+
class="row"
|
|
735
|
+
>
|
|
736
|
+
<div
|
|
737
|
+
class="bcl-card-start-col bcl-size-large"
|
|
738
|
+
>
|
|
739
|
+
<img
|
|
740
|
+
alt="alt img"
|
|
741
|
+
class="card-img-top rounded-1"
|
|
742
|
+
src="https://picsum.photos/255/255?random=6"
|
|
743
|
+
/>
|
|
744
|
+
</div>
|
|
745
|
+
<div
|
|
746
|
+
class="col-md col-xl-9 col-xxl-8"
|
|
747
|
+
>
|
|
748
|
+
<div
|
|
749
|
+
class="card-body pt-4 pt-md-0 px-0 px-md-1-5 pb-0"
|
|
750
|
+
>
|
|
751
|
+
<h1
|
|
752
|
+
class="fs-1 card-title bcl-heading"
|
|
753
|
+
>
|
|
754
|
+
This is the title of this page
|
|
755
|
+
</h1>
|
|
756
|
+
<div
|
|
757
|
+
class="my-3"
|
|
758
|
+
>
|
|
759
|
+
<span
|
|
760
|
+
class="text-muted me-3"
|
|
761
|
+
>
|
|
762
|
+
17 October 2019
|
|
763
|
+
</span>
|
|
764
|
+
</div>
|
|
765
|
+
<p>
|
|
766
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
767
|
+
<br />
|
|
768
|
+
Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa.
|
|
769
|
+
<br />
|
|
770
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
771
|
+
<br />
|
|
772
|
+
<br />
|
|
773
|
+
Duis fermentum facilisis ex, ac porta massa.
|
|
774
|
+
</p>
|
|
775
|
+
<div
|
|
776
|
+
class="mt-2-5"
|
|
777
|
+
>
|
|
778
|
+
<span
|
|
779
|
+
class="mb-2 me-2 badge rounded-pill badge-outline-primary"
|
|
780
|
+
>
|
|
781
|
+
Category 1
|
|
782
|
+
</span>
|
|
783
|
+
<span
|
|
784
|
+
class="mb-2 badge rounded-pill badge-outline-primary"
|
|
785
|
+
>
|
|
786
|
+
Category 2
|
|
787
|
+
</span>
|
|
788
|
+
</div>
|
|
789
|
+
</div>
|
|
790
|
+
</div>
|
|
791
|
+
</div>
|
|
792
|
+
</article>
|
|
793
|
+
<div
|
|
794
|
+
class="d-flex justify-content-end mt-2 align-items-center"
|
|
795
|
+
>
|
|
796
|
+
<button
|
|
797
|
+
class="me-3 btn btn-outline-primary btn-md"
|
|
798
|
+
type="button"
|
|
799
|
+
>
|
|
800
|
+
<svg
|
|
801
|
+
class="me-2-5 bi icon--fluid"
|
|
802
|
+
>
|
|
803
|
+
<use
|
|
804
|
+
xlink:href="/icons.svg#printer-fill"
|
|
805
|
+
/>
|
|
806
|
+
</svg>
|
|
807
|
+
Print
|
|
808
|
+
</button>
|
|
809
|
+
<button
|
|
810
|
+
class="btn btn-outline-primary btn-md"
|
|
811
|
+
data-bs-target="#subscribeModal"
|
|
812
|
+
data-bs-toggle="modal"
|
|
813
|
+
type="button"
|
|
814
|
+
>
|
|
815
|
+
<svg
|
|
816
|
+
class="me-2-5 bi icon--fluid"
|
|
817
|
+
>
|
|
818
|
+
<use
|
|
819
|
+
xlink:href="/icons.svg#envelope-fill"
|
|
820
|
+
/>
|
|
821
|
+
</svg>
|
|
822
|
+
Subscribe
|
|
823
|
+
</button>
|
|
824
|
+
</div>
|
|
825
|
+
</div>
|
|
826
|
+
</div>
|
|
827
|
+
<div
|
|
828
|
+
class="container mt-md-4-75 mt-4"
|
|
829
|
+
>
|
|
830
|
+
<div
|
|
831
|
+
class="row"
|
|
832
|
+
>
|
|
833
|
+
<div
|
|
834
|
+
class="col-12 bcl-sidebar col-lg-3"
|
|
835
|
+
>
|
|
836
|
+
<nav
|
|
837
|
+
class="bcl-inpage-navigation position-sticky"
|
|
838
|
+
id="bcl-inpage-navigation"
|
|
839
|
+
>
|
|
840
|
+
<h2
|
|
841
|
+
class="mb-0 bcl-heading"
|
|
842
|
+
>
|
|
843
|
+
Page content
|
|
844
|
+
</h2>
|
|
845
|
+
<ul
|
|
846
|
+
class="nav nav-pills flex-column"
|
|
847
|
+
>
|
|
848
|
+
<li
|
|
849
|
+
class="nav-item"
|
|
850
|
+
>
|
|
851
|
+
<a
|
|
852
|
+
class="nav-link"
|
|
853
|
+
href="#content"
|
|
854
|
+
>
|
|
855
|
+
Content
|
|
856
|
+
</a>
|
|
857
|
+
</li>
|
|
858
|
+
<li
|
|
859
|
+
class="nav-item"
|
|
860
|
+
>
|
|
861
|
+
<a
|
|
862
|
+
class="nav-link"
|
|
863
|
+
href="#subheading"
|
|
864
|
+
>
|
|
865
|
+
Subheading
|
|
866
|
+
</a>
|
|
867
|
+
</li>
|
|
868
|
+
</ul>
|
|
869
|
+
</nav>
|
|
870
|
+
</div>
|
|
871
|
+
<div
|
|
872
|
+
class="col-12 col-lg-9 col-xxl-8"
|
|
873
|
+
>
|
|
874
|
+
<p
|
|
875
|
+
id="content"
|
|
876
|
+
>
|
|
877
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper, a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet, posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel. Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
|
|
878
|
+
</p>
|
|
879
|
+
<p>
|
|
880
|
+
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras facilisis enim non nisi hendrerit laoreet. Vestibulum id facilisis augue, vitae faucibus justo. Etiam congue malesuada urna vitae suscipit. Mauris a varius leo. Nulla vel facilisis lacus. Suspendisse semper velit sit amet purus egestas, sit amet ullamcorper enim egestas. Vestibulum at lacus at purus ornare auctor nec consequat velit. Pellentesque iaculis sit amet nulla at rutrum.
|
|
881
|
+
</p>
|
|
882
|
+
<ul>
|
|
883
|
+
<li>
|
|
884
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
885
|
+
</li>
|
|
886
|
+
<li>
|
|
887
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
888
|
+
</li>
|
|
889
|
+
<li>
|
|
890
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
891
|
+
</li>
|
|
892
|
+
</ul>
|
|
893
|
+
<h2
|
|
894
|
+
class="my-4"
|
|
895
|
+
id="subheading"
|
|
896
|
+
>
|
|
897
|
+
Sub heading
|
|
898
|
+
</h2>
|
|
899
|
+
<p>
|
|
900
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
901
|
+
<br />
|
|
902
|
+
Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa.
|
|
903
|
+
<br />
|
|
904
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa.
|
|
905
|
+
</p>
|
|
906
|
+
<p>
|
|
907
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
908
|
+
<br />
|
|
909
|
+
Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa.
|
|
910
|
+
<br />
|
|
911
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
912
|
+
<br />
|
|
913
|
+
<br />
|
|
914
|
+
Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa.
|
|
915
|
+
<br />
|
|
916
|
+
</p>
|
|
917
|
+
<div
|
|
918
|
+
class="bcl-subscription-block text-bg-light px-4-5 pt-4 pb-4-5"
|
|
919
|
+
>
|
|
920
|
+
<div
|
|
921
|
+
class="fs-2 fw-normal"
|
|
922
|
+
>
|
|
923
|
+
Subscribe
|
|
924
|
+
</div>
|
|
925
|
+
<p
|
|
926
|
+
class="fw-bold"
|
|
927
|
+
>
|
|
928
|
+
Get notified lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
929
|
+
</p>
|
|
930
|
+
<div
|
|
931
|
+
class="pb-2"
|
|
932
|
+
>
|
|
933
|
+
<button
|
|
934
|
+
class="btn btn-secondary btn-lg"
|
|
935
|
+
data-bs-target="#subscribeModal"
|
|
936
|
+
data-bs-toggle="modal"
|
|
937
|
+
type="button"
|
|
938
|
+
>
|
|
939
|
+
Subscribe
|
|
940
|
+
<svg
|
|
941
|
+
class="ms-2-5 bi icon--fluid"
|
|
942
|
+
>
|
|
943
|
+
<use
|
|
944
|
+
xlink:href="/icons.svg#chevron-right"
|
|
945
|
+
/>
|
|
946
|
+
</svg>
|
|
947
|
+
</button>
|
|
948
|
+
</div>
|
|
949
|
+
</div>
|
|
950
|
+
<div
|
|
951
|
+
aria-hidden="true"
|
|
952
|
+
aria-label="subscribeModalLabel"
|
|
953
|
+
class="modal fade"
|
|
954
|
+
id="subscribeModal"
|
|
955
|
+
tabindex="-1"
|
|
956
|
+
>
|
|
957
|
+
<div
|
|
958
|
+
class="modal-dialog"
|
|
959
|
+
>
|
|
960
|
+
<div
|
|
961
|
+
class="modal-content"
|
|
962
|
+
>
|
|
963
|
+
<div
|
|
964
|
+
class="modal-header"
|
|
965
|
+
>
|
|
966
|
+
<div
|
|
967
|
+
class="modal-title fs-5 fw-medium"
|
|
968
|
+
>
|
|
969
|
+
Subscribe
|
|
970
|
+
</div>
|
|
971
|
+
<button
|
|
972
|
+
aria-label="Close"
|
|
973
|
+
class="btn-close"
|
|
974
|
+
data-bs-dismiss="modal"
|
|
975
|
+
type="button"
|
|
976
|
+
/>
|
|
977
|
+
</div>
|
|
978
|
+
<div
|
|
979
|
+
class="success-alert d-none mb-0 alert alert-success d-flex align-items-center fade show text-dark"
|
|
980
|
+
role="alert"
|
|
981
|
+
>
|
|
982
|
+
<svg
|
|
983
|
+
class="flex-shrink-0 me-3 mt-1 align-self-start text-success bi icon--s"
|
|
984
|
+
>
|
|
985
|
+
<use
|
|
986
|
+
xlink:href="/icons.svg#check-circle-fill"
|
|
987
|
+
/>
|
|
988
|
+
</svg>
|
|
989
|
+
<div
|
|
990
|
+
class="alert-content flex-grow-1"
|
|
991
|
+
>
|
|
992
|
+
<div
|
|
993
|
+
class="alert-heading h4"
|
|
994
|
+
>
|
|
995
|
+
Thank you!
|
|
996
|
+
</div>
|
|
997
|
+
Your subscription has been successfully registered. You can now close this dialog.
|
|
998
|
+
</div>
|
|
999
|
+
</div>
|
|
1000
|
+
<div
|
|
1001
|
+
class="error-alert d-none mb-0 alert alert-danger d-flex align-items-center fade show text-dark"
|
|
1002
|
+
role="alert"
|
|
1003
|
+
>
|
|
1004
|
+
<svg
|
|
1005
|
+
class="flex-shrink-0 me-3 mt-1 align-self-start text-danger bi icon--s"
|
|
1006
|
+
>
|
|
1007
|
+
<use
|
|
1008
|
+
xlink:href="/icons.svg#dash-circle-fill"
|
|
1009
|
+
/>
|
|
1010
|
+
</svg>
|
|
1011
|
+
<div
|
|
1012
|
+
class="alert-content flex-grow-1"
|
|
1013
|
+
>
|
|
1014
|
+
<div
|
|
1015
|
+
class="alert-heading h4"
|
|
1016
|
+
>
|
|
1017
|
+
Sorry!
|
|
1018
|
+
</div>
|
|
1019
|
+
There was an error!
|
|
1020
|
+
<hr
|
|
1021
|
+
class="d-none d-md-block"
|
|
1022
|
+
/>
|
|
1023
|
+
<p
|
|
1024
|
+
class="d-none d-md-block mb-0"
|
|
1025
|
+
>
|
|
1026
|
+
Please verify your e-mail address and agree with the privacy statement.
|
|
1027
|
+
</p>
|
|
1028
|
+
</div>
|
|
1029
|
+
</div>
|
|
1030
|
+
<div
|
|
1031
|
+
class="modal-body"
|
|
1032
|
+
>
|
|
1033
|
+
<form
|
|
1034
|
+
class="needs-validation"
|
|
1035
|
+
novalidate="true"
|
|
1036
|
+
onsubmit="return false;"
|
|
1037
|
+
>
|
|
1038
|
+
<fieldset>
|
|
1039
|
+
<legend
|
|
1040
|
+
class="h6 fw-normal mb-0"
|
|
1041
|
+
>
|
|
1042
|
+
<p>
|
|
1043
|
+
Please enter your information & preference to receive the wished information in your mailbox. Your email will not be shared with anyone.
|
|
1044
|
+
</p>
|
|
1045
|
+
</legend>
|
|
1046
|
+
</fieldset>
|
|
1047
|
+
<div
|
|
1048
|
+
class="mb-3"
|
|
1049
|
+
>
|
|
1050
|
+
<label
|
|
1051
|
+
class="form-label"
|
|
1052
|
+
>
|
|
1053
|
+
E-mail
|
|
1054
|
+
</label>
|
|
1055
|
+
<input
|
|
1056
|
+
class="form-control"
|
|
1057
|
+
placeholder="Type in your e-mail address"
|
|
1058
|
+
required="true"
|
|
1059
|
+
type="email"
|
|
1060
|
+
/>
|
|
1061
|
+
<div
|
|
1062
|
+
class="invalid-feedback"
|
|
1063
|
+
>
|
|
1064
|
+
Please enter a valid e-mail address
|
|
1065
|
+
</div>
|
|
1066
|
+
</div>
|
|
1067
|
+
<div
|
|
1068
|
+
class="mb-3"
|
|
1069
|
+
>
|
|
1070
|
+
<label
|
|
1071
|
+
class="form-label"
|
|
1072
|
+
for="language-select"
|
|
1073
|
+
>
|
|
1074
|
+
Languages
|
|
1075
|
+
</label>
|
|
1076
|
+
<select
|
|
1077
|
+
class="form-select"
|
|
1078
|
+
id="language-select"
|
|
1079
|
+
required="true"
|
|
1080
|
+
>
|
|
1081
|
+
<option
|
|
1082
|
+
disabled=""
|
|
1083
|
+
hidden=""
|
|
1084
|
+
selected=""
|
|
1085
|
+
value=""
|
|
1086
|
+
>
|
|
1087
|
+
Please select a language
|
|
1088
|
+
</option>
|
|
1089
|
+
<option
|
|
1090
|
+
value="1"
|
|
1091
|
+
>
|
|
1092
|
+
a select option
|
|
1093
|
+
</option>
|
|
1094
|
+
<option
|
|
1095
|
+
value="2"
|
|
1096
|
+
>
|
|
1097
|
+
another select option
|
|
1098
|
+
</option>
|
|
1099
|
+
<option
|
|
1100
|
+
value="3"
|
|
1101
|
+
>
|
|
1102
|
+
another option
|
|
1103
|
+
</option>
|
|
1104
|
+
<option
|
|
1105
|
+
value="4"
|
|
1106
|
+
>
|
|
1107
|
+
last option
|
|
1108
|
+
</option>
|
|
1109
|
+
</select>
|
|
1110
|
+
<div
|
|
1111
|
+
class="invalid-feedback"
|
|
1112
|
+
>
|
|
1113
|
+
Please select a language
|
|
1114
|
+
</div>
|
|
1115
|
+
</div>
|
|
1116
|
+
<div
|
|
1117
|
+
class="mb-3"
|
|
1118
|
+
>
|
|
1119
|
+
<div
|
|
1120
|
+
class="form-check"
|
|
1121
|
+
>
|
|
1122
|
+
<input
|
|
1123
|
+
class="form-check-input"
|
|
1124
|
+
id="exampleInputCheck1"
|
|
1125
|
+
required="true"
|
|
1126
|
+
type="checkbox"
|
|
1127
|
+
/>
|
|
1128
|
+
<label
|
|
1129
|
+
class="form-check-label"
|
|
1130
|
+
for="exampleInputCheck1"
|
|
1131
|
+
>
|
|
1132
|
+
By checking this box, I confirm that I want to register for this service, and I agree with the
|
|
1133
|
+
<a
|
|
1134
|
+
href="/example.html"
|
|
1135
|
+
>
|
|
1136
|
+
privacy statement
|
|
1137
|
+
</a>
|
|
1138
|
+
</label>
|
|
1139
|
+
<div
|
|
1140
|
+
class="invalid-feedback"
|
|
1141
|
+
>
|
|
1142
|
+
Please check the required checkbox.
|
|
1143
|
+
</div>
|
|
1144
|
+
</div>
|
|
1145
|
+
</div>
|
|
1146
|
+
</form>
|
|
1147
|
+
</div>
|
|
1148
|
+
<div
|
|
1149
|
+
class="modal-footer"
|
|
1150
|
+
>
|
|
1151
|
+
<div
|
|
1152
|
+
class="text-align-end"
|
|
1153
|
+
>
|
|
1154
|
+
<button
|
|
1155
|
+
class="btn btn-light"
|
|
1156
|
+
data-bs-dismiss="modal"
|
|
1157
|
+
>
|
|
1158
|
+
Close
|
|
1159
|
+
</button>
|
|
1160
|
+
<button
|
|
1161
|
+
class="btn btn-primary form-submit ms-4"
|
|
1162
|
+
>
|
|
1163
|
+
Subscribe now
|
|
1164
|
+
</button>
|
|
1165
|
+
</div>
|
|
1166
|
+
</div>
|
|
1167
|
+
</div>
|
|
1168
|
+
</div>
|
|
1169
|
+
</div>
|
|
1170
|
+
</div>
|
|
1171
|
+
</div>
|
|
1172
|
+
</div>
|
|
1173
|
+
</main>
|
|
1174
|
+
<footer
|
|
1175
|
+
class="mt-md-4-75 mt-4 bcl-footer bcl-footer--neutral"
|
|
1176
|
+
>
|
|
1177
|
+
<div
|
|
1178
|
+
class="container"
|
|
1179
|
+
>
|
|
1180
|
+
<div
|
|
1181
|
+
class="pt-4 pt-lg-5 row"
|
|
1182
|
+
>
|
|
1183
|
+
<div
|
|
1184
|
+
class="col-12 col-lg-4"
|
|
1185
|
+
>
|
|
1186
|
+
<p
|
|
1187
|
+
class="fw-bold mb-2"
|
|
1188
|
+
>
|
|
1189
|
+
[Project name]
|
|
1190
|
+
</p>
|
|
1191
|
+
<p>
|
|
1192
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum facilisis ex, ac porta massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
1193
|
+
<br />
|
|
1194
|
+
Duis fermentum facilisis ex, ac porta massa.
|
|
1195
|
+
</p>
|
|
1196
|
+
</div>
|
|
1197
|
+
<div
|
|
1198
|
+
class="col-12 col-lg-4 pb-4 pb-lg-0"
|
|
1199
|
+
>
|
|
1200
|
+
<p
|
|
1201
|
+
class="fw-bold border-bottom pb-2 mb-2"
|
|
1202
|
+
>
|
|
1203
|
+
Contact [project name]
|
|
1204
|
+
</p>
|
|
1205
|
+
<p>
|
|
1206
|
+
Contact information of the DG
|
|
1207
|
+
</p>
|
|
1208
|
+
<p
|
|
1209
|
+
class="fw-bold border-bottom pb-2 mt-3 mb-2"
|
|
1210
|
+
>
|
|
1211
|
+
Follow us on social media
|
|
1212
|
+
</p>
|
|
1213
|
+
<div
|
|
1214
|
+
class="mb-1"
|
|
1215
|
+
>
|
|
1216
|
+
<a
|
|
1217
|
+
class="standalone"
|
|
1218
|
+
href="/example.html"
|
|
1219
|
+
>
|
|
1220
|
+
<svg
|
|
1221
|
+
class="me-2-5 bi icon--xs"
|
|
1222
|
+
>
|
|
1223
|
+
<use
|
|
1224
|
+
xlink:href="/icons.svg#facebook"
|
|
1225
|
+
/>
|
|
1226
|
+
</svg>
|
|
1227
|
+
Facebook
|
|
1228
|
+
</a>
|
|
1229
|
+
</div>
|
|
1230
|
+
<div
|
|
1231
|
+
class="mb-1"
|
|
1232
|
+
>
|
|
1233
|
+
<a
|
|
1234
|
+
class="standalone"
|
|
1235
|
+
href="/example.html"
|
|
1236
|
+
>
|
|
1237
|
+
<svg
|
|
1238
|
+
class="me-2-5 bi icon--xs"
|
|
1239
|
+
>
|
|
1240
|
+
<use
|
|
1241
|
+
xlink:href="/icons.svg#twitter"
|
|
1242
|
+
/>
|
|
1243
|
+
</svg>
|
|
1244
|
+
Twitter
|
|
1245
|
+
</a>
|
|
1246
|
+
</div>
|
|
1247
|
+
<div
|
|
1248
|
+
class="mb-1"
|
|
1249
|
+
>
|
|
1250
|
+
<a
|
|
1251
|
+
class="standalone"
|
|
1252
|
+
href="/example.html"
|
|
1253
|
+
>
|
|
1254
|
+
<svg
|
|
1255
|
+
class="me-2-5 bi icon--xs"
|
|
1256
|
+
>
|
|
1257
|
+
<use
|
|
1258
|
+
xlink:href="/icons.svg#linkedin"
|
|
1259
|
+
/>
|
|
1260
|
+
</svg>
|
|
1261
|
+
Linkedin
|
|
1262
|
+
</a>
|
|
1263
|
+
</div>
|
|
1264
|
+
</div>
|
|
1265
|
+
<div
|
|
1266
|
+
class="col-12 col-lg-4"
|
|
1267
|
+
>
|
|
1268
|
+
<p
|
|
1269
|
+
class="fw-bold border-bottom pb-2 mb-2"
|
|
1270
|
+
>
|
|
1271
|
+
About us
|
|
1272
|
+
</p>
|
|
1273
|
+
<p>
|
|
1274
|
+
Information about the DG
|
|
1275
|
+
</p>
|
|
1276
|
+
<p
|
|
1277
|
+
class="fw-bold border-bottom pb-2 mb-2"
|
|
1278
|
+
>
|
|
1279
|
+
Optional links
|
|
1280
|
+
</p>
|
|
1281
|
+
<div
|
|
1282
|
+
class="mb-1"
|
|
1283
|
+
>
|
|
1284
|
+
<a
|
|
1285
|
+
class="standalone"
|
|
1286
|
+
href="/example.html"
|
|
1287
|
+
>
|
|
1288
|
+
Link
|
|
1289
|
+
</a>
|
|
1290
|
+
</div>
|
|
1291
|
+
<div
|
|
1292
|
+
class="mb-1"
|
|
1293
|
+
>
|
|
1294
|
+
<a
|
|
1295
|
+
class="standalone"
|
|
1296
|
+
href="/example.html"
|
|
1297
|
+
>
|
|
1298
|
+
Link
|
|
1299
|
+
</a>
|
|
1300
|
+
</div>
|
|
1301
|
+
<div
|
|
1302
|
+
class="mb-1"
|
|
1303
|
+
>
|
|
1304
|
+
<a
|
|
1305
|
+
class="standalone"
|
|
1306
|
+
href="/example.html"
|
|
1307
|
+
>
|
|
1308
|
+
Link
|
|
1309
|
+
</a>
|
|
1310
|
+
</div>
|
|
1311
|
+
<div
|
|
1312
|
+
class="mb-1"
|
|
1313
|
+
>
|
|
1314
|
+
<a
|
|
1315
|
+
class="standalone"
|
|
1316
|
+
href="/example.html"
|
|
1317
|
+
>
|
|
1318
|
+
Link
|
|
1319
|
+
</a>
|
|
1320
|
+
</div>
|
|
1321
|
+
</div>
|
|
1322
|
+
</div>
|
|
1323
|
+
<div
|
|
1324
|
+
class="pb-4 pb-lg-5 mt-4 mt-lg-5 bcl-footer__bordered-row row"
|
|
1325
|
+
>
|
|
1326
|
+
<div
|
|
1327
|
+
class="col-12 col-lg-4"
|
|
1328
|
+
>
|
|
1329
|
+
<p
|
|
1330
|
+
class="fw-bold pb-2 mb-2"
|
|
1331
|
+
>
|
|
1332
|
+
More information on:
|
|
1333
|
+
</p>
|
|
1334
|
+
<div
|
|
1335
|
+
class="mb-1"
|
|
1336
|
+
>
|
|
1337
|
+
<a
|
|
1338
|
+
class="standalone"
|
|
1339
|
+
href="/example.html"
|
|
1340
|
+
>
|
|
1341
|
+
Link
|
|
1342
|
+
</a>
|
|
1343
|
+
</div>
|
|
1344
|
+
<div
|
|
1345
|
+
class="mb-1"
|
|
1346
|
+
>
|
|
1347
|
+
<a
|
|
1348
|
+
class="standalone"
|
|
1349
|
+
href="/example.html"
|
|
1350
|
+
>
|
|
1351
|
+
Link
|
|
1352
|
+
</a>
|
|
1353
|
+
</div>
|
|
1354
|
+
<div
|
|
1355
|
+
class="mb-1"
|
|
1356
|
+
>
|
|
1357
|
+
<a
|
|
1358
|
+
class="standalone"
|
|
1359
|
+
href="/example.html"
|
|
1360
|
+
>
|
|
1361
|
+
Link
|
|
1362
|
+
</a>
|
|
1363
|
+
</div>
|
|
1364
|
+
<div
|
|
1365
|
+
class="mb-1"
|
|
1366
|
+
>
|
|
1367
|
+
<a
|
|
1368
|
+
class="standalone"
|
|
1369
|
+
href="/example.html"
|
|
1370
|
+
>
|
|
1371
|
+
Link
|
|
1372
|
+
</a>
|
|
1373
|
+
</div>
|
|
1374
|
+
</div>
|
|
1375
|
+
</div>
|
|
1376
|
+
</div>
|
|
1377
|
+
</footer>
|
|
1378
|
+
</jest>
|
|
1379
|
+
`;
|