forked from Alpha/Epic-Sax
Merge branch 'master' of haveachin/Epic-Sax into master
This commit is contained in:
Gitea
commit
bf3adce497
15 changed files with 403 additions and 5 deletions
|
|
@ -1,2 +1,3 @@
|
|||
# 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>
|
||||
56
index.html
56
index.html
|
|
@ -1,13 +1,59 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="assets/style/style.css">
|
||||
|
||||
<title>Epic-Sax</title>
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="inhalte/designes/index.css">
|
||||
<title>Epic-Sax</title>
|
||||
</head>
|
||||
|
||||
<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>
|
||||
|
||||
</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