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

Merge branch 'development'
All checks were successful
Build and Deploy / Build and Deploy (push) Successful in 31s
Details

Browse source
This commit is contained in:
Bob Vandevliet 2024-12-07 12:22:43 +01:00
commit 46714356cb
5 changed files with 532 additions and 356 deletions
Download patch file Download diff file Expand all files Collapse all files

12
package.json
View file

@ -17,16 +17,16 @@
"bootstrap": "^5.3.3" "bootstrap": "^5.3.3"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.14.0", "@eslint/js": "^9.16.0",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"clean-css": "^5.3.3", "clean-css": "^5.3.3",
"eslint": "^9.14.0", "eslint": "^9.16.0",
"globals": "^15.11.0", "globals": "^15.13.0",
"html-minifier-terser": "^7.2.0", "html-minifier-terser": "^7.2.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.4.47", "postcss": "^8.4.49",
"postcss-cli": "^11.0.0", "postcss-cli": "^11.0.0",
"sass": "^1.80.6", "sass": "^1.82.0",
"terser": "^5.36.0" "terser": "^5.37.0"
} }
} }

771
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

BIN
public/assets/static/logo-aerialshots-v1-s.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

36
public/index.html
View file

@ -9,13 +9,11 @@
<!--# include file="includes/nav.html" --> <!--# include file="includes/nav.html" -->
<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="hero-body position-absolute bottom-0" 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="h5">
<p class="fs-5 text-shadow"> FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.
FPV dronevideo's voor bedrijven, vastgoed, recreatie, sport en evenementen.<br> </h1>
Let op: deze website alsook de showreel is nog in ontwikkeling. <p><a class="btn btn-primary" href="#section-services">Ontdek meer <i class="fa-solid fa-arrow-down"></i></a></p>
</p>
<p><a class="btn btn-primary" href="#section-services">Ontdek meer</a></p>
</div> </div>
<video class="cover parallax" preload="auto" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> <video class="cover parallax" preload="auto" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="assets/static/showreel-sketch.mp4" type="video/mp4"> <source src="assets/static/showreel-sketch.mp4" type="video/mp4">
@ -113,32 +111,32 @@
</p> </p>
</div> </div>
<div class="col-md mt-0"> <div class="col-md mt-0">
<div id="carouselExampleCaptions" class="carousel slide"> <div id="carouselMyDrones" class="carousel slide">
<div class="carousel-indicators"> <div class="carousel-inner">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner text-shadow">
<div class="carousel-item active"> <div class="carousel-item active">
<img class="d-block img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera."> <img class="img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
<div class="carousel-caption d-block"> <div class="carousel-caption">
<!-- <h3>First slide label</h3> --> <!-- <h3>First slide label</h3> -->
<p>Mijn 7-inch FPV drone met GoPro actiecamera,<br>ideaal voor outdoor vliegen en lange afstanden.</p> <p>Mijn 7-inch FPV drone met GoPro actiecamera,<br>ideaal voor outdoor vliegen en lange afstanden.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera."> <img class="img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera.">
<div class="carousel-caption d-block"> <div class="carousel-caption">
<!-- <h3>Second slide label</h3> --> <!-- <h3>Second slide label</h3> -->
<p>Mijn 3.5-inch cinewhoop met Caddx Walnut camera,<br>ideaal voor indoor vliegen en dichtbij personen.</p> <p>Mijn 3.5-inch cinewhoop met Caddx Walnut camera,<br>ideaal voor indoor vliegen en dichtbij personen.</p>
</div> </div>
</div> </div>
</div> </div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <div class="carousel-indicators">
<button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <button class="carousel-control-next" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span> <span class="visually-hidden">Next</span>
</button> </button>

69
src/scss/styles.scss
View file

@ -16,9 +16,9 @@ $primary: $red; // Default: $blue
@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/variables-dark";
// Include any default map overrides here // Include any default map overrides here
$carousel-dark-indicator-active-bg: $white; $carousel-dark-indicator-active-bg: $white;
$carousel-dark-caption-color: $white; $carousel-dark-caption-color: $white;
$carousel-dark-control-icon-filter: unset; $carousel-dark-control-icon-filter: unset;
// Include remainder of required parts // Include remainder of required parts
@import "bootstrap/scss/maps"; @import "bootstrap/scss/maps";
@ -190,7 +190,8 @@ h6:hover .anchor-link {
color: var(--bs-primary); color: var(--bs-primary);
} }
.navbar { .navbar,
.hero-body {
background-image: none !important; background-image: none !important;
background-color: rgba(22, 23, 25, 0.6) !important; background-color: rgba(22, 23, 25, 0.6) !important;
transition: background-color 0.5s; transition: background-color 0.5s;
@ -204,11 +205,38 @@ body.is-scrolled .navbar {
max-width: fit-content; max-width: fit-content;
} }
.nav-item, .hero {
.nav-link { height: 100vh;
}
.hero-body {
width: 100%;
padding: 1rem;
@extend .h5;
@extend .text-center;
@extend .text-white; @extend .text-white;
font-family: 'Eras ITC',
var(--#{$prefix}font-sans-serif); .btn {
@extend .text-white;
@extend .h5;
}
}
.nav-item {
.nav-link,
.btn {
@extend .text-white;
@extend .h5;
}
}
.btn {
.fa-regular,
.fa-solid {
color: inherit;
}
} }
.navbar-nav .btn { .navbar-nav .btn {
@ -218,10 +246,6 @@ body.is-scrolled .navbar {
padding-left: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x);
} }
.hero {
height: 100vh;
}
.row { .row {
margin-top: unset; margin-top: unset;
--bs-gutter-y: var(--bs-gutter-x); --bs-gutter-y: var(--bs-gutter-x);
@ -276,6 +300,27 @@ img.grayscale-effect {
height: 100%; height: 100%;
} }
.carousel-caption {
right: unset;
left: unset;
bottom: 0;
// @extend .text-shadow;
}
.carousel-indicators {
position: unset;
border-bottom-left-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
}
.carousel-caption,
.carousel-indicators {
width: 100%;
background-color: rgba(22, 23, 25, 0.6) !important;
@extend .m-0;
@extend .p-0;
}
.list-group-item { .list-group-item {
background-color: inherit; background-color: inherit;
border: solid var(--bs-body-bg); border: solid var(--bs-body-bg);