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

Some small fixes and optimizations.

Browse source
This commit is contained in:
Bob Vandevliet 2024-07-13 18:09:28 +02:00
parent 39c2c3d8c4
commit 8c2cfa180d
5 changed files with 121 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

10
public/includes/footer.html
View file

@ -5,16 +5,16 @@
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<div class="card h-100"> <div class="card h-100">
<div class="card-body"> <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> <h2>Bob Vandevliet</h2>
<p>Gecertificeerd FPV-dronepiloot voor open categorie A1 en A3 (binnenkort ook A2).</p> <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> <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> --> <p><a href="tel:+31612345678">+31 6 12345678</a></p> -->
<h5>Regio</h5> <h3 class="fs-5">Regio</h3>
<p>Arnhem, Gelderland</p> <p>Arnhem, Gelderland</p>
<!-- <h5>Socials</h5> --> <!-- <h3 class="fs-5">Socials</h3> -->
<p class="socials fs-2"> <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.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> <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>

16
public/includes/head.html
View file

@ -6,12 +6,24 @@
<title><!--# echo var="title" default="Title" --></title> <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.ico" type="image/x-icon">
<link rel="icon" href="assets/static/favicon.png" type="image/png"> <link rel="icon" href="assets/static/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/styles.min.css"> <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="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> </head>

38
public/index.html
View file

@ -11,7 +11,7 @@
<div class="hero position-relative overflow-hidden"> <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;"> <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> <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> FPV dronevideo's voor bedrijven, vastgoed en (sport)evenementen.<br>
Let op: deze website alsook de showreel is nog in ontwikkeling. Let op: deze website alsook de showreel is nog in ontwikkeling.
</p> </p>
@ -33,10 +33,10 @@
<div class="card h-100"> <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."> <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"> <div class="card-body bg-light text-dark">
<h4 class="card-title"> <h3 class="card-title">
<i class="fa-solid fa-industry"></i> <i class="fa-solid fa-industry"></i>
<br>Bedrijfsvideo (binnenkort mogelijk) <br>Bedrijfsvideo (binnenkort mogelijk)
</h4> </h3>
<p class="card-text"> <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. 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> </p>
@ -47,10 +47,10 @@
<div class="card h-100"> <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."> <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"> <div class="card-body bg-light text-dark">
<h4 class="card-title"> <h3 class="card-title">
<i class="fa-solid fa-house"></i> <i class="fa-solid fa-house"></i>
<br>Vastgoed (binnenkort mogelijk) <br>Vastgoed (binnenkort mogelijk)
</h4> </h3>
<p class="card-text"> <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. 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> </p>
@ -61,10 +61,10 @@
<div class="card h-100"> <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."> <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"> <div class="card-body bg-light text-dark">
<h4 class="card-title"> <h3 class="card-title">
<i class="fa-solid fa-guitar"></i> <i class="fa-solid fa-guitar"></i>
<br>Evenementen (binnenkort mogelijk) <br>Evenementen (binnenkort mogelijk)
</h4> </h3>
<p class="card-text"> <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. 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> </p>
@ -75,10 +75,10 @@
<div class="card h-100"> <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."> <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"> <div class="card-body bg-light text-dark">
<h4 class="card-title"> <h3 class="card-title">
<i class="fa-solid fa-motorcycle"></i> <i class="fa-solid fa-motorcycle"></i>
<br>Sport (binnenkort mogelijk) <br>Sport (binnenkort mogelijk)
</h4> </h3>
<p class="card-text"> <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. 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> </p>
@ -89,10 +89,10 @@
<div class="card h-100"> <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."> <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"> <div class="card-body bg-light text-dark">
<h4 class="card-title"> <h3 class="card-title">
<i class="fa-solid fa-champagne-glasses"></i> <i class="fa-solid fa-champagne-glasses"></i>
<br>Bruiloften <br>Bruiloften
</h4> </h3>
<p class="card-text"> <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. 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> </p>
@ -154,37 +154,37 @@
<p></p> <p></p>
<div class="row text-center"> <div class="row text-center">
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<h4> <h3>
<i class="fa-solid fa-handshake-simple"></i> <i class="fa-solid fa-handshake-simple"></i>
<br>Intake <br>Intake
</h4> </h3>
<p> <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. 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> </p>
</div> </div>
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<h4> <h3>
<i class="fa-solid fa-plane"></i> <i class="fa-solid fa-plane"></i>
<br>Vluchtplan <br>Vluchtplan
</h4> </h3>
<p> <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. 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> </p>
</div> </div>
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<h4> <h3>
<i class="fa-solid fa-video"></i> <i class="fa-solid fa-video"></i>
<br>Opname <br>Opname
</h4> </h3>
<p> <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. 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> </p>
</div> </div>
<div class="col-sm-6 col-lg"> <div class="col-sm-6 col-lg">
<h4> <h3>
<i class="fa-solid fa-wand-magic-sparkles"></i> <i class="fa-solid fa-wand-magic-sparkles"></i>
<br>Montage <br>Montage
</h4> </h3>
<p> <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. 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> </p>

95
src/js/scripts.js
View file

@ -1,53 +1,56 @@
/** document.addEventListener('DOMContentLoaded', () =>
* @type {NodeListOf<HTMLVideoElement>}
*/
const parallaxElems = document.querySelectorAll('.parallax');
// Handle scroll events.
window.addEventListener('scroll', () =>
{ {
/**
* @type {NodeListOf<HTMLVideoElement>}
*/
const parallaxElems = document.querySelectorAll('.parallax');
// Handle scroll events.
window.addEventListener('scroll', () =>
{
// Add class to body when scrolled. // 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. // Parallax effect.
parallaxElems.forEach(parallaxElem => parallaxElems.forEach(parallaxElem =>
{
const parentElem = parallaxElem.parentElement;
const parentRect = parentElem.getBoundingClientRect();
const parentScroll = parentRect.top + (parentRect.height / 2);
const windowScroll = window.scrollY + (window.innerHeight / 2);
parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
});
});
/**
* @type {NodeListOf<HTMLElement>}
*/
const sections = document.querySelectorAll('.section');
sections.forEach(section =>
{ {
const parentElem = parallaxElem.parentElement; if (section.id)
{
const anchor = document.createElement('a');
anchor.className = 'anchor-link';
anchor.href = `#${section.id}`;
anchor.innerHTML = ' #&nbsp;';
section.appendChild(anchor);
}
});
const parentRect = parentElem.getBoundingClientRect(); document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
const parentScroll = parentRect.top + (parentRect.height / 2); {
anchor.addEventListener('click', () =>
const windowScroll = window.scrollY + (window.innerHeight / 2); {
/**
parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`; * @type {HTMLButtonElement}
}); */
}); const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
navbarNav?.click();
/** });
* @type {NodeListOf<HTMLElement>}
*/
const sections = document.querySelectorAll('.section');
sections.forEach(section =>
{
if (section.id)
{
const anchor = document.createElement('a');
anchor.className = 'anchor-link';
anchor.href = `#${section.id}`;
anchor.innerHTML = ' #&nbsp;';
section.appendChild(anchor);
}
});
document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
{
anchor.addEventListener('click', () =>
{
/**
* @type {HTMLButtonElement}
*/
const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
navbarNav?.click();
}); });
}); });

82
src/scss/styles.scss
View file

@ -3,7 +3,7 @@
// $enable-shadows: true; // $enable-shadows: true;
// Include functions first (so you can manipulate colors, SVGs, calc, etc) // 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 // scss-docs-start color-variables
$red: #cc2929; // Default: #dc3545 $red: #cc2929; // Default: #dc3545
@ -12,54 +12,54 @@ $red: #cc2929; // Default: #dc3545
$primary: $red; // Default: $blue $primary: $red; // Default: $blue
// Include remainder of required Bootstrap stylesheets // Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables"; @import "../../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark"; @import "../../node_modules/bootstrap/scss/variables-dark";
// Include any default map overrides here // Include any default map overrides here
// Include remainder of required parts // Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps"; @import "../../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins"; @import "../../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root"; @import "../../node_modules/bootstrap/scss/root";
// Include any other parts as needed // Include any other parts as needed
@import "../node_modules/bootstrap/scss/reboot"; @import "../../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type"; @import "../../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/containers"; @import "../../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid"; @import "../../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/images"; @import "../../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/nav"; @import "../../node_modules/bootstrap/scss/navbar"; // Requires nav
@import "../node_modules/bootstrap/scss/navbar"; // Requires nav @import "../../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/buttons"; @import "../../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/button-group"; @import "../../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/card"; @import "../../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/tables"; // @import "../../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/forms"; // @import "../../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/transitions"; // @import "../../node_modules/bootstrap/scss/badge";
// @import "../node_modules/bootstrap/scss/accordion"; // @import "../../node_modules/bootstrap/scss/breadcrumb";
// @import "../node_modules/bootstrap/scss/alert"; // @import "../../node_modules/bootstrap/scss/button-group";
// @import "../node_modules/bootstrap/scss/badge"; // @import "../../node_modules/bootstrap/scss/carousel";
// @import "../node_modules/bootstrap/scss/breadcrumb"; // @import "../../node_modules/bootstrap/scss/close";
// @import "../node_modules/bootstrap/scss/carousel"; // @import "../../node_modules/bootstrap/scss/dropdown";
// @import "../node_modules/bootstrap/scss/close"; // @import "../../node_modules/bootstrap/scss/forms";
// @import "../node_modules/bootstrap/scss/dropdown"; // @import "../../node_modules/bootstrap/scss/list-group";
// @import "../node_modules/bootstrap/scss/list-group"; // @import "../../node_modules/bootstrap/scss/modal"; // Requires transitions
// @import "../node_modules/bootstrap/scss/modal"; // Requires transitions // @import "../../node_modules/bootstrap/scss/offcanvas"; // Requires transitions
// @import "../node_modules/bootstrap/scss/offcanvas"; // Requires transitions // @import "../../node_modules/bootstrap/scss/pagination";
// @import "../node_modules/bootstrap/scss/pagination"; // @import "../../node_modules/bootstrap/scss/placeholders";
// @import "../node_modules/bootstrap/scss/placeholders"; // @import "../../node_modules/bootstrap/scss/popover";
// @import "../node_modules/bootstrap/scss/popover"; // @import "../../node_modules/bootstrap/scss/progress";
// @import "../node_modules/bootstrap/scss/progress"; // @import "../../node_modules/bootstrap/scss/spinners";
// @import "../node_modules/bootstrap/scss/spinners"; // @import "../../node_modules/bootstrap/scss/tables";
// @import "../node_modules/bootstrap/scss/toasts"; // @import "../../node_modules/bootstrap/scss/toasts";
// @import "../node_modules/bootstrap/scss/tooltip"; // @import "../../node_modules/bootstrap/scss/tooltip";
// Helpers // Helpers
@import "../node_modules/bootstrap/scss/helpers"; @import "../../node_modules/bootstrap/scss/helpers";
// Utilities // Utilities
@import "../node_modules/bootstrap/scss/utilities"; @import "../../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api"; @import "../../node_modules/bootstrap/scss/utilities/api";
// //
// Custom styles // Custom styles
@ -143,7 +143,7 @@ h6:hover .anchor-link {
.navbar { .navbar {
background-image: none !important; 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; transition: background-color 0.5s;
} }
@ -157,8 +157,8 @@ body.is-scrolled .navbar {
.nav-item, .nav-item,
.nav-link { .nav-link {
@extend .text-white;
font-family: 'Eras ITC', sans-serif; font-family: 'Eras ITC', sans-serif;
color: var(--bs-body-color);
} }
.navbar-nav .btn { .navbar-nav .btn {