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

Fix wrong import and reformat

Browse source
This commit is contained in:
Simon Giesel 2019-07-12 10:28:55 +02:00
parent 3557efcd66
commit 4913f939d6
4 changed files with 35 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -3,7 +3,6 @@
<head> <head>
<meta name="viewport" charset="UTF-8" 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">
<link rel="stylesheet" type="text/css" href="inhalte/designes/webfont-all.css">
<title>Epic-Sax</title> <title>Epic-Sax</title>
</head> </head>

20
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;
@ -31,11 +29,13 @@ p {
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
} }
.button:hover {
.button:hover {
background-color: lightgray; background-color: lightgray;
color: white; color: white;
} }
.mailto{
color: grey; .mailto {
} color: grey;
}

53
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,8 +13,6 @@ div.page {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/*### HOME #########################################################################*/ /*### HOME #########################################################################*/
@ -24,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
@ -64,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;
@ -94,51 +87,45 @@ 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 #### */ /*#### scroll #### */
.arrow::before{ .arrow::before {
content: '\25bc'; content: '\25bc';
cursor: pointer; cursor: pointer;
color: grey; color: grey;
position: absolute; position: absolute;
opacity: 0.8; opacity: 0.8;
text-shadow: 0 0 .5rem rgba(0,0,0,0.5); text-shadow: 0 0 .5rem rgba(0, 0, 0, 0.5);
width: 6rem; width: 6rem;
font-size: 2rem; font-size: 2rem;
height: 4rem; height: 4rem;
@ -148,13 +135,13 @@ div.saxophones div.saxophone > img {
margin-left: -3rem; margin-left: -3rem;
left: 50%; left: 50%;
animation: bounce 1s ease infinite; animation: bounce 1s ease infinite;
} }
@keyframes bounce { @keyframes bounce {
50% { 50% {
transform: translateY(-50%); transform: translateY(-50%);
} }
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
} }

15
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;
} }
@ -69,8 +63,9 @@ a.quelle {
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
} }
.button:hover {
.button:hover {
background-color: lightgray; background-color: lightgray;
color: white; color: white;
} }