Refactor index.html and enhance style.css with glassmorphism effect for opening hours section

This commit is contained in:
Juwan Jouma
2024-04-17 22:17:36 +02:00
parent e17aab4e00
commit 3153b437ea
2 changed files with 36 additions and 7 deletions

View File

@@ -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;}
}