haveachin/Epic-Sax
1
1
Fork 1
forked from Alpha/Epic-Sax
Code Issues Pull requests Releases Wiki Activity

Compare commits

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

7 commits
master ... master

Author SHA1 Message Date
Simon
4913f939d6 Fix wrong import and reformat 2019-07-12 10:28:55 +02:00
Simon
3557efcd66 Enhance scroll indicator functionality 2019-07-12 10:23:33 +02:00
Alpha
f1015b9c32 scroll indiaktor 2019-07-12 00:36:15 +02:00
Alpha
45cd3558e2 mailto 2019-07-11 23:04:59 +02:00
Alpha
206b2a3b05 firx cursor:pointer 2019-07-11 22:59:32 +02:00
Alpha
c0f8aa35e5 UTF-8 2019-07-11 22:51:31 +02:00
Simon Giesel
bf3adce497 Merge branch 'master' of haveachin/Epic-Sax into master 2019-07-11 15:23:34 +00:00
9 changed files with 66 additions and 50 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" content="width=device-width, height=device-height, initial-scale=1.0"> <meta name="viewport" charset="UTF-8" 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" content="width=device-width, height=device-height, initial-scale=1.0"> <meta name="viewport" charset="UTF-8" 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" content="width=device-width, height=device-height, initial-scale=1.0"> <meta name="viewport" charset="UTF-8" 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 />
Hanneshp1@gmail.com <a class="mailto" href="mailto:Hanneshp1@gmail.com">Hanneshp1@gmail.com</a>
</p> </p>
</body> </body>

4
index.html
View file

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> <meta name="viewport" charset="UTF-8" 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,6 +12,7 @@
<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>
@ -23,6 +24,7 @@
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,15 +1,13 @@
* { * {
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;
} }
@ -18,9 +16,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;
@ -30,8 +28,14 @@ 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,8 +1,7 @@
* { * {
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 {
@ -14,9 +13,6 @@ div.page {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
/* border: 5px solid red;
box-sizing: border-box; */
} }
/*### HOME #########################################################################*/ /*### HOME #########################################################################*/
@ -25,39 +21,37 @@ 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
@ -65,26 +59,24 @@ 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;
@ -95,39 +87,61 @@ 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,22 +1,19 @@
* { * {
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%;
@ -28,7 +25,6 @@ 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
@ -44,7 +40,6 @@ 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;
} }
@ -54,7 +49,6 @@ 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;
} }
@ -68,8 +62,10 @@ 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" content="width=device-width, height=device-height, initial-scale=1.0"> <meta name="viewport" charset="UTF-8" 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" content="width=device-width, height=device-height, initial-scale=1.0"> <meta name="viewport" charset="UTF-8" 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>