-
Notifications
You must be signed in to change notification settings - Fork 0
/
congo-voorbereiden.html
99 lines (93 loc) · 5.28 KB
/
congo-voorbereiden.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Congo voorbereiden - Blood in the Mobile</title>
<!-- Import css -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,800;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/css/style.min.css">
<link rel="stylesheet" href="/assets/css/deel-2/congo-voorbereiden.min.css">
</head>
<body>
<div class="scroll">
<div id="js--background" class="background">
<section id="js--water_bottle" class="water-bottle" onclick="show_info_box('bottle')">
<img src="/assets/img/icons/water-bottle.webp"alt="waterflesje">
<div id="item_box--water_bottle" class="item_box">
<p>In een warm lang als Congo is het heel belangrijk om goed te blijven drinken.</p>
<button type="button" class="button button--add-to-backpack" onclick="add_to_backpack('bottle')">
<p>In rugzak</p>
</button>
</div>
</section>
<section id="js--lantern" class="lantern" onclick="show_info_box('lantern')">
<img src="/assets/img/icons/lantern.webp" alt="zaklamp">
<div id="item_box--lantern" class="item_box">
<p>In de mijn is het behoorlijk donker, een onmisbaar item dus.</p>
<button type="button" class="button button--add-to-backpack" onclick="add_to_backpack('lantern')">
<p>In rugzak</p>
</button>
</div>
</section>
<section id="js--map" class="map" onclick="show_info_box('map')">
<img src="/assets/img/icons/map.webp" alt="een landkaart">
<div id="item_box--map" class="item_box">
<p>GPS ontvangst is in Congo niet zoals we gewend zijn, een kaart bied dan zeker uitkomst</p>
<button type="button" class="button button--add-to-backpack" onclick="add_to_backpack('map')">
<p>In rugzak</p>
</button>
</div>
</section>
<section id="js--money" class="money" onclick="show_info_box('money')">
<img src="/assets/img/icons/money.webp" alt="geld">
<div id="item_box--money" class="item_box">
<p>Op de wegen in Congo vind je veel "roadblocks" of "checkpoints", van gewapende rebellen groepen. Alleen wanneer je hun geld betaald laten ze je door.</p>
<button type="button" class="button button--add-to-backpack" onclick="add_to_backpack('money')">
<p>In rugzak</p>
</button>
</div>
</section>
<section id="js--pocket_knife" class="pocket-knife" onclick="show_info_box('knife')">
<img src="/assets/img/icons/pocket-knife.webp" alt="zwitsers zakmes">
<div id="item_box--pocket_knife" class="item_box">
<p>Het kan gebeuren dan je tijdens de reis ergens vast komt te zitten met een voertuig, dan komt een zakmes altijd van pas.</p>
<button type="button" class="button button--add-to-backpack" onclick="add_to_backpack('knife')">
<p>In rugzak</p>
</button>
</div>
</section>
</div>
</div>
<!-- Backpack -->
<section>
<img id="js--backpack" class="backpack__image" src="/assets/img/icons/backpack.webp" alt="rugzak">
<div id="backpack__count">
<p id="backpack__count_number"></p>
</div>
</section>
<!-- Info box with instructions -->
<section class="section__container">
<section id="js--textbox_info" class="section__textbox">
<h2>Je bent aangekomen in Congo!</h2>
<p>Om de reis naar de mijn zo goed mogelijk te laten verlopen, is het handig om nog wat spullen in te slaan. Je weet maar nooit wat je nodig hebt...</p>
</section>
</section>
<!-- Complete message -->
<section id="section__adventure-guy">
<div class="section__adventure-guy__container">
<h1>Klaar om op pad te gaan!</h1>
<p>Alles wat ingeslagen moest worden is gedaan, tijd om richting de mijn te gaan.</p>
<button class="button__light button__light--size" type="button" name="button" onclick="location.href='congo-opweg.html'">
Stap in een auto
</button>
</div>
<picture>
<img class="section__adventure-guy__image" src="/assets/img/adventure.webp" alt="Persoon die op avontuur is">
</picture>
</section>
<!-- JS Scripts import -->
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/deel-2/congo-voorbereiden.min.js"></script>
</body>
</html>