Merge branch 'development'

public/index.html

@@ -101,7 +101,6 @@
       </div>
     </section>
 
-    <div>
     <section class="container-xxl">
       <h2 class="section text-center" id="section-fpv">Wat is FPV?</h2>
       <div class="row">
@@ -118,16 +117,16 @@
         </div>
       </div>
     </section>
-    </div>
 
-    <div>
     <section class="container-xxl">
-        <div class="card h-100 position-relative overflow-hidden">
+      <div class="card h-100 bg-light text-dark">
-          <img class="card-img position-absolute" src="assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg" alt="Afbeelding van mezelf terwijl ik een FPV drone bestuur.">
+        <h2 class="section card-title text-center mt-4" id="section-about">Over mij</h2>
-          <div class="card-img-overlay text-dark text-shadow" style="background: rgba(255, 255, 255, 0.6);">
+        <div class="row g-0">
-            <h2 class="section card-title text-center" id="section-about">Over mij</h2>
+          <div class="col-lg-6 gradient-to-top-light">
-            <div class="row">
+            <img class="card-img" style="object-position: left;" src="assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg" alt="Afbeelding van mezelf terwijl ik een FPV drone bestuur.">
-              <div class="col-md-6 offset-md-6">
+          </div>
+          <div class="col-lg-6">
+            <div class="card-body">
               <p>
                 Hi, ik ben Bob Vandevliet, gecertificeerd FPV-dronepiloot voor open categorie A1 en A3 (binnenkort ook A2). Ik maak FPV dronevideo's voor bedrijven, vastgoed en (sport)evenementen. Met mijn creatieve en technische achtergrond zorg ik ervoor dat jouw dronevideo er professioneel uitziet en jouw verhaal op een unieke manier verteld wordt.
               </p>
@@ -145,9 +144,7 @@
         </div>
       </div>
     </section>
-    </div>
 
-    <div>
     <section class="container-xxl">
       <h2 class="section text-center" id="section-wow">Werkwijze</h2>
       <div class="row text-center">
@@ -189,7 +186,6 @@
         </div>
       </div>
     </section>
-    </div>
 
   </main>
 

src/scss/styles.scss

@@ -78,8 +78,6 @@ $primary: $red; // Default: $blue
 }
 
 main {
-  // @extend .mt-0;
-  // @extend .mb-0;
   @extend .pb-4;
   padding-top: 7rem !important;
 }
@@ -89,8 +87,6 @@ body.home main {
 }
 
 main>* {
-  // @extend .mt-0;
-  // @extend .mb-0;
   @extend .pt-4;
   @extend .pb-3;
 }
@@ -133,7 +129,7 @@ h2 {
   @extend .mb-0;
 
   &:not(:first-child) {
-    margin-top: 1.5rem !important;
+    @extend .mt-4;
   }
 }
 
@@ -145,7 +141,7 @@ p {
   @extend .mb-0;
 
   &:not(:first-child) {
-    margin-top: 1rem !important;
+    @extend .mt-3;
   }
 }
 
@@ -223,8 +219,30 @@ body.is-scrolled .navbar {
 
 .row {
   margin-top: unset;
-  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: var(--bs-gutter-x);
-  --bs-gutter-y: 1.5rem;
+}
+
+img.grayscale-effect {
+  transition: filter 0.2s;
+}
+
+*:not(:hover) img.grayscale-effect {
+  filter: grayscale(80%);
+}
+
+.gradient-to-top-light {
+  position: relative;
+}
+
+.gradient-to-top-light::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to top, transparent 67%, rgba(var(--bs-light-rgb), 1) 100%);
+  z-index: 1;
 }
 
 .parallax,
@@ -242,6 +260,7 @@ body.is-scrolled .navbar {
 }
 
 .card {
+  border: none;
   overflow: hidden;
 }
 
@@ -252,14 +271,6 @@ body.is-scrolled .navbar {
   height: 100%;
 }
 
-img.grayscale-effect {
-  transition: filter 0.2s;
-}
-
-*:not(:hover) img.grayscale-effect {
-  filter: grayscale(80%);
-}
-
 .socials {
   display: flex;
   gap: .5rem;