Refactor index.html and enhance style.css with glassmorphism effect for opening hours section
This commit is contained in:
parent
e17aab4e00
commit
3153b437ea
@ -3,8 +3,33 @@ section {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#openingHours {
|
||||||
|
background: linear-gradient(90deg, rgb(0, 159, 155), rgb(157, 254, 175));
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass {
|
||||||
|
padding: 30px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
|
||||||
|
/* Animation */
|
||||||
|
scale: .8;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-in linear forwards;
|
||||||
|
animation-timeline: view();
|
||||||
|
animation-range: entry;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table>:not(caption)>*>* {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-bottom-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
height: 240px;
|
height: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper {
|
.swiper {
|
||||||
@ -15,3 +40,7 @@ footer {
|
|||||||
.swiper-pagination-bullet {
|
.swiper-pagination-bullet {
|
||||||
background-color: rgba(0, 0, 0, 1) !important
|
background-color: rgba(0, 0, 0, 1) !important
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
to { scale: 1; opacity: 1;}
|
||||||
|
}
|
||||||
|
12
index.html
12
index.html
@ -13,7 +13,7 @@
|
|||||||
<!-- Navbar -->
|
<!-- Navbar -->
|
||||||
<nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark">
|
<nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<a class="navbar-brand" href="#"><img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="120" height="120" class="d-inline-block align-text"></a>
|
<a class="navbar-brand" href="#"><img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="120" class="d-inline-block align-text"></a>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
@ -53,11 +53,11 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Öffnungszeiten Section -->
|
<!-- Öffnungszeiten Section -->
|
||||||
<section class="container d-flex" id="openingHours">
|
<section class="position-relative" id="openingHours">
|
||||||
<div class="row justify-content-center align-self-center">
|
<div class="position-absolute top-50 start-50 translate-middle w-50 glass text-white text-center">
|
||||||
<h1 class="text-center">Öffnungszeiten</h1>
|
<h1>Öffnungszeiten</h1>
|
||||||
<br>
|
<br>
|
||||||
<table class="table">
|
<table class="table table-dark">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Tag</th>
|
<th>Tag</th>
|
||||||
@ -90,7 +90,7 @@
|
|||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="container-fluid d-flex bg-dark">
|
<footer class="container-fluid d-flex bg-dark">
|
||||||
<img src="Src/zoowebseite-high-resolution-logo-transparent.png" height="200" class="align-self-center">
|
<img src="Src/zoowebseite-high-resolution-logo-transparent.png" width="200" class="align-self-center">
|
||||||
<div>
|
<div>
|
||||||
<li></li>
|
<li></li>
|
||||||
<li></li>
|
<li></li>
|
||||||
|
Loading…
Reference in New Issue
Block a user