master #1
15 changed files with 403 additions and 5 deletions
|
|
@ -1,2 +1,3 @@
|
||||||
# Epic-Sax
|
# Epic-Sax
|
||||||
|
|
||||||
|
//Test
|
||||||
21
altsaxophon.html
Normal file
21
altsaxophon.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="inhalte/designes/saxophone.css">
|
||||||
|
<title>Altsaxophon</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<button class="button" onclick="window.location.href='index.html#sax'" type="button">Zurück</button>
|
||||||
|
<h1>Altsaxophon</h1>
|
||||||
|
<img src="inhalte/bilder/Altsaxophon.png" />
|
||||||
|
<a class="quelle" href="https://www.kisspng.com/free/alto-saxophone.html">Bildquelle</a>
|
||||||
|
<a class="buy" href="https://www.thomann.de/de/saxophone.html">Kaufen auf thomann.de</a>
|
||||||
|
<p>
|
||||||
|
Das Altsaxophon ist das geläufigste Saxophon, da es oft zur Instrumentalausbildung benutz wird. Außerdem eignet
|
||||||
|
sich das Altsaxophon aufgrund seiner mittelhohen Tonlage besonders gut zum Spielen von führenden Melodien.
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
21
baritonsaxophon.html
Normal file
21
baritonsaxophon.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="inhalte/designes/saxophone.css">
|
||||||
|
<title>Baritonsaxophon</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<button class="button" onclick="window.location.href='index.html#sax'" type="button">Zurück</button>
|
||||||
|
<h1>Baritonsaxophon</h1>
|
||||||
|
<img src="inhalte/bilder/Baritonsaxophon.png" />
|
||||||
|
<a class="quelle" href="https://de.kisspng.com/png-vw76al/">Bildquelle</a>
|
||||||
|
<a class="buy" href="https://www.thomann.de/de/saxophone.html">Kaufen auf thomann.de</a>
|
||||||
|
<p>
|
||||||
|
Das Barisax ist das tiefste unter den geläufigsten Saxophonen. Es ist wie das Altsax in Es gestimmt und
|
||||||
|
übernimmt in den meisten Fällen den Bass Part, jedoch kannman auch mit dem Baritonsaxophon Solos spielen.
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
20
impressum.html
Normal file
20
impressum.html
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="inhalte/designes/impressum.css">
|
||||||
|
<title>Impressum</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<button class="button" onclick="window.location.href='index.html'" type="button">Zurück</button>
|
||||||
|
<h1>Impressum</h1>
|
||||||
|
<p>
|
||||||
|
Hannes Jaeschke<br />
|
||||||
|
Büttelbronnerstraße 24<br />
|
||||||
|
74613 Öhringen<br />
|
||||||
|
Hanneshp1@gmail.com
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
54
index.html
54
index.html
|
|
@ -1,13 +1,59 @@
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
|
||||||
<link rel="stylesheet" type="text/css" href="assets/style/style.css">
|
<link rel="stylesheet" type="text/css" href="inhalte/designes/index.css">
|
||||||
|
|
||||||
<title>Epic-Sax</title>
|
<title>Epic-Sax</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
Hier entsteht Epic-Sax
|
<div class="page home">
|
||||||
|
<div class="title">
|
||||||
|
<h2>Willkommen auf</h2>
|
||||||
|
<h1>Epic-Sax</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="page history">
|
||||||
|
<h1>Geschichte</h1>
|
||||||
|
<p>Saxophone haben ihren Namen von ihrem Erfinder Adolphe Sax (1814 -1894). Die Geburtsjahre dieser Instrumente,
|
||||||
|
die als eine Mischung aus Klarinetten, Oboen und weit mensurierten Metallblasinstrumenten bezeichnet werden
|
||||||
|
könnten, datiert man auf die Jahre 1841 -43, in denen Adolphe Sax in Brüssel die ersten Instrumente baute.
|
||||||
|
Fünf Jahre später meldete er sein Saxophon in Paris zum Patent an. Die Verwandtschaft zur Klarinette ist am
|
||||||
|
engsten, weshalb das gänzlich aus Metall gebaute Instrument eindeutig zu den Holzblasinstrumenten zu zählen
|
||||||
|
ist. Nicht sofort und überall wurde seinerzeit das neue Instrument begeistert aufgenommen. Doch viele
|
||||||
|
Komponisten fanden alsbald Gefallen an ihm und setzten es mit seinen klanglichen Variationsmöglichkeiten
|
||||||
|
ein. Heut zu Tage ist das Saxophon vor allem im Jazz beheimatet, jedoch auch in der modernen Blasmusik.</p>
|
||||||
|
</div>
|
||||||
|
<div class="page explore">
|
||||||
|
<h1 id="sax">Entdecken Sie die Vielfalt der Saxophone</h1>
|
||||||
|
<div class="saxophones">
|
||||||
|
<a href="sopransaxophon.html">
|
||||||
|
<div class="saxophone">
|
||||||
|
<img src="inhalte/bilder/Sopransaxophon.png" />
|
||||||
|
<p>Sopransaxophon</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="altsaxophon.html">
|
||||||
|
<div class="saxophone">
|
||||||
|
<img src="inhalte/bilder/Altsaxophon.png" />
|
||||||
|
<p>Altsaxophon</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tenorsaxophon.html">
|
||||||
|
<div class="saxophone">
|
||||||
|
<img src="inhalte/bilder/Tenorsaxophon.png" />
|
||||||
|
<p>Tenorsaxophon</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="baritonsaxophon.html">
|
||||||
|
<div class="saxophone">
|
||||||
|
<img src="inhalte/bilder/Baritonsaxophon.png" />
|
||||||
|
<p>Baritonsaxophon</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
BIN
inhalte/bilder/Altsaxophon.png
Executable file
BIN
inhalte/bilder/Altsaxophon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 826 KiB |
BIN
inhalte/bilder/Baritonsaxophon.png
Executable file
BIN
inhalte/bilder/Baritonsaxophon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
BIN
inhalte/bilder/Sopransaxophon.png
Executable file
BIN
inhalte/bilder/Sopransaxophon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
inhalte/bilder/Tenorsaxophon.png
Executable file
BIN
inhalte/bilder/Tenorsaxophon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
37
inhalte/designes/impressum.css
Normal file
37
inhalte/designes/impressum.css
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 5%;
|
||||||
|
|
||||||
|
font-size: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate3D(-50%, -50%, 0);
|
||||||
|
|
||||||
|
font-size: 5vh;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
background-color: grey;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 32px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
background-color: lightgray;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
133
inhalte/designes/index.css
Normal file
133
inhalte/designes/index.css
Normal file
|
|
@ -0,0 +1,133 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.page {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
/* border: 5px solid red;
|
||||||
|
box-sizing: border-box; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*### HOME #########################################################################*/
|
||||||
|
|
||||||
|
div.page.home {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.page.home > div.title {
|
||||||
|
position: absolute;
|
||||||
|
top: 45%;
|
||||||
|
width: 100%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.title > h1 {
|
||||||
|
font-size: 20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.title > h2 {
|
||||||
|
font-size: 4vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*### HISTORY #########################################################################*/
|
||||||
|
|
||||||
|
div.page.history > h1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 5%;
|
||||||
|
|
||||||
|
font-size: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.page.history > p {
|
||||||
|
position: absolute;
|
||||||
|
top: 55%;
|
||||||
|
left: 50%;
|
||||||
|
min-width: 700px;
|
||||||
|
width: 60%;
|
||||||
|
transform: translate3D(-50%, -50%, 0);
|
||||||
|
|
||||||
|
font-size: 3vh;
|
||||||
|
hyphens: auto;
|
||||||
|
text-align: justify
|
||||||
|
}
|
||||||
|
|
||||||
|
/*### EXPLORE #########################################################################*/
|
||||||
|
|
||||||
|
div.page.explore > h1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-size: 8vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.page.explore > a {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 4%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.page.explore > div.saxophones {
|
||||||
|
padding-top: 38vh;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.saxophones div.saxophone {
|
||||||
|
padding: 4vw;
|
||||||
|
width: 12vw;
|
||||||
|
height: 12vw;
|
||||||
|
|
||||||
|
transition: 150ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.saxophones div.saxophone > p {
|
||||||
|
margin: 8vh 0;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 3vh;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
transition: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.saxophones div.saxophone:hover > p {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
div.saxophones div.saxophone:hover {
|
||||||
|
padding: 3vw;
|
||||||
|
width: 12vw;
|
||||||
|
height: 12vw;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.saxophones div.saxophone > img {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
75
inhalte/designes/saxophone.css
Normal file
75
inhalte/designes/saxophone.css
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 5%;
|
||||||
|
|
||||||
|
font-size: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 25vw;
|
||||||
|
height: 25vw;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 55%;
|
||||||
|
left: 20%;
|
||||||
|
transform: translate3D(-50%, -50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 60%;
|
||||||
|
transform: translate3D(-50%, -50%, 0);
|
||||||
|
|
||||||
|
font-size: 3vh;
|
||||||
|
hyphens: auto;
|
||||||
|
text-align: justify
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.buy {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20%;
|
||||||
|
left: 60%;
|
||||||
|
transform: translate3D(-50%, -50%, 0);
|
||||||
|
|
||||||
|
font-size: 4vh;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.quelle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15%;
|
||||||
|
left: 20%;
|
||||||
|
transform: translate3D(-50%, -50%, 0);
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: grey;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 32px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
background-color: lightgray;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
22
sopransaxophon.html
Normal file
22
sopransaxophon.html
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="inhalte/designes/saxophone.css">
|
||||||
|
<title>Sopransaxophon</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<button class="button" onclick="window.location.href='index.html#sax'" type="button">Zurück</button>
|
||||||
|
<h1>Sopransaxophon</h1>
|
||||||
|
<img src="inhalte/bilder/Sopransaxophon.png" />
|
||||||
|
<a class="quelle" href="https://de.kisspng.com/png-mqadkl/">Bildquelle</a>
|
||||||
|
<a class="buy" href="https://www.thomann.de/de/saxophone.html">Kaufen auf thomann.de</a>
|
||||||
|
<p>
|
||||||
|
Das Sopransaxophon sieht auf den ersten Blick aus wie eine Klarinette aus Messing. Jedoch gehört es ebenfalls zu
|
||||||
|
der Gattung der Saxophone. Das Sopransax ist wie das Tenorsaxophon in B gestimmt und überschneidet sich vom
|
||||||
|
Tonumfang mit dem Altsax, wobei es noch viel höher kann.
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
22
tenorsaxophon.html
Normal file
22
tenorsaxophon.html
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="inhalte/designes/saxophone.css">
|
||||||
|
<title>Tenorsaxophon</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<button class="button" onclick="window.location.href='index.html#sax'" type="button">Zurück</button>
|
||||||
|
<h1>Tenorsaxophon</h1>
|
||||||
|
<img src="inhalte/bilder/Tenorsaxophon.png" />
|
||||||
|
<a class="quelle" href="https://de.kisspng.com/png-vcd3ox/download-png.html">Bildquelle</a>
|
||||||
|
<a class="buy" href="https://www.thomann.de/de/saxophone.html">Kaufen auf thomann.de</a>
|
||||||
|
<p>
|
||||||
|
Das Tenorsaxophon ist zwei Oktaven tiefer als das Altsaxophon und ist außerdem in B gestimmt. Dadurch ist es dem
|
||||||
|
Altsaxophon oft unterstellt, begeistert allerdings durch seinen tieferen und aussagekräftigen Ton. Besonders in
|
||||||
|
der Jazzmusik ist das Tenorsax zu finden.
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue