bvandevliet/Vandevliet.AerialShots.Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplified spacing and anchor handling.

Browse source
This commit is contained in:
Bob Vandevliet 2025-12-17 20:06:06 +01:00
parent 94bd9aab61
commit 465794755b
6 changed files with 39 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/includes/footer.html
View file

@ -1,6 +1,6 @@
<footer class="bg-secondary-subtle">
<footer class="bg-secondary-subtle pt-3">
<section class="container-xxl pt-4">
<section class="container-xxl">
<div class="row justify-content-center">
<div class="col-6 col-lg-3">
<div class="card h-100">

19
public/index.html
View file

@ -15,7 +15,7 @@
<meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head>
<body class="has-hero">
<body>
<header>
<!--# include file="/includes/nav.html" -->
@ -31,13 +31,11 @@
</header>
<main>
<section class="container-xxl text-center">
<h2 id="diensten">FPV drone opnames laten maken</h2>
<div class="row">
<section id="diensten" class="container-xxl text-center">
<h2>FPV drone opnames laten maken</h2>
<p>
FPV staat voor <b>First Person View</b> en levert cinematische dronebeelden op. FPV drones worden op maat gemaakt en zijn daardoor flexibel in te zetten. Ze kunnen binnen en buiten filmen, van het navigeren door fabrieken, kantoren en festivaltenten tot het achtervolgen van auto's en motorcrossers. FPV beelden vertellen een compleet verhaal in één vlucht. Vaak worden deze vluchten vastgelegd met een GoPro of vergelijkbare actiecamera. Het resultaat is <b>vloeiend, filmisch en dynamisch</b> en overtreft traditionele drone-videografie.
</p>
</div>
<div class="row">
<div class="col-sm-6 col-lg">
<div class="card h-100">
@ -118,18 +116,18 @@
</div>
</section>
<section class="container-xxl">
<section id="prijzen" class="container-xxl">
<div class="row justify-content-center text-center">
<div class="col-lg-8">
<div class="col-lg-8 mt-0">
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<h2 id="prijzen" class="text-center" itemprop="name">Wat kost een dronevideo?</h2>
<h2 itemprop="name">Wat kost een dronevideo?</h2>
<p itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<span itemprop="text">
FPV dronebeelden heb je al vanaf €350,- per vlucht. Inclusief montage en nabewerking vanaf €750,-. De uiteindelijke prijs wordt bepaald door locatie, vluchtduur en complexiteit van de eventuele montage.
</span>
</p>
</div>
<p class="text-center">
<p>
Hieronder vind je meer informatie over de verschillende categorieën en bijbehorende indicatieprijzen. Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.
</p>
</div>
@ -149,8 +147,7 @@
</div>
</section>
<section class="container-xxl">
<div id="over-mij"></div>
<section id="over-mij" class="container-xxl">
<div class="card h-100 bg-light text-dark">
<h2 class="card-title mt-4 text-center">Over mij</h2>
<div class="row g-0">

14
public/pages/bedrijfsvideo.html
View file

@ -15,23 +15,25 @@
<meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head>
<body class="has-hero">
<body>
<header>
<!--# include file="/includes/nav.html" -->
<div class="hero position-relative overflow-hidden" style="margin-top: 8.5rem;">
<div class="hero-body" style="z-index: 1;">
<div class="hero position-relative overflow-hidden" style="height: 100vh;">
<div class="hero-body position-absolute bottom-0" style="z-index: 1;">
<h1 class="h2">Laat jouw bedrijf spreken met een dynamische dronevideo</h1>
<p>Trek de aandacht met een krachtige bedrijfsvideo met dronebeelden. Ideaal voor social media, website of presentaties. Laat je merk écht bewegen.</p>
<p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p>
</div>
<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7346800134644531200?compact=1" height="399" width="504" frameborder="0" allowfullscreen="" title="Ingevoegde bijdrage"></iframe>
<div class="cover parallax ratio ratio-16x9">
<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7346800134644531200?compact=1" frameborder="0" allowfullscreen="" title="Ingevoegde bijdrage"></iframe>
</div>
</div>
</header>
<main>
<section class="container-xxl">
<h2 id="prijzen" class="text-center">Prijzen en tarieven</h2>
<section id="prijzen" class="container-xxl">
<h2 class="text-center">Prijzen en tarieven</h2>
<p class="text-center">Wat kost een bedrijfs-dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
<div class="row justify-content-center">

22
public/pages/vastgoed.html
View file

@ -15,12 +15,12 @@
<meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head>
<body class="has-hero">
<body>
<header>
<!--# include file="/includes/nav.html" -->
<div class="hero position-relative overflow-hidden" style="margin-top: 8.5rem;">
<div class="hero-body" style="z-index: 1;">
<div class="hero" style="margin-top: 7rem;">
<div class="hero-body">
<h1 class="h2">Luchtbeelden die woningen sneller verkopen</h1>
<p>Laat potentiële kopers de locatie, ruimte en sfeer direct ervaren met een professionele dronevideo woning.</p>
<p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p>
@ -29,8 +29,8 @@
</header>
<main>
<section class="container-xxl">
<h1 id="waarom-fpv">Waarom kiezen voor FPV dronevideo bij vastgoed?</h1>
<section id="waarom-fpv" class="container-xxl">
<h1>Waarom kiezen voor FPV dronevideo bij vastgoed?</h1>
<ul>
<li>
<strong>Verhoogt de zichtbaarheid</strong><br>
@ -55,8 +55,8 @@
</ul>
</section>
<section class="container-xxl">
<h1 id="werkwijze">Werkwijze</h1>
<section id="werkwijze" class="container-xxl">
<h1>Werkwijze</h1>
<ol>
<li>
<strong>Intake gesprek</strong><br>
@ -81,8 +81,8 @@
</ol>
</section>
<section class="container-xxl">
<h1 id="faq">Veelgestelde vragen (FAQ)</h1>
<section id="faq" class="container-xxl">
<h1>Veelgestelde vragen (FAQ)</h1>
<p></p>
<div class="accordion" itemscope itemtype="https://schema.org/FAQPage">
<div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
@ -136,8 +136,8 @@
</div>
</section>
<section class="container-xxl">
<h2 id="prijzen" class="text-center">Prijzen en tarieven</h2>
<section id="prijzen" class="container-xxl">
<h2 class="text-center">Prijzen en tarieven</h2>
<p class="text-center">Wat kost een vastgoed-dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
<div class="row justify-content-center">

9
src/js/scripts.js
View file

@ -31,14 +31,13 @@ document.addEventListener('DOMContentLoaded', () =>
/**
* @type {NodeListOf<HTMLElement>}
*/
const sections = document.querySelectorAll('section');
const sectionsWithId = document.querySelectorAll('section[id]');
sections.forEach(section =>
sectionsWithId.forEach(anchorTarget =>
{
const anchorTarget = section.querySelector('[id]');
const anchorHeader = section.querySelector('h1,h2');
const anchorHeader = anchorTarget.querySelector('h1,h2');
if (anchorTarget && anchorHeader)
if (anchorHeader)
{
const anchorLink = document.createElement('a');
anchorLink.className = 'anchor-link';

14
src/scss/styles.scss
View file

@ -89,12 +89,8 @@ $ff-subheader: 'Eras ITC',
var(--#{$prefix}font-sans-serif);
main {
@extend .pb-4;
padding-top: 7rem !important;
}
body.has-hero main {
@extend .pt-3;
@extend .pb-4;
}
section,
@ -108,12 +104,8 @@ main>* {
background-color: $red-200;
}
:target::before {
content: "";
display: block;
height: 6rem;
margin-top: -6rem;
visibility: hidden;
:target {
scroll-margin-top: 4.5rem;
}
.anchor-link {