jobs done

This commit is contained in:
Hendrik Schlehlein 2019-07-11 05:52:25 +02:00
parent ca43387b47
commit abcee13006
14 changed files with 368 additions and 5 deletions

20
altsaxophon.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="assets/styles/saxophone.css">
<title>Altsaxophon</title>
</head>
<body>
<h1>Altsaxophon</h1>
<img src="assets/images/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>

BIN
assets/images/Altsaxophon.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 826 KiB

BIN
assets/images/Baritonsaxophon.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 249 KiB

BIN
assets/images/Sopransaxophon.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

BIN
assets/images/Tenorsaxophon.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

View file

View file

@ -0,0 +1,23 @@
* {
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;
}

133
assets/styles/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;
}

View file

@ -0,0 +1,60 @@
* {
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;
}

20
baritonsaxophon.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="assets/styles/saxophone.css">
<title>Baritonsaxophon</title>
</head>
<body>
<h1>Baritonsaxophon</h1>
<img src="assets/images/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>

19
impressum.html Normal file
View file

@ -0,0 +1,19 @@
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="assets/styles/impressum.css">
<title>Impressum</title>
</head>
<body>
<h1>Impressum</h1>
<p>
Hannes Jaeschke<br />
Büttelbronnerstraße 24<br />
74613 Öhringen<br />
Hanneshp1@gmail.com
</p>
</body>
</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="assets/styles/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>Entdecken Sie die Vielfalt der Saxophone</h1>
<div class="saxophones">
<a href="sopransaxophon.html">
<div class="saxophone">
<img src="assets/images/Sopransaxophon.png" />
<p>Sopransaxophon</p>
</div>
</a>
<a href="altsaxophon.html">
<div class="saxophone">
<img src="assets/images/Altsaxophon.png" />
<p>Altsaxophon</p>
</div>
</a>
<a href="tenorsaxophon.html">
<div class="saxophone">
<img src="assets/images/Tenorsaxophon.png" />
<p>Tenorsaxophon</p>
</div>
</a>
<a href="baritonsaxophon.html">
<div class="saxophone">
<img src="assets/images/Baritonsaxophon.png" />
<p>Baritonsaxophon</p>
</div>
</a>
</div>
<a href="/impressum.html">Impressum</a>
</div>
</body>
</html>

21
sopransaxophon.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="assets/styles/saxophone.css">
<title>Sopransaxophon</title>
</head>
<body>
<h1>Sopransaxophon</h1>
<img src="assets/images/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>

21
tenorsaxophon.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="assets/styles/saxophone.css">
<title>Tenorsaxophon</title>
</head>
<body>
<h1>Tenorsaxophon</h1>
<img src="assets/images/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>