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="row justify-content-center">
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<div class="card h-100"> <div class="card h-100">

25
public/index.html
View file

@ -15,7 +15,7 @@
<meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png"> <meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head> </head>
<body class="has-hero"> <body>
<header> <header>
<!--# include file="/includes/nav.html" --> <!--# include file="/includes/nav.html" -->
@ -31,13 +31,11 @@
</header> </header>
<main> <main>
<section class="container-xxl text-center"> <section id="diensten" class="container-xxl text-center">
<h2 id="diensten">FPV drone opnames laten maken</h2> <h2>FPV drone opnames laten maken</h2>
<div class="row"> <p>
<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.
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>
</p>
</div>
<div class="row"> <div class="row">
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<div class="card h-100"> <div class="card h-100">
@ -118,18 +116,18 @@
</div> </div>
</section> </section>
<section class="container-xxl"> <section id="prijzen" class="container-xxl">
<div class="row justify-content-center text-center"> <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"> <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"> <p itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<span itemprop="text"> <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. 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> </span>
</p> </p>
</div> </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. Hieronder vind je meer informatie over de verschillende categorieën en bijbehorende indicatieprijzen. Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.
</p> </p>
</div> </div>
@ -149,8 +147,7 @@
</div> </div>
</section> </section>
<section class="container-xxl"> <section id="over-mij" class="container-xxl">
<div id="over-mij"></div>
<div class="card h-100 bg-light text-dark"> <div class="card h-100 bg-light text-dark">
<h2 class="card-title mt-4 text-center">Over mij</h2> <h2 class="card-title mt-4 text-center">Over mij</h2>
<div class="row g-0"> <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"> <meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head> </head>
<body class="has-hero"> <body>
<header> <header>
<!--# include file="/includes/nav.html" --> <!--# include file="/includes/nav.html" -->
<div class="hero position-relative overflow-hidden" style="margin-top: 8.5rem;"> <div class="hero position-relative overflow-hidden" style="height: 100vh;">
<div class="hero-body" style="z-index: 1;"> <div class="hero-body position-absolute bottom-0" style="z-index: 1;">
<h1 class="h2">Laat jouw bedrijf spreken met een dynamische dronevideo</h1> <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>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> <p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p>
</div> </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> </div>
</header> </header>
<main> <main>
<section class="container-xxl"> <section id="prijzen" class="container-xxl">
<h2 id="prijzen" class="text-center">Prijzen en tarieven</h2> <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> <p class="text-center">Wat kost een bedrijfs-dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
<div class="row justify-content-center"> <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"> <meta property="og:image" content="/assets/static/logo-aerialshots-v1-w.png">
</head> </head>
<body class="has-hero"> <body>
<header> <header>
<!--# include file="/includes/nav.html" --> <!--# include file="/includes/nav.html" -->
<div class="hero position-relative overflow-hidden" style="margin-top: 8.5rem;"> <div class="hero" style="margin-top: 7rem;">
<div class="hero-body" style="z-index: 1;"> <div class="hero-body">
<h1 class="h2">Luchtbeelden die woningen sneller verkopen</h1> <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>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> <p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p>
@ -29,8 +29,8 @@
</header> </header>
<main> <main>
<section class="container-xxl"> <section id="waarom-fpv" class="container-xxl">
<h1 id="waarom-fpv">Waarom kiezen voor FPV dronevideo bij vastgoed?</h1> <h1>Waarom kiezen voor FPV dronevideo bij vastgoed?</h1>
<ul> <ul>
<li> <li>
<strong>Verhoogt de zichtbaarheid</strong><br> <strong>Verhoogt de zichtbaarheid</strong><br>
@ -55,8 +55,8 @@
</ul> </ul>
</section> </section>
<section class="container-xxl"> <section id="werkwijze" class="container-xxl">
<h1 id="werkwijze">Werkwijze</h1> <h1>Werkwijze</h1>
<ol> <ol>
<li> <li>
<strong>Intake gesprek</strong><br> <strong>Intake gesprek</strong><br>
@ -81,8 +81,8 @@
</ol> </ol>
</section> </section>
<section class="container-xxl"> <section id="faq" class="container-xxl">
<h1 id="faq">Veelgestelde vragen (FAQ)</h1> <h1>Veelgestelde vragen (FAQ)</h1>
<p></p> <p></p>
<div class="accordion" itemscope itemtype="https://schema.org/FAQPage"> <div class="accordion" itemscope itemtype="https://schema.org/FAQPage">
<div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <div class="accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
@ -136,8 +136,8 @@
</div> </div>
</section> </section>
<section class="container-xxl"> <section id="prijzen" class="container-xxl">
<h2 id="prijzen" class="text-center">Prijzen en tarieven</h2> <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> <p class="text-center">Wat kost een vastgoed-dronevideo? Alle prijzen zijn exclusief btw, reis-, en verblijfskosten.</p>
<div class="row justify-content-center"> <div class="row justify-content-center">

9
src/js/scripts.js
View file

@ -31,14 +31,13 @@ document.addEventListener('DOMContentLoaded', () =>
/** /**
* @type {NodeListOf<HTMLElement>} * @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 = anchorTarget.querySelector('h1,h2');
const anchorHeader = section.querySelector('h1,h2');
if (anchorTarget && anchorHeader) if (anchorHeader)
{ {
const anchorLink = document.createElement('a'); const anchorLink = document.createElement('a');
anchorLink.className = 'anchor-link'; anchorLink.className = 'anchor-link';

14
src/scss/styles.scss
View file

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