Some small fixes and optimizations.
This commit is contained in:
Bob Vandevliet
parent
39c2c3d8c4
commit
8c2cfa180d
5 changed files with 121 additions and 106 deletions
|
|
@ -5,16 +5,16 @@
|
|||
<div class="col-6 col-lg-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" id="section-contact">Contact</h5>
|
||||
<h1 class="section fs-4 card-title" id="section-contact">Contact</h1>
|
||||
<h2>Bob Vandevliet</h2>
|
||||
<p>Gecertificeerd FPV-dronepiloot voor open categorie A1 en A3 (binnenkort ook A2).</p>
|
||||
<h5>Email</h5>
|
||||
<h3 class="fs-5">Email</h3>
|
||||
<p><a href="mailto:bob@vandevliet-aerialshots.com">bob@vandevliet-aerialshots.com</a></p>
|
||||
<!-- <h5>Telefoon</h5>
|
||||
<!-- <h3 class="fs-5">Telefoon</h3>
|
||||
<p><a href="tel:+31612345678">+31 6 12345678</a></p> -->
|
||||
<h5>Regio</h5>
|
||||
<h3 class="fs-5">Regio</h3>
|
||||
<p>Arnhem, Gelderland</p>
|
||||
<!-- <h5>Socials</h5> -->
|
||||
<!-- <h3 class="fs-5">Socials</h3> -->
|
||||
<p class="socials fs-2">
|
||||
<!-- <a href="https://www.linkedin.com/company/vandevliet-aerialshots" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin"></i></a> -->
|
||||
<a href="https://www.instagram.com/vandevliet.fpv" target="_blank" rel="noopener noreferrer" title="Vandevliet FPV on Instagram" aria-label="Vandevliet FPV on Instagram"><i class="fab fa-instagram"></i></a>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,24 @@
|
|||
|
||||
<title><!--# echo var="title" default="Title" --></title>
|
||||
|
||||
<meta name="description" content="Vandevliet Aerial Shots maakt FPV dronevideo's voor bedrijven, vastgoed en (sport)evenementen.">
|
||||
|
||||
<link rel="icon" href="assets/static/favicon.ico" type="image/x-icon">
|
||||
<link rel="icon" href="assets/static/favicon.png" type="image/png">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/styles.min.css">
|
||||
|
||||
<script src="https://kit.fontawesome.com/7e7cf109ad.js" crossorigin="anonymous"></script>
|
||||
<script src="https://kit.fontawesome.com/7e7cf109ad.js" crossorigin="anonymous" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script>
|
||||
<script src="assets/js/scripts.min.js" defer></script>
|
||||
<script src="assets/js/scripts.min.js" async></script>
|
||||
|
||||
<meta http-equiv="Content-Security-Policy" content="
|
||||
default-src 'self';
|
||||
script-src 'self' https://cdn.jsdelivr.net https://*.fontawesome.com;
|
||||
style-src 'self' 'unsafe-inline' https://*.fontawesome.com;
|
||||
font-src 'self' https://*.fontawesome.com;
|
||||
connect-src 'self' https://*.fontawesome.com;
|
||||
object-src 'none';
|
||||
img-src 'self' data:;
|
||||
">
|
||||
</head>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="hero position-relative overflow-hidden">
|
||||
<div class="position-absolute top-50 start-50 translate-middle text-center text-white" style="z-index: 1;">
|
||||
<h1 class="text-shadow"><img src="assets/static/logo-aerialshots-v1-s.png" alt="Vandevliet Aerial Shots logo" height="72"></h1>
|
||||
<p class="fs-4 text-shadow">
|
||||
<p class="fs-5 text-shadow">
|
||||
FPV dronevideo's voor bedrijven, vastgoed en (sport)evenementen.<br>
|
||||
Let op: deze website alsook de showreel is nog in ontwikkeling.
|
||||
</p>
|
||||
|
|
@ -33,10 +33,10 @@
|
|||
<div class="card h-100">
|
||||
<img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/fittings-2784899_640.jpg" alt="Abstracte close-up afbeelding van een machine.">
|
||||
<div class="card-body bg-light text-dark">
|
||||
<h4 class="card-title">
|
||||
<h3 class="card-title">
|
||||
<i class="fa-solid fa-industry"></i>
|
||||
<br>Bedrijfsvideo (binnenkort mogelijk)
|
||||
</h4>
|
||||
</h3>
|
||||
<p class="card-text">
|
||||
Laat jouw bedrijf opvallen met unieke dronebeelden, zowel binnen als buiten. Ik leg de bijzondere kenmerken van jouw locatie vast en breng interacties met jouw team in beeld.
|
||||
</p>
|
||||
|
|
@ -47,10 +47,10 @@
|
|||
<div class="card h-100">
|
||||
<img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/sa-rapita-2483668_640.jpg" alt="Afbeelding van een moderne woning.">
|
||||
<div class="card-body bg-light text-dark">
|
||||
<h4 class="card-title">
|
||||
<h3 class="card-title">
|
||||
<i class="fa-solid fa-house"></i>
|
||||
<br>Vastgoed (binnenkort mogelijk)
|
||||
</h4>
|
||||
</h3>
|
||||
<p class="card-text">
|
||||
Met een vloeiende fly-through door jouw pand en van de omgeving, geef je jouw potentiële kopers of huurders een goed beeld van de locatie en de mogelijkheden.
|
||||
</p>
|
||||
|
|
@ -61,10 +61,10 @@
|
|||
<div class="card h-100">
|
||||
<img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/audience-1850119_640.jpg" alt="Afbeelding van publiek bij een podium.">
|
||||
<div class="card-body bg-light text-dark">
|
||||
<h4 class="card-title">
|
||||
<h3 class="card-title">
|
||||
<i class="fa-solid fa-guitar"></i>
|
||||
<br>Evenementen (binnenkort mogelijk)
|
||||
</h4>
|
||||
</h3>
|
||||
<p class="card-text">
|
||||
Leg de grootsheid en energie van elk evenement vast. Of het nu een optreden, concert, festival of bedrijfsfeest is, FPV drone opnames laten een blijvende indruk achter.
|
||||
</p>
|
||||
|
|
@ -75,10 +75,10 @@
|
|||
<div class="card h-100">
|
||||
<img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/motor-cross-1634206_640.jpg" alt="Afbeelding van motorcrossers.">
|
||||
<div class="card-body bg-light text-dark">
|
||||
<h4 class="card-title">
|
||||
<h3 class="card-title">
|
||||
<i class="fa-solid fa-motorcycle"></i>
|
||||
<br>Sport (binnenkort mogelijk)
|
||||
</h4>
|
||||
</h3>
|
||||
<p class="card-text">
|
||||
Een FPV drone is ideaal voor het maken van spectaculaire actiebeelden tijdens sportevenementen. Op hoge snelheden houd ik de drone slechts centimeters van de actie verwijderd.
|
||||
</p>
|
||||
|
|
@ -89,10 +89,10 @@
|
|||
<div class="card h-100">
|
||||
<img class="card-img grayscale-effect" style="height: 10rem;" src="assets/static/love-6600904_640.jpg" alt="Afbeelding van een huwelijkspaar.">
|
||||
<div class="card-body bg-light text-dark">
|
||||
<h4 class="card-title">
|
||||
<h3 class="card-title">
|
||||
<i class="fa-solid fa-champagne-glasses"></i>
|
||||
<br>Bruiloften
|
||||
</h4>
|
||||
</h3>
|
||||
<p class="card-text">
|
||||
Maak van jullie bruiloft een onvergetelijke dag. Ik leg de mooiste momenten vast vanuit de lucht. Een unieke en romantische herinnering om voor altijd te koesteren.
|
||||
</p>
|
||||
|
|
@ -154,37 +154,37 @@
|
|||
<p></p>
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-6 col-lg">
|
||||
<h4>
|
||||
<h3>
|
||||
<i class="fa-solid fa-handshake-simple"></i>
|
||||
<br>Intake
|
||||
</h4>
|
||||
</h3>
|
||||
<p>
|
||||
Elk project begint met een goede voorbereiding. Daarom plan ik graag een persoonlijk gesprek met je in. We bespreken jouw doelen, wensen en visie, creatieve ideeën over de inhoud, en de gewenste toon en stijl. Wat wil je bereiken met de dronevideo? Wat is de boodschap die je wilt overbrengen? Wie is je doelgroep? Op basis van deze informatie maak ik een passende offerte binnen jouw budget.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg">
|
||||
<h4>
|
||||
<h3>
|
||||
<i class="fa-solid fa-plane"></i>
|
||||
<br>Vluchtplan
|
||||
</h4>
|
||||
</h3>
|
||||
<p>
|
||||
Zodra de offerte akkoord is, start ik met de preproductiefase. Ik maak een vluchtplan en schrijf een script of draaiboek. Zo zorg ik ervoor dat jouw boodschap optimaal in beeld komt. Komen er ook mensen in beeld? Dan zorgen we er samen voor dat zij goed geïnstrueerd en voorbereid zijn, en weten wat er van hen verwacht wordt.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg">
|
||||
<h4>
|
||||
<h3>
|
||||
<i class="fa-solid fa-video"></i>
|
||||
<br>Opname
|
||||
</h4>
|
||||
</h3>
|
||||
<p>
|
||||
Op de afgesproken datum en locatie begin ik met het opnemen van jouw dronevideo. Tijdens het filmen houd ik rekening met jouw wensen en zorg ik ervoor dat we binnen de afgesproken tijd en budget blijven. Zijn er drone opnames buiten gepland en werkt het weer niet mee? Dan plannen we gewoon een nieuwe datum om de drone opnames te voltooien.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg">
|
||||
<h4>
|
||||
<h3>
|
||||
<i class="fa-solid fa-wand-magic-sparkles"></i>
|
||||
<br>Montage
|
||||
</h4>
|
||||
</h3>
|
||||
<p>
|
||||
Zodra de drone opnames zijn gemaakt, kiezen we samen de beste beelden uit. Daarna breng ik jouw verhaal zorgvuldig tot leven met beeld-, geluids- en kleurbewerking, zodat jouw bedrijf, merk, product of dienst zo goed mogelijk gepresenteerd wordt. Ik zorg ervoor dat de visuele montage aansluit bij je doelgroep en lever jouw dronevideo in de juiste formaten voor de gewenste mediakanalen.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,56 @@
|
|||
/**
|
||||
* @type {NodeListOf<HTMLVideoElement>}
|
||||
*/
|
||||
const parallaxElems = document.querySelectorAll('.parallax');
|
||||
|
||||
// Handle scroll events.
|
||||
window.addEventListener('scroll', () =>
|
||||
document.addEventListener('DOMContentLoaded', () =>
|
||||
{
|
||||
/**
|
||||
* @type {NodeListOf<HTMLVideoElement>}
|
||||
*/
|
||||
const parallaxElems = document.querySelectorAll('.parallax');
|
||||
|
||||
// Handle scroll events.
|
||||
window.addEventListener('scroll', () =>
|
||||
{
|
||||
// Add class to body when scrolled.
|
||||
document.body.classList.toggle('is-scrolled', window.scrollY > 0);
|
||||
document.body.classList.toggle('is-scrolled', window.scrollY > 0);
|
||||
|
||||
// Parallax effect.
|
||||
parallaxElems.forEach(parallaxElem =>
|
||||
{
|
||||
const parentElem = parallaxElem.parentElement;
|
||||
// Parallax effect.
|
||||
parallaxElems.forEach(parallaxElem =>
|
||||
{
|
||||
const parentElem = parallaxElem.parentElement;
|
||||
|
||||
const parentRect = parentElem.getBoundingClientRect();
|
||||
const parentScroll = parentRect.top + (parentRect.height / 2);
|
||||
const parentRect = parentElem.getBoundingClientRect();
|
||||
const parentScroll = parentRect.top + (parentRect.height / 2);
|
||||
|
||||
const windowScroll = window.scrollY + (window.innerHeight / 2);
|
||||
const windowScroll = window.scrollY + (window.innerHeight / 2);
|
||||
|
||||
parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
|
||||
parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* @type {NodeListOf<HTMLElement>}
|
||||
*/
|
||||
const sections = document.querySelectorAll('.section');
|
||||
/**
|
||||
* @type {NodeListOf<HTMLElement>}
|
||||
*/
|
||||
const sections = document.querySelectorAll('.section');
|
||||
|
||||
sections.forEach(section =>
|
||||
{
|
||||
if (section.id)
|
||||
sections.forEach(section =>
|
||||
{
|
||||
const anchor = document.createElement('a');
|
||||
anchor.className = 'anchor-link';
|
||||
anchor.href = `#${section.id}`;
|
||||
anchor.innerHTML = ' # ';
|
||||
section.appendChild(anchor);
|
||||
}
|
||||
});
|
||||
if (section.id)
|
||||
{
|
||||
const anchor = document.createElement('a');
|
||||
anchor.className = 'anchor-link';
|
||||
anchor.href = `#${section.id}`;
|
||||
anchor.innerHTML = ' # ';
|
||||
section.appendChild(anchor);
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
|
||||
{
|
||||
anchor.addEventListener('click', () =>
|
||||
document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
|
||||
{
|
||||
/**
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
|
||||
navbarNav?.click();
|
||||
anchor.addEventListener('click', () =>
|
||||
{
|
||||
/**
|
||||
* @type {HTMLButtonElement}
|
||||
*/
|
||||
const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
|
||||
navbarNav?.click();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
// $enable-shadows: true;
|
||||
|
||||
// Include functions first (so you can manipulate colors, SVGs, calc, etc)
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
@import "../../node_modules/bootstrap/scss/functions";
|
||||
|
||||
// scss-docs-start color-variables
|
||||
$red: #cc2929; // Default: #dc3545
|
||||
|
|
@ -12,54 +12,54 @@ $red: #cc2929; // Default: #dc3545
|
|||
$primary: $red; // Default: $blue
|
||||
|
||||
// Include remainder of required Bootstrap stylesheets
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@import "../node_modules/bootstrap/scss/variables-dark";
|
||||
@import "../../node_modules/bootstrap/scss/variables";
|
||||
@import "../../node_modules/bootstrap/scss/variables-dark";
|
||||
|
||||
// Include any default map overrides here
|
||||
|
||||
// Include remainder of required parts
|
||||
@import "../node_modules/bootstrap/scss/maps";
|
||||
@import "../node_modules/bootstrap/scss/mixins";
|
||||
@import "../node_modules/bootstrap/scss/root";
|
||||
@import "../../node_modules/bootstrap/scss/maps";
|
||||
@import "../../node_modules/bootstrap/scss/mixins";
|
||||
@import "../../node_modules/bootstrap/scss/root";
|
||||
|
||||
// Include any other parts as needed
|
||||
@import "../node_modules/bootstrap/scss/reboot";
|
||||
@import "../node_modules/bootstrap/scss/type";
|
||||
@import "../node_modules/bootstrap/scss/containers";
|
||||
@import "../node_modules/bootstrap/scss/grid";
|
||||
@import "../node_modules/bootstrap/scss/images";
|
||||
@import "../node_modules/bootstrap/scss/nav";
|
||||
@import "../node_modules/bootstrap/scss/navbar"; // Requires nav
|
||||
@import "../node_modules/bootstrap/scss/buttons";
|
||||
@import "../node_modules/bootstrap/scss/button-group";
|
||||
@import "../node_modules/bootstrap/scss/card";
|
||||
@import "../node_modules/bootstrap/scss/tables";
|
||||
@import "../node_modules/bootstrap/scss/forms";
|
||||
@import "../node_modules/bootstrap/scss/transitions";
|
||||
// @import "../node_modules/bootstrap/scss/accordion";
|
||||
// @import "../node_modules/bootstrap/scss/alert";
|
||||
// @import "../node_modules/bootstrap/scss/badge";
|
||||
// @import "../node_modules/bootstrap/scss/breadcrumb";
|
||||
// @import "../node_modules/bootstrap/scss/carousel";
|
||||
// @import "../node_modules/bootstrap/scss/close";
|
||||
// @import "../node_modules/bootstrap/scss/dropdown";
|
||||
// @import "../node_modules/bootstrap/scss/list-group";
|
||||
// @import "../node_modules/bootstrap/scss/modal"; // Requires transitions
|
||||
// @import "../node_modules/bootstrap/scss/offcanvas"; // Requires transitions
|
||||
// @import "../node_modules/bootstrap/scss/pagination";
|
||||
// @import "../node_modules/bootstrap/scss/placeholders";
|
||||
// @import "../node_modules/bootstrap/scss/popover";
|
||||
// @import "../node_modules/bootstrap/scss/progress";
|
||||
// @import "../node_modules/bootstrap/scss/spinners";
|
||||
// @import "../node_modules/bootstrap/scss/toasts";
|
||||
// @import "../node_modules/bootstrap/scss/tooltip";
|
||||
@import "../../node_modules/bootstrap/scss/reboot";
|
||||
@import "../../node_modules/bootstrap/scss/type";
|
||||
@import "../../node_modules/bootstrap/scss/containers";
|
||||
@import "../../node_modules/bootstrap/scss/grid";
|
||||
@import "../../node_modules/bootstrap/scss/nav";
|
||||
@import "../../node_modules/bootstrap/scss/navbar"; // Requires nav
|
||||
@import "../../node_modules/bootstrap/scss/buttons";
|
||||
@import "../../node_modules/bootstrap/scss/card";
|
||||
@import "../../node_modules/bootstrap/scss/images";
|
||||
@import "../../node_modules/bootstrap/scss/transitions";
|
||||
// @import "../../node_modules/bootstrap/scss/accordion";
|
||||
// @import "../../node_modules/bootstrap/scss/alert";
|
||||
// @import "../../node_modules/bootstrap/scss/badge";
|
||||
// @import "../../node_modules/bootstrap/scss/breadcrumb";
|
||||
// @import "../../node_modules/bootstrap/scss/button-group";
|
||||
// @import "../../node_modules/bootstrap/scss/carousel";
|
||||
// @import "../../node_modules/bootstrap/scss/close";
|
||||
// @import "../../node_modules/bootstrap/scss/dropdown";
|
||||
// @import "../../node_modules/bootstrap/scss/forms";
|
||||
// @import "../../node_modules/bootstrap/scss/list-group";
|
||||
// @import "../../node_modules/bootstrap/scss/modal"; // Requires transitions
|
||||
// @import "../../node_modules/bootstrap/scss/offcanvas"; // Requires transitions
|
||||
// @import "../../node_modules/bootstrap/scss/pagination";
|
||||
// @import "../../node_modules/bootstrap/scss/placeholders";
|
||||
// @import "../../node_modules/bootstrap/scss/popover";
|
||||
// @import "../../node_modules/bootstrap/scss/progress";
|
||||
// @import "../../node_modules/bootstrap/scss/spinners";
|
||||
// @import "../../node_modules/bootstrap/scss/tables";
|
||||
// @import "../../node_modules/bootstrap/scss/toasts";
|
||||
// @import "../../node_modules/bootstrap/scss/tooltip";
|
||||
|
||||
// Helpers
|
||||
@import "../node_modules/bootstrap/scss/helpers";
|
||||
@import "../../node_modules/bootstrap/scss/helpers";
|
||||
|
||||
// Utilities
|
||||
@import "../node_modules/bootstrap/scss/utilities";
|
||||
@import "../node_modules/bootstrap/scss/utilities/api";
|
||||
@import "../../node_modules/bootstrap/scss/utilities";
|
||||
@import "../../node_modules/bootstrap/scss/utilities/api";
|
||||
|
||||
//
|
||||
// Custom styles
|
||||
|
|
@ -143,7 +143,7 @@ h6:hover .anchor-link {
|
|||
|
||||
.navbar {
|
||||
background-image: none !important;
|
||||
background-color: rgba(22, 23, 25, 0.4) !important;
|
||||
background-color: rgba(22, 23, 25, 0.6) !important;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
|
|
@ -157,8 +157,8 @@ body.is-scrolled .navbar {
|
|||
|
||||
.nav-item,
|
||||
.nav-link {
|
||||
@extend .text-white;
|
||||
font-family: 'Eras ITC', sans-serif;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.navbar-nav .btn {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue