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

Compare commits

base: Alpha:master
Branches Tags
Alpha:master
haveachin:master
..
compare: haveachin:master
Branches Tags
haveachin:master
Alpha:master

No commits in common. "master" and "master" have entirely different histories.
master ... master

9 changed files with 50 additions and 66 deletions
Show stats Expand all files Collapse all files

2
altsaxophon.html
View file

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta name="viewport" charset="UTF-8" content="width=device-width, height=device-height, initial-scale=1.0"> <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"> <link rel="stylesheet" type="text/css" href="inhalte/designes/saxophone.css">
<title>Altsaxophon</title> <title>Altsaxophon</title>
</head> </head>

2
baritonsaxophon.html
View file

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta name="viewport" charset="UTF-8" content="width=device-width, height=device-height, initial-scale=1.0"> <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"> <link rel="stylesheet" type="text/css" href="inhalte/designes/saxophone.css">
<title>Baritonsaxophon</title> <title>Baritonsaxophon</title>
</head> </head>

4
impressum.html
View file

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta name="viewport" charset="UTF-8" content="width=device-width, height=device-height, initial-scale=1.0"> <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"> <link rel="stylesheet" type="text/css" href="inhalte/designes/impressum.css">
<title>Impressum</title> <title>Impressum</title>
</head> </head>
@ -13,7 +13,7 @@
Hannes Jaeschke<br /> Hannes Jaeschke<br />
Büttelbronnerstraße 24<br /> Büttelbronnerstraße 24<br />
74613 Öhringen<br /> 74613 Öhringen<br />
<a class="mailto" href="mailto:Hanneshp1@gmail.com">Hanneshp1@gmail.com</a> Hanneshp1@gmail.com
</p> </p>
</body> </body>

4
index.html
View file

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta name="viewport" charset="UTF-8" content="width=device-width, height=device-height, initial-scale=1.0"> <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"> <link rel="stylesheet" type="text/css" href="inhalte/designes/index.css">
<title>Epic-Sax</title> <title>Epic-Sax</title>
</head> </head>
@ -12,7 +12,6 @@
<h2>Willkommen auf</h2> <h2>Willkommen auf</h2>
<h1>Epic-Sax</h1> <h1>Epic-Sax</h1>
</div> </div>
<div class="arrow" onclick="window.scrollTo({top: window.innerHeight, behavior: 'smooth'});"></div>
</div> </div>
<div class="page history"> <div class="page history">
<h1>Geschichte</h1> <h1>Geschichte</h1>
@ -24,7 +23,6 @@
ist. Nicht sofort und überall wurde seinerzeit das neue Instrument begeistert aufgenommen. Doch viele 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 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> ein. Heut zu Tage ist das Saxophon vor allem im Jazz beheimatet, jedoch auch in der modernen Blasmusik.</p>
<div class="arrow" onclick="window.scrollTo({top: window.innerHeight*2, behavior: 'smooth'});"></div>
</div> </div>
<div class="page explore"> <div class="page explore">
<h1 id="sax">Entdecken Sie die Vielfalt der Saxophone</h1> <h1 id="sax">Entdecken Sie die Vielfalt der Saxophone</h1>

18
inhalte/designes/impressum.css
View file

@ -1,13 +1,15 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
} }
h1 { h1 {
position: absolute; position: absolute;
top: 10%; top: 10%;
left: 5%; left: 5%;
font-size: 10vh; font-size: 10vh;
} }
@ -16,9 +18,9 @@ p {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate3D(-50%, -50%, 0); transform: translate3D(-50%, -50%, 0);
font-size: 5vh; font-size: 5vh;
} }
.button { .button {
background-color: grey; background-color: grey;
border: none; border: none;
@ -28,14 +30,8 @@ p {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
cursor: pointer; }
} .button:hover {
.button:hover {
background-color: lightgray; background-color: lightgray;
color: white; color: white;
} }
.mailto {
color: grey;
}

66
inhalte/designes/index.css
View file

@ -1,7 +1,8 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
} }
a { a {
@ -13,6 +14,9 @@ div.page {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
/* border: 5px solid red;
box-sizing: border-box; */
} }
/*### HOME #########################################################################*/ /*### HOME #########################################################################*/
@ -21,37 +25,39 @@ div.page.home {
text-align: center; text-align: center;
} }
div.page.home>div.title { div.page.home > div.title {
position: absolute; position: absolute;
top: 45%; top: 45%;
width: 100%; width: 100%;
transform: translateY(-50%); transform: translateY(-50%);
} }
div.title>h1 { div.title > h1 {
font-size: 20vh; font-size: 20vh;
} }
div.title>h2 { div.title > h2 {
font-size: 4vh; font-size: 4vh;
} }
/*### HISTORY #########################################################################*/ /*### HISTORY #########################################################################*/
div.page.history>h1 { div.page.history > h1 {
position: absolute; position: absolute;
top: 10%; top: 10%;
left: 5%; left: 5%;
font-size: 10vh; font-size: 10vh;
} }
div.page.history>p { div.page.history > p {
position: absolute; position: absolute;
top: 55%; top: 55%;
left: 50%; left: 50%;
min-width: 700px; min-width: 700px;
width: 60%; width: 60%;
transform: translate3D(-50%, -50%, 0); transform: translate3D(-50%, -50%, 0);
font-size: 3vh; font-size: 3vh;
hyphens: auto; hyphens: auto;
text-align: justify text-align: justify
@ -59,24 +65,26 @@ div.page.history>p {
/*### EXPLORE #########################################################################*/ /*### EXPLORE #########################################################################*/
div.page.explore>h1 { div.page.explore > h1 {
position: absolute; position: absolute;
top: 10%; top: 10%;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 8vh; font-size: 8vh;
} }
div.page.explore>a { div.page.explore > a {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 4%; bottom: 4%;
transform: translateX(-50%); transform: translateX(-50%);
text-align: center; text-align: center;
font-size: 2vh; font-size: 2vh;
} }
div.page.explore>div.saxophones { div.page.explore > div.saxophones {
padding-top: 38vh; padding-top: 38vh;
display: grid; display: grid;
place-items: center; place-items: center;
@ -87,61 +95,39 @@ div.saxophones div.saxophone {
padding: 4vw; padding: 4vw;
width: 12vw; width: 12vw;
height: 12vw; height: 12vw;
transition: 150ms ease-in-out; transition: 150ms ease-in-out;
} }
div.saxophones div.saxophone>p { div.saxophones div.saxophone > p {
margin: 8vh 0; margin: 8vh 0;
color: white; color: white;
text-align: center; text-align: center;
font-size: 3vh; font-size: 3vh;
font-weight: bold; font-weight: bold;
transition: inherit; transition: inherit;
} }
div.saxophones div.saxophone:hover>p { div.saxophones div.saxophone:hover > p {
color: black; color: black;
} }
div.saxophones div.saxophone:hover { div.saxophones div.saxophone:hover {
padding: 3vw; padding: 3vw;
width: 12vw; width: 12vw;
height: 12vw; height: 12vw;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
background-color: #F5F5F5; background-color: #F5F5F5;
} }
div.saxophones div.saxophone>img { div.saxophones div.saxophone > img {
width: inherit; width: inherit;
height: inherit; height: inherit;
} }
/*#### scroll #### */
.arrow::before {
content: '\25bc';
cursor: pointer;
color: grey;
position: absolute;
opacity: 0.8;
text-shadow: 0 0 .5rem rgba(0, 0, 0, 0.5);
width: 6rem;
font-size: 2rem;
height: 4rem;
line-height: 4rem;
text-align: center;
bottom: 2rem;
margin-left: -3rem;
left: 50%;
animation: bounce 1s ease infinite;
}
@keyframes bounce {
50% {
transform: translateY(-50%);
}
100% {
transform: translateY(0);
}
}

16
inhalte/designes/saxophone.css
View file

@ -1,19 +1,22 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
} }
h1 { h1 {
position: absolute; position: absolute;
top: 10%; top: 10%;
left: 5%; left: 5%;
font-size: 10vh; font-size: 10vh;
} }
img { img {
width: 25vw; width: 25vw;
height: 25vw; height: 25vw;
position: absolute; position: absolute;
top: 55%; top: 55%;
left: 20%; left: 20%;
@ -25,6 +28,7 @@ p {
top: 50%; top: 50%;
left: 60%; left: 60%;
transform: translate3D(-50%, -50%, 0); transform: translate3D(-50%, -50%, 0);
font-size: 3vh; font-size: 3vh;
hyphens: auto; hyphens: auto;
text-align: justify text-align: justify
@ -40,6 +44,7 @@ a.buy {
bottom: 20%; bottom: 20%;
left: 60%; left: 60%;
transform: translate3D(-50%, -50%, 0); transform: translate3D(-50%, -50%, 0);
font-size: 4vh; font-size: 4vh;
font-weight: bold; font-weight: bold;
} }
@ -49,6 +54,7 @@ a.quelle {
bottom: 15%; bottom: 15%;
left: 20%; left: 20%;
transform: translate3D(-50%, -50%, 0); transform: translate3D(-50%, -50%, 0);
text-align: center; text-align: center;
font-size: 2vh; font-size: 2vh;
} }
@ -62,10 +68,8 @@ a.quelle {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
cursor: pointer; }
} .button:hover {
.button:hover {
background-color: lightgray; background-color: lightgray;
color: white; color: white;
} }

2
sopransaxophon.html
View file

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta name="viewport" charset="UTF-8" content="width=device-width, height=device-height, initial-scale=1.0"> <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"> <link rel="stylesheet" type="text/css" href="inhalte/designes/saxophone.css">
<title>Sopransaxophon</title> <title>Sopransaxophon</title>
</head> </head>

2
tenorsaxophon.html
View file

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta name="viewport" charset="UTF-8" content="width=device-width, height=device-height, initial-scale=1.0"> <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"> <link rel="stylesheet" type="text/css" href="inhalte/designes/saxophone.css">
<title>Tenorsaxophon</title> <title>Tenorsaxophon</title>
</head> </head>