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

Added cinewhoop image using carousel.

Browse source
This commit is contained in:
Bob Vandevliet 2024-08-16 10:48:49 +02:00
parent 22b617e529
commit 2589c078fd
3 changed files with 35 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/assets/static/20240815_184226.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 445 KiB

33
public/index.html
View file

@ -112,8 +112,37 @@
FPV beelden vertellen een compleet verhaal in één vlucht. Ze zijn ideaal voor bedrijfsvideo's, vastgoed, concerten, festivals, (sport)evenementen en bruiloften. FPV drones worden op maat gemaakt en zijn daardoor flexibel in te zetten. Ze kunnen binnen en buiten filmen, van het navigeren door fabrieken, kantoren en festivaltenten tot het achtervolgen van auto's en motorcrossers.
</p>
</div>
<div class="col-md">
<img class="img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van een 7-inch FPV drone met GoPro.">
<div class="col-md mt-0">
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<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">
<img class="d-block img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
<div class="carousel-caption d-none d-md-block">
<!-- <h3>First slide label</h3> -->
<p>Mijn 7-inch FPV drone met GoPro actiecamera,<br>ideaal voor outdoor vliegen en lange afstanden.</p>
</div>
</div>
<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.">
<div class="carousel-caption d-none d-md-block">
<!-- <h3>Second slide label</h3> -->
<p>Mijn 3.5-inch cinewhoop met Caddx Walnut camera,<br>ideaal voor indoor vliegen en dichtbij personen.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</section>

5
src/scss/styles.scss
View file

@ -16,6 +16,9 @@ $primary: $red; // Default: $blue
@import "../../node_modules/bootstrap/scss/variables-dark";
// Include any default map overrides here
$carousel-dark-indicator-active-bg: $white;
$carousel-dark-caption-color: $white;
$carousel-dark-control-icon-filter: unset;
// Include remainder of required parts
@import "../../node_modules/bootstrap/scss/maps";
@ -31,6 +34,7 @@ $primary: $red; // Default: $blue
@import "../../node_modules/bootstrap/scss/navbar"; // Requires nav
@import "../../node_modules/bootstrap/scss/buttons";
@import "../../node_modules/bootstrap/scss/card";
@import "../../node_modules/bootstrap/scss/carousel";
@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/transitions";
// @import "../../node_modules/bootstrap/scss/accordion";
@ -38,7 +42,6 @@ $primary: $red; // Default: $blue
// @import "../../node_modules/bootstrap/scss/badge";
// @import "../../node_modules/bootstrap/scss/breadcrumb";
// @import "../../node_modules/bootstrap/scss/button-group";
// @import "../../node_modules/bootstrap/scss/carousel";
// @import "../../node_modules/bootstrap/scss/close";
// @import "../../node_modules/bootstrap/scss/dropdown";
// @import "../../node_modules/bootstrap/scss/forms";