From 3153b437ea5469c343a1e157ccd95d831eccbe2f Mon Sep 17 00:00:00 2001
From: Juwan Jouma <144624787+The5TiM@users.noreply.github.com>
Date: Wed, 17 Apr 2024 22:17:36 +0200
Subject: [PATCH] Refactor index.html and enhance style.css with glassmorphism
 effect for opening hours section

---
 Styles/style.css | 31 ++++++++++++++++++++++++++++++-
 index.html       | 12 ++++++------
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/Styles/style.css b/Styles/style.css
index dee8606..4480902 100644
--- a/Styles/style.css
+++ b/Styles/style.css
@@ -3,8 +3,33 @@ section {
     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 {
-    height: 240px;
+    height: 160px;
 }
 
 .swiper {
@@ -15,3 +40,7 @@ footer {
 .swiper-pagination-bullet {
     background-color: rgba(0, 0, 0, 1) !important
 }
+
+@keyframes fade-in {
+    to { scale: 1; opacity: 1;}
+}
diff --git a/index.html b/index.html
index 8ef8f83..381c2ed 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
         <!-- Navbar -->    
         <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">
-                <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">
                 <span class="navbar-toggler-icon"></span>
                 </button>
@@ -53,11 +53,11 @@
         </section>
 
         <!-- Öffnungszeiten Section -->
-        <section class="container d-flex" id="openingHours">
-            <div class="row justify-content-center align-self-center">
-                <h1 class="text-center">Öffnungszeiten</h1>
+        <section class="position-relative" id="openingHours">
+            <div class="position-absolute top-50 start-50 translate-middle w-50 glass text-white text-center">
+                <h1>Öffnungszeiten</h1>
                 <br>
-                <table class="table">
+                <table class="table table-dark">
                   <thead>
                     <tr>
                       <th>Tag</th>
@@ -90,7 +90,7 @@
 
         <!-- Footer -->
         <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>
                 <li></li>
                 <li></li>