File: D:/HostingSpaces/SBogers68/resortouddorpduin.nl/app/views/de/v_bouw.php
<div class="content home">
<div class="header-image">
<div class="home-wave">
<img src="/public/images/static/bouw/bouwbord_de.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">Endergebnis Bau Wohnungen</h1>
<div class="column-width clear">
<div class="slideshow">
<div class="slideshowtotal bouw">
<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">Dünenzone</text>
</g>
<text transform="matrix(1 0 0 1 165.9233 109.0688)" class="st6 st7 st8">Schauen Sie die Bilder an</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">Dünental</text>
</g>
<text transform="matrix(1 0 0 1 165.275 223.9486)" class="st6 st7 st8">Schauen Sie die Bilder an</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"><tspan class="st4 st5" x="0" y="0">Multifunktionelles</tspan><tspan class="st4 st5" x="0" y="28">Hauptgebäude</tspan></text>
</g>
<text transform="matrix(1 0 0 1 545.9233 144.0688)" class="st6 st7 st8">Schauen Sie die Bilder an</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>Schauen Sie die Bilder an:</p>
<h2 class="duinzone">Dünenzone</h2>
<h2 class="duinvallei">Dünental</h2>
<h2 class="voorziening">Multifunktionelles Hauptgebäude</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">Der Projektstandort</span>
</a>
</div>
<!-- Bilder -->
<div class="slider-duinzone slider">
<h1>Bilder Dünenzone</h1>
<?php
include 'app/views/build_images/duinzone.php';
foreach ($photos as $photo)
{
if(isset($photo['name_de']) && $photo['name_de'] != '')
{
echo '<a class="slideshowimg slide-show-img" rel="duinzone" title="' . $photo['name_de'] . '" href="/public/images/static/bouw/' . $photo['photo'] . '.jpg">
<img src="/public/images/static/bouw/' . $photo['photo'] . '_small.jpg" alt="" />
<span class="slideshowTitle">' . $photo['name_de'] . '</span>
</a>';
}
}
?>
<div class="clear"></div>
<div class="loadMoreBuildings duinzone-more">
<p>Mehr Bilder. </p>
</div>
</div>
<div class="slider-duinvallei slider">
<h1>Bilder Dünental</h1>
<?php
include 'app/views/build_images/duinvallei.php';
foreach ($photos as $photo)
{
if(isset($photo['name_de']) && $photo['name_de'] != '')
{
echo '<a class="slideshowimg slide-show-img" rel="duinzone" title="' . $photo['name_de'] . '" href="/public/images/static/bouw/' . $photo['photo'] . '.jpg">
<img src="/public/images/static/bouw/' . $photo['photo'] . '_small.jpg" alt="" />
<span class="slideshowTitle">' . $photo['name_de'] . '</span>
</a>';
}
}
?>
<div class="clear"></div>
<div class="loadMoreBuildings duinvallei-more">
<p>Mehr Bilder. </p>
</div>
</div>
<div class="slider-voorziening slider">
<h1>Bilder multifunktionelles Hauptgebäude</h1>
<?php
include 'app/views/build_images/voorziening.php';
foreach ($photos as $photo)
{
if(isset($photo['name_de']) && $photo['name_de'] != '')
{
echo '<a class="slideshowimg slide-show-img" rel="duinzone" title="' . $photo['name_de'] . '" href="/public/images/static/bouw/' . $photo['photo'] . '.jpg">
<img src="/public/images/static/bouw/' . $photo['photo'] . '_small.jpg" alt="" />
<span class="slideshowTitle">' . $photo['name_de'] . '</span>
</a>';
}
}
?>
<div class="clear"></div>
<div class="loadMoreBuildings voorziening-more">
<p>Mehr Bilder. </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>Umgebung</h1>
<p>
Eine Insel mit einer eigenen Atmosphäre. Goeree-Overflakkee gehört schon jahrhundertelang zur
Provinz Südholland, aber dank ihres eignen Dialektes und ihrer eignen Landschaft sieht man sie eher
als die nördlichste seeländische Insel. Die unberührte Insel ist mit der Nordsee, Haringvliet,
Volkerak und dem Grevelingensee umgeben.
</p>
<a href="#youtubemodal" data-toggle="modal" class="more">Umgebung video ansehen</a>
</div>
</div>
<div id="map-canvas"></div>
</div>