|
|
(12 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) |
Zeile 2: |
Zeile 2: |
| <!-- Hier sind die INTERNAL STYLES --> | | <!-- Hier sind die INTERNAL STYLES --> |
| <style> | | <style> |
|
| |
| #alien-container {
| |
| width:3em; height:auto;
| |
| position:absolute;
| |
| right:0;
| |
|
| |
| -webkit-animation: alienMove 10s linear infinite; /* Chrome, Safari 5 */
| |
| -moz-animation: alienMove 10s linear infinite; /* Firefox 5-15 */
| |
| -o-animation: alienMove 10s linear infinite; /* Opera 12+ */
| |
| animation: fadeIn 6s linear 1, alienMove 10s ease-in-out 1; /* Chrome, Firefox 16+,
| |
| IE 10+, Safari 5 */
| |
| animation-delay: 6s;
| |
| animation-fill-mode: both;
| |
| }
| |
|
| |
| @-webkit-keyframes alienMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-8em) translateY(-8em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @-moz-keyframes alienMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @-o-keyframes alienMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @keyframes alienMove {
| |
| 0% { filter:opacity(0%); }
| |
| 49%% { filter:opacity(100%); }
| |
| 50% { transform: translateX(0) translateY(0); }
| |
|
| |
| 100% { transform:translateX(-21em) translateY(0); }
| |
| }
| |
|
| |
| @keyframes fadeIn {
| |
| 99% {
| |
| visibility: hidden;
| |
| }
| |
| 100% {
| |
| visibility: visible;
| |
| }
| |
| }
| |
|
| |
|
| |
| #alien-img {
| |
| object-fit:cover;
| |
| width: 100%;
| |
| height:auto;
| |
| }
| |
|
| |
| #spacer {
| |
| width:11em; height:11em;
| |
| }
| |
|
| |
|
| |
| .cat-caption {
| |
| font-size: 1em !important;
| |
| -webkit-text-stroke-width: 1px !important;
| |
| -webkit-text-stroke-color: lightblue !important;
| |
| }
| |
|
| |
|
| |
| #sun {
| |
| position:absolute;
| |
| right:0;
| |
| width: 5em;
| |
| height:auto;
| |
| opacity:60%;
| |
| overflow:hidden;
| |
| }
| |
|
| |
| #sun-container {
| |
| -webkit-animation: sunMove 35s linear infinite; /* Chrome, Safari 5 */
| |
| -moz-animation: sunMove 35s linear infinite; /* Firefox 5-15 */
| |
| -o-animation: sunMove 35s linear infinite; /* Opera 12+ */
| |
| animation: sunMove 35s linear infinite; /* Chrome, Firefox 16+,
| |
| IE 10+, Safari 5 */
| |
|
| |
|
| |
| }
| |
|
| |
| @-webkit-keyframes sunMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @-moz-keyframes sunMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @-o-keyframes sunMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
| @keyframes sunMove {
| |
| 0% { transform: translateX(0) translateY(0); }
| |
|
| |
| 50% { transform:translateX(-6em) translateY(-6em); }
| |
|
| |
| 100% { transform:translateX(0) translateY(0); }
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| #schweif {
| |
| width:100%;
| |
| height: auto;
| |
| overflow:hidden;
| |
| -webkit-animation: mySchweif 20s linear infinite; /* Chrome, Safari 5 */
| |
| -moz-animation: mySchweif 20s linear infinite; /* Firefox 5-15 */
| |
| -o-animation: mySchweif 20s linear infinite; /* Opera 12+ */
| |
| animation: mySchweif 20s linear infinite; /* Chrome, Firefox 16+,
| |
| IE 10+, Safari 5 */
| |
| }
| |
|
| |
| @-webkit-keyframes mySchweif {
| |
| 0% {
| |
| transform: rotate(80deg);
| |
| }
| |
| 40% {
| |
| transform: rotate(144deg);
| |
| }
| |
| 50% {
| |
| transform: rotate(134deg);
| |
| }
| |
| 60% {
| |
| transform: rotate(124deg);
| |
| }
| |
| 70% {
| |
| transform: rotate(114deg);
| |
| }
| |
| 80% {
| |
| transform: rotate(104deg);
| |
| }
| |
| 90% {
| |
| transform: rotate(94deg);
| |
| }
| |
| 100% {
| |
| transform: rotate(80deg);
| |
| }
| |
| }
| |
|
| |
| @-moz-keyframes mySchweif {
| |
| 0% {
| |
| transform: rotate(80deg);
| |
| }
| |
| 40% {
| |
| transform: rotate(144deg);
| |
| }
| |
| 50% {
| |
| transform: rotate(134deg);
| |
| }
| |
| 60% {
| |
| transform: rotate(124deg);
| |
| }
| |
| 70% {
| |
| transform: rotate(114deg);
| |
| }
| |
| 80% {
| |
| transform: rotate(104deg);
| |
| }
| |
| 90% {
| |
| transform: rotate(94deg);
| |
| }
| |
| 100% {
| |
| transform: rotate(80deg);
| |
| }
| |
| }
| |
|
| |
| @-o-keyframes mySchweif {
| |
| 0% {
| |
| transform: rotate(80deg);
| |
| }
| |
| 40% {
| |
| transform: rotate(144deg);
| |
| }
| |
| 50% {
| |
| transform: rotate(134deg);
| |
| }
| |
| 60% {
| |
| transform: rotate(124deg);
| |
| }
| |
| 70% {
| |
| transform: rotate(114deg);
| |
| }
| |
| 80% {
| |
| transform: rotate(104deg);
| |
| }
| |
| 90% {
| |
| transform: rotate(94deg);
| |
| }
| |
| 100% {
| |
| transform: rotate(80deg);
| |
| }
| |
| }
| |
|
| |
| @keyframes mySchweif {
| |
| 0% {
| |
| transform: rotate(80deg);
| |
| }
| |
| 40% {
| |
| transform: rotate(144deg);
| |
| }
| |
| 50% {
| |
| transform: rotate(134deg);
| |
| }
| |
| 60% {
| |
| transform: rotate(124deg);
| |
| }
| |
| 70% {
| |
| transform: rotate(114deg);
| |
| }
| |
| 80% {
| |
| transform: rotate(104deg);
| |
| }
| |
| 90% {
| |
| transform: rotate(94deg);
| |
| }
| |
| 100% {
| |
| transform: rotate(80deg);
| |
| }
| |
| }
| |
|
| |
|
| |
| .schweif-container {
| |
| width: 3em;
| |
|
| |
| margin:0.5em;
| |
|
| |
|
| |
| position:relative;
| |
| top:9em;
| |
| -webkit-animation: myOrbit 20s linear infinite; /* Chrome, Safari 5 */
| |
| -moz-animation: myOrbit 20s linear infinite; /* Firefox 5-15 */
| |
| -o-animation: myOrbit 20s linear infinite; /* Opera 12+ */
| |
| animation: myOrbit 20s linear infinite; /* Chrome, Firefox 16+,
| |
| IE 10+, Safari 5 */
| |
| }
| |
|
| |
|
| |
| @-webkit-keyframes myOrbit {
| |
| 0% { transform: rotate(0deg) translateX(10em); }
| |
|
| |
| 100% { transform: rotate(-360deg) translateX(10em) ; }
| |
| }
| |
|
| |
| @-moz-keyframes myOrbit {
| |
| 0% { transform: rotate(0deg) translateX(10em); }
| |
|
| |
| 100% { transform: rotate(-360deg) translateX(10em) ; }
| |
| }
| |
|
| |
| @-o-keyframes myOrbit {
| |
| 0% { transform: rotate(0deg) translateX(10em); }
| |
|
| |
| 100% { transform: rotate(-360deg) translateX(10em) ; }
| |
| }
| |
|
| |
| @keyframes myOrbit {
| |
| 0% { transform: rotate(0deg) translateX(10em); }
| |
|
| |
| 100% { transform: rotate(-360deg) translateX(10em) ; }
| |
| }
| |
|
| |
| #sprichwort {
| |
| text-align: center;
| |
| font-size: 1.2em;
| |
| background-color: hsla(114, 62%, 45%, 40%);
| |
| width:100%;
| |
| color: hsla(218, 93%, 23%, 100%);
| |
| margin-top: 70px;
| |
|
| |
| }
| |
|
| |
| .belohnungsbild {
| |
| width:10em;
| |
| height:10em;
| |
| object-fit:cover;
| |
| border: 6px solid blue; box-shadow: 1px 3px 4px 0px #888;
| |
| -webkit-box-shadow: 1px 3px 4px 0px #888;
| |
| -moz-box-shadow: 1px 3px 4px 0px #888;
| |
| border-radius: 600px;
| |
|
| |
|
| |
| }
| |
|
| |
| .slider .caption { | | .slider .caption { |
| position: absolute; | | position: absolute; |
Zeile 388: |
Zeile 75: |
| opacity: 1; | | opacity: 1; |
| } | | } |
| | |
| | |
|
| |
|
|
| |
|
Zeile 403: |
Zeile 92: |
| .list-todo > ul > li { | | .list-todo > ul > li { |
| list-style: "\2192\00A0"; | | list-style: "\2192\00A0"; |
| }
| |
|
| |
|
| |
| #geschafft {
| |
| display: none;
| |
| } | | } |
|
| |
|
Zeile 465: |
Zeile 149: |
|
| |
|
|
| |
|
| .belohnungsbild {
| | |
| width:50vw;
| |
| height:50vw;
| |
| }
| |
| }
| |
|
| |
|
| .my-form { | | .my-form { |
Zeile 1.003: |
Zeile 683: |
| </ul> | | </ul> |
| </li> | | </li> |
| <li> <u>Gruppen- und Sternschnuppen-Mitglieder:</u> können die Kometin während den eingetragenen eigenen Veranstaltungen nutzen, (siehe Event-Pad). </li>
| | <li> <u>Gruppen-Mitglieder:</u> können die Kometin jeweils nach der individuellen Vereinbarung (die meist zu Beginn der Mitgliedschaft mit der Kometin gemacht wird). </li> |
| | <li> <u>Sternschnuppen-Mitglieder:</u> können die Kometin während den eingetragenen eigenen Veranstaltungen nutzen, (siehe Event-Pad). </li> |
| </ul> | | </ul> |
| </li> | | </li> |
Zeile 1.047: |
Zeile 728: |
| </form> | | </form> |
|
| |
|
| <!-- BEGINN BELOHNUNGSBILD -->
| |
|
| |
| <center>
| |
| <div id="geschafft" style="font-size:2rem;">
| |
|
| |
| <div id="alien-container">
| |
| <img id="alien-img" src="https://wiki.kometin.at/images/7/79/Alien_nobg.png" alt="alien">
| |
| </div>
| |
| <div id="sun-container">
| |
| <img src="https://wiki.kometin.at/images/a/af/Sun_2.png" alt="sun"
| |
| id="sun">
| |
| </div>
| |
| <div class="schweif-container">
| |
| <img src="https://wiki.kometin.at/images/f/f6/Kometinnenschweif.png" alt="Schweif"
| |
| id="schweif">
| |
| </div>
| |
| <!--<img src="https://wiki.kometin.at/images/e/ea/Killing_1.jpg" alt="Killing"
| |
| id="belohnungsbild"> -->
| |
|
| |
| <div class="slider2">
| |
| <ul>
| |
| <li class="active">
| |
| <img class="belohnungsbild" src="https://wiki.kometin.at/images/e/ea/Killing_1.jpg" alt="Küche"
| |
| width="450" height="600"
| |
| >
| |
| <div class="caption cat-caption">
| |
| Killing
| |
| </div>
| |
|
| |
| </li>
| |
| <li>
| |
| <img class="belohnungsbild" src=
| |
| "https://wiki.kometin.at/images/a/a9/Momo_schlaf.jpg"
| |
| alt="GFG Image 2"
| |
|
| |
| width="800" height="400"
| |
| >
| |
| <div class="caption cat-caption">
| |
| Momo
| |
| </div>
| |
| </li>
| |
| <li>
| |
| <img class="belohnungsbild" src=
| |
| "https://wiki.kometin.at/images/b/b6/Killing_2.jpg"
| |
| alt="GFG Image 3">
| |
| <div class="caption cat-caption">
| |
| Killing
| |
| </div>
| |
| </li>
| |
| <li>
| |
| <img class="belohnungsbild" src=
| |
| "https://wiki.kometin.at/images/c/cb/Momo_sitzt.jpg"
| |
| alt="GFG Image 4">
| |
| <div class="caption cat-caption">
| |
| Momo
| |
| </div>
| |
| </li>
| |
| </ul>
| |
|
| |
| </div>
| |
|
| |
| <div id="spacer" >
| |
| </div>
| |
|
| |
|
| |
|
| |
| <p style="
| |
| position: relativ;
| |
| top: 20px;
| |
| left:20px;
| |
| color: khaki;
| |
| font-size: 50px;
| |
| -webkit-text-stroke-width: 1px;
| |
| -webkit-text-stroke-color: lightblue;
| |
| ">
| |
|
| |
| Du hast es geschafft!☄️
| |
|
| |
| </p>
| |
| </div>
| |
| </center>
| |
|
| |
| <!-- ENDE BELOHNUNGSBILD -->
| |
|
| |
|
|
| |
|
Zeile 1.164: |
Zeile 762: |
| <td class="thema">Nutzungsrecht</td> | | <td class="thema">Nutzungsrecht</td> |
| <td>unbeschränkt außer es findet eine Veranstaltung statt</td> | | <td>unbeschränkt außer es findet eine Veranstaltung statt</td> |
| <td>beschränkt auf die vereinbarten Termine</td> | | <td>individuelle Vereinbarung (abhängig von Gruppengröße)</td> |
| <td>beschränkt auf die vereinbarten Termine</td> | | <td>beschränkt auf die vereinbarten Termine</td> |
| </tr> | | </tr> |