| Server IP : 77.68.25.176 / Your IP : 216.73.216.25 Web Server : Apache System : Linux plesk 4.15.0-159-generic #167-Ubuntu SMP Tue Sep 21 08:55:05 UTC 2021 x86_64 User : dwp ( 10001) PHP Version : 7.4.33 Disable Function : opcache_get_status MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/vhosts/dazzlingwebplanet.co.uk/mg.dazzlingwebplanet.com/soyachap-web/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Soyachap - Born vegan, Raised tasty</title>
<meta content="" name="description" />
<meta content="" name="keywords" />
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon" />
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<!-- Vendor CSS Files -->
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet" />
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link
href="assets/vendor/owl.carousel/assets/owl.carousel.min.css"
rel="stylesheet"
/>
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet" />
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet" />
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNK5hWqC2WJPZXaa13QrTcJmFQ_TCclpw&callback=initMap"
async
defer
></script>
<!-- =======================================================
* Template Name: Bocor - v2.2.0
* Template URL: https://bootstrapmade.com/bocor-bootstrap-template-nice-animation/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header">
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container d-flex align-items-center">
<div class="logo mr-auto">
<!-- <h1 class="text-light"><a href="?page=about#about">The Great Chap<span>.</span></a></h1> -->
<!-- Uncomment below if you prefer to use an image logo -->
<a class="logo-image" href="?page=about#about"><img src="assets/img/logo@2x.png" alt="" class="img-fluid" /></a>
</div>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html?page=about#about">About Us</a></li>
<li><a href="index.html#faq">FAQ's</a></li>
<li class="active"><a href="findus.html">Find Us</a></li>
<li><a href="index.html#testimonials">Testimonials</a></li>
<li><a href="index.html#contact">Contact Us</a></li>
<li class="social-links" style="margin-left: 40px; margin-top: 0">
<a href="https://www.facebook.com/soyatreatz" class="social"
><img
src="assets/img/facebook.png"
width="50%"
alt=""
class="img-fluid"
/></a>
<a href="https://www.facebook.com/soyatreatz" class="social"
><img
src="assets/img/instagram.png"
width="50%"
alt=""
class="img-fluid"
/></a>
<a href="https://www.facebook.com/soyatreatz" class="social"
><img
src="assets/img/youtube.png"
width="50%"
alt=""
class="img-fluid"
/></a>
</li>
<!-- <li class="get-started"><a href="#about">Get Started</a></li> -->
</ul>
</nav>
<!-- .nav-menu -->
</div>
</nav>
</header>
<!-- End Header -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about section-bg">
<div class="container">
<div class="clearfix"></div>
<div class="d-flex flex-row locations"><h2>Our Locations</h2></div>
<div class="d-flex flex-row" >
<div class="p-2 w-25 oflow" id="map-row">
<div class="card card01" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">CK Store</h5>
<h6 class="card-subtitle mb-2 text-muted">
17-25 Regent Street
</h6>
<h6 class="card-subtitle mb-2 text-muted">London SW1Y 4LR</h6>
<h6 class="card-subtitle mb-2 text-muted">ENGLAND</h6>
</div>
</div>
<div class="card card02" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">CK Store</h5>
<h6 class="card-subtitle mb-2 text-muted">
17-25 Regent Street
</h6>
<h6 class="card-subtitle mb-2 text-muted">London SW1Y 4LR</h6>
<h6 class="card-subtitle mb-2 text-muted">ENGLAND</h6>
</div>
</div>
<div class="card card03" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">CK Store</h5>
<h6 class="card-subtitle mb-2 text-muted">
17-25 Regent Street
</h6>
<h6 class="card-subtitle mb-2 text-muted">London SW1Y 4LR</h6>
<h6 class="card-subtitle mb-2 text-muted">ENGLAND</h6>
</div>
</div>
<div class="card" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">CK Store</h5>
<h6 class="card-subtitle mb-2 text-muted">
17-25 Regent Street
</h6>
<h6 class="card-subtitle mb-2 text-muted">London SW1Y 4LR</h6>
<h6 class="card-subtitle mb-2 text-muted">ENGLAND</h6>
</div>
</div>
</div>
<div class="w-75" style="padding: 10px">
<div id="map-container">
<div id="map-overview" class="hidden">
Get back to map overview
</div>
<div id="map-canvas"></div>
</div>
</div>
</div>
</div>
</section>
<!-- End About Section -->
</main>
<!-- End #main -->
<div id="map-info">
<div class="gp brussels">
<div class="card" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">CK Store</h5>
<h6 class="card-subtitle mb-2 text-muted">
17-25 Regent Street
</h6>
<h6 class="card-subtitle mb-2 text-muted">London SW1Y 4LR</h6>
<h6 class="card-subtitle mb-2 text-muted">ENGLAND</h6>
</div>
</div>
<p><a href="https://fr.wikipedia.org/wiki/Place_d%27Armes_(Namur)" targe="_blank">More info</a></p>
</div>
<div class="gp antwerp">
<div class="card" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">CK Store</h5>
<h6 class="card-subtitle mb-2 text-muted">
17-25 Regent Street
</h6>
<h6 class="card-subtitle mb-2 text-muted">London SW1Y 4LR</h6>
<h6 class="card-subtitle mb-2 text-muted">ENGLAND</h6>
</div>
</div>
<p><a href="https://en.wikipedia.org/wiki/Grote_Markt_(Antwerp)" target="_blank">More info</a></p>
</div>
<div class="gp namur">
<div class="card" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">CK Store</h5>
<h6 class="card-subtitle mb-2 text-muted">
17-25 Regent Street
</h6>
<h6 class="card-subtitle mb-2 text-muted">London SW1Y 4LR</h6>
<h6 class="card-subtitle mb-2 text-muted">ENGLAND</h6>
</div>
</div>
<p><a href="https://fr.wikipedia.org/wiki/Place_d%27Armes_(Namur)" targe="_blank">More info</a></p>
</div>
</div>
</div>
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container footer-bottom clearfix">
<div class="copyright">
© Copyright <strong><span>Soyachap</span></strong
>. All Rights Reserved
</div>
</div>
</footer>
<!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
<script type="text/javascript">
var responsiveZoom = window.innerWidth < 768 ? 6.75 : 7.75;
function initMap() {
var myLatlng = new google.maps.LatLng(50.7974444, 4.48544);
var mapOptions = {
styles: [
{
elementType: "geometry",
stylers: [
{
color: "#f5f5f5",
},
],
},
{
elementType: "labels.icon",
stylers: [
{
color: "#f5f5f5",
},
],
},
{
elementType: "labels.text.fill",
stylers: [
{
color: "#616161",
},
],
},
{
elementType: "labels.text.stroke",
stylers: [
{
color: "#f5f5f5",
},
],
},
{
featureType: "administrative.country",
elementType: "geometry.stroke",
stylers: [
{
color: "#00338D",
},
{
visibility: "on",
},
{
weight: 2,
},
],
},
{
featureType: "administrative.land_parcel",
elementType: "labels.text.fill",
stylers: [
{
color: "#bdbdbd",
},
],
},
{
featureType: "poi",
elementType: "labels",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "road",
elementType: "geometry",
stylers: [
{
color: "#ffffff",
},
],
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [
{
color: "#757575",
},
],
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{
color: "#dadada",
},
],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [
{
color: "#616161",
},
],
},
{
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [
{
color: "#9e9e9e",
},
],
},
{
featureType: "water",
elementType: "geometry.fill",
stylers: [
{
color: "#bbdefb",
},
],
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [
{
color: "#9e9e9e",
},
],
},
],
zoom: responsiveZoom,
minZoom: 6,
maxZoom: 17,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
panControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
rotateControl: false,
};
var map = new google.maps.Map(
document.getElementById("map-canvas"),
mapOptions
);
// BRUSSELS
var markerGPBrussels = new google.maps.Marker({
position: new google.maps.LatLng(50.846759, 4.352446),
map: map,
title: "Click here for Brussels Grand-Place details",
icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
});
google.maps.event.addListener(markerGPBrussels, "click", function () {
hideInfo();
//showInfo(".brussels");
//map.panTo(this.getPosition());
//map.setZoom(16);
$('.card01').addClass('location-active');
});
// ANTWERP
var markerGPAntwerp = new google.maps.Marker({
position: new google.maps.LatLng(51.221296, 4.399885),
map: map,
title: "Click here for Antwerp Grand-Place details",
icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
});
google.maps.event.addListener(markerGPAntwerp, "click", function () {
hideInfo();
// showInfo(".antwerp");
// map.panTo(this.getPosition());
// map.setZoom(16);
$('.card02').addClass('location-active');
});
// NAMUR
var markerGPNamur = new google.maps.Marker({
position: new google.maps.LatLng(50.46311, 4.867437),
map: map,
title: "Click here for Namur Grand-Place details",
icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
});
google.maps.event.addListener(markerGPNamur, "click", function () {
hideInfo();
// showInfo(".namur");
// map.panTo(this.getPosition());
// map.setZoom(16);
$('.card03').addClass('location-active');
});
// NAMUR
var markerGPNamur1 = new google.maps.Marker({
position: new google.maps.LatLng(50.46311, 4.867437),
map: map,
title: "Click here for Namur Grand-Place details",
icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
});
google.maps.event.addListener(markerGPNamur1, "click", function () {
hideInfo();
// showInfo(".namur");
// map.panTo(this.getPosition());
// map.setZoom(16);
$('.card04').addClass('location-active');
});
// back to offices overview
document
.querySelector("#map-overview")
.addEventListener("click", function () {
map.panTo(myLatlng);
map.setZoom(responsiveZoom);
hideInfo();
});
window.addEventListener("resize", function () {
if (window.innerWidth < 768) responsiveZoom = 6.75;
else if (window.innerWidth > 768) responsiveZoom = 7.75;
map.setZoom(responsiveZoom);
});
}
function showInfo(selector) {
document.querySelector(selector).classList.add("shown");
document.querySelector("#map-canvas").classList.add("zoomed");
document.querySelector("#map-overview").classList.remove("hidden");
}
function hideInfo() {
$('#map-row').parent().find('.location-active').removeClass('.location-active');
// if (document.querySelector(".shown")) {
// document.querySelector(".shown").classList.remove("shown");
// }
// document.querySelector("#map-canvas").classList.remove("zoomed");
// document.querySelector("#map-overview").classList.add("hidden");
}
</script>
</body>
</html>