From d46ad902c5133eec627824ba5ccd9255e0b583e8 Mon Sep 17 00:00:00 2001
From: Bob Vandevliet <info@bvandevliet.nl>
Date: Wed, 12 Jun 2024 14:58:04 +0200
Subject: [PATCH] Preparing content.

---
 public/assets/css/styles.css |  27 ++++-----
 public/includes/nav.html     |  20 ++++---
 public/index.html            | 107 ++++++++++++++++++++++++++++++-----
 3 files changed, 121 insertions(+), 33 deletions(-)

diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css
index a99c2b1..670f956 100644
--- a/public/assets/css/styles.css
+++ b/public/assets/css/styles.css
@@ -6,28 +6,29 @@
   visibility: hidden;
 }
 
-/* Style for active link based on body class */
-body.home .home-link,
-body.about .about-link,
-body.contact .contact-link {
-  color: red;
-}
-
-nav.bg-dark {
-  background-color: rgba(var(--bs-dark-rgb), 0.7) !important;
+nav.bg-body {
+  background-color: rgba(var(--bs-body-bg-rgb), 0.7) !important;
   transition: background-color 0.5s;
 }
 
-body.is-scrolled nav.bg-dark {
-  background-color: rgba(var(--bs-dark-rgb), 1.0) !important;
+body.is-scrolled nav.bg-body {
+  background-color: rgba(var(--bs-body-bg-rgb), 1.0) !important;
+}
+
+.navbar-collapse:not(.collapsing):not(.show) {
+  max-width: fit-content;
+}
+
+.navbar-nav .btn {
+  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
+  padding-right: var(--bs-navbar-nav-link-padding-x);
+  padding-left: var(--bs-navbar-nav-link-padding-x);
 }
 
 section.hero {
   position: relative;
-  min-height: 20rem;
   height: 100vh;
   overflow: hidden;
-  /* background-color: darkred; */
 }
 
 section.hero video {
diff --git a/public/includes/nav.html b/public/includes/nav.html
index 83b09ca..36adc93 100644
--- a/public/includes/nav.html
+++ b/public/includes/nav.html
@@ -1,16 +1,22 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
-  <div class="container-xxl">
-    <a class="navbar-brand home-link" href="#"><!--# echo var="site" default="Website Title" --></a>
+<nav class="navbar navbar-expand-lg bg-body fixed-top">
+  <div class="container-xxl justify-content-center">
+    <a class="navbar-brand" href="#"><!--# echo var="site" default="Website Title" --></a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse" id="navbarNav">
-      <ul class="navbar-nav ml-auto">
+    <div id="navbarNav" class="collapse navbar-collapse">
+      <ul class="navbar-nav text-center">
         <li class="nav-item">
-          <a class="nav-link about-link" href="#section-about">About</a>
+          <a class="nav-link" href="#section-about">Over mij</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link contact-link" href="#section-contact">Contact</a>
+          <a class="nav-link" href="#section-services">Diensten</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#section-wow">Werkwijze</a>
+        </li>
+        <li class="nav-item">
+          <a class="btn btn-primary" href="#section-contact">Contact</a>
         </li>
       </ul>
     </div>
diff --git a/public/index.html b/public/index.html
index ff9f0ab..08740c9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,19 +17,100 @@
     </section>
   </header>
 
-  <main class="container-xxl mt-4">
-    <h2 id="section-about">About me</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat velit scelerisque. Donec adipiscing tristique risus nec feugiat in. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Orci a scelerisque purus semper eget duis at tellus at. Velit laoreet id donec ultrices tincidunt arcu. Sodales ut etiam sit amet nisl purus. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Ipsum nunc aliquet bibendum enim facilisis gravida. Tristique senectus et netus et malesuada fames ac turpis. Donec massa sapien faucibus et. Dui sapien eget mi proin sed libero enim.</p>
-    <p>Dolor purus non enim praesent elementum. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Cursus euismod quis viverra nibh cras pulvinar mattis. Viverra justo nec ultrices dui sapien eget mi proin. Amet cursus sit amet dictum. Ut diam quam nulla porttitor massa id neque aliquam vestibulum. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Tellus molestie nunc non blandit. Ullamcorper velit sed ullamcorper morbi tincidunt. Felis imperdiet proin fermentum leo vel orci porta. Hendrerit gravida rutrum quisque non tellus orci. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Volutpat commodo sed egestas egestas fringilla. Sagittis vitae et leo duis ut diam quam nulla porttitor. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Suspendisse in est ante in nibh mauris. Odio facilisis mauris sit amet massa.</p>
-    <p>Volutpat blandit aliquam etiam erat. Erat imperdiet sed euismod nisi porta lorem. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Pharetra massa massa ultricies mi quis. Lacus sed viverra tellus in hac habitasse. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Velit ut tortor pretium viverra suspendisse potenti. Et malesuada fames ac turpis egestas. Enim praesent elementum facilisis leo vel fringilla. Id ornare arcu odio ut sem nulla pharetra diam sit. Arcu cursus vitae congue mauris rhoncus.</p>
-    <p>Tempus egestas sed sed risus pretium quam vulputate. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Sit amet dictum sit amet justo. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam elementum pulvinar etiam non quam. Leo vel orci porta non. Aliquet nec ullamcorper sit amet risus nullam eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Donec enim diam vulputate ut. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Egestas dui id ornare arcu odio. Mi bibendum neque egestas congue quisque egestas. Id aliquet risus feugiat in ante metus dictum at tempor. Orci porta non pulvinar neque laoreet. Diam quam nulla porttitor massa id neque aliquam vestibulum. Tincidunt praesent semper feugiat nibh sed pulvinar. Morbi blandit cursus risus at ultrices mi tempus.</p>
-    <p>Et netus et malesuada fames ac turpis. Tincidunt dui ut ornare lectus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Orci sagittis eu volutpat odio facilisis mauris. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Lectus proin nibh nisl condimentum id venenatis a condimentum vitae. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Ultrices gravida dictum fusce ut placerat orci nulla. A lacus vestibulum sed arcu non odio euismod. Purus viverra accumsan in nisl. Lectus magna fringilla urna porttitor rhoncus dolor purus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Id semper risus in hendrerit gravida rutrum quisque non. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Eu facilisis sed odio morbi quis. Ut ornare lectus sit amet. Aliquet nec ullamcorper sit amet risus nullam eget felis.</p>
-    <h2 id="section-contact">Contact me</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat velit scelerisque. Donec adipiscing tristique risus nec feugiat in. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Orci a scelerisque purus semper eget duis at tellus at. Velit laoreet id donec ultrices tincidunt arcu. Sodales ut etiam sit amet nisl purus. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Ipsum nunc aliquet bibendum enim facilisis gravida. Tristique senectus et netus et malesuada fames ac turpis. Donec massa sapien faucibus et. Dui sapien eget mi proin sed libero enim.</p>
-    <p>Dolor purus non enim praesent elementum. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Cursus euismod quis viverra nibh cras pulvinar mattis. Viverra justo nec ultrices dui sapien eget mi proin. Amet cursus sit amet dictum. Ut diam quam nulla porttitor massa id neque aliquam vestibulum. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Tellus molestie nunc non blandit. Ullamcorper velit sed ullamcorper morbi tincidunt. Felis imperdiet proin fermentum leo vel orci porta. Hendrerit gravida rutrum quisque non tellus orci. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Volutpat commodo sed egestas egestas fringilla. Sagittis vitae et leo duis ut diam quam nulla porttitor. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Suspendisse in est ante in nibh mauris. Odio facilisis mauris sit amet massa.</p>
-    <p>Volutpat blandit aliquam etiam erat. Erat imperdiet sed euismod nisi porta lorem. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Pharetra massa massa ultricies mi quis. Lacus sed viverra tellus in hac habitasse. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Velit ut tortor pretium viverra suspendisse potenti. Et malesuada fames ac turpis egestas. Enim praesent elementum facilisis leo vel fringilla. Id ornare arcu odio ut sem nulla pharetra diam sit. Arcu cursus vitae congue mauris rhoncus.</p>
-    <p>Tempus egestas sed sed risus pretium quam vulputate. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Sit amet dictum sit amet justo. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam elementum pulvinar etiam non quam. Leo vel orci porta non. Aliquet nec ullamcorper sit amet risus nullam eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Donec enim diam vulputate ut. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Egestas dui id ornare arcu odio. Mi bibendum neque egestas congue quisque egestas. Id aliquet risus feugiat in ante metus dictum at tempor. Orci porta non pulvinar neque laoreet. Diam quam nulla porttitor massa id neque aliquam vestibulum. Tincidunt praesent semper feugiat nibh sed pulvinar. Morbi blandit cursus risus at ultrices mi tempus.</p>
-    <p>Et netus et malesuada fames ac turpis. Tincidunt dui ut ornare lectus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Orci sagittis eu volutpat odio facilisis mauris. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Lectus proin nibh nisl condimentum id venenatis a condimentum vitae. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Ultrices gravida dictum fusce ut placerat orci nulla. A lacus vestibulum sed arcu non odio euismod. Purus viverra accumsan in nisl. Lectus magna fringilla urna porttitor rhoncus dolor purus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Id semper risus in hendrerit gravida rutrum quisque non. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Eu facilisis sed odio morbi quis. Ut ornare lectus sit amet. Aliquet nec ullamcorper sit amet risus nullam eget felis.</p>
+  <main class="mt-4">
+    <div class="container-xxl">
+
+      <h2 class="section" id="section-fpv">Wat is FPV?</h2>
+      <p>FPV, ofwel First Person View, is een geavanceerde drone-technologie waarbij de piloot via een videobril live beelden ontvangt van een vaste camera op de drone. Dit stelt de piloot in staat om vanuit het perspectief van de drone te vliegen, waardoor hij uiterst precies vluchtlijnen kan bepalen en door de kleinste openingen en doorgangen kan navigeren. Doordat FPV drones volledig handmatig worden bestuurd, kunnen ze complexe acrobatische manoeuvres zoals flips, rolls en zelfs ondersteboven vliegen uitvoeren. Wie kiest voor een FPV drone video, valt op door de indrukwekkende, unieke, cinematische en dynamische beelden die met een traditionele drone niet mogelijk zijn.</p>
+      <p>FPV beelden bieden een geheel nieuwe ervaring en vertellen in één vlucht een compleet verhaal, waardoor ze ideaal zijn voor bedrijfsvideo's, evenementen en bruiloften. Dankzij de veelzijdigheid van FPV drones kunnen zowel binnen als buiten verbluffende beelden worden vastgelegd, van het vliegen door kleine doorgangen en machines tot het navigeren door festivaltenten en kantoorruimtes.</p>
+      
+      <h2 class="section" id="section-about">Over mij</h2>
+      <p></p>
+
+      <h2 class="section" id="section-services">Diensten</h2>
+      <div class="row">
+        <div class="col-sm">
+          <div class="card">
+            <!-- <img src="..." class="card-img-top" alt="..."> -->
+            <div class="card-body">
+              <h5 class="card-title">Bedrijfstour</h5>
+              <p class="card-text"></p>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm">
+          <div class="card">
+            <!-- <img src="..." class="card-img-top" alt="..."> -->
+            <div class="card-body">
+              <h5 class="card-title">Evenementen</h5>
+              <p class="card-text"></p>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm">
+          <div class="card">
+            <!-- <img src="..." class="card-img-top" alt="..."> -->
+            <div class="card-body">
+              <h5 class="card-title">Sport</h5>
+              <p class="card-text"></p>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm">
+          <div class="card">
+            <!-- <img src="..." class="card-img-top" alt="..."> -->
+            <div class="card-body">
+              <h5 class="card-title">Bruiloften</h5>
+              <p class="card-text"></p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h2 class="section" id="section-wow">Werkwijze</h2>
+      <div class="row">
+        <div class="col-sm">
+          <div class="card">
+            <!-- <img src="..." class="card-img-top" alt="..."> -->
+            <div class="card-body">
+              <h5 class="card-title">Intake</h5>
+              <p class="card-text"></p>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm">
+          <div class="card">
+            <!-- <img src="..." class="card-img-top" alt="..."> -->
+            <div class="card-body">
+              <h5 class="card-title">Vluchtplan</h5>
+              <p class="card-text"></p>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm">
+          <div class="card">
+            <!-- <img src="..." class="card-img-top" alt="..."> -->
+            <div class="card-body">
+              <h5 class="card-title">Opname</h5>
+              <p class="card-text"></p>
+            </div>
+          </div>
+        </div>
+        <div class="col-sm">
+          <div class="card">
+            <!-- <img src="..." class="card-img-top" alt="..."> -->
+            <div class="card-body">
+              <h5 class="card-title">Montage</h5>
+              <p class="card-text"></p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h2 class="section" id="section-contact">Contact</h2>
+      <p></p>
+
+    </div>
   </main>
 
   <!--# include file="includes/footer.html" -->