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

Compare commits

base: bvandevliet:b6414d67c15f5cf0ba53540c3d87bb7f1d79bcdf
Branches Tags
bvandevliet:master
bvandevliet:feature/contact-form
bvandevliet:feature/services
bvandevliet:development
..
compare: bvandevliet:38bde95c5b373ca3f426f88f9fd2f7d38c2e7638
Branches Tags
bvandevliet:master
bvandevliet:feature/contact-form
bvandevliet:feature/services
bvandevliet:development

No commits in common. "b6414d67c15f5cf0ba53540c3d87bb7f1d79bcdf" and "38bde95c5b373ca3f426f88f9fd2f7d38c2e7638" have entirely different histories.
b6414d67c1 ... 38bde95c5b

11 changed files with 78 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

19
public/contact.html
View file

@ -2,7 +2,7 @@
<html lang="nl" data-bs-theme="dark"> <html lang="nl" data-bs-theme="dark">
<head> <head>
<!--# include file='/includes/partials/head-content.html' --> <!--# include file="/includes/head.html" -->
<title>Vandevliet Aerial Shots</title> <title>Vandevliet Aerial Shots</title>
<meta name="description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen."> <meta name="description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.">
@ -15,23 +15,22 @@
<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="d-flex flex-column min-vh-100"> <body>
<header> <header>
<!--# include file='/includes/components/nav.html' --> <!--# include file="/includes/nav.html" -->
</header> </header>
<main> <main class="mt-5 text-center">
<section class="container-xxl pb-0"> <section class="container-xxl mt-5 text-center">
<h1 id="contact" class="text-center">Contact</h1> <p class="lead">
<!--# include file='/includes/components/contact-row.html' --> Stuur mij gerust een mailtje voor een vrijblijvend gesprek :)
</p>
</section> </section>
<!-- Nothing more here yet, contact form will be added later, contact info is in the footer --> <!-- Nothing more here yet, contact form will be added later, contact info is in the footer -->
</main> </main>
<footer class="bg-secondary-subtle"> <!--# include file="/includes/footer.html" -->
<!--# include file='/includes/partials/footer-bottom.html' -->
</footer>
</body> </body>
</html> </html>

38
public/includes/components/contact-row.html
View file

@ -1,38 +0,0 @@
<div class="row justify-content-center">
<p class="lead text-center">
Stuur mij gerust een mailtje voor een offerte of vrijblijvend gesprek! 🙂
<br>🡇
</p>
<div class="col-6 col-lg-3">
<div class="card h-100 bg-secondary-subtle">
<div class="card-body d-flex flex-column">
<h2 class="section fs-3 card-title">Bob Vandevliet</h2>
<p style="margin-top: 0 !important;">Gecertificeerd FPV-dronepiloot</p>
<p>
<a href="mailto:bob@vandevliet-aerialshots.com">bob@vandevliet-aerialshots.com</a>
<br>Arnhem, Gelderland
</p>
<!-- <p><a class='btn btn-primary' href='/contact'>Offerte aanvragen</a></p> -->
<p class="fs-5 ff-header">Vandevliet Aerial Shots</p>
<p style="margin-top: 0 !important;">
KvK: 94567255<br>
Btw: NL005095319B19
</p>
<p>
<a href="/assets/static/Vandevliet AS - Algemene Voorwaarden - 250530.pdf" target="_blank">Algemene Voorwaarden</a>
</p>
<!-- <h4 class='fs-5'>Socials</h4> -->
<p class="socials fs-2" style="margin-top: auto !important; padding-top: 1rem !important;">
<a href="https://www.instagram.com/vandevliet.fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on Instagram" aria-label="Vandevliet Aerial Shots on Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/@vandevliet-fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on YouTube" aria-label="Vandevliet Aerial Shots on YouTube"><i class="fab fa-youtube"></i></a>
<a href="https://www.linkedin.com/company/vdv-as" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on LinkedIn" aria-label="Vandevliet Aerial Shots on LinkedIn"><i class="fab fa-linkedin"></i></a>
</p>
</div>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="card h-100 bg-transparent">
<img class="card-img" src="/assets/static/20230909_150343.jpg" alt="Portrait foto van mijzelf.">
</div>
</div>
</div>

46
public/includes/footer.html Normal file
View file

@ -0,0 +1,46 @@
<footer class="bg-secondary-subtle pt-3">
<section class="container-xxl">
<div class="row justify-content-center">
<div class="col-6 col-lg-3">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h2 class="section fs-3 card-title">Bob Vandevliet</h2>
<p style="margin-top: 0 !important;">Gecertificeerd FPV-dronepiloot</p>
<p>
<a href="mailto:bob@vandevliet-aerialshots.com">bob@vandevliet-aerialshots.com</a>
<br>Arnhem, Gelderland
</p>
<!-- <p><a class="btn btn-primary" href="/contact">Offerte aanvragen</a></p> -->
<p class="fs-5 ff-header">Vandevliet Aerial Shots</p>
<p style="margin-top: 0 !important;">
KvK: 94567255<br>
Btw: NL005095319B19
</p>
<p>
<a href="/assets/static/Vandevliet AS - Algemene Voorwaarden - 250530.pdf" target="_blank">Algemene Voorwaarden</a>
</p>
<!-- <h4 class="fs-5">Socials</h4> -->
<p class="socials fs-2" style="margin-top: auto !important; padding-top: 1rem !important;">
<a href="https://www.instagram.com/vandevliet.fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on Instagram" aria-label="Vandevliet Aerial Shots on Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/@vandevliet-fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on YouTube" aria-label="Vandevliet Aerial Shots on YouTube"><i class="fab fa-youtube"></i></a>
<a href="https://www.linkedin.com/company/vdv-as" target="_blank" rel="noopener noreferrer" title="Vandevliet Aerial Shots on LinkedIn" aria-label="Vandevliet Aerial Shots on LinkedIn"><i class="fab fa-linkedin"></i></a>
</p>
</div>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="card h-100 bg-transparent">
<img class="card-img" src="/assets/static/20230909_150343.jpg" alt="Portrait foto van mijzelf.">
</div>
</div>
</div>
</section>
<div class="text-center py-4">
<p>
Vandevliet Aerial Shots &copy; <!--# config timefmt="%Y" --><!--# echo var="date_local" -->
&bull; <a href="/privacy#">Privacyverklaring</a>
</p>
</div>
</footer>

15
public/includes/partials/head-content.html → public/includes/head.html
View file

@ -11,19 +11,14 @@
https://cdn.jsdelivr.net https://cdn.jsdelivr.net
https://*.fontawesome.com; https://*.fontawesome.com;
media-src 'self' media-src 'self'
https://www.youtube.com https://www.youtube.com https://youtu.be
https://youtu.be
https://www.linkedin.com; https://www.linkedin.com;
frame-src 'self' frame-src 'self'
https://www.youtube.com/embed/ https://www.youtube.com/embed/ https://youtu.be/embed/
https://youtu.be/embed/
https://www.linkedin.com/embed/; https://www.linkedin.com/embed/;
style-src 'self' 'unsafe-inline' style-src 'self' 'unsafe-inline' https://*.fontawesome.com;
https://*.fontawesome.com; font-src 'self' https://*.fontawesome.com;
font-src 'self' connect-src 'self' https://*.fontawesome.com;
https://*.fontawesome.com;
connect-src 'self'
https://*.fontawesome.com;
object-src 'none'; object-src 'none';
img-src 'self' data:; img-src 'self' data:;
"> ">

0
public/includes/components/nav.html → public/includes/nav.html
View file

6
public/includes/partials/footer-bottom.html
View file

@ -1,6 +0,0 @@
<div class="text-center py-4">
<p>
Vandevliet Aerial Shots &copy; <!--# config timefmt='%Y' --><!--# echo var='date_local' -->
&bull; <a href="/privacy#">Privacyverklaring</a>
</p>
</div>

2
public/includes/pricing/cat-open.html
View file

@ -2,7 +2,7 @@
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Open categorie</h3> <h3 class="card-title">Open categorie</h3>
<p class="card-text fs-4 ff-header">vanaf €350,-</p> <p class="card-text fs-4 ff-header">vanaf €350,-</p>
<p class="card-text">Geschikt voor indoor drone tours en vluchten in ongecontroleerd luchtruim met een laag risico:</p> <p class="card-text">Geschikt voor indoor en vluchten in ongecontroleerd luchtruim met een laag risico:</p>
<ul> <ul>
<li>Bedrijfsvideo</li> <li>Bedrijfsvideo</li>
<li>Vastgoed</li> <li>Vastgoed</li>

33
public/index.html
View file

@ -1,30 +1,27 @@
<!--# set var='title' value='Vandevliet Aerial Shots' -->
<!--# set var='description' value='FPV dronevideo\'s voor bedrijven, vastgoed, recreatie, sport en evenementen' -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="nl" data-bs-theme="dark"> <html lang="nl" data-bs-theme="dark">
<head> <head>
<!--# include file='/includes/partials/head-content.html' --> <!--# include file="/includes/head.html" -->
<title><!--# echo var='title' --></title> <title>Vandevliet Aerial Shots</title>
<meta name="description" content="<!--# echo var='description' -->"> <meta name="description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.">
<meta property="og:title" content="<!--# echo var='title' -->"> <meta property="og:title" content="Vandevliet Aerial Shots">
<meta property="og:description" content="<!--# echo var='description' -->"> <meta property="og:description" content="FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:locale" content="nl_NL"> <meta property="og:locale" content="nl_NL">
<meta property="og:url" content="https://vandevliet-aerialshots.com"> <meta property="og:url" content="https://vandevliet-aerialshots.com">
<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="d-flex flex-column min-vh-100"> <body>
<header> <header>
<!--# include file='/includes/components/nav.html' --> <!--# include file="/includes/nav.html" -->
<div class="hero position-relative overflow-hidden" style="height: 100vh;"> <div class="hero position-relative overflow-hidden" style="height: 100vh;">
<div class="hero-body position-absolute bottom-0" style="z-index: 1;"> <div class="hero-body position-absolute bottom-0" style="z-index: 1;">
<h1 class="lead"><!--# echo var='description' --></h1> <h1 class="h5">FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen</h1>
<p><a class="btn btn-primary" href="#diensten">Ontdek meer <i class="fa-solid fa-arrow-down"></i></a></p> <p><a class="btn btn-primary" href="#diensten">Ontdek meer <i class="fa-solid fa-arrow-down"></i></a></p>
</div> </div>
<video class="cover parallax" preload="auto" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> <video class="cover parallax" preload="auto" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
@ -131,15 +128,15 @@
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-sm-6 col-lg-4"> <div class="col-sm-6 col-lg-4">
<!--# include file='/includes/pricing/cat-open.html' --> <!--# include file="/includes/pricing/cat-open.html" -->
</div> </div>
<div class="col-sm-6 col-lg-4"> <div class="col-sm-6 col-lg-4">
<!--# include file='/includes/pricing/cat-specific.html' --> <!--# include file="/includes/pricing/cat-specific.html" -->
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-lg-8"> <div class="col-lg-8">
<!--# include file='/includes/pricing/post-edit.html' --> <!--# include file="/includes/pricing/post-edit.html" -->
</div> </div>
</div> </div>
</section> </section>
@ -193,13 +190,7 @@
</section> </section>
</main> </main>
<footer class="bg-secondary-subtle"> <!--# include file="/includes/footer.html" -->
<section class="container-xxl">
<!--# include file='/includes/components/contact-row.html' -->
</section>
<!--# include file='/includes/partials/footer-bottom.html' -->
</footer>
</body> </body>
</html> </html>

8
public/privacy.html
View file

@ -2,7 +2,7 @@
<html lang="nl" data-bs-theme="dark"> <html lang="nl" data-bs-theme="dark">
<head> <head>
<!--# include file='/includes/partials/head-content.html' --> <!--# include file="/includes/head.html" -->
<title>Privacyverklaring • Vandevliet Aerial Shots</title> <title>Privacyverklaring • Vandevliet Aerial Shots</title>
<meta name="description" content="Privacyverklaring • Vandevliet Aerial Shots"> <meta name="description" content="Privacyverklaring • Vandevliet Aerial Shots">
@ -15,9 +15,9 @@
<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="d-flex flex-column min-vh-100"> <body>
<header> <header>
<!--# include file='/includes/components/nav.html' --> <!--# include file="/includes/nav.html" -->
</header> </header>
<main> <main>
@ -56,7 +56,7 @@
</main> </main>
<!--# include file='/includes/footer.html' --> <!--# include file="/includes/footer.html" -->
</body> </body>
</html> </html>

15
src/js/scripts.js
View file

@ -28,28 +28,15 @@ window.addEventListener('pageshow', () =>
document.addEventListener('DOMContentLoaded', () => document.addEventListener('DOMContentLoaded', () =>
{ {
/**
* @type {HTMLDivElement}
*/
const navBar = document.getElementById('navbarNav');
/**
* @type {NodeListOf<HTMLAnchorElement>}
*/
const navLinks = navBar.querySelectorAll('a.nav-link');
/** /**
* @type {NodeListOf<HTMLElement>} * @type {NodeListOf<HTMLElement>}
*/ */
const sectionsWithId = document.querySelectorAll('section[id]'); const sectionsWithId = document.querySelectorAll('section[id]');
// Update nav links and add anchor links to section headers.
sectionsWithId.forEach(anchorTarget => sectionsWithId.forEach(anchorTarget =>
{ {
/**
* @type {HTMLHeadingElement|null}
*/
const anchorHeader = anchorTarget.querySelector('h1,h2'); const anchorHeader = anchorTarget.querySelector('h1,h2');
// Add anchor link to section header.
if (anchorHeader) if (anchorHeader)
{ {
const anchorLink = document.createElement('a'); const anchorLink = document.createElement('a');
@ -61,7 +48,7 @@ document.addEventListener('DOMContentLoaded', () =>
}); });
// Collapse the navbar in mobile view after clicking a link. // Collapse the navbar in mobile view after clicking a link.
navLinks.forEach(navLink => document.querySelectorAll('#navbarNav li.nav-item>a').forEach(navLink =>
{ {
navLink.addEventListener('click', () => navLink.addEventListener('click', () =>
{ {

9
src/scss/styles.scss
View file

@ -91,7 +91,6 @@ var(--#{$prefix}font-sans-serif);
main { main {
@extend .pt-3; @extend .pt-3;
@extend .pb-4; @extend .pb-4;
@extend .flex-grow-1;
} }
section, section,
@ -100,10 +99,6 @@ main>* {
@extend .pb-3; @extend .pb-3;
} }
header {
min-height: 4.5rem;
}
::selection { ::selection {
@extend .text-dark; @extend .text-dark;
background-color: $red-200; background-color: $red-200;
@ -318,10 +313,6 @@ img.grayscale-effect {
overflow: hidden; overflow: hidden;
} }
footer .card {
background-color: var(--bs-card-bg) !important;
}
.card-img-overlay { .card-img-overlay {
position: unset; position: unset;
z-index: 1; z-index: 1;