forked from fdnd-task/fix-the-flow-interactive-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (90 loc) · 4.25 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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<title>Brain</title>
</head>
<body>
<div class="homepage">
<nav>
<img src="assets/logo_spatwater.png" alt="logo">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Over ons</a></li>
<li><a href="">Het Probleem</a></li>
<li><a href="">De oplossing</a></li>
<li><a href="">Product</a></li>
<li class="contact-button"><a href="">Contact</a></li>
</ul>
</nav>
<div class="homepage__content">
<div class="col">
<h1>Brain</h1>
<h2>Ontdekt de stroom van slim watergebruik</h2>
<div class="buttons">
<button class="button">Over ons</button>
<button class="button">Contact</button>
</div>
</div>
<div class="col">
<img src="assets/istockphoto-621472222-612x612 regenton.jpg" class="homecontent" alt="regenton">
<hr>
</div>
<!--Sectie over spatwater-->
<div class="Over_ons">
<h2>Over Ons</h2>
<p>
Klimaatverandering heeft geleid tot meer droogte en wateroverlast door intense buien. Ons riool kan dit vaak niet aan, met als gevolg wateroverlast en vervuild rioolwater in ons kwetsbare oppervlaktewater.
Het is tijd om ons regenwater massaal vast te houden en te hergebruiken. Een simpele stap zoals het installeren van een regenton kan al enorm helpen. Bijvoorbeeld, door een (kleine) regenton van 100 liter te gebruiken en deze tien keer per jaar in je tuin of bedrijventerrein leeg te maken, ontlasten we ons riool met 1.5 miljard liter water per jaar!
Wil je weten hoe je dit proces kunt automatiseren? Ontdek hier slimme oplossingen voor het efficiënt omgaan met regenwater!
</p>
</div>
<!--Sectie over het probleem-->
<div class="Columns">
<div class="row flex-container">
<div class="column">Waterkwaliteit</div>
<div class="column">Projecten</div>
<div class="column">Videos</div>
</div>
<div class="row">
<p>
</p>
</div>
</div>
<div class="probleem_section">
<h2>Probleem: Wateroverlast door Klimaatverandering</h2>
<p>
Klimaatverandering heeft geleid tot meer droogte en wateroverlast door intense buien. Ons riool kan dit vaak niet aan, met als gevolg wateroverlast en vervuild rioolwater in ons kwetsbare oppervlaktewater.
<!-- Rest van de beschrijving van het probleem -->
</p>
<button id="oplossingButton">Bekijk Oplossingen</button>
</div>
<div class="oplossing_section hidden">
<h2>Oplossing: Slim Omgaan met Regenwater</h2>
<p>
Het is tijd om ons regenwater massaal vast te houden en te hergebruiken. Een simpele stap zoals het installeren van een regenton kan al enorm helpen. Wil je weten hoe je dit proces kunt automatiseren? Ontdek hier slimme oplossingen voor het efficiënt omgaan met regenwater!
<!-- Informatie over oplossingen -->
</p>
<button id="probleemButton">Bekijk Probleem</button>
</div>
</div>
<script>
document.addEventListener
const probleemButton = document.getElementById('probleemButton');
const oplossingButton = document.getElementById('oplossingButton');
const probleemSection = document.querySelector('.probleem_section');
const oplossingSection = document.querySelector('.oplossing_section');
probleemButton.addEventListener('click', function() {
probleemSection.classList.remove('hidden');
oplossingSection.classList.add('hidden');
});
oplossingButton.addEventListener('click', function() {
probleemSection.classList.add('hidden');
oplossingSection.classList.remove('hidden');
});
;
</script>
</body>
</html>