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>
<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">
<title>Altsaxophon</title>
</head>

2
baritonsaxophon.html
View file

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

4
impressum.html
View file

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

4
index.html
View file

@ -1,7 +1,7 @@
<html>
<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">
<title>Epic-Sax</title>
</head>
@ -12,7 +12,6 @@
<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>
@ -24,7 +23,6 @@
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,13 +1,15 @@
* {
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;
}
@ -16,9 +18,9 @@ p {
top: 50%;
left: 50%;
transform: translate3D(-50%, -50%, 0);
font-size: 5vh;
}
.button {
background-color: grey;
border: none;
@ -28,14 +30,8 @@ p {
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button:hover {
}
.button:hover {
background-color: lightgray;
color: white;
}
.mailto {
color: grey;
}
}

66
inhalte/designes/index.css
View file

@ -1,7 +1,8 @@
* {
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 {
@ -13,6 +14,9 @@ div.page {
position: relative;
width: 100%;
height: 100%;
/* border: 5px solid red;
box-sizing: border-box; */
}
/*### HOME #########################################################################*/
@ -21,37 +25,39 @@ 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
@ -59,24 +65,26 @@ 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;
@ -87,61 +95,39 @@ 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,19 +1,22 @@
* {
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%;
@ -25,6 +28,7 @@ p {
top: 50%;
left: 60%;
transform: translate3D(-50%, -50%, 0);
font-size: 3vh;
hyphens: auto;
text-align: justify
@ -40,6 +44,7 @@ a.buy {
bottom: 20%;
left: 60%;
transform: translate3D(-50%, -50%, 0);
font-size: 4vh;
font-weight: bold;
}
@ -49,6 +54,7 @@ a.quelle {
bottom: 15%;
left: 20%;
transform: translate3D(-50%, -50%, 0);
text-align: center;
font-size: 2vh;
}
@ -62,10 +68,8 @@ a.quelle {
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button:hover {
}
.button:hover {
background-color: lightgray;
color: white;
}
}

2
sopransaxophon.html
View file

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

2
tenorsaxophon.html
View file

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