File: D:/HostingSpaces/SBogers68/resortouddorpduin.nl/app/views/nl/v_bouw.php
<div class="content home">
<div class="header-image">
<div class="home-wave">
<img src="/public/images/static/bouw/bouwbord_nl.png" style="">
</div>
<div class="content-image">
<img alt="" src="/public/images/static/bouw/bouwpagina-header_zone.jpg">
</div>
</div>
<div class="fixed">
<h1 class="bouw-header">Bekijk het eindresultaat van de bouw</h1>
<div class="column-width clear">
<div class="slideshow">
<div class="slideshowtotal bouw" style="margin: auto; float: none;">
<section class="selector duinzone">
<div class="icon-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 886.1 237.3" style="enable-background:new 0 0 886.1 237.3;" xml:space="preserve">
<style type="text/css">
.Drop_x0020_Shadow{fill:none;}
.Round_x0020_Corners_x0020_2_x0020_pt{fill:#FFFFFF;stroke:#1D1D1B;stroke-miterlimit:10;}
.Live_x0020_Reflect_x0020_X{fill:none;}
.Bevel_x0020_Soft{fill:url(#SVGID_1_);}
.Dusk{fill:#FFFFFF;}
.Foliage_GS{fill:#FFDD00;}
.Pompadour_GS{fill-rule:evenodd;clip-rule:evenodd;fill:#51AEE2;}
.st0{opacity:0.75;}
.st1{opacity:0.75;fill:#E5E5E5;}
.st2{opacity:0.4;}
.st3{fill:#9D9D9C;}
.st4{font-family: 'Open Sans', sans-serif;}
.st5{font-size:28px;}
.st6{opacity:0.75;fill:#9D9D9C;}
.st7{font-family:'OpenSans-Bold';}
.st8{font-size:12px;}
.st9{fill:#9C9B9B;}
.st10{fill:#CCAE6C;}
.st11{fill:#56AFD5;}
.map-hover{fill:#e4d1a5;}
.st12{opacity:0.75;fill:#D3ECFB;stroke:#55AED4;stroke-width:4;stroke-miterlimit:10;}
.st13{fill:#CDAF6C;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="263.5" y1="-69" x2="264.2071" y2="-68.2929">
<stop offset="0" style="stop-color:#E6E6EB"/>
<stop offset="0.1754" style="stop-color:#E2E2E7"/>
<stop offset="0.3552" style="stop-color:#D6D6DB"/>
<stop offset="0.5371" style="stop-color:#C2C3C6"/>
<stop offset="0.7204" style="stop-color:#A5A7A9"/>
<stop offset="0.9031" style="stop-color:#818485"/>
<stop offset="1" style="stop-color:#6B6E6E"/>
</linearGradient>
<g id="duinzone">
<g class="st0">
<g>
<path class="st12" id="duinzone_path" d="M448,87.2l-0.4-1l-1.4-1.2l-1.6-0.8l-2.5-0.8l-1.2-1.2l0.5-2.7l-0.2-2.5l-1-3l-1.1-3.1l-4.8-2.7l-2.4-0.4
h-6.3l-19.5-0.3l-2.2,0.1l-13.8,0.2l-12.9,0.6l-2.7,0.2l-15.1,0.3l-5.4,0.5h-3.4l-8.3-0.3l-1.1,0.3l-2,2l-1,4.6l-0.3,3.8l0.4,2.2
l0.3,2l0.6,1.5l1,1.2l1.9,0.7l1.3,0.1l3.3,0.3h1.2c0,0,2,0,2.4,0s16.1-0.7,16.1-0.7h0.8h1.7l6.9-0.1l0.6,0.4c0,0,0.2,1.4,0.2,1.5
c0,0.2-0.1,1.2-0.1,1.2l-0.5,2.1l-0.6,1.6l-0.7,1.9l-0.9,2.5l-0.6,1.9l-1,3.6l-0.8,2l-1.4,4.7l-0.6,1.9l-0.5,1.8l-1.6,6.8
l-0.8,3.8l-1.1,7.2l-0.7,2.8l-1.6,5.9l-0.3,2.2l-0.2,3.5v1.4l0.2,3.2l0.7-0.3l10-4.4l3.9-1.2l3.4-0.8l4.6-1l1.7-0.6l1.4-0.5
l0.6-0.2l4-0.9l2.2-0.7l1.3-0.3l3.1-0.7l2.1-0.4l1.9-0.7l2.4-1.2l31.9-8.8l0.6-1l-0.2-1.5l-0.1-2.7l-0.1-1.7l0.5-2.8l0.4-2.7
l0.5-2.6l0.8-4.4l2-4.4l1.9-4.7l1-3l0.6-2.3l0.3-0.9l0.7-1.7l0.5-1.8l0.1-1.4L448,87.2z"/>
</g>
</g>
<g>
<g >
<text id="duinzone_text" transform="matrix(1 0 0 1 164.627 94.5218)" class="st13 st4 st5">Duinzone</text>
</g>
<text transform="matrix(1 0 0 1 165.9233 109.0688)" class="st6 st7 st8">Bekijk hier de foto’s</text>
</g>
</g>
<g id="Logo">
<path class="st9" d="M457.4,25c0,0-0.6-7.8,9.1-6.5c0,0-7.7-2.5-10.3,3.3c0,0-3.4-2.3-6.9-1.2C449.3,20.7,453.6,20,457.4,25"/>
<path class="st10" d="M408.6,46.4c12.2-8.8,19.4-5.7,32.1,0.5c9.8,5.1,18.4,4.2,26.3,0.9c-16.6,3-28.7-13.5-41.5-14
C414.9,33.4,408.6,46.4,408.6,46.4"/>
<polygon class="st9" points="443.1,5.2 443.1,2.8 440.8,0 438.4,2.8 438.4,5.2 "/>
<polygon class="st9" points="444.2,11.2 444.2,6.4 437.3,6.4 437.3,11.2 "/>
<path class="st9" d="M434.9,12.3l1.1,4.9l-0.3,17.5c3.6,1.7,6.3,3.4,10.4,5.8l-0.5-23.3l1.1-4.9C446.7,12.3,434.9,12.3,434.9,12.3z
"/>
<path class="st11" d="M468.1,21.8c4.8,0,9.4,3.5,9.4,10.1c0,8.5-10.6,17.4-29.8,6.4l-0.2-7.1c4.7,2.5,8.9,4.6,14.7,4.5
c10.7-0.3,5.6-11.8-0.6-6.7c-0.5,0.4-0.7,0.7-1.3,1.6C459.8,25.7,462.4,21.8,468.1,21.8 M434,31.2l0.1-6c-1-0.3-2-0.6-3-0.8
c-12.8-3-17.6,8-18.7,11.3c2.8-3.5,7.2-7.2,13-7C428.3,28.8,431.1,29.8,434,31.2"/>
</g>
<g id="duinvallei">
<polygon id="duinvallei_path" class="st1" points="356.7,160.6 343.9,164.8 341.3,166.2 339.5,168.1 338.5,171.4 338.2,173.8
338.1,176.1 338.1,178.4 338.6,181.4 340.3,188.6 340.4,190.1 340.5,191.9 340.4,194 340.4,196.4 339.6,200.8 339.1,205.9
339.4,212 340.5,216.2 340,221.5 338.7,224 337.2,227.2 337.2,230.3 338.1,234 341.6,235.3 345.2,234.4 350.6,232.2 355.9,229.9
361.6,227.3 369.7,223.4 379,218.2 384.9,214.5 391.1,210 396.5,205.5 403.4,198.8 409.7,191.9 413,188.1 415.2,185.9 417.6,183.4
422.5,179.3 429,172.6 435.6,166 440.1,160.5 441.4,155 441.9,149 441.1,144.3 440.7,140 440.1,137.5 440.1,133.6 402.3,146.6
401.3,146.6 398.2,147.3 395.8,147.9 393.7,148.6 389.1,149.7 387.7,150.3 386,150.8 384.7,150.9 383,151.3 381.4,151.8
379.7,152.4 377,152.8 374,153.8 371.2,154.3 370,154.6 368.8,155 368,155.1 367.2,155.4 366,156 "/>
<g>
<g>
<text id="duinvallei_text" transform="matrix(1 0 0 1 163.9997 208.6519)" class="st3 st4 st5">Duinvallei</text>
</g>
<text transform="matrix(1 0 0 1 165.275 223.9486)" class="st6 st7 st8">Bekijk hier de foto’s</text>
</g>
</g>
<g id="voorziening">
<g>
<g >
<text id="voorziening_text" transform="matrix(1 0 0 1 544.627 94.5218)" class="st3 st4 st5">Voorzieningencentrum</text>
</g>
<text transform="matrix(1 0 0 1 545.9233 109.0688)" class="st6 st7 st8">Bekijk hier de foto’s</text>
</g>
<path class="st1" id="voorziening_path" d="M443.5,123.6c0.2-4.4,1.2-12.1,5.8-21.4c5.9-12.1,7.1-14.9,9.2-20.1c2.1-5.2,2.2-4.8,6.9-6.2
c4.7-1.5,8.1-3.1,10.6-5s11.7,0.1,16.4,1.1s23.4,3.3,23.4,3.3s3.9,0.1,3.5,2.8s-1.4,14.2-1.4,14.2s0.2,3-3.4,5
c-3.6,1.9-56.8,22.3-56.8,22.3s-8.4,3.5-12.9,6.1C444,126.1,443.4,124.9,443.5,123.6z"/>
</g>
</svg>
</div>
<div class="backup-nav">
<p>Bekijk hier de foto's van:</p>
<h2 class="duinzone">Duinzone</h2>
<h2 class="duinvallei">Duinvallei</h2>
<h2 class="voorziening">Voorzieningencentrum</h2>
</div>
</section>
<div class="global">
<div class="bouw-video">
<iframe width="560" height="315"
src="https://www.youtube-nocookie.com/embed/_a1YCHksOUE?rel=0" frameborder="0"
allowfullscreen></iframe>
<br>2019-2020 Dronebeelden Bouw Fase 4C
</div>
<a class="slideshowimg map" rel="map"
title="Projectlocatie - Strand Resort Ouddorp Duin"
href="/public/images/static/bouw/Locatie%20-%20Strand%20Resort%20Ouddorp%20Duin.jpg">
<span class="image"
style="background-image: url('/public/images/static/bouw/Locatie%20-%20Strand%20Resort%20Ouddorp%20Duin.jpg');"></span>
<span class="slideshowTitle">Locatie</span>
</a>
</div>
<!-- Foto's -->
<div class="slider-duinzone slider">
<h1>Foto's Duinzone</h1>
<?php
include 'app/views/build_images/duinzone.php'; //Hier dienen de foto's worden ingevoegd, kan dan meteen voor zowel het Nederlands als voor het Duits. Elke slider/fotocolletie heeft zijn eigen bestand.
foreach ($photos as $photo)
{
echo '<a class="slideshowimg slide-show-img" rel="duinzone" title="' . $photo['name'] . '" href="/public/images/static/bouw/' . $photo['photo'] . '.jpg">
<img src="/public/images/static/bouw/' . $photo['photo'] . '_small.jpg" alt="" />
<span class="slideshowTitle">' . $photo['name'] . '</span>
</a>';
}
?>
<div class="clear"></div>
<div class="loadMoreBuildings duinzone-more">
<p>Laat meer foto's zien. </p>
</div>
</div>
<div class="slider-duinvallei slider">
<h1>Foto's Duinvallei</h1>
<?php
include 'app/views/build_images/duinvallei.php';
foreach ($photos as $photo)
{
echo '<a class="slideshowimg slide-show-img" rel="duinvallei" title="' . $photo['name'] . '" href="/public/images/static/bouw/' . $photo['photo'] . '.jpg">
<img src="/public/images/static/bouw/' . $photo['photo'] . '_small.jpg" alt="" />
<span class="slideshowTitle">' . $photo['name'] . '</span>
</a>';
}
?>
<div class="clear"></div>
<div class="loadMoreBuildings duinvallei-more">
<p>Laat meer foto's zien. </p>
</div>
</div>
<div class="slider-voorziening slider">
<h1>Foto's Voorzieningencentrum</h1>
<?php
include 'app/views/build_images/voorziening.php';
foreach ($photos as $photo)
{
echo '<a class="slideshowimg slide-show-img" rel="voorziening" title="' . $photo['name'] . '" href="/public/images/static/bouw/' . $photo['photo'] . '.jpg">
<img src="/public/images/static/bouw/' . $photo['photo'] . '_small.jpg" alt="" />
<span class="slideshowTitle">' . $photo['name'] . '</span>
</a>';
}
?>
<div class="clear"></div>
<div class="loadMoreBuildings voorziening-more">
<p>Laat meer foto's zien. </p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="column-fullwidth clear">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyAwIjIsKwHFh6-hqEyDh_VLg049tfjWjOE"></script>
<script src="/public/js/modal.js"></script>
<script type="text/javascript">
function initialize() {
var styles = [
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{"visibility": "off"}
]
}, {
"featureType": "transit",
"stylers": [
{"visibility": "off"}
]
}, {}
];
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
var myLatlng = new google.maps.LatLng(51.823763, 3.904867);
var mapOptions = {
zoom: 10,
scrollwheel: false,
center: myLatlng,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: '/public/images/structure/pointer.png',
title: 'Strand Resort Ouddorp Duin'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="modal hide fade in" id="youtubemodal">
<div class="modal-header"><a data-dismiss="modal" class="close">×</a>
<h2>Strand Resort Ouddorp Duin - Omgeving</h2></div>
<div class="modal-body">
<iframe width="560" height="315" src="//www.youtube.com/embed/7-61sDlyF6k" frameborder="0"
allowfullscreen="true"></iframe>
</div>
<div class="modal-footer"><a href="#" data-dismiss="modal">Sluiten</a></div>
</div>
<div class="fixed locatie">
<div class="locatie-text"><h1>Locatie</h1>
<p>Goeree-Overflakkee hoort al eeuwenlang bij Zuid-Holland, maar wordt door zijn eigen dialect en
karakteristieke landschap vaak gezien als het noordelijkste Zeeuwse eiland. Het ongerepte eiland wordt
omsloten door de Noordzee, het Haringvliet, het Volkerak en het Grevelingenmeer.</p><a
href="#youtubemodal" data-toggle="modal" class="more">Bekijk locatievideo</a></div>
</div>
<div id="map-canvas"></div>
</div>