fdnd-agency · smolgeorgie · Jan 24, 2024 · Jan 25, 2024 · Jan 25, 2024 · Jan 25, 2024
diff --git a/assets/bed-icon.png b/assets/bed-icon.png
diff --git a/assets/funda-house-bed.png b/assets/funda-house-bed.png
diff --git a/assets/funda-house-living.png b/assets/funda-house-living.png
diff --git a/assets/funda-house-living2.jpg b/assets/funda-house-living2.jpg
diff --git a/assets/funda-huis-main.jpg b/assets/funda-huis-main.jpg
diff --git a/assets/funda-image-house.png b/assets/funda-image-house.png
diff --git a/assets/funda-image-house2.png b/assets/funda-image-house2.png
diff --git a/assets/funda-logo.png b/assets/funda-logo.png
diff --git a/assets/funda-map-2.png b/assets/funda-map-2.png
diff --git a/assets/funda-map.JPG b/assets/funda-map.JPG
diff --git a/assets/funda-map.png b/assets/funda-map.png
diff --git a/assets/home.png b/assets/home.png
diff --git a/assets/honders-logo.jpg b/assets/honders-logo.jpg
diff --git a/assets/log-in.png b/assets/log-in.png
diff --git a/assets/love.png b/assets/love.png
diff --git a/assets/menu.png b/assets/menu.png
diff --git a/assets/photo-image.jpg b/assets/photo-image.jpg
diff --git a/assets/selection-icon2.png b/assets/selection-icon2.png
diff --git a/assets/share.png b/assets/share.png
diff --git a/assets/surface-icon.png b/assets/surface-icon.png
diff --git a/assets/video-image.jpg b/assets/video-image.jpg
diff --git a/assets/villa-image.jpg b/assets/villa-image.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,217 @@
+<!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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script src="https://kit.fontawesome.com/71fb9d5d88.js" crossorigin="anonymous"></script>
+    <script src="./script/main.js" defer></script>
+    <title>funda detail page</title>
+</head>
+
+<body>
+    <nav>
+        <ul>
+            <li>
+                <div class="left-navbar">
+                    <img src="assets/menu.png" alt="menu icoon">
+                    <span> Menu </span>
+
+                    <img src="assets/funda-logo.png" alt="funda icoon">
+                </div>
+            </li>
+            <li>
+                <div class="right-navbar">
+                    <img src="assets/home.png" alt="huisje icoon">
+                    <span> Mijn Huis </span>
+
+                    <img src="assets/log-in.png" alt="inlog icoon">
+                    <span> Inloggen </span>
+                </div>
+            </li>
+        </ul>
+    </nav>
+
+    <section class="image-stacks">
+
+        <article class="image-stacks__main">
+            <img src="assets/funda-image-house.png" alt: "villa-image">
+            <!-- block 1 -->
+            <div class="icon-container">
+                <i class="fa fa-heart-o" aria-hidden="true"></i>
+                <i class="fa fa-share-alt" aria-hidden="true"></i>
+            </div>
+        </article>
+
+        <article class="image-stacks__video">
+            <img src="assets/funda-house-living2.jpg">
+            <svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+                version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
+                xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <path
+                    d="M256,0c141.29,0 256,114.71 256,256c0,141.29 -114.71,256 -256,256c-141.29,0 -256,-114.71 -256,-256c0,-141.29 114.71,-256 256,-256Zm153.315,178.978c-3.68,-13.769 -14.522,-24.61 -28.29,-28.29c-24.958,-6.688 -125.025,-6.688 -125.025,-6.688c0,0 -100.067,0 -125.025,6.688c-13.765,3.68 -24.61,14.521 -28.29,28.29c-6.685,24.955 -6.685,77.024 -6.685,77.024c0,0 0,52.067 6.685,77.02c3.68,13.769 14.525,24.614 28.29,28.293c24.958,6.685 125.025,6.685 125.025,6.685c0,0 100.067,0 125.025,-6.685c13.768,-3.679 24.61,-14.524 28.29,-28.293c6.685,-24.953 6.685,-77.02 6.685,-77.02c0,0 0,-52.069 -6.685,-77.024Zm-185.316,125.025l0,-96.002l83.137,48.001l-83.137,48.001Z" />
+            </svg>
+            <span> Video </span>
+        </article>
+
+        <article class="image-stacks__photo">
+            <img src="assets/funda-house-bed.png">
+            <svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+                <g data-name="Layer 2" id="Layer_2">
+                    <g data-name="Layer 2" id="Layer_2-2">
+                        <path
+                            d="M60.69,26H34.51a8.81,8.81,0,0,0-8.8,8.8V61a8.81,8.81,0,0,0,8.8,8.8H60.69a8.81,8.81,0,0,0,8.8-8.8V34.83A8.81,8.81,0,0,0,60.69,26ZM47.59,63.92a16,16,0,1,1,16-16A16,16,0,0,1,47.59,63.92Zm15.71-29a2.58,2.58,0,1,1,2.58-2.58A2.57,2.57,0,0,1,63.3,34.88Z" />
+                        <path d="M47.59,35.21A12.69,12.69,0,1,0,60.28,47.91,12.7,12.7,0,0,0,47.59,35.21Z" />
+                        <path
+                            d="M48,0A48,48,0,1,0,96,48,48,48,0,0,0,48,0ZM72.43,61A11.77,11.77,0,0,1,60.69,72.75H34.51A11.78,11.78,0,0,1,22.77,61V34.83A11.77,11.77,0,0,1,34.51,23.09H60.69A11.75,11.75,0,0,1,72.43,34.83Z" />
+                    </g>
+                </g>
+            </svg>
+            <span> 33 foto's </span>
+        </article>
+
+        <article class="image-stacks__remain1">
+            <img src="assets/funda-image-house2.png" alt="huis buiten">
+        </article>
+        <article class="image-stacks__remain2">
+            <img src="assets/funda-house-living.png" alt="huis interieur woonkamer">
+        </article>
+
+    </section>
+
+    <main>
+
+        <section class="object-primary">
+
+            <article class="object-primary__details">
+
+                <div class="map-button">
+                    <div class="map-button__icon">
+                        <a href="https://www.funda.nl/koop/kampen/huis-42348573-de-omloop-19/#kaart">
+                            <img src="assets/funda-map-2.png"></a>
+                    </div>
+                    <span> Bekijk locatie </span>
+                </div>
+
+                <h1> Smalle Themaat 20 </h1>
+                <p> 3451 SW Vleuten </p>
+                <a
+                    href="https://www.google.com/maps/place/Themaat,+3455+SM+Utrecht/@52.1157377,5.0000966,15z/data=!3m1!4b1!4m6!3m5!1s0x47c670383ef116fb:0xa6a9493b78ccf6d!8m2!3d52.1157255!4d5.0104178!16zL20vMGNudmhx?entry=ttu">
+                    Haarrijn </a>
+            </article>
+
+            <article class-="object-primary__facilities">
+                <ul>
+                    <li>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <g id="Layer_24" data-name="Layer 24">
+                                <path
+                                    d="M10.5,10.5v43h43v-43Zm3,5.12L24.91,27H18.4v3H30V18.4H27v6.51L15.62,13.5H50.5V48.38L39.09,37H45.6V34H34V45.6h3V39.09L48.38,50.5H13.5Z">
+                                </path>
+                            </g>
+                        </svg>
+                        <span> 363 m² </span>
+                    </li>
+                    <li>
+                        <svg id="Building" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <path
+                                d="M61,56H56V53.92A7,7,0,0,0,62,47c0-3.13-2.56-13-7-13a4.069,4.069,0,0,0-3,1.63V27.71l4.57,2.19A.907.907,0,0,0,57,30a.988.988,0,0,0,.53-.15A1.025,1.025,0,0,0,58,29V23a1,1,0,0,0-.57-.9L51,19.01V13h2a1,1,0,0,0,1-1V8a1,1,0,0,0-1-1H42a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h2v2.65L32.43,10.1a1,1,0,0,0-.86,0l-25,12A1,1,0,0,0,6,23v6a1.025,1.025,0,0,0,.47.85.994.994,0,0,0,.96.05L12,27.71v7.92A4.069,4.069,0,0,0,9,34c-4.44,0-7,9.87-7,13a7,7,0,0,0,6,6.92V56H3a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1H61a1,1,0,0,0,1-1V57A1,1,0,0,0,61,56ZM8,60H4V58H8ZM43,11V9h9v2Zm6,2v5.05l-3-1.44V13ZM8,27.41V23.63L32,12.11,56,23.63v3.78L32.43,16.1a.975.975,0,0,0-.86,0ZM4,47c0-3.54,2.8-11,5-11s5,7.46,5,11A5,5,0,0,1,4,47Zm8,6.32V56H10V53.92A7.03,7.03,0,0,0,12,53.32ZM17.22,60H10V58h7.72Zm2.06,0,.5-2h8.44l.5,2ZM28,38V56H20V38Zm-8-2V34h8v2Zm9-4H19a1,1,0,0,0-1,1V56H14V51.89A6.952,6.952,0,0,0,16,47a23.981,23.981,0,0,0-2-8.06V26.75l18-8.64,18,8.64V38.94A23.981,23.981,0,0,0,48,47a6.952,6.952,0,0,0,2,4.89V56H30V33A1,1,0,0,0,29,32ZM54,60H30.78l-.5-2H54Zm0-4H52V53.32a7.03,7.03,0,0,0,2,.6Zm-4-9c0-3.54,2.8-11,5-11s5,7.46,5,11a5,5,0,0,1-10,0ZM60,60H56V58h4ZM46,32H34a1,1,0,0,0-1,1V46a1,1,0,0,0,1,1H46a1,1,0,0,0,1-1V33A1,1,0,0,0,46,32ZM35,34h4v8H35ZM45,45H35V44H45Zm0-3H41V34h4Z">
+                            </path>
+                        </svg>
+                        <span> 14.750 m² </span>
+                    </li>
+                    <li>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+                            <title>Double Bed</title>
+                            <g id="Double_Bed" data-name="Double Bed">
+                                <path
+                                    d="M43,22.264V13a7.008,7.008,0,0,0-7-7H12a7.008,7.008,0,0,0-7,7v9.264A6.991,6.991,0,0,0,2,28V40a2,2,0,0,0,2,2H8a2,2,0,0,0,2-2V37H38v3a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V28A6.991,6.991,0,0,0,43,22.264ZM7,13a5.006,5.006,0,0,1,5-5H36a5.006,5.006,0,0,1,5,5v8.3a6.956,6.956,0,0,0-2-.3V19a4,4,0,0,0-4-4H29a4,4,0,0,0-4,4v2H23V19a4,4,0,0,0-4-4H13a4,4,0,0,0-4,4v2a6.956,6.956,0,0,0-2,.3Zm30,8H27V19a2,2,0,0,1,2-2h6a2,2,0,0,1,2,2ZM21,21H11V19a2,2,0,0,1,2-2h6a2,2,0,0,1,2,2ZM4,28a5.006,5.006,0,0,1,5-5H39a5.006,5.006,0,0,1,5,5v1H4ZM8,40H4V37H8ZM4,35V31H44v4Zm40,5H40V37h4Z">
+                                </path>
+                            </g>
+                        </svg>
+                        <span> 6 </span>
+                    </li>
+                </ul>
+
+                <h2> € 3.900.00 k.k. </h2>
+
+                <div class="object-primary__calculator">
+                    <figure><svg version="1.0" encoding="UTF-8" standalone="no" ?> <svg id="Layer_1" data-name="Layer 1"
+                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <title>Calculator</title>
+                                <path
+                                    d="M394.667,10.667H117.333A42.716,42.716,0,0,0,74.667,53.333V458.667a42.716,42.716,0,0,0,42.667,42.667H394.667a42.716,42.716,0,0,0,42.667-42.667V53.333A42.716,42.716,0,0,0,394.667,10.667Zm21.333,448A21.354,21.354,0,0,1,394.667,480H117.333A21.354,21.354,0,0,1,96,458.667V53.333A21.356,21.356,0,0,1,117.333,32H394.667A21.356,21.356,0,0,1,416,53.333Z" />
+                                <path
+                                    d="M373.333,64H138.667a21.356,21.356,0,0,0-21.333,21.333v53.333A21.356,21.356,0,0,0,138.667,160H373.333a21.356,21.356,0,0,0,21.333-21.333V85.333A21.356,21.356,0,0,0,373.333,64ZM138.667,138.667V85.333H373.333l.016,53.333Z" />
+                                <path
+                                    d="M170.667,181.333h-32a21.356,21.356,0,0,0-21.333,21.333v32A21.356,21.356,0,0,0,138.667,256h32A21.356,21.356,0,0,0,192,234.667v-32A21.356,21.356,0,0,0,170.667,181.333Zm-32,53.333v-32h32l.016,32Z" />
+                                <path
+                                    d="M266.667,181.333h-32a21.356,21.356,0,0,0-21.333,21.333v32A21.356,21.356,0,0,0,234.667,256h32A21.356,21.356,0,0,0,288,234.667v-32A21.356,21.356,0,0,0,266.667,181.333Zm-32,53.333v-32h32l.016,32Z" />
+                                <path
+                                    d="M373.333,181.333h-32A21.356,21.356,0,0,0,320,202.667v32A21.356,21.356,0,0,0,341.333,256h32a21.356,21.356,0,0,0,21.333-21.333v-32A21.356,21.356,0,0,0,373.333,181.333Zm-32,53.333v-32h32l.016,32Z" />
+                                <path
+                                    d="M170.667,277.333h-32a21.354,21.354,0,0,0-21.333,21.333v32A21.354,21.354,0,0,0,138.667,352h32A21.354,21.354,0,0,0,192,330.667v-32A21.354,21.354,0,0,0,170.667,277.333Zm-32,53.333v-32h32l.016,32Z" />
+                                <path
+                                    d="M266.667,277.333h-32a21.354,21.354,0,0,0-21.333,21.333v32A21.354,21.354,0,0,0,234.667,352h32A21.354,21.354,0,0,0,288,330.667v-32A21.354,21.354,0,0,0,266.667,277.333Zm-32,53.333v-32h32l.016,32Z" />
+                                <path
+                                    d="M170.667,373.333h-32a21.354,21.354,0,0,0-21.333,21.333v32A21.354,21.354,0,0,0,138.667,448h32A21.354,21.354,0,0,0,192,426.667v-32A21.354,21.354,0,0,0,170.667,373.333Zm-32,53.333v-32h32l.016,32Z" />
+                                <path
+                                    d="M266.667,373.333h-32a21.354,21.354,0,0,0-21.333,21.333v32A21.354,21.354,0,0,0,234.667,448h32A21.354,21.354,0,0,0,288,426.667v-32A21.354,21.354,0,0,0,266.667,373.333Zm-32,53.333v-32h32l.016,32Z" />
+                                <path
+                                    d="M373.333,277.333h-32A21.354,21.354,0,0,0,320,298.667v128A21.354,21.354,0,0,0,341.333,448h32a21.354,21.354,0,0,0,21.333-21.333v-128A21.354,21.354,0,0,0,373.333,277.333Zm-32,149.333v-128h32l.016,128Z" />
+                            </svg></figure>
+                    <a href="https://www.funda.nl/hypotheek/maandlasten/ing/?id=88445221"> Wat worden mijn
+                        maandlasten?</a>
+                </div>
+
+            </article>
+
+            <article class="readmore">
+                <h2> Omschrijving </h2>
+                <p> Als pure historie wordt gecombineerd met alle denkbare luxe op één van de beste locaties in de
+                    provincie Utrecht is dit het resultaat.
+                    Want dit is namelijk wat je krijgt als je met een onbeperkt budget een team van vakmensen onder
+                    leiding van een deskundige architect los laat op een van oorsprong uit 1647 daterende boerderij.
+                </p>
+                <p>
+                    Beter dan dit gaat het dan niet worden.
+                    Deze grote woonboerderij beschikt over een prachtige tuin met een verwarmd buitenzwembad en jacuzzi,
+                    een luxe
+                    vrijstaand gastenverblijf annex kantoor/atelier/garage en uitstekende paardenfaciliteiten bestaande
+                    uit een stallencomplex
+                    met 4 ruime paardenstallen, een schapenstal, een rijbak en weilanden. Perceel bevat een viertal
+                    toegangs poorten vanaf de weg. Waarbij twee elektronische toegangspoorten naar de woning en nog twee
+                    bij de weilanden.
+
+                    Het geheel staat op een groot en goed afgeschermd perceel van maar liefst 14.750 m² dat aan de
+                    achterzijde grenst aan een Ecologische Zone met blijvend vrij uitzicht over recreatiegebied 'De
+                    Haarrijnse plas' en op loopafstand van het Máximapark.
+                    De prachtige locatie ligt aan de rand van Vleuten, op korte afstand van Maarssen en Utrecht. De
+                    Smalle Themaat is een autoluwe en fietsvriendelijke straat die in verbinding staat met de
+                    Thematerweg richting het nabij gelegen Landgoed Haarzuilens en de Golfclub de Haar. De voorzieningen
+                    van Utrecht, Vleuten en Leidsche Rijn zijn, net als de oprit van de A2, zeer goed bereikbaar.
+                    Diverse scholen, openbaar vervoer, winkels, supermarkten en een treinstation maken het wonen op deze
+                    plek zeer aantrekkelijk.
+
+                </p>
+                <button class="toggle"> + Lees meer beschrijving </button>
+            </article>
+
+        </section>
+
+        <!-- REAL ESTATE AGENT -->
+        <section class="contact-banner">
+            <div class="contact-banner__header">
+                <img src="assets/honders-logo.jpg" alt="honders makelaar logo">
+            </div>
+            <article class="contact-banner__info">
+                <h4> Honders & Alting Makelaars </h4>
+                <button> Toon telefoonnummer </button>
+                <a href="https://www.funda.nl/makelaars/eindhoven/61054-honders-en-alting-makelaars/"> Contact met
+                    de makelaar </a>
+            </article>
+        </section>
+    </main>
+</body>
diff --git a/script/main.js b/script/main.js
@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var articles = document.querySelectorAll('.readmore');
+    var buttons = document.querySelectorAll('.toggle');
+
+    for (var i = 0; i < articles.length; i++) {
+        // Initially hide all but the first paragraph
+        var paragraphs = articles[i].querySelectorAll('p');
+        for (var j = 1; j < paragraphs.length; j++) {
+            paragraphs[j].style.display = 'none';
+        }
+
+        buttons[i].addEventListener('click', function () {
+            var article = this.closest('.readmore');
+            var paragraphs = article.querySelectorAll('p');
+
+            if (this.textContent === '+ Lees meer beschrijving') {
+                for (var j = 1; j < paragraphs.length; j++) {
+                    paragraphs[j].style.display = 'block';
+                }
+                this.textContent = '- Lees minder beschrijving';
+            } else {
+                for (var j = 1; j < paragraphs.length; j++) {
+                    paragraphs[j].style.display = 'none';
+                }
+                this.textContent = '+ Lees meer beschrijving';
+            }
+        });
+    }
+});
+
+
+
+// window.onload = function () {
+//     var articles = document.querySelectorAll('.readmore');
+//     var buttons = document.querySelectorAll('.toggle');
+
+//     for (var i = 0; i < articles.length; i++) {
+//         // Initially hide all but the first paragraph
+//         var paragraphs = articles[i].querySelectorAll('p');
+//         for (var j = 1; j < paragraphs.length; j++) {
+//             paragraphs[j].style.display = 'none';
+//         }
+
+//         buttons[i].addEventListener('click', function () {
+//             var article = this.closest('.readmore');
+//             var paragraphs = article.querySelectorAll('p');
+
+//             if (this.textContent === '+ Lees meer beschrijving') {
+//                 for (var j = 1; j < paragraphs.length; j++) {
+//                     paragraphs[j].style.display = 'block';
+//                 }
+//                 this.textContent = '- Lees minder beschrijving';
+//             } else {
+//                 for (var j = 1; j < paragraphs.length; j++) {
+//                     paragraphs[j].style.display = 'none';
+//                 }
+//                 this.textContent = '+ Lees meer beschrijving';
+//             }
+//         });
+//     }
+// }