Skip to content

Instantly share code, notes, and snippets.

@Flobin

Flobin/header.php Secret

Last active December 8, 2023 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Flobin/70db3fd378b017542b8158545ce83a86 to your computer and use it in GitHub Desktop.
Save Flobin/70db3fd378b017542b8158545ce83a86 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
header.php
<!doctype html>
<html class="no-js <?= $currentpage ?>" lang="nl-NL">
<head>
<meta charset="utf-8">
<title>Hof van Waelsicht - Groen wonen aan het water</title>
<meta name="description" content="Hof van Waelsicht: een ontwikkeling van acht woningen op bouwkavels aan de Waal bij Ridderkerk.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Hof van Waelsicht - Groen wonen aan het water">
<meta property="og:type" content="website">
<meta property="og:url" content="https://hofvanwaelsicht.nl/">
<meta property="og:image" content="https://hofvanwaelsicht.nl/img/pruimendijk_oeverwoning_01_2560.jpg">
<link rel="manifest" href="/site.webmanifest">
<link rel="apple-touch-icon" href="/icon.png">
<script>(function(w){var dpr=((w.devicePixelRatio===undefined)?1:w.devicePixelRatio);if(!!w.navigator.standalone){var r=new XMLHttpRequest();r.open('GET','/retinaimages.php?devicePixelRatio='+dpr,false);r.send()}else{document.cookie='devicePixelRatio='+dpr+'; path=/'}})(window)</script>
<noscript><style id="devicePixelRatio" media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)">html{background-image:url("/retinaimages.php?devicePixelRatio=2")}</style></noscript>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/photoswipe-min.css">
<link rel="stylesheet" href="/css/splide.min.css">
<link rel="stylesheet" href="/css/main.css">
<meta name="theme-color" content="#f0ae25">
</head>
<body>
<header id="header">
<div id="topbar">
<a href="/" id="site-logo">
<img id="logo" src="/img/hof-van-waelsicht-logo_02.svg" alt="Hof van Waelsicht, groen wonen aan het water logo">
</a>
<nav id="site-nav">
<ul class="menu">
<li class="menu-item"><a class="menu-item-link page-index" href="/">home</a></li>
<li class="menu-item"><a class="menu-item-link page-locatie" href="/locatie">locatie</a></li>
<li class="menu-item"><a class="menu-item-link page-kavels" href="/kavels">kavels</a></li>
<li class="menu-item"><a class="menu-item-link page-woningen" href="/woningen">woningen</a></li>
<li class="menu-item"><a class="menu-item-link page-oeverpark" href="/oeverpark">oeverpark</a></li>
<li class="menu-item"><a class="menu-item-link page-inschrijven" href="/inschrijven">inschrijven</a></li>
</ul>
</nav>
</div>
</header>
Raw
kavels.php
<?php $currentpage = 'kavels'; ?>
<?php include 'header.php';?>
<main id="main">
<figure class="cover">
<img src="/img/pruimendijk_oeverwoning_01_2560.jpg"
srcset="/img/pruimendijk_oeverwoning_01_768.jpg 768w,
/img/pruimendijk_oeverwoning_01_1024.jpg 1024w,
/img/pruimendijk_oeverwoning_01_1440.jpg 1440w,
/img/pruimendijk_oeverwoning_01_1920.jpg 1920w,
/img/pruimendijk_oeverwoning_01_2560.jpg 2560w"
sizes="(max-width: 768px) 768px,
(max-width: 1024px) 1024px,
(max-width: 1440px) 1440px,
(max-width: 1920px) 1920px,
2560px"
alt="Een woning in Hof van Waelsicht"
class="cover-img">
</figure>
<div class="page-title">
<h1 class="page-title-text">Kavels</h1>
</div>
<article>
<p>
In het Hof van Waelsicht is plaats voor acht woningen, ondergebracht in een dijk- en een oeverzone aan de Waal. Woningen met elk een eigen karakter, in een omgeving met sloten en beplanting, waar recreatie en ontspanning tot de mogelijkheden behoren. Want binnen het project is ruimte gemaakt voor een speciaal groengebied, een oeverpark waar een schapenweide is gesitueerd en waar bezoekers kortstondig kunnen verpozen.
</p>
<p>
Ruim opgezette kavels, met een belangrijke rol voor de beplanting die het landelijke karakter verder accentueert en het gevoel van maximale vrijheid versterkt. De woningen zijn binnen de thema’s dijk en oever met randvoorwaarden mogelijk.
</p>
<h2>Ontdek de bouwkavels</h2>
<p>Hof van Waelsicht is onderverdeeld in dijkkavels (aangegeven met een D) en oeverkavels (aangegeven met een O).</p>
<div class="gallery one-item lightbox">
<a href="/img/hof-van-waelsicht-plattegrond_2560.jpg"
data-pswp-width="2560"
data-pswp-height="1811"
target="_blank">
<img src="/img/hof-van-waelsicht-plattegrond_1440.jpg" alt="De kavels van Hof van Waelsicht">
</a>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>kavel</th>
<th>grootte</th>
<th>prijs</th>
<th>status</th>
<th>downloads</th>
</tr>
</thead>
<tbody>
<tr>
<td>D1</td>
<td>761 m2</td>
<td>€ 675.000 v.o.n.</td>
<td>beschikbaar</td>
<td><a href="/downloads/kavelpaspoort-D1.pdf">kavelpaspoort D1 (pdf)</a></td>
</tr>
<tr>
<td>D2</td>
<td>844 m2</td>
<td>€ 650.000 v.o.n.</td>
<td>beschikbaar</td>
<td><a href="/downloads/kavelpaspoort-D2.pdf">kavelpaspoort D2 (pdf)</a></td>
</tr>
<tr>
<td>D3</td>
<td>1061 m2</td>
<td>€ 775.000 v.o.n.</td>
<td>beschikbaar</td>
<td><a href="/downloads/kavelpaspoort-D3.pdf">kavelpaspoort D3 (pdf)</a></td>
</tr>
<tr>
<td>O1</td>
<td>1511 m2</td>
<td>€ 1.035.000 v.o.n.</td>
<td>beschikbaar</td>
<td><a href="/downloads/kavelpaspoort-O1.pdf">kavelpaspoort O1 (pdf)</a></td>
</tr>
<tr>
<td>O2</td>
<td>1646 m2</td>
<td>&nbsp;</td>
<td>verkocht</td>
<td><a href="/downloads/kavelpaspoort-O2.pdf">kavelpaspoort O2 (pdf)</a></td>
</tr>
<tr>
<td>O3</td>
<td>1608 m2</td>
<td>€ 1.300.000 v.o.n.</td>
<td>beschikbaar</td>
<td><a href="/downloads/kavelpaspoort-O3.pdf">kavelpaspoort O3 (pdf)</a></td>
</tr>
<tr>
<td>O4</td>
<td>1511 m2</td>
<td>&nbsp;</td>
<td>verkocht</td>
<td><a href="/downloads/kavelpaspoort-O4.pdf">kavelpaspoort O4 (pdf)</a></td>
</tr>
<tr>
<td>O5</td>
<td>1050 m2</td>
<td>€ 950.000 v.o.n.</td>
<td>beschikbaar</td>
<td><a href="/downloads/kavelpaspoort-O5.pdf">kavelpaspoort O5 (pdf)</a></td>
</tr>
</tbody>
</table>
</div>
<p>Meer weten over de kavels en mogelijkheden? Bekijk hier de <a href="/woningen">woningen</a>.</p>
</article>
</main>
<?php include 'footer.php';?>
Raw
main.scss
.cover {
padding: 0;
margin: 9rem 0 0 0;
@include at-least ($S) {
margin-top: 6rem;
}
@include at-least ($M) {
margin-top: 2.5rem;
}
@include at-least ($M) {
margin-top: 0;
}
}
.cover-img {
display: block;
width: 100vw;
height: 100%;
max-height: 87vh;
object-fit: cover;
}
.cover-empty {
height: 20rem;
&+.page-title {
background: none;
.page-title-text {
color: $text-color;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment