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

Moved hero to bottom and removed WIP notice.

Browse source
This commit is contained in:
Bob Vandevliet 2024-12-07 11:51:48 +01:00
parent 6db3f139cb
commit 427a6de376
3 changed files with 41 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

12
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">

48
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);