PBA3H22AJO/ProbelaufZoo
1
0
Fork 0
Code Issues 17 Pull Requests Packages Projects 2 Releases Wiki Activity

Merge branch 'main' of https://git.bib.de/PBA3H22AJO/ProbelaufZoo

Browse Source
This commit is contained in:
Sergej Jahne 2024-04-17 23:22:10 +02:00
commit 668297a1a4
2 changed files with 50 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
Styles/style.css
View File

@ -59,8 +59,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 {
@ -71,3 +96,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;}
}

21
index.html
View File

@ -11,17 +11,15 @@
<body> <body>
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar sticky-top navbar-expand-lg"> <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="#"> <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>
<img src="Src/zoowebseite-high-resolution-logo-transparent.png" alt="Logo" width="170" height="auto" class="d-inline-block align-text-top">
</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>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto"> <div class="navbar-nav">
<a class="nav-link" aria-current="page" href="#ueberUns">Über uns</a> <a class="nav-link active" aria-current="page" href="#">Über uns</a>
<a class="nav-link" href="#openingHours">Öffnungszeiten</a> <a class="nav-link" href="#openingHours">Öffnungszeiten</a>
<a class="nav-link" href="#">Patenshop</a> <a class="nav-link" href="#">Patenshop</a>
</div> </div>
@ -29,7 +27,6 @@
</div> </div>
</nav> </nav>
<!-- Über Uns Section --> <!-- Über Uns Section -->
<section class="container" id="ueberUns"> <section class="container" id="ueberUns">
<div class="row"> <div class="row">
@ -56,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>
@ -93,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>