Alpha/Epic-Sax
2
1
Fork 1
Code Issues Pull requests Releases Wiki Activity

Merge branch 'master' of haveachin/Epic-Sax into master

Browse source
This commit is contained in:
Simon Giesel 2019-07-11 15:23:34 +00:00 committed by Gitea
commit bf3adce497
15 changed files with 403 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -1,2 +1,3 @@
# Epic-Sax
//Test

21
altsaxophon.html Normal file
View 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&uuml;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>

0
assets/style/style.css
View file

21
baritonsaxophon.html Normal file
View 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&uuml;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
View 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&uuml;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
View file

@ -1,13 +1,59 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/style/style.css">
<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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 826 KiB

BIN
inhalte/bilder/Baritonsaxophon.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 249 KiB

BIN
inhalte/bilder/Sopransaxophon.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 282 KiB

BIN
inhalte/bilder/Tenorsaxophon.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 68 KiB

37
inhalte/designes/impressum.css Normal file
View 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
View 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
View 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
View 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&uuml;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
View 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&uuml;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>