forked from fdnd-task/the-client-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·213 lines (207 loc) · 11.2 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
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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles/styles.css">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<script src="script.js" defer></script>
<title>b-Rain</title>
</head>
<body>
<header>
<div class="nav-container">
<div class="nav-logo">
<a href="#mainSection"><h1>bRAIN</h1></a>
</div>
<nav class="nav-links">
<ul>
<li id="homeLink"><a class="links" href="#mainSection">Home</a></li>
<li id="contactLink"><a class="links" href="#contactSection">Contact</a></li>
<div class="dropdown">
<button class="dropdown-button">Menu</button>
<div class="dropdown-content">
<a href="#mainSection">Home</a> <!-- maak list want screenreader-->
<a href="#waaromSection">Waarom?</a>
<a href="#waarom2Section">Waarom bRAIN?</a>
<a href="#appSection">Brain-app</a>
<a href="#lezenSection">Lezen</a>
<a href="#contactSection">Contact</a>
</div>
</div>
</ul>
</nav>
</div>
<progress id="header-line" class="header-line" value="0" min="0" max="100"></progress>
</header>
<main>
<section class="mainSection" id="mainSection">
<div class="mainTitle">
<h1>De toekomst van water</h1>
<h2 id="underTitle">Wees slim met ons water, be b-RAIN!</h2>
</div>
</section>
<section class="secondSection" id="waaromSection">
<div class="secondTitle">
<h1>Waarom?</h1>
<p>
Onze wereld wordt geconfronteerd met steeds extremere weersomstandigheden.
We krijgen te maken met langdurige droogte en intensere neerslag.
Dit zorgt ervoor dat we, om de stad leefbaar te houden,
beter voorbereid moeten zijn op dergelijke extremen.
Iedereen kan helpen in deze opgave: bewoners, bedrijven en gemeenten.
<br><br> <!--margin !-->
<p class="extraText">
Door water op te slaan in periodes dat het regent en te gebruiken als het
nodig is maken we onze omgeving klimaatadaptiever. Dit kunnen we doen aan de
hand van regenwateropslag systemen zoals regentonnen.
Traditionele regentonnen zijn een geweldige manier om regenwater
op te vangen en te hergebruiken, maar ze hebben beperkingen. Vaak moeten ze
handmatig worden beheerd, en dat kan een hele klus zijn. Bovendien kunnen ze
overlopen bij zware regenval, wat leidt tot verlies van water en mogelijke schade.
Aan de andere kant kunnen ze leeg raken tijdens droge periodes, waardoor
we gedwongen worden om ons toevlucht te nemen tot kostbaar kraanwater.
<br><br>
Wat b-RAIN onderscheidt, is de verhoogde effectiviteit van de regenwateropslag.
Ons systeem maakt gebruik van real-time weersinformatie om te bepalen wanneer en
hoeveel water er aan je regenton moet worden toegevoegd. Dit betekent dat je altijd de
optimale hoeveelheid water hebt, ongeacht de weersomstandigheden.
Het voorkomt niet alleen verspilling, maar maximaliseert ook de beschikbaarheid van
water wanneer je dit het meeste nodig hebt. Dit resulteert in aanzienlijke besparingen,
zowel op je waterrekening als voor het milieu.
</p>
<br>
<button class="meerLezen">Meer lezen</button>
</p>
<img src="assets/waaromSection2.svg" alt="waaromImage">
</div>
</section>
<section id="backgroundImage">
<section class="secondSection" id="waarom2Section">
<div class="secondTitle">
<h1>Waarom bRAIN?</h1>
<p>
B-RAIN is de manier om zo optimaal mogelijk om te gaan met de neerslag
rondom je huis. Met slimme technologie, gebaseerd op weersvoorspellingen,
regelt ons product automatisch de hoeveelheid water in de regenton,
zodat je altijd het meeste uit je waterreservoir haalt zonder er tijd aan kwijt te zijn.
<br><br>
<p class="extraText">
Als de regenton vol zit en er is een hevige bui voorspeld, dan leegt de ton
zich automatisch om de piekbui op te vangen. Als er droogte voorspeld is,
houdt de regenton zoveel mogelijk water vast. Dit water kan je op
een optimaal moment inzetten, zoals het beregenen van groen of het wassen van je auto.
De b-RAIN app communiceert met onze slimme kraan en geeft je inzicht in hoeveel water er
al bespaard is, wat de neerslagverwachting is en wanneer je je tuin het beste water kan geven.
</p>
<br>
<button class="meerLezen">Meer lezen</button>
</p>
</div>
</section>
<section class="secondSection" id="appSection">
<div class="secondTitle">
<h1>De Brain-app</h1>
<p>
Met behulp van de gratis Brain-app heeft u ieder moment van de dag
inzicht in uw wateropslag. Op deze manier krijgt u inzicht in de
hoeveelheid water die u beschikbaar heeft, hoeveel u bespaard heeft maar
ook wat de verwachtte wateropslag is voor de komende zeven dagen.
<br><br>
<p class="extraText">
De brain app is de de app voor al jouw waterzaken. Met onze app kun je je
dagelijkse waterverbruik volgen en analyseren. Door inzicht te krijgen in hoeveel
water je elke dag gebruikt, kun je bewuster omgaan met water en heb je altijd
inzicht in de kosten voor het watergebruik. Je zult merken dat je niet alleen
kosten bespaart, maar ook een positieve impact hebt op het milieu.
Kortom, de Slimme Regenton App is de sleutel tot geoptimaliseerd waterbeheer.
Het geeft je de controle, het inzicht en de efficiëntie die je nodig hebt om
bewuster om te gaan met water en kosten te besparen. Download vandaag nog onze
app en laat je buren zien hoeveel jij bespaart met het gebruik van Brain.
</p>
<br>
<button class="meerLezen">Meer lezen</button>
</p>
</div>
</section>
</section>
<img id="appImage" src="assets/app.svg" alt="appImage">
<section class="secondSection" id="lezenSection">
<div class="secondTitle">
<h1>Lezen</h1>
<p>
Meer lezen over b-RAIN? Hier vind je gerelateerde artikelen.
</p>
</div>
<div class="articles">
<div class="articleContainer">
<img class="articleImage" src="assets/articles/article1.png" alt="article1">
<div class="textContainer">
<a href="https://www.telegraaf.nl/bRAIN" target="_blank">Telegraaf.nl
<p>Eteck en SPATwater over samenwerking</p>
</a>
</div>
</div>
<div class="articleContainer">
<img class="articleImage" src="assets/articles/article2.png" alt="article2">
<div class="textContainer">
<a href="https://www.telegraaf.nl/bRAIN" target="_blank">Telegraaf.nl
<p>Onderdeel van de klimaatbank</p>
</a>
</div>
</div>
<div class="articleContainer">
<img class="articleImage" src="assets/articles/article3.png" alt="article3">
<div class="textContainer">
<a href="https://www.Nos.nl/bRAIN" target="_blank">Nos.nl
<p>Europees droogte onderzoek</p>
</a>
</div>
</div>
<div class="articleContainer">
<img class="articleImage" src="assets/articles/article1.png" alt="article1">
<div class="textContainer">
<a href="https://www.telegraaf.nl/bRAIN" target="_blank">Telegraaf.nl
<p>Eteck en SPATwater over samenwerking</p>
</a>
</div>
</div>
<div class="articleContainer">
<img class="articleImage" src="assets/articles/article2.png" alt="article2">
<div class="textContainer">
<a href="https://www.telegraaf.nl/bRAIN" target="_blank">Telegraaf.nl
<p>Onderdeel van de klimaatbank</p>
</a>
</div>
</div>
<div class="articleContainer">
<img class="articleImage" src="assets/articles/article3.png" alt="article3">
<div class="textContainer">
<a href="https://www.Nos.nl/bRAIN" target="_blank">Nos.nl
<p>Europees droogte onderzoek</p>
</a>
</div>
</div>
</section>
<section class="secondSection" id="contactSection">
<div class="secondTitle">
<h1>Meedoen</h1>
<p id="nieuwsgierig">
Nieuwsgierig? Stuur ons een mail!
</p>
</div>
<form>
<input type="text" placeholder="Naam" required>
<input type="email" placeholder="Email" required>
<textarea placeholder="Bericht" required></textarea>
<input type="submit" value="Verzenden" id="submitButton">
</form>
<img id="tonSVG" src="assets/tonSVG.svg" alt="regentonSVg">
<img id="flowerSVG" src="assets/flowerSVG.svg" alt="bloemSVG">
</section>
<footer>
<p>© 2023 bRAIN All rights reserved.</p>
</footer>
</main>
</body>
</html>