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

Merge branch 'development'

Browse source
This commit is contained in:
Bob Vandevliet 2024-07-29 16:13:17 +02:00
commit 35f1c3a9e8
3 changed files with 105 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/assets/static/GX010078_1703521535190.MP4_snapshot_01.11.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 69 KiB

Before After
Before After

20
public/index.html
View file

@ -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">
<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.">
<div class="card-img-overlay text-dark text-shadow" style="background: rgba(255, 255, 255, 0.6);">
<h2 class="section card-title text-center" id="section-about">Over mij</h2>
<div class="row">
<div class="col-md-6 offset-md-6">
<div class="card h-100 bg-light text-dark">
<h2 class="section card-title text-center mt-4" id="section-about">Over mij</h2>
<div class="row g-0">
<div class="col-lg-6 gradient-to-top-light">
<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>
<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>

43
src/scss/styles.scss
View file

@ -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: 1.5rem;
--bs-gutter-y: var(--bs-gutter-x);
}
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;