Quelltext der Seite Test2


<h2 id="main-header">Willkommen im offiziellen Wiki des Kulturvereins [https://kometin.at/ die Kometin]!</h2>
<br/>

<html>
<style>
#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 */
}

html {
font-size: 1.1em;
}


#main-header {
font-size:0.95em;
font-weight:bold;
font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
line-height:1.5;
}

.bold {
font-weight:bold;
}

.sections-container {
    display: flex;
    border: black solid 2px;
  width: fit-content;


background-color: hsla(102,43%,36%,60%);
}

.sections-container div {

 
    min-width: 200px;
   
}

section-header {
 text-align: center;


 border-bottom: black solid 2px;
}

.p-heading {
text-align: center;
border-bottom: black solid 2px;
margin: 0;
background-color:hsla(204, 33%, 52%, 60%);
font-weight: 700;
color: white;
}
.sections-container div ul {
padding:0; margin:0;
    width: 100%;
    list-style-position: inside;
    list-style-type: none;
    display:flex;
justify-content:center;
align-items: center;
    flex-direction: column;
}

.sections-container div ul li {
  width:100%;
 text-align:center;
 transition: background-color 0.4s;
}
.sections-container div ul li a {
display:block;
width: 100%;
text-decoration:none;
color:black;
}
.sections-container div ul li a:hover {
color:black;
text-decoration:none;
}


.sections-container div ul li a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

.sections-container div ul li:hover {
  background-color: hsla(102,43%,36%,90%);;
  font-size: 1.02em;

}
.newbie-container {
border-right: black solid 2px;
}

.organisation-container {
border-right: black solid 2px;
}

.projects-container {


}

.garten-show {
display:none;
}

#garten-img {
width:13vw; height:13vw; float:right; margin-left:3em; border-radius:50%; shape-outside:circle(42%); shape-margin:1.9rem; box-shadow:5px 5px 8px 5px rgb(238, 240, 120); position:relative; z-index:1000; margin-right:0.7em;object-fit:cover;

}

@media screen and (max-width: 53em)
{
#garten-img {
  float:none;
  display:block;
text-align:center;
margin-right: auto !important;
margin-left: auto !important;
margin-bottom: 1em;

}
.sections-container {
  flex-direction: column;
}
.newbie-container {
border-right: black solid 0;
}

.organisation-container {
border-right: black solid 0;
}
}

#svg-img {

display:none;
}

@media screen and (max-width: 25em)
{
               @-moz-document url-prefix() { #svg-img 
                   {

                     
    position: absolute;
    left: -1em;
    bottom:69.5em;
    
    z-index: -1;
    transform: scale(40%);
    
    opacity: 60%;
     
                      
                    }}
}
</style>
<!-- 
<img id="kometin-lg"  style="position:absolute; opacity:20%;position: fixed;
 src="/resources/assets/Kometin-icon2_alpha-135x135.png">
-->

<div class="schweif-container">
 <img src="https://wiki.kometin.at/images/f/f6/Kometinnenschweif.png" alt="Schweif"
  id="schweif"> 
 </div>
<img id="garten-img" src="https://wiki.kometin.at/images/d/da/Garten_der_Kometin_.jpg" alt="Küche" > 

  
         <svg
            version="1.1"
            id="svg-img"
            xml:space="preserve"
            width="538.66437"
            height="413.61917"
            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:svg="http://www.w3.org/2000/svg"><defs
              id="defs1"><filter
                inkscape:collect="always"
                style="color-interpolation-filters:sRGB"
                id="filter10"
                x="-0.0058925963"
                y="-0.0098296473"
                width="1.0121883"
                height="1.0186292"><feGaussianBlur
                  inkscape:collect="always"
                  stdDeviation="0.25330378"
                  id="feGaussianBlur10" /></filter></defs><sodipodi:namedview
              id="namedview1"
              pagecolor="#ffffff"
              bordercolor="#cccccc"
              borderopacity="1"
              inkscape:showpageshadow="0"
              inkscape:pageopacity="1"
              inkscape:pagecheckerboard="0"
              inkscape:deskcolor="#d1d1d1" /><inkscape:clipboard
              style="font-variation-settings:normal;opacity:0.888216;vector-effect:none;fill:none;fill-opacity:1;stroke:#1f2ee1;stroke-width:3.77952756;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:103.55905512;stroke-opacity:0.904781;-inkscape-stroke:none;filter:url(#filter10);stop-color:#000000;stop-opacity:1"
              min="156.37886,253.07001"
              max="695.04322,666.68917"
              geom-min="159.51477,257.06139"
              geom-max="691.69277,663.11607" /><g
              id="g1"
              transform="matrix(3.7795276,0,0,3.7795276,-156.37886,-253.07002)"><g
                id="g2"
                style="opacity:0.888216;mix-blend-mode:multiply;fill:none;fill-opacity:1;stroke:#1f2ee1;stroke-linejoin:bevel;stroke-dasharray:none;stroke-dashoffset:27.4;stroke-opacity:0.904781;filter:url(#filter10)"><path
                  style="fill:none;fill-opacity:1;stroke:#1f2ee1;stroke-linejoin:bevel;stroke-dasharray:none;stroke-dashoffset:27.4;stroke-opacity:0.904781"
                  d="m 42.276037,116.10235 c 43.415557,-4.48241 60.469953,13.06834 43.153261,59.34711 L 171.46285,81.385814 C 131.3889,92.858292 86.334247,104.49694 42.276037,116.10235 Z"
                  id="path1"
                  sodipodi:nodetypes="cccc" /><path
                  style="fill:none;fill-opacity:1;stroke:#1f2ee1;stroke-linejoin:bevel;stroke-dasharray:none;stroke-dashoffset:27.4;stroke-opacity:0.904781"
                  d="M 42.204949,115.99287 139.14908,68.014159 86.494198,175.36558 183.01038,110.62146 Z"
                  id="path2" /></g></g></svg>
                  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
                  <!-- Created with Inkscape (http://www.inkscape.org/) -->
                  
</html>
<i><b>Die Kometin</b></i> ist eine Gemeinschaft, die die Räume der Kometin nutzt, verwaltet und pflegt. Die Kometin befindet sich in der Rechbauerstraße 19a/3, direkt neben der Technischen Universität - Campus Alte Technik. Die Idee der Kometin ist inspiriert worden durch das [https://de.wikipedia.org/wiki/Commons Commons] und [https://de.wikipedia.org/wiki/Virginia_Woolf Virginia Woolf (Ein Zimmer für sich allein)] .
<br>
 
Die Räume der Kometin bestehen aus einem Garten, eine Küche, ein Wohnzimmer, ein Atelier und ein WC. <br>
Die Räume werden von den Mitgliedern auf unterschiedlichste Weise genutzt. Es wird gemalt, gespielt, gebastelt, genäht und vieles mehr. <br> <br> 
[https://kometin.at/events/ Hier] kommst du zu unseren Veranstaltungen.<br>

Bist du neugierig geworden auf die Kometin oder hast noch Fragen? Dann findest du eventuell die Antworten in unserem kurzen [[Checkliste-kometinvorstellung|FAQ]] oder schreib uns eine Mail auf orga@kometin.at.

<html>
<div class="sections-container">

<div class="newbie-container">
           <p class="p-heading">  Newbie </p>
          <ul>
           <li> <a href="/Kometin-FAQ" title="Kometin-FAQ">FAQ </a>          </li>
           <li> <a href="/Tutorials" title="Kometin-Tutorials">Tutorials </a>    </li>
           <li>  <a href="/forum" title="Kometin-Forum">Forum </a>       </li>
          </ul>
</div>

<div class="organisation-container">
           <p class="p-heading">  Organisation </p>
    <ul>
           <li> <a href="/Regeln_der_Kometin" title="Kometin-Regeln">Regeln </a>        </li>
           <li> <a href="/Wichtige_Dokumente" title="Kometin-Dokumente">Dokumente </a>           </li>
           <li> <a href="/Orga-treffen" title="Orga-Treffen">Orga-Treffen </a>       </li>
           <li> <a href="/raum" title="Orga-Treffen">Räumlichkeiten </a>       </li>
    </ul>
</div>

<div class="projects-container">
           <p class="p-heading">  Projekte </p>
    <ul>
           <li> <a href="/freiraumfest" title="Freiraumfest"> Freiraumfest </a>   </li>
           <li><a href="/inklusion" title="Inklusion">Inklusion   </a>      </li>
           <li> <a href="/Andere-projekte" title="andere-Projekte"> andere Projekte </a> </li>
    </ul>
</div>

</div>


</html>



<html>
<div style="margin: 0.1em auto 1.0em;"><div style="clear:both; border: 1px solid #E0E0E0; margin: 1px 0px;">
<div style="float: left;"></div>
<div style="text-align: center; background-color: #E0E0E0;"><div style="padding:4px;"><a href="/Todos" title="Todos"><span style="letter-spacing:0.16em;"><big><b>Todos</b></big></span></a></div></div>
<div style="text-align: center; background-color: #FFFFFF; width: 100%; margin: 0px;"><div style="line-height:170%; margin: -0.5em 0; padding: 0 1em; color:#ccc;">
<p>

<a href="/Werwolf_bei_Vollmond" title="Werwolf"><span style="white-space:nowrap;">Werwolf </span></a>&nbsp;·
<a href="/Hexspace" title="Hexspace"><span style="white-space:nowrap;">Hexspace </span></a>&nbsp;·
<a href="/Orga-Treffen" title="Orga-Treffen"><span style="white-space:nowrap;">Orga-Treffen </span></a>&nbsp;
<a href="/Probemitgliedschaft" title="Probemitgliedschaft"><span style="white-space:nowrap;">Probemitgliedschaft </span></a>&nbsp;·
<a href="/Aufgabenbeschreibungen" title="Aufgabenbeschreibungen"><span style="white-space:nowrap;">Aufgabenbeschreibungen </span></a>&nbsp;·
<a href="/Haushalts-leitfaden" title="haushaltsleitfaden"><span style="white-space:nowrap;">Haushalts-Leitfaden </span></a>&nbsp;
</p>
</div></div>
</div>
</div>
</html>
<html>


<html>
<div style="margin: 0.1em auto 1.0em;"><div style="clear:both; border: 1px solid #E0E0E0; margin: 1px 0px;">
<div style="float: left;"></div>
<div style="text-align: center; background-color: #E0E0E0;"><div style="padding:4px;"><a href="/Freiräume" title="Freiräume"><span style="letter-spacing:0.16em;"><big><b>andere Freiräume in Graz</b></big></span></a></div></div>
<div style="text-align: center; background-color: #FFFFFF; width: 100%; margin: 0px;"><div style="line-height:170%; margin: -0.5em 0; padding: 0 1em; color:#ccc;">
<p><a href="https://spektral.at/"  target="_blank" title="Spektral"><span style="white-space:nowrap;">Spektral</span></a>&nbsp;·
<a href="https://schubertnest.at/"  target="_blank" title="Schubertnest">Schubertnest</a>&nbsp;·
<a href="http://traumwerk.in/"  target="_blank" title="Traumwerk">Traumwerk</a>&nbsp;·
<a href="https://helsinki.at/"  target="_blank" title="Helsinki">Radio Helsinki</a>&nbsp;·
<a href="https://schwarzeraupe.noblogs.org/"  target="_blank" title="Schwarze Raupe">Schwarze Raupe</a>&nbsp;·
<a href="https://web.htugraz.at/greencampus/home"  target="_blank" title="Green Campus">Green Campus</a>&nbsp;·
</p>
</div></div>
</div>
</div>
<script>
    

   document.addEventListener("DOMContentLoaded", init);

function init() {
const imgElement = document.getElementById("garten-img");
console.log(imgElement);
//imgElement.className = "garten-show";
imgElement.addEventListener("mouseenter", (event) => {
imgElement.className = "garten-show";
console.log("mouseenter");
});



//imgElement.addEventListener("mouseleave", (event) => {
//imgElement.removeAttribute("class");
//console.log("mouseleave");
//});
}
</script>



</html>