-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
273 lines (262 loc) · 10.8 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
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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/style.css">
<link rel="icon" type="image/x-icon" href="./img/favicon.png">
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="https://kit.fontawesome.com/9219bfa34d.js" crossorigin="anonymous"></script>
<title>Funda</title>
</head>
<body>
<!-- Navigatie balk -->
<header class="site-header">
<div class="nav-container">
<nav class="navigation">
<div class="nav-logo">
<ul class="hamburger-menu menu-1">
<li>
<a href="/">
<ion-icon name="menu-outline" class="menu-icon"></ion-icon>
<span class="icon-text">Menu</span>
</a>
</li>
</ul>
<a class="logo" href="/">
<img src="./img/logo.svg" alt="Funda logo">
</a>
<ul class="hamburger-menu menu-2">
<li>
<a href="/">
<span class="icon-text">Kopen</span>
</a>
</li>
<li>
<a href="/">
<span class="icon-text">Huren</span>
</a>
</li>
<li>
<a href="/">
<span class="icon-text">Verkopen</span>
</a>
</li>
</ul>
</div>
<ul class="right-nav">
<li>
<a href="/">
<ion-icon name="home-outline" class="menu-icon"></ion-icon>
<span class="icon-text">Mijn Huis</span>
</a>
</li>
<li>
<a href="/">
<ion-icon name="person-circle-outline" class="menu-icon"></ion-icon>
<span class="icon-text">Inloggen</span>
</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Foto's van huizen -->
<main class="main-container">
<div>
<ul>
<li>
<a href="">
<img id="myImg" src="./img/huis.jpg" alt="Voorkant van het huis">
</a>
</li>
<li>
<a href="">
<img id="myImg1" src="./img/huis1.jpg" alt="Zijaanzicht van het huis">
</a>
</li>
<li>
<a href="">
<img id="myImg2" src="./img/huis2.jpg" alt="Omgeving van het huis">
</a>
</li>
<li>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2430.9668663993343!2d6.557261200000001!3d52.4616275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c7fee16ed7e2cf%3A0xfce23fbc17369802!2sBosweg%205%2C%207681%20GJ%20Vroomshoop!5e0!3m2!1sen!2snl!4v1673981987243!5m2!1sen!2snl"
style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe> </li>
</ul>
</div>
</main>
<!-- Modal imgs -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" src="" id="img01" alt="">
<div id="caption"></div>
</div>
<!-- Kenmerken en informatie over huis -->
<section class="info-container">
<div>
<h1>
<span>Bosweg 5</span>
<span>7681 GJ Vroomshoop<a target="_blank"
href="https://www.google.com/maps/place/Vroomshoop/@52.4643782,6.5636712,14z/data=!3m1!4b1!4m5!3m4!1s0x47c7ff1838624a05:0x4eec231863ed050d!8m2!3d52.456752!4d6.5657522?hl=en">Vroomshoop</a></span>
<span>€ 865.000 k.k.<a href="">Wat worden mijn maandlasten?</a></span>
</h1>
<ul>
<li>
<ion-icon name="scan-outline"></ion-icon><span>223 m²</span>
</li>
<li>
<ion-icon name="bed-outline"></ion-icon><span>4</span>
</li>
<li class="heart-animation"><a href=""><i class="fa-regular fa-heart"></i></a><span>Opslaan</span></li>
</ul>
<p> <span>Omschrijving</span> <br>
Aan de rand van kerkdorp Casteren, ligt deze zeer fraaie, duurzame, vrijstaande, uiterst stijlvolle
woonboerderij van maar liefst 1.223 m3 met een schitterende privacy biedende tuin met vrij uitzicht
<span id="dots">
...
</span>
<span id="more">over de landerijen op een perceel van 3.405 m2. <br><br>
Spreekt duurzaam wonen, zonder te hoeven verbouwen, u aan? En spreekt een woning midden in de natuur
u ook aan? Coppelmans Makelaardij heeft nu een woonboerderij in de verkoop waar je echt U tegen
zegt. Stijlvol en statig tegelijk. Midden in de natuur en op maximaal 25 minuten afstand van de stad
Eindhoven. Kenmerkend; een landelijke uitstraling met een stijlvolle luxueuze afwerking en een
prachtige tuin met zwembad.
</span>
</p>
<button onclick="ReadMore()" id="readBtn">Lees meer</button>
</div>
<div class="extra-info one">
<h2>Kenmerken</h2>
<article class="info-one">
<h3>Overdracht</h3>
<dl>
<dt>Vraagprijs</dt>
<dd>€ 865.000 kosten koper</dd>
<dt>Vraagprijs per m²</dt>
<dd>€ 3.879</dd>
<dt>Oorspronkelijke vraagprijs</dt>
<dd>€ 885.000 kosten koper</dd>
<dt>Aangeboden sinds</dt>
<dd>2 maanden</dd>
<dt>Status</dt>
<dd>Beschikbaar</dd>
<dt>Aanvaarding</dt>
<dd>In overleg</dd>
</dl>
</article>
</div>
<div class="extra-info two">
<h2 class="extra">Kenmerken</h2>
<article class="info-two">
<h3>Bouw</h3>
<dl>
<dt>Soort woonhuis</dt>
<dd>Villa, vrijstaande woning</dd>
<dt>Soort bouw</dt>
<dd>Bestaande bouw</dd>
<dt>Bouwjaar</dt>
<dd>2010</dd>
<dt>Soort dak</dt>
<dd>Tentdak bedekt met pannen</dd>
<dt>Keurmerken</dt>
<dd>Energie prestatie advies</dd>
<dt>Aantal kamers</dt>
<dd>5 kamers (4 slaapkamers)</dd>
</dl>
</article>
</div>
</section>
<!-- Vergelijkbare huizen -->
<div class="compare-container">
<h2>Vergelijkbare huizen</h2>
<div>
<section>
<img src="./img/Vergelijk-1.jpg" alt="Vergelijkbaar huis #1">
<h3>
<span>De Vleggedijk 13</span>
<span>7693 PW Sibculo</span>
<span>€ 875.000 k.k.</span>
</h3>
</section>
<section>
<img src="./img/Vergelijk-2.jpg" alt="Vergelijkbaar huis #2">
<h3>
<span>Baltinksweg 34</span>
<span>7443 PK Nijverdal</span>
<span>€ 869.000 k.k.</span>
</h3>
</section>
<section>
<img src="./img/Vergelijk-3.jpg" alt="Vergelijkbaar huis #3">
<h3>
<span>Schoolstraat 39</span>
<span>7686 CM Geerdijk</span>
<span>€ 799.000 k.k.</span>
</h3>
</section>
<section>
<img src="./img/Vergelijk-4.jpg" alt="Vergelijkbaar huis #4">
<h3>
<span>Garstweg 28</span>
<span>7676 ST Westerhaar</span>
<span>€ 745.000 k.k.</span>
</h3>
</section>
<section>
<img src="./img/Vergelijk-5.jpg" alt="Vergelijkbaar huis #5">
<h3>
<span>Hendrikstraat 4</span>
<span>7681 GG Vroomshoop</span>
<span>€719.000 k.k.</span>
</h3>
</section>
</div>
</div>
<footer>
<nav>
<div>
<span>Diensten</span>
<ul>
<li><a href="#">Plaats je huis op Funda</a></li>
<li><a href="#">Zoek een NVM-makelaar</a></li>
<li><a href="#">Bladeren door een aanbod</a></li>
<li><a href="#">Wat is mijn woning waard?</a></li>
</ul>
</div>
<div>
<span>Informatie</span>
<ul>
<li><a href="#">Vraag en antwoord</a></li>
<li><a href="#">Funda index</a></li>
<li><a href="#">Alles over een huis kopen</a></li>
<li><a href="#">Verkoop je huis</a></li>
</ul>
</div>
<div>
<span>Makelaars</span>
<ul>
<li><a href="#">Funda desk</a></li>
<li><a href="#">Tips, trends en nieuws</a></li>
<li><a href="#">Leads</a></li>
<li><a href="#">Producten</a></li>
</ul>
</div>
<div>
<span>Over ons</span>
<ul>
<li><a href="#">Over Funda</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Werken bij Funda</a></li>
<li><a href="#">Adverteren</a></li>
</ul>
</div>
</nav>
</footer>
<script src="./scripts/script.js"></script>
</body>
</html>