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

Added stock background images to service cards.

Browse source
This commit is contained in:
Bob Vandevliet 2024-06-14 13:57:27 +02:00
parent 0607f4ff8f
commit 192c2af1ec
2 changed files with 45 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

35
public/assets/css/styles.css
View file

@ -54,4 +54,39 @@ h4:hover .anchor-link,
h5:hover .anchor-link,
h6:hover .anchor-link {
opacity: 1;
}
.text-shadow {
text-shadow:
-1px -1px 3px rgba(0, 0, 0, 0.3),
-1px 0px 3px rgba(0, 0, 0, 0.3),
-1px 1px 3px rgba(0, 0, 0, 0.3),
0px -1px 3px rgba(0, 0, 0, 0.3),
0px 0px 3px rgba(0, 0, 0, 0.3),
0px 1px 3px rgba(0, 0, 0, 0.3),
1px -1px 3px rgba(0, 0, 0, 0.3),
1px 0px 3px rgba(0, 0, 0, 0.3),
1px 1px 3px rgba(0, 0, 0, 0.3);
}
.card-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.card-img-overlay {
position: unset;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
transition: background-color 0.2s;
}
.card:hover .card-img-overlay {
background-color: rgba(0, 0, 0, 0.4);
}

18
public/index.html
View file

@ -38,8 +38,10 @@
<div class="row text-center">
<div class="col-lg">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<!-- <img src="https://pixabay.com/get/gd7128777282c6130d10cc4a36846b6a7e2ddc5097e97f39515cad627b13aec93756b570f5455b3f2608552932541f97d1b3412dea2d3970116834240881a0ed94862a67cd912d1259efcd0052a3e0a98_640.jpg" class="card-img" alt="..."> -->
<!-- <img src="https://pixabay.com/get/g0183f0fc2f0fed51aba6333baa19c213d184bea5865597750397e14d675ca90a69357dc316fb0a19a6889d33943377b207960105291fab749922b6a4c68b84887972d95834f04dfd15a5067d5797837d_640.jpg" class="card-img" alt="..."> -->
<img src="https://pixabay.com/get/g48e3d28ff755610c6d1ea9ea5308799b48092bec26afa05445f53209384dcf28693e86f69ffb1800e6d7adbce1f612f33c391a2e11043a108e0589d8fdc0d7808d8ff5ee31eed247d616f6f759f90332_640.jpg" class="card-img" alt="...">
<div class="card-img-overlay text-shadow">
<h4 class="card-title">
<i class="fa-solid fa-industry"></i>
<br>Bedrijfsvideo
@ -52,8 +54,8 @@
</div>
<div class="col-lg">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<img src="https://pixabay.com/get/gab0674333de1b49ad97adf913009e60da1262415f619560a40ba95990c968ac8595fdcd74e38573f1d581e776c5e0e910ec7d830d7c54acae0e61681031611a3c4710d3736ceb5dbdcd6b89386d2ad39_640.jpg" class="card-img" alt="...">
<div class="card-img-overlay text-shadow">
<h4 class="card-title">
<i class="fa-solid fa-guitar"></i>
<br>Evenementen
@ -66,8 +68,8 @@
</div>
<div class="col-lg">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<img src="https://pixabay.com/get/gd22f5a1fcb8a597f5184bb99cd5584e621c86cfe8ce29a292d163b26199bf7286cf2e4357edc895fb1d3d6b371e1cbecd2cd312eaf034bd02fa83c6fd52d20d1cfdef5274105c07940420ce8fc673bec_640.jpg" class="card-img" alt="...">
<div class="card-img-overlay text-shadow">
<h4 class="card-title">
<i class="fa-solid fa-motorcycle"></i>
<br>Sport
@ -80,8 +82,8 @@
</div>
<div class="col-lg">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<img src="https://pixabay.com/get/g19b9260ab8d1322c979f475e0f645393b8370adfe59106a4f8cd90d5f3eef296cb0413f53e5a04b2ff20ea86a8beb23bd8225aef847b2e5c35217c0ffaada45f6c6205c9c65be9f8bb5b05629bd6eafa_640.jpg" class="card-img" alt="...">
<div class="card-img-overlay text-shadow">
<h4 class="card-title">
<i class="fa-solid fa-champagne-glasses"></i>
<br>Bruiloften