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

Compare commits

merge into: haveachin:master
Branches Tags
haveachin:master
Alpha:master
...
pull from: 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>
<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">
<title>Altsaxophon</title>
</head>

2
baritonsaxophon.html
View file

@ -1,7 +1,7 @@
<html>
<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">
<title>Baritonsaxophon</title>
</head>

4
impressum.html
View file

@ -1,7 +1,7 @@
<html>
<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">
<title>Impressum</title>
</head>
@ -13,7 +13,7 @@
Hannes Jaeschke<br />
Büttelbronnerstraße 24<br />
74613 Öhringen<br />
Hanneshp1@gmail.com
<a class="mailto" href="mailto:Hanneshp1@gmail.com">Hanneshp1@gmail.com</a>
</p>
</body>

4
index.html
View file

@ -1,7 +1,7 @@
<html>
<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">
<title>Epic-Sax</title>
</head>
@ -12,6 +12,7 @@
<h2>Willkommen auf</h2>
<h1>Epic-Sax</h1>
</div>
<div class="arrow" onclick="window.scrollTo({top: window.innerHeight, behavior: 'smooth'});"></div>
</div>
<div class="page history">
<h1>Geschichte</h1>
@ -23,6 +24,7 @@
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 class="arrow" onclick="window.scrollTo({top: window.innerHeight*2, behavior: 'smooth'});"></div>
</div>
<div class="page explore">
<h1 id="sax">Entdecken Sie die Vielfalt der Saxophone</h1>

18
inhalte/designes/impressum.css
View file

@ -1,15 +1,13 @@
* {
margin: 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 {
position: absolute;
top: 10%;
left: 5%;
font-size: 10vh;
}
@ -18,9 +16,9 @@ p {
top: 50%;
left: 50%;
transform: translate3D(-50%, -50%, 0);
font-size: 5vh;
}
.button {
background-color: grey;
border: none;
@ -30,8 +28,14 @@ p {
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.button:hover {
cursor: pointer;
}
.button:hover {
background-color: lightgray;
color: white;
}
}
.mailto {
color: grey;
}

66
inhalte/designes/index.css
View file

@ -1,8 +1,7 @@
* {
margin: 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 {
@ -14,9 +13,6 @@ div.page {
position: relative;
width: 100%;
height: 100%;
/* border: 5px solid red;
box-sizing: border-box; */
}
/*### HOME #########################################################################*/
@ -25,39 +21,37 @@ div.page.home {
text-align: center;
}
div.page.home > div.title {
div.page.home>div.title {
position: absolute;
top: 45%;
width: 100%;
transform: translateY(-50%);
}
div.title > h1 {
div.title>h1 {
font-size: 20vh;
}
div.title > h2 {
div.title>h2 {
font-size: 4vh;
}
/*### HISTORY #########################################################################*/
div.page.history > h1 {
div.page.history>h1 {
position: absolute;
top: 10%;
left: 5%;
font-size: 10vh;
}
div.page.history > p {
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
@ -65,26 +59,24 @@ div.page.history > p {
/*### EXPLORE #########################################################################*/
div.page.explore > h1 {
div.page.explore>h1 {
position: absolute;
top: 10%;
width: 100%;
text-align: center;
font-size: 8vh;
}
div.page.explore > a {
div.page.explore>a {
position: absolute;
left: 50%;
bottom: 4%;
transform: translateX(-50%);
text-align: center;
font-size: 2vh;
}
div.page.explore > div.saxophones {
div.page.explore>div.saxophones {
padding-top: 38vh;
display: grid;
place-items: center;
@ -95,39 +87,61 @@ div.saxophones div.saxophone {
padding: 4vw;
width: 12vw;
height: 12vw;
transition: 150ms ease-in-out;
}
div.saxophones div.saxophone > p {
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 {
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 {
div.saxophones div.saxophone>img {
width: 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;
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 {
position: absolute;
top: 10%;
left: 5%;
font-size: 10vh;
}
img {
width: 25vw;
height: 25vw;
position: absolute;
top: 55%;
left: 20%;
@ -28,7 +25,6 @@ p {
top: 50%;
left: 60%;
transform: translate3D(-50%, -50%, 0);
font-size: 3vh;
hyphens: auto;
text-align: justify
@ -44,7 +40,6 @@ a.buy {
bottom: 20%;
left: 60%;
transform: translate3D(-50%, -50%, 0);
font-size: 4vh;
font-weight: bold;
}
@ -54,7 +49,6 @@ a.quelle {
bottom: 15%;
left: 20%;
transform: translate3D(-50%, -50%, 0);
text-align: center;
font-size: 2vh;
}
@ -68,8 +62,10 @@ a.quelle {
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.button:hover {
cursor: pointer;
}
.button:hover {
background-color: lightgray;
color: white;
}
}

2
sopransaxophon.html
View file

@ -1,7 +1,7 @@
<html>
<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">
<title>Sopransaxophon</title>
</head>

2
tenorsaxophon.html
View file

@ -1,7 +1,7 @@
<html>
<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">
<title>Tenorsaxophon</title>
</head>