Viel
This commit is contained in:
1 parent
a6019c0440
commit
e5869dc6cb
10 files changed
-312
No files matched your search
@@ -1,103 +0,0 @@
|
|||||||
+++
|
|
||||||
title = ""
|
|
||||||
menu = "main"
|
|
||||||
url = "/about/"
|
|
||||||
+++
|
|
||||||
|
|
||||||
<section id="team">
|
|
||||||
<h1 style="text-align:center;">Bandmitglieder</h1>
|
|
||||||
|
|
||||||
<!-- Mitglied 1 -->
|
|
||||||
<div class="team-row">
|
|
||||||
<div class="team-text">
|
|
||||||
<h2>Olly</h2>
|
|
||||||
<p>Lead Gitarrist und Sänger</p>
|
|
||||||
</div>
|
|
||||||
<div class="team-image">
|
|
||||||
<img src="/img/about/Olly_compressed.jpg" alt="Olly">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mitglied 2 -->
|
|
||||||
<div class="team-row">
|
|
||||||
<div class="team-image">
|
|
||||||
<img src="/img/about/Lucas_compressed.jpg" alt="Lucas">
|
|
||||||
</div>
|
|
||||||
<div class="team-text">
|
|
||||||
<h2>Lucas</h2>
|
|
||||||
<p>Rhytmusgitarrist</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mitglied 3 -->
|
|
||||||
<div class="team-row">
|
|
||||||
<div class="team-text">
|
|
||||||
<h2>Ahrens</h2>
|
|
||||||
<p>Schlagzeuger</p>
|
|
||||||
</div>
|
|
||||||
<div class="team-image">
|
|
||||||
<img src="/img/about/Ahrens_compressed.jpg" alt="John Doe">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mitglied 4 -->
|
|
||||||
<div class="team-row">
|
|
||||||
<div class="team-image">
|
|
||||||
<img src="/img/about/Felix_compressed.jpg" alt="John Doe">
|
|
||||||
</div>
|
|
||||||
<div class="team-text">
|
|
||||||
<h2>Felix</h2>
|
|
||||||
<p>On the Bass</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="Gruppenfoto">
|
|
||||||
<img src="/img/about/Gruppenbild_compressed.jpg" class="responsive-img" alt="Gruppenfoto" width="1200" height="800">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#team {
|
|
||||||
max-width: 1000px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 2rem 0;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-text {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-image img {
|
|
||||||
width: 300px;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.responsive-img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
margin: 2rem auto 0 auto; /* zentriert auf Mobil */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.team-row {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.team-image img {
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
title: "Galerie"
|
|
||||||
images:
|
|
||||||
- "https://picsum.photos/seed/picsum/200/300"
|
|
||||||
- "https://picsum.photos/200/300?grayscale"
|
|
||||||
- "https://picsum.photos/200/300/?blur"
|
|
||||||
---
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
{{ define "main" }}
|
|
||||||
<link rel="stylesheet" href="/css/carousel.css">
|
|
||||||
<script defer src="/js/carousel.js"></script>
|
|
||||||
<section class="carousel">
|
|
||||||
<div class="carousel-inner">
|
|
||||||
{{ range $index, $img := .Params.images }}
|
|
||||||
<div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
|
|
||||||
<img src="{{ $img }}" alt="Slide {{ add $index 1 }}">
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
<button class="prev">❮</button>
|
|
||||||
<button class="next">❯</button>
|
|
||||||
</section>
|
|
||||||
{{ end }}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
.carousel {
|
|
||||||
position: relative;
|
|
||||||
/*max-width: 1000px; */
|
|
||||||
margin: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-inner {
|
|
||||||
display: flex;
|
|
||||||
transition: transform 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item {
|
|
||||||
min-width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item img {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.prev,
|
|
||||||
button.next {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background-color: rgba(0,0,0,0.5);
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
padding: 10px 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.prev { left: 10px; }
|
|
||||||
button.next { right: 10px; }
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: rgba(0,0,0,0.8);
|
|
||||||
}
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
/* Footer Grundlayout */
|
|
||||||
#site_footer {
|
|
||||||
background-color: #111;
|
|
||||||
color: #eee;
|
|
||||||
padding: 30px 20px;
|
|
||||||
font-family: 'Montserrat', sans-serif;
|
|
||||||
border-top: 2px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
#site_footer a {
|
|
||||||
color: #eee;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-left: 15px;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#site_footer a:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
max-width: 1000px;
|
|
||||||
margin: auto;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-left p {
|
|
||||||
margin: 5px 0;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-right {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-right a:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile Responsive */
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.footer-container {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-right {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#site_footer a {
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
#logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main_navigation {
|
|
||||||
display: flex; /* Container wird Flexbox */
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 40px; /* Abstand zwischen den Links */
|
|
||||||
}
|
|
||||||
|
|
||||||
#main_navigation a {
|
|
||||||
text-decoration: none !important;
|
|
||||||
color: #eee;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.3s;
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main_navigation a:hover {
|
|
||||||
text-decoration: underline; /* nur beim Überfahren */
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
#main_image {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Schriftgrößen */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
section {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#spotify_link {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: 'Montserrat', sans-serif;
|
|
||||||
background: #111;
|
|
||||||
color: #eee;
|
|
||||||
margin: 20;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3 {
|
|
||||||
font-family: 'Oswald', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacer {
|
|
||||||
height: 30px; /* amount of vertical space */
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
const carousel = document.querySelector('.carousel-inner');
|
|
||||||
const slides = document.querySelectorAll('.carousel-item');
|
|
||||||
let index = 0;
|
|
||||||
|
|
||||||
document.querySelector('.next').addEventListener('click', () => {
|
|
||||||
index = (index + 1) % slides.length;
|
|
||||||
updateCarousel();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelector('.prev').addEventListener('click', () => {
|
|
||||||
index = (index - 1 + slides.length) % slides.length;
|
|
||||||
updateCarousel();
|
|
||||||
});
|
|
||||||
|
|
||||||
function updateCarousel() {
|
|
||||||
carousel.style.transform = `translateX(-${index * 100}%)`;
|
|
||||||
}
|
|
||||||
Reference in new issue
Block a user