-
Notifications
You must be signed in to change notification settings - Fork 0
/
musicandarts.html
201 lines (179 loc) · 22.7 KB
/
musicandarts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Projects - IIY</title>
<script>
(function() {
// JavaScript snippet handling Dark/Light mode switching
const getStoredTheme = () => localStorage.getItem('theme');
const setStoredTheme = theme => localStorage.setItem('theme', theme);
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
const getPreferredTheme = () => {
if (forcedTheme) return forcedTheme;
const storedTheme = getStoredTheme();
if (storedTheme) {
return storedTheme;
}
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
if (pageTheme) {
return pageTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
const setTheme = theme => {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else {
document.documentElement.setAttribute('data-bs-theme', theme);
}
}
setTheme(getPreferredTheme());
const showActiveTheme = (theme, focus = false) => {
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
if (!themeSwitchers.length) return;
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active');
element.setAttribute('aria-pressed', 'false');
});
for (const themeSwitcher of themeSwitchers) {
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
if (btnToActivate) {
btnToActivate.classList.add('active');
btnToActivate.setAttribute('aria-pressed', 'true');
}
}
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme();
if (storedTheme !== 'light' && storedTheme !== 'dark') {
setTheme(getPreferredTheme());
}
});
window.addEventListener('DOMContentLoaded', () => {
showActiveTheme(getPreferredTheme());
document.querySelectorAll('[data-bs-theme-value]')
.forEach(toggle => {
toggle.addEventListener('click', (e) => {
e.preventDefault();
const theme = toggle.getAttribute('data-bs-theme-value');
setStoredTheme(theme);
setTheme(theme);
showActiveTheme(theme);
})
})
});
})();
</script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/css/Dark-Mode-Switch.css">
<link rel="stylesheet" href="assets/css/pikaday.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top portfolio-navbar gradient navbar-dark">
<div class="container"><a class="navbar-brand logo" href="#">IIY</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navbarNav"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="musicandarts.html">Music & Arts</a></li>
<li class="nav-item">
<div class="row" style="margin-top: 15px;">
<div class="col">
<div class="theme-switcher nav-item dropdown"><a class="dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill mb-1">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
</svg></a>
<div class="dropdown-menu"><a class="dropdown-item d-flex align-items-center" href="#" data-bs-theme-value="light"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun-fill opacity-50 me-2">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"></path>
</svg>Light</a><a class="dropdown-item d-flex align-items-center" href="#" data-bs-theme-value="dark"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-moon-stars-fill opacity-50 me-2">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278"></path>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"></path>
</svg>Dark</a><a class="dropdown-item d-flex align-items-center" href="#" data-bs-theme-value="auto"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-circle-half opacity-50 me-2">
<path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"></path>
</svg>Auto</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<main class="page projets-page">
<section class="portfolio-block projects compact-grid">
<div class="heading">
<h2>Music and Arts Recap</h2>
</div>
<div class="row g-0">
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010199.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Magnus erklärt Ella die Bilder</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010200.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Musiker warten auf das nächste Stück</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010202.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Benjamin & Noah bestaunen Marie & Zaidas Gemälde</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010203.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Seweryn spielt ein Solo auf der Viola</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010207.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Close-up Portrait Maike</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010209.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Musiker spielen</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010205.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Lisanne's Solo: "Suite Antique"</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010212.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Vor der Veranstaltung</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010215.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Bläser: "Music for the funeral of Queen Mary"</span></span></a></div>
</div>
<div class="heading"></div>
<div class="row g-0">
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010216.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Bläser: "Music for the funeral of Queen Mary"</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010218.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Bläser: "Music for the funeral of Queen Mary"</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010255.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Musiker spielen</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010229.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Ein Gemälde wurde verkauft</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010230.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Aswini preist ein Gemälde an</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010232.jpg"><span class="description"><span class="description-heading">Lorem Ipsum</span><span class="description-body">Medium shot Maike</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010292.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">EIn Gemälde wurde verkauft</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010252.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Musiker warten auf das nächste Stück</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010257.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">"Krieg und Frieden</span></span></a></div>
</div>
<div class="heading"></div>
<div class="row g-0">
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010261.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Gemälde</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010264.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Begrüßung Marie & Lucas</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010265.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Publikum</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010266.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Einlauf</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010269.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Musiker von oben</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010271.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Bläser: "Music for the funeral of Quenn Mary"</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010272.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">"Das Cello steht nicht zum Verkauf"</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010274.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Nico & Moritz wrarten</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010291.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Musiker von oben</span></span></a></div>
</div>
<div class="heading"></div>
<div class="row g-0">
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010260.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Lucas erklärt sein Gemälde</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010258.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Lucas erklärt sein Gemälde</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010256.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Magnus dirigiert</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010213.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Zuschauer</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010220.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Noah stellt zwei Gemälde zur Schau</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010219.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Gemälde Marie & Zaida + Karatefigur</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010221.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Portrait Noah</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010222.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Noah stellt zwei Gemälde zur Schau</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010223.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Portrait Benjamin & Ella</span></span></a></div>
</div>
<div class="heading"></div>
<div class="row g-0">
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010224.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Behind the shoulders shot Antonia</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010225.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Seweryn nach "Vater unser"</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010226.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Seweryn & Magnus nach "Vater unser".</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010228.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Versteigerung</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010233.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Lars im Pausenraum</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"><img class="img-fluid image" src="assets/img/20111231-P1010254.jpg"><span class="description"><span class="description-heading"></span><span class="description-body">Magnus dirigiert</span></span></a></div>
<div class="col-md-6 col-lg-4 item zoom-on-hover position-relative"><a href="#"></a></div>
</div>
</section>
</main>
<footer class="page-footer py-3 border-top">
<div class="container my-4">
<div class="links"><a href="#">About me</a><a href="#">Contact me</a><a href="#">Projects</a></div>
<div class="social-icons"><a class="me-3" href="#"><i class="icon ion-social-facebook"></i></a><a class="me-3" href="#"><i class="icon ion-social-instagram-outline"></i></a><a class="me-3" href="#"><i class="icon ion-social-twitter"></i></a></div>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/Dark-Mode-Switch-darkmode.js"></script>
<script src="assets/js/pikaday.min.js"></script>
<script src="assets/js/theme.js"></script>
</body>
</html>