Antworten auf deine Fragen:
Neues Thema erstellen

Animation mit CSS3

Spatzihasi

Angel Of Death

Hi ihr Lieben

vielleicht könnt ihr mir helfen.
ich mach da jetzt seit 5 Stunden rum und ich weiss nicht mehr so richtig weiter.

Ich möchte für meine Webseite ein Intro machen welches kommt bevor die Hauptseite erscheint.
Das Ganze mit CSS 3

Ich möchte das wenn ich die Seite öffne Text eingeblendet wird ala "Herzlich Willkommen auf meiner Seite bla bla"....Und dann das Ganze ausblendet und an der Stelle zentriert mein Bild kommt.
Aber erst dann, wenn der Text wieder weg ist. Also so lange soll es unsichtbar sein.

So richtig krieg ich das nicht hin. Ich muss dazu sagen dass ich heute auch das erste Mal praktisch mit CSS3 arbeite.

Es ist bei mir im Moment so:
Logo erscheint sofort beim Laden der Seite... gleichzeitig fadet der Text ein.
Logo geht weg und fadet ein zur festgelegten Verzögerungszeit und bleibt
Aber wie bekomme ich es hin dass es am Anfang erstmal weg bleibt bis der Text da ist,
der Text dann geht und das Logo erscheint?

.
Eigentlich wollte ich auch dass der Text genauso an der Stelle erscheint wie das Logo im Moment ist,
aber das hab ich bisher von den Abständen noch nicht gemacht. Ich wollte erstmal dass die Animation
richtig funktioniert.

Hier mal der Code:

PHP:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- <meta http-equiv="refresh" content="5; URL=home.html">-->
<title>..........</title>
<style type="text/css">
<!--
html, body {
Hier sind nur ein paar Zeilen für einen Hintergrund
andere Einstellungen.
}

......CSS..............

img {
margin-left:23%;
margin-top:3%;
-webkit-animation-name:imgblend;
-webkit-animation-duration:8s;
-webkit-animation-delay:5s;

-moz-animation-name:imgblend;
-moz-animation-duration:8s;
-moz-animation-delay:5s;

-o-animation-name:imgblend;
-o-animation-duration:8s;
-o-animation-delay:5s;

animation-name:imgblend;
animation-duration:8s;
animation-delay:5s;
}

@-webkit-keyframes imgblend {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes imgblend {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes imgblend {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes imgblend {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes imgblend {
from { opacity: 0; }
to { opacity: 1; }
}

p {
margin-left:35%;
padding:2%;
font-size:1em;
-webkit-animation-name:fadeIn;
-webkit-animation-duration:8s;

-moz-animation-name:fadeIn;
-moz-animation-duration:8s;

-o-animation-name:fadeIn;
-o-animation-duration:8s;

animation-name:fadeIn;
animation-duration:8s;
}

@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadeIn {
from { opacity: 0; }
to{ opacity: 1; }
}
@-o-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadeIn {
from { opacity: 0;}
to { opacity: 1; }
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

-->
</style>
</head>
<body>

.....bisschen HTML..............
<div>
<img src="bilder/logo.png" width="50%" alt="hier steht auch text">
<p> Herzlich Willkommen auf meiner Seite</p>
</div>
</body>
</html>

Was mir auch noch komisch vor kommt... :
Bei den @Keyframe Schnipseln die letzte geschlossene
geschweifte Klammer ist dunkelrot, die anderen sind in Dreamweaver rosa.
Das heisst ja eigentlich dass sie nicht richtig sitzt oder zu viel ist aber es funktioniert und wurde mir auch so angegeben dass ich sie so setzen muss.

Hier mal als Beispiel::

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}


Ich weiss das man die ganzen Animationseigenschaften auch zusammen fassen kann aber bis ich mir merken kann was was ist schreibe ich es ausführlicher.

ich hoffe mir kann jemand helfen und sag schon mal lieb danke

LG Christin
 
Zuletzt bearbeitet:

cebito

undefined

Logo erscheint sofort beim Laden der Seite... gleichzeitig fadet der Text ein.
Logo geht weg und fadet ein zur festgelegten Verzögerungszeit und bleibt
Indem du ihm die CSS-Eigenschaft opacity:0; auch noch mal zuweist. btw. musst dann auch noch beim Aufruf der Animation animation-fill-mode: forwards; einstellen, damit das Bild auch nach Ablauf der Animation noch sichtbar bleibt.
 

Spatzihasi

Angel Of Death

Danke das wars gewesen mit animation.fill-mode:forwards

ich bin da auch vorhin schon mal drüber gestolpert, allerdings hab ich
irgendwie gedacht, dass das nicht das Richtige ist :)

Danke dir :)
 

Spatzihasi

Angel Of Death

dankeschön die seite ist genial :)

Ich muss doch nochmal was fragen.
Kann das sein, dass Opera und Safari ein Problem mit Scale und Translate hat?

Seitdem läuft das Ganze im FF, Chrome und IE top nur in den beiden Browser nicht.
Im Opera wird es einfach nur eingeblendet.
Im Safari läuft die Schriftanimation mit Scale und Translate aber die Logo Scale Animation läuft nicht :(

PHP:
@charset "utf-8";
<!--
/* ***********Schrift zuweisen************** */

@font-face {
   font-family:"Empathy";
   src: local("Empathy"),
   url(../fonts/Empathy.otf)
   format("opentype");
}



html, body {
  
/* ***********HINTERGRUND FARBVERLAUF************** */

/* Old browsers */
background: #bcd1e7;
/* FF3.6+ */
background: -moz-linear-gradient(top,  #bcd1e7 0%, #ffffff 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bcd1e7), color-stop(100%,#ffffff));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top,  #bcd1e7 0%,#ffffff 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top,  #bcd1e7 0%,#ffffff 100%);
/* IE10+ */
background: -ms-linear-gradient(top,  #bcd1e7 0%,#ffffff 100%);
/* W3C */
background: linear-gradient(to bottom,  #bcd1e7 0%,#ffffff 100%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcd1e7', endColorstr='#ffffff',GradientType=0 );

background-repeat:no-repeat;
}

/* ***********Logo Animation************** */
img {
opacity:0;
margin-left:23%;
margin-top:3%;
-webkit-animation-name:imgblend;
-webkit-animation-duration:10;
-webkit-animation-delay:5s;
-webkit-animation-fill-mode: forwards;

-moz-animation-name:imgblend;
-moz-animation-duration:10s;
-moz-animation-delay:5s;
-moz-animation-fill-mode: forwards;

-o-animation-name:imgblend;
-o-animation-duration:10s;
-o-animation-delay:5s;
-o-animation-fill-mode: forwards;

animation-name:imgblend;
animation-duration:10s;
animation-delay:5s;
animation-fill-mode: forwards;
}

@-webkit-keyframes imgblend {
   from { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
         transform: scale3d(0.3, 0.3, 0.3);
       }
       to { opacity: 1; }
}
@-moz-keyframes imgblend {
   from { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
         transform: scale3d(0.3, 0.3, 0.3);
       }
       to { opacity: 1; }
}
@-o-keyframes imgblend {
   from { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
         transform: scale3d(0.3, 0.3, 0.3);
       }
       to { opacity: 1; }
}


@keyframes imgblend {
   from { opacity: 0;
   -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
       }
     to { opacity: 1; }
}


/* ***********Willkommenstext Animation************** */
p {
   font-family: "Empathy", Verdana, Geneva, sans-serif;
  
margin-left:21%;
padding:2%;
font-size:2em;
-webkit-animation-name:fadeIn;
-webkit-animation-duration:7s;
-webkit-animation-fill-mode: forwards;
-moz-animation-name:fadeIn;
-moz-animation-duration:7s;
-moz-animation-fill-mode: forwards;

-o-animation-name:fadeIn;
-o-animation-duration:7s;
-o-animation-fill-mode: forwards;

animation-name:fadeIn;
animation-duration:7s;
animation-fill-mode: forwards;

}

@-webkit-keyframes fadeIn {
   0% { opacity: 0;
   -webkit-transform: scale3d(0.3, 0.3, 0.3);
   transform: scale3d(0.3, 0.3, 0.3);
   }
  
   50% {opacity: 1;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
   }
   70% { opacity: 1;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
   }
   80% { opacity:0;
   -webkit-transform: translate3d(-500px, -500px, -1500px);
   transform:  translate3d(-500px, -500px, -1500px);
  
   }
   100% { opacity: 0;
     }
   }

@-o-keyframes fadeIn {
   0% { opacity: 0;
   -webkit-transform: scale3d(0.3, 0.3, 0.3);
   transform: scale3d(0.3, 0.3, 0.3);
   }
  
   50% {opacity: 1;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
   }
     70% { opacity: 1;
     -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
   }
   80% { opacity:0;
   -webkit-transform: translate3d(-500px, -500px, -1500px);
   transform:  translate3d(-500px, -500px, -1500px);
  
   }
   100% { opacity: 0;
     }
   }
@-moz-keyframes fadeIn {
   0% { opacity: 0;
   -webkit-transform: scale3d(0.3, 0.3, 0.3);
   transform: scale3d(0.3, 0.3, 0.3);
   }
  
   50% {opacity: 1;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
   }
   70% { opacity: 1;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
   }
   80% { opacity:0;
   -webkit-transform: translate3d(-500px, -500px, -1500px);
   transform:  translate3d(-500px, -500px, -1500px);
  
   }
   100% { opacity: 0;
     }
   }

@keyframes fadeIn {
   0% { opacity: 0;
   -webkit-transform: scale3d(0.3, 0.3, 0.3);
   transform: scale3d(0.3, 0.3, 0.3);
   }
  
   50% {opacity: 1;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
   }
   70% { opacity: 1;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
   }
   80% { opacity:0;
   -webkit-transform: translate3d(-500px, -500px, -1500px);
   transform:  translate3d(-500px, -500px, -1500px);
  
   }
   100% { opacity: 0;
     }
   }


-->

Kann mir da vielleicht nochmal jemand auf die Sprünge helfen?
Ich komm nicht drauf... Aber ich übe

Danke Euch :)
 

Myhar

Hat es drauf

Seitdem läuft das Ganze im FF, Chrome und IE top nur in den beiden Browser nicht.
Im Opera wird es einfach nur eingeblendet.
Im Safari läuft die Schriftanimation mit Scale und Translate aber die Logo Scale Animation läuft nicht :(

Das kann ich mir schwer vorstellen, Chrome und Opera verwenden die selbe rendering Engine. Was im einen Browser funktioniert muss also auch im anderen funktionieren und was im einen nicht funktioniert klappt auch im anderen nicht. Welche Versionen verwendest du denn?
Wie viele Benutzer mit Safari-Browser erwartest du denn auf deiner Seite?

ist das ein Problem?]
Auch wenn das jetzt böse klingt: Wenn man keine Ahnung hat, was (Fehler)meldungen von etwaigen Tools bedeuten dann sollte man diese Tools lieber erst nicht benutzen. Um deine Frage zu beantworten: Nein, wieso sollte es auch Probleme geben?
 

Spatzihasi

Angel Of Death

Code:
@charset "utf-8";
/* CSS Document */

/*SCHRIFTARTEN */

@font-face {
font-family:"Empathy";
src: local("Empathy"),
url('../fonts/Empathy.otf')
format("opentype");
}

/*Allgemeine Angaben alle Seiten */

body{
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
font-size:100%;
width: auto; /* Responsive hack */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing: border-box;
}

/* HEADERBEREICH */

header {
text-align:center;
}

header img{
max-width: 100%;
height:auto;
}

/* TOP NAVIGATIONSBEREICH */

nav {
    border-bottom:1px solid #5b5e61;
    border-top:1px solid #5b5e61;
font-family: "Empathy", Verdana, Geneva, sans-serif;
text-align:center;
min-width:25.875em;
font-size:1em;
list-style: none;
}

ul.nav  li {
margin-left:1.563em;
display:inline;
list-style: none;
}

ul.nav a {
color:#5b5e61;
text-decoration:none;
list-style: none;
}
  
ul.nav a:hover {
color:#aca9cd;
text-decoration:underline;
list-style: none;
}


/* BOTTOM Emailadresse NAVIGATIONSBEREICH */

a:link {
color:#5b5e61;
text-decoration:none;
list-style: none;
}
  
a:hover {
color:#7d86bd;
list-style: none;
}

/* LINKS WEBDESIGNBEREICH */

a {
color:#7d86bd;
text-decoration:none;
list-style: none;
}
  
a:hover {
color:#89b6ee;
list-style: none;
}

/* BOTTOM weitere Links NAVIGATIONSBEREICH */

ul.footernav li a {
color:#5b5e61;
text-decoration:none;
list-style: none;
}
  
ul.footernav li a:hover {
color:#7d86bd;
list-style: none;
}
      
/* Seitennavigiation Bereich Grafikdesign */

.seitennav {
    width:140px;
    font-size:95%;
    text-align:left;
border-left:1px dashed #3d468c;
    border-top:1px dashed #3d468c;
    border-bottom:1px dashed #3d468c;
line-height:3;
float:left;
margin-left:5em;
margin-right:5em;
margin-top:5em;
text-decoration:none;
font-family: "Empathy", Verdana, Geneva, sans-serif;
}
  
  
.seitennav a {
    margin-left:1em;
color:#5b5e61;
}
  
.seitennav a:hover{
        margin-left:1em;
        font-weight:bold;
font-size:105%;
color:#da9c94;
text-decoration:underline;
}

/* HAUPTCONTAINER alle Seiten */

#container {
text-align:center;
}


/* Ãœberschriften */

h1 {
    margin-top:1em;
font-family: "Empathy", Verdana, Geneva, sans-serif;
font-size:200%;
}

h1.uberschrift_home {
margin-top:1em;
font-size:200%;
color:#8f97c6;
}

h1.uberschrift_uebermich {
margin-top:1em;
font-size:200%;
color:#d6c0c2;
}

h1.uberschrift_webdesign {
margin-top:1em;
font-size:200%;
color:#b8a1c9;
}

h1.uberschrift_grafikdesign,
h1.uberschrift_logos,
h1.uberschrift_webgrafiken,
h1.uberschrift_visitenkarten,
h1.uberschrift_flyer,
h1.uberschrift_grusskarten {
margin-top:1em;
font-size:200%;
color:#a1bbc8;
}

h1.uberschrift_fotodesign {
margin-top:1em;
font-size:200%;
color:#dec4d0;
}

h1.uberschrift_leistungen {
margin-top:1em;
font-size:200%;
color:#d4c59f;
}

h1.uberschrift_kontakt {
margin-top:1em;
font-size:200%;
color:#c795bd;
}

h1.uberschrift_impressum {
margin-top:1em;
font-size:200%;
color:#f4a296;
}

h1.uberschrift_datenschutz {
margin-top:1em;
font-size:200%;
color:#8cafbb;
}

/* HAUPTBEREICH Inhalt Home */

main {
float:left;
font-family: "Empathy", Verdana, Geneva, sans-serif;
text-align:left;
font-size:0.886em;
margin-left:2em;
padding-bottom:3em;
}

.home, .uebermich, .webdesign, .datenschutz,
.kontakt, .impressum {
float:left;
color:#5b5e61;
font-family: "Empathy", Verdana, Geneva, sans-serif;
text-align:left;
font-size:0.886em;
margin-left:24em;
}

/* HAUPTBEREICH Inhalt Grafikdesign */

.grafikdesignm, .fotodesign, .leistungen {
float:left;
color:#5b5e61;
font-family: "Empathy", Verdana, Geneva, sans-serif;
text-align:left;
font-size:0.886em;
margin-left:3.355em;
}


/* FACEBOOK BUTTON */

.facebookbutton {
width: 28px;
height: 28px;
display:inline-block;
background:url(../bilder/fb_button/fb_btn2.png) no-repeat;
}

.facebookbutton:hover {
background-position: 0px -28px;
}

/* FACEBOOK Link Kontakt */

p.facebook a {
color:#5b5e61;
text-decoration:none;
list-style: none;
}
  
p.facebook a:hover {
color:#aca9cd;
list-style: none;
}

/* FOOTER */

footer {
background-image:url(../bilder/footer_hg/footer_bg.jpg);
background-repeat:repeat;
color:#5b5e61;
border-radius:0.938em;
border-top:1px solid #5b5e61;
font-family: "Empathy", Verdana, Geneva, sans-serif;
padding:0.39em;
font-size:1em;
width:auto;
height:100%;
text-align:center;
clear:both;
}

footer ul {
vertical-align: top;
margin-top:1em;
margin-bottom:1em;
text-decoration:none;
list-style: none;
}

.adresse {
margin-right:5em;
display:inline-block;
font-size:0.75em;
text-align:left;
text-decoration:none;
list-style: none;
}

.sprechzeiten {
margin-right:5em;
display:inline-block;
font-size:0.75em;
text-align:left;
text-decoration:none;
list-style: none;
}

.socialmedia {
margin-right:5em;
display:inline-block;
font-size:0.75em;
text-align:center;
text-decoration:none;
list-style: none;
}
          
.footernav{
margin-right:3em;
display:inline-block;
font-size:0.75em;
text-align:left;
text-decoration:none;
list-style: none;
}
      
.copy {
display:block;
font-size:0.75em;
padding-bottom:1.3em;
border-bottom:1px #5b5e61 solid;
}
  
/* WEBDESIGN SEITE BILDER */

.image {
-webkit-box-shadow: 0em 0em 1.250em -0.250em rgba(0,0,0,1);
-moz-box-shadow: 0em 0em 1.250em -0.250em rgba(0,0,0,1);
-o-box-shadow: 0em 0em 1.250em -0.250em rgba(0,0,0,1);
-ms-box-shadow: 0em 0em 1.250em -0.250em rgba(0,0,0,1);
box-shadow: 0em 0em 1.250em -0.250em rgba(0,0,0,1);
margin:0.938em;
}

.image:hover {
-webkit-transform: scale(3,3);
-moz-transform: scale(3,3);
-ms-transform: scale(3,3);
-o-transform: scale(3,3);
transform: scale(3,3);

}



/* TEXTFORMATIERUNGEN */

.text {
white-space:pre;
}

.text2 {
white-space:pre;
margin-bottom:5em;
}

.text3 {
white-space:pre;
margin-bottom:7em;
}


.container_form_karten {

margin-left:-3em;
}

.container_form {
padding-bottom:5em;
margin-left:-3em;
}

.container_form2 {
padding-bottom:6em;
margin-left:-3em;
margin-top:2em;
}


.pic_form {
float:left;
margin-left:2em;
margin-top:-2em;

}

.pic_form2 {
float:left;
margin-left:2em;
}

.pic_form3 {
float:left;
margin-left:2em;
margin-top:-0.5em;
white-space:pre;
}

.logo_container_form {
width:450px;
border-bottom:1px solid black;
padding-bottom:7em;
margin-left:-3em;
margin-top:-3em;
}


.logo_container_form2{
width:450px;
border-bottom:1px solid black;
padding-bottom:3.5em;
margin-left:-3em
}

.logo_container_form3 {
width:450px;
border-bottom:1px solid black;
padding-bottom:8.5em;
margin-left:-3em;
}
.logo_container_form4 {
border-bottom:1px solid black;
padding-bottom:7em;
margin-left:-3em;
margin-top:2em;
}


.vcard_container_form{
width:450px;
border-bottom:1px solid black;
padding-bottom:8em;
margin-left:-3em;
margin-top:-1em;
}

.vcard_pic_form {
float:left;
margin-left:2.2em;
}
.vcard_pic_text {
    
margin-left:12em;
margin-top:1em;
}

.webgrafik_container_form{
width:450px;
border-bottom:1px solid black;
padding-bottom:2em;
margin-left:-3em;
margin-top:-3em;

}

.webgrafik_container_form2{
width:450px;
border-bottom:1px solid black;
padding-bottom:3.5em;
margin-left:-3em
}

.webgrafik_container_form3 {
width:450px;
border-bottom:1px solid black;
padding-bottom:8.5em;
margin-left:-3em;
}

.webgrafik_pic_text {
float:left;
margin-left:2em;
}
Der Beitrag läuft ja immer noch.

MIttlerweile gibt es keine Fehler mehr im Validator

Aber ich habe die damals aktuelle Version von beiden Browsern genommen.
 

Myhar

Hat es drauf

Verzeih, da ist mir nicht sofort aufgefallen dass der Beitrag schon über 1 Jahr alt ist und unnötigerweise von @Isometric ausgegraben wurde... Damit sollte sich das Opera/Chrome Problem ja längst gelöst haben?

Wieso werden Fehlermeldungen nicht interpretiert sondern generell als "schlecht" angesehen?
 

Spatzihasi

Angel Of Death

ich weiss es nicht ich kann aberauch nicht jede fehlermeldung interpretieren. bzw jede warnung. die fehlermeldungen schon und erst recht bei html und css2. mit css3 tu ich mir noch recht schwer zum teil.

ist nich schlimm, wenn die threads auch nach langer zeit noch mal ausgegraben werden. so finden ggf andere auch hilfe :)
 

Myhar

Hat es drauf

ich weiss es nicht ich kann aberauch nicht jede fehlermeldung interpretieren. bzw jede warnung. die fehlermeldungen schon und erst recht bei html und css2. mit css3 tu ich mir noch recht schwer zum teil.
Inwiefern sind die Fehlermeldungen bei CSS3 denn schwerer zu verstehen als bei CSS2? Vielleicht kann ich helfen hier Licht ins Dunkel zu bringen?

ist nich schlimm, wenn die threads auch nach langer zeit noch mal ausgegraben werden. so finden ggf andere auch hilfe :)
Das stimmt, wenn es jemandem hilft ist es gut!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben