Coding Es hagelt Nüsse

Es hagelt Nüsse

am

Bin immer noch nicht satt! Einmal die XX, bitte.

Vier Jahreszeiten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Code:

<div class="dysvier_container">
  <div class="dysvier_ueber">Vier Jahreszeiten</div>
  <div class="dysvier_boxen">
  <div class="dysvier_boxlinks">
    <div><img src="https://abload.de/img/frhlingosj77.png"></div>
    <div class="dysvier_linkstext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
  </div>
  
  <div class="dysvier_boxrechts">
    <div class="dysvier_linkstext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
    <div><img src="https://abload.de/img/sommer85j6q.png"></div>
  </div>
  
  <div class="dysvier_boxlinks">
    <div><img src="https://abload.de/img/herbsttgkh2.png"></div>
    <div class="dysvier_linkstext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
  </div>
  
  <div class="dysvier_boxrechts">
    <div class="dysvier_linkstext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div><img src="https://abload.de/img/winter17kmf.png"></div>
  </div>
</div></div>

<style>@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');:root{--dysvier_font1:"Satisfy",cursive;--dysvier_font2:'Roboto',sans-serif}.dysvier_container{margin:auto;padding:20px;width:500px;border:solid;font-family:var(--dysvier_font2);line-height:25px;background:#fff8e5}.dysvier_boxen{display:flex;flex-direction:column}.dysvier_boxlinks{display:flex;flex-direction:row}.dysvier_boxrechts{display:flex;flex-direction:row}.dysvier_ueber{font-family:var(--dysvier_font1);text-align:center;font-size:50px;padding:40px}.dysvier_boxlinks img{width:450px;border-radius:50%;border:dotted}.dysvier_boxrechts img{width:450px;border-radius:50%;border:dotted}.dysvier_linkstext{padding:20px;text-align:justify}</style>

27.06.2022, 14:52: Hugo hat diesen Beitrag moderiert

Achtung: Es hagelt Rubine. Kopf einziehen.

19. Juli - 23:59

Es hagelt Nüsse

am

Ich will mich auch mal dran versuchen und beginne mit der Nr. XX

We all have
a dinosaur
deep within us

Roarsome

Index
Rules
Infos
Faces

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd

Shortfacts

- Spielort: Jurassic Park
- Spielzeit: 90er Jahre
- Genre: Real Life mit Dinosauriern
- Die Dinosaurier sind ausgebrochen und treiben ihr Unwesen auf einer Insel

Jurassic World

L3S3V3

Szenentrennung

10.07.2022, 12:43: Hugo hat diesen Beitrag moderiert

Rubine sind verteilt

19. Juli - 23:59

Es hagelt Nüsse

am

Muss leider auch weiter der Nuss-Sucht frönen und bitte um die XX.

Optisch sicher noch arg ausbaufähig, aber ich hatte großen Spaß dran.

Ich mag Unfug

Bitte nicht das schlafende Ei wecken!

Code:

<style>@import url('https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&family=Staatliches&display=swap');.ni_eieiei_ueberschrift{font-family:'Rubik Moonrocks';font-size:40px;margin-bottom:5px;text-align:center;width:500px}.ni_eieiei_aussen{align-items:center;background:#fff;border:5px solid red;display:flex;flex-direction:row;justify-content:center;width:500px}.ni_eieiei_aussen:hover{animation:shake .5s;animation-iteration-count:infinite}.ni_warnung{color:red;font-family:'Staatliches';font-size:40px;line-height:40px;width:200px;text-align:center}.ni_eieiei{background-image:url("https://abload.de/img/daumenkino_eia6k6m.gif");height:300px;width:200px}.ni_eieiei:hover{background-image:url('https://abload.de/img/daumenkino_ei_kompletlrkuk.gif')}@keyframes shake{0{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}100%{transform:translate(1px,-2px) rotate(-1deg)}}</style><div class="ni_eieiei_ueberschrift">Ich mag Unfug</div>
<div class="ni_eieiei_aussen">
  <div class="ni_warnung">Bitte nicht das schlafende Ei wecken!</div>
<div class="ni_eieiei"></div>
</div>

27.06.2022, 14:52: Hugo hat diesen Beitrag moderiert

Die Rubine tauchen in deinem Inventar auf

19. Juli - 23:59

Es hagelt Nüsse

am

Bitte die Nuss Nr. XxX.

Uns're eloquenten Jahre sind vorbei

Der Suchende

In Gedanken bin ich immer im Bikini,
in Gedanken häng' ich immer 'n bisschen quer.
Ab jetzt wird alles besser,
ab jetzt wird alles gut.

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.

Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.

So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder

Der Gesuchte

Trockne deine Tränen,
sonst laufen sie davon,
denn du wolltest Rock'n'Roll, du Popo,
hast du jetzt davon!

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.

Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.

So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder

Das Kleingedruckte

Es ist so vieles einfach derbe okay,
wir sind die panamoralische Liebe
und das hier ist unsere Idee.

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.

Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.

So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder

Code:

<style>@import url('https://fonts.googleapis.com/css2?family=Farsan&family=Kranky&family=Source+Serif+Pro&family=Titan+One&display=swap');:root{--farbe1:#50808e;--farbe2:#fecdaa;--farbe3:#fafac6;--farbe4:#ddd;--farbe5:#73628a;--ni_drei_ueberschriftenfont:'Kranky';--ni_drei_inhaltsfont:'Source Serif Pro';--ni_drei_zitatfont:'Farsan'}.ni_drei_aussen{background-image:url('https://abload.de/img/darkdenimxdjls.jpg');margin-bottom:10px;width:500px}.ni_drei_ueberschrift1{color:var(--farbe1);font-family:var(--ni_drei_ueberschriftenfont);font-size:40px;line-height:40px;margin:20px 0 10px 0;text-align:center}.ni_drei_ueberschrift{color:var(--farbe2);font-family:var(--ni_drei_ueberschriftenfont);font-size:30px;text-align:center}.ni_drei_text{background:var(--farbe4);border:1px solid var(--farbe3);margin:0 10px 20px 10px;padding:5px}.ni_drei_zitat{color:var(--farbe5);font-family:var(--ni_drei_zitatfont);font-size:16px;line-height:16px;margin:10px;text-align:center}.ni_drei_links{border:5px solid var(--farbe3);float:left;margin:5px 10px 5px 5px}.ni_drei_rechts{border:5px solid var(--farbe3);float:right;margin:5px 5px 5px 10px}.ni_drei_fliess{font-family:var(--ni_drei_inhaltsfont);font-size:16px;line-height:24px;margin-top:-5px;text-align:justify}</style>
<div class="ni_drei_aussen">
  <div class="ni_drei_ueberschrift1">Uns're eloquenten Jahre sind vorbei</div>
<div class="ni_drei_ueberschrift">Der Suchende</div>
  <div class="ni_drei_text">
<div class="ni_drei_zitat">In Gedanken bin ich immer im Bikini, <br />
in Gedanken häng' ich immer 'n bisschen quer. <br />
Ab jetzt wird alles besser, <br />
  ab jetzt wird alles gut.</div>
<img src="https://abload.de/img/schafcikqo.jpg" class="ni_drei_links" /><div class="ni_drei_fliess"><p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.</p>
<p>Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.</p>
<p>So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder</p></div>
  </div>
<div class="ni_drei_ueberschrift">Der Gesuchte</div>
<div class="ni_drei_text">
  <div class="ni_drei_zitat">Trockne deine Tränen, <br />
  sonst laufen sie davon, <br />
  denn du wolltest Rock'n'Roll, du Popo, <br />
  hast du jetzt davon!</div>
  <img src="https://abload.de/img/tomateszk1a.jpg" class="ni_drei_rechts" /><div class="ni_drei_fliess"><p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.</p>
<p>Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.</p>
<p>So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder</p></div>
  </div>

<div class="ni_drei_ueberschrift">Das Kleingedruckte</div>
<div class="ni_drei_text">
  <div class="ni_drei_zitat">Es ist so vieles einfach derbe okay, <br />
  wir sind die panamoralische Liebe <br />
  und das hier ist unsere Idee.</div>  
  <img src="https://abload.de/img/huehnercwjd7.jpg" class="ni_drei_links" /><div class="ni_drei_fliess"><p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.</p>
<p>Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.</p>
<p>So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder</p></div>
  </div>
</div>

27.06.2022, 22:56: Hugo hat diesen Beitrag moderiert

Rubine, Rubine, Rubine

19. Juli - 23:59

Es hagelt Nüsse

am

Ich würd noch eine nehmen. Die XX Bitte

19. Juli - 23:59

Es hagelt Nüsse

am

Bitte um Nr. XX, oh du weiser Nussbaum!

[Bild: https://knightsofwalpurgis.de/images/Ext...ostbit.PNG]

Codepen

HTML

Code:

<div class="dyspost_container">
  <div class="dyspost_user">
    <div class="dyspost_user-name">
      <div class="dyspost_user-name-name">Günther</div>
      <div class="dyspost_user-name-untertitel">Geisterbahns Liebling</div>
    </div>
    <div class="dyspost_user-avatar">
      <img src="https://abload.de/img/epicgeist44jja.png">
    </div>
    <div class="dyspost_user-infos">
      <div class="dyspost_user-infos-charakter">
        <div class="dyspost_user-infos-charakter-links">
          <div>Poltergeist</div>
          <div>234 Jahre</div>
          <div><i class="fa-solid fa-briefcase"></i> Star</div>
          <div><i class="fa-solid fa-graduation-cap"></i> Geisteruni</div>
          <div><i class="fa-solid fa-baby-carriage"></i> Geisterstadt</div>
        </div>
        <div class="dyspost_user-infos-charakter-rechts">
          <div><i class="fa-solid fa-house"></i> Oldenburg</div>
          <div><i class="fa-solid fa-heart"></i> Single</div>
          <div><i class="fa-solid fa-dog"></i> Höllenhund</div>
          <div><i class="fa-solid fa-thumbs-up"></i> Sonnebrillen</div>
          <div><i class="fa-solid fa-thumbs-down"></i> Ketchup</div>
        </div>
      </div>

      <div class="dyspost_user-kurztext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

      <div class="dyspost_user-infos-user">
        <div class="dyspost_user-infos-user-name"><i class="fa-solid fa-user"></i> Else</div>

        <div class="dyspost_user-infos-user-pronomen"><i class="fa-solid fa-person-half-dress"></i> sie/ihr</div>
      </div>

    </div>
    <div class="dyspost_user-awards">
      <div class="dyspost_user-awards-titel">Awards</div>
      <div class="dyspost_user-awards-awards">
        <i class="fa-solid fa-ghost fa-2x"></i>
        <i class="fa-solid fa-glasses fa-2x"></i>
        <i class="fa-solid fa-glass-water fa-2x"></i>
        <i class="fa-solid fa-cake-candles fa-2x"></i>
        <i class="fa-solid fa-cookie-bite fa-2x"></i>
      </div>
    </div>

  </div>
  <div class="dyspost_beitrag">
    <div class="dyspost_beitrag-datum">01.06.2022 14:00Uhr
    </div>
    <div class="dyspost_beitrag-nummer"><a href="">#123</a>
      <hr>
    </div>
    <div class="dyspost_beitrag-beitrag">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br>

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br><br>

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <hr>
    <div class="dyspost_beitrag-edit"><i class="fa-solid fa-quote-right"></i> <i class="fa-solid fa-flag"></i> <i class="fa-solid fa-pen-to-square"></i> <i class="fa-solid fa-trash-can"></i></div>

  </div>

</div>

CSS

Code:

:root {
  --dyspost_font-normal1: "Verdana", sans-serif;
  --dyspost_font-normal2: "Georgia", serif;

  --dyspost_col-normal1: #dee8fa;
  --dyspost_col-normal2: #2c2e32;
}

.dyspost_container {
  background: url("https://knightsofwalpurgis.de/images/chimaera/chimaerabg.png");
  font-family: var(--dyspost_font-normal1);
  width: 1200px;
  color: var(--dyspost_col-normal2);
  margin: auto;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.dyspost_user {
  background: var(--dyspost_col-normal1);
  padding: 20px;
  width: 250px;
}

.dyspost_user-name {
  text-align: center;
  padding: 10px;
}

.dyspost_user-name-name {
  line-height: 35px;
  font-weight: bold;
  font-variant: small-caps;
  font-size: 30px;
  font-family: var(--dyspost_font-normal2);
}

.dyspost_user-name-untertitel {
  font-size: 12px;
}

.dyspost_user-avatar {
  text-align: center;
}

.dyspost_user-avatar img {
  height: 250px;
  width: 200px;
  border-radius: 10%;
}

.dyspost_user-infos {
  padding: 20px;
}

.dyspost_user-infos-charakter {
  font-size: 10px;
  line-height: 25px;
  display: flex;
  flex-direction: row;
}

.dyspost_user-infos-charakter-links {
  text-align: left;
  width: 90px;
  padding: 5px;
}

.dyspost_user-infos-charakter-rechts {
  text-align: right;
  padding: 5px;
  width: 90px;
}

.dyspost_user-kurztext {
  text-align: justify;
  font-size: 12px;
  padding: 10px;
  background: var(--dyspost_col-normal2);
  border-radius: 10%;
  color: var(--dyspost_col-normal1);
}

.dyspost_user-infos-user {
  padding: 20px;
  text-align: center;
}

.dyspost_user-infos-user-name {
  padding: 10px;
  font-weight: bold;
  font-variant: small-caps;
  font-size: 20px;
}

.dyspost_user-infos-user-pronomen {
  font-variant: small-caps;
  font-size: 20px;
}

.dyspost_user-awards {
  padding: 10px;
  text-align: center;
}

.dyspost_user-awards-titel {
  font-variant: small-caps;
  font-size: 20px;
}

.dyspost_user-awards-awards {
}

.dyspost_beitrag {
  background: var(--dyspost_col-normal1);
  padding: 20px;
  width: 850px;
}

.dyspost_beitrag-datum {
  font-size: 10px;
  padding-left: 20px;
}

.dyspost_beitrag-nummer {
  text-align: right;
  font-size: 10px;
  padding-right: 20px;
}

.dyspost_beitrag-nummer a {
  text-decoration: none;
  color: var(--dyspost_col-normal2);
}

.dyspost_beitrag-nummer a:hover {
  font-weight: bold;
}

.dyspost_beitrag-beitrag {
  padding: 25px;
  text-align: justify;
  font-size: 14px;
  line-height: 25px;
}

.dyspost_beitrag-edit {
  padding-right: 20px;
  text-align: right;
}

27.06.2022, 22:57: Hugo hat diesen Beitrag moderiert

Rubine wurden verrabt

19. Juli - 23:59

Es hagelt Nüsse

am

Nuss Nummer XX, die darf es sein,
drum gibt es hier nen Reim, so rein!

[Bild: https://knightsofwalpurgis.de/images/Ext...hreads.PNG]

CodePen

HTML

Code:

<div class="dysthread_container">

  <div class="dysthread_threadbox">

    <div class="dysthread_threadbox_einzel">
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-heart fa-2x"></i></div>
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-venus fa-2x"></i></div>
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-image-portrait fa-2x"></i> Julia Roberts</div>

      <div class"dysthread_threadbox_topic">
        <div class="dysthread_threadbox_topic-titel">Pretty Woman</div>
        <div class="dysthread_threadbox_topic-untertitel">Walking down the street</div>
        <div class="dysthread_threadbox_topic-datum">01.06.2022</div>

      </div>
      <div class="dysthread_threadbox_suchend">Max Mustermann</div>
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-magnifying-glass fa-2x"></i></div>

    </div>
    <hr>

    <div class="dysthread_threadbox_einzel">
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-user-group fa-2x"></i></div>
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-mars fa-2x"></i></div>
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-image-portrait fa-2x"></i> John Travolta</div>

      <div class"dysthread_threadbox_topic">
        <div class="dysthread_threadbox_topic-titel">Greased Lightnin'</div>
        <div class="dysthread_threadbox_topic-untertitel">Go Greased Lightning</div>
        <div class="dysthread_threadbox_topic-datum">12.05.2022</div>

      </div>
      <div class="dysthread_threadbox_suchend">Max Mustermann</div>
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-check fa-2x"></i></div>

    </div>
    <hr>

    <div class="dysthread_threadbox_einzel">
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-briefcase fa-2x"></i></div>
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-mars-and-venus fa-2x"></i></div>
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-image-portrait fa-2x"></i> Schöner Avatar</div>

      <div class"dysthread_threadbox_topic">
        <div class="dysthread_threadbox_topic-titel">Kreativer Titel</div>
        <div class="dysthread_threadbox_topic-untertitel">Kreativer Untertitel</div>
        <div class="dysthread_threadbox_topic-datum">01.06.2022</div>

      </div>
      <div class="dysthread_threadbox_suchend">Lieschen Müller</div>
      <div class="dysthread_threadbox_iconfeld"><i class="fa-solid fa-magnifying-glass fa-2x"></i></div>

    </div>

  </div>

</div>

CSS:

Code:

:root {
  --dysthread_font-normal1: "Verdana", sans-serif;
  --dysthread_font-normal2: "Georgia", serif;
  --dysthread_col-normal1: #dee8fa;
  --dysthread_col-normal2: #2c2e32;
}

.dysthread_container {
  margin: auto;
  width: 800px;
  height: 300px;
  background: url("https://knightsofwalpurgis.de/images/chimaera/chimaerabg.png");
  font-family: var(--dysthread_font-normal1);
  color: var(--dysthread_col-normal2);
  font-size: 14px;
}

.dysthread_threadbox {
  margin: auto;
  padding: 20px;
  width: 700px;
  height: 90px;
}

.dysthread_threadbox_einzel {
  padding: 10px;
  background: var(--dysthread_col-normal1);
  display: flex;
  justify-content: space-between;
}

.dysthread_threadbox_iconfeld {
  padding: 10px;
}
.dysthread_threadbox_topic {
  padding: 10px;
  text-align: left;
}

.dysthread_threadbox_topic-titel {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 18px;
  padding-left: 5px;
}

.dysthread_threadbox_topic-untertitel {
  padding-left: 5px;
  font-style: italic;
  font-size: 12px;
}

.dysthread_threadbox_topic-datum {
  padding-left: 5px;
  font-size: 10px;
  text-align: right;
}

.dysthread_threadbox_suchend {
  padding: 10px;
}

28.06.2022, 21:36: Hugo hat diesen Beitrag moderiert

Klapp die Ohren ein. Sonst treffen dich die Rubine.

19. Juli - 23:59

Es hagelt Nüsse

am

Für mich bitte einmal die XX.

[Bild: https://abload.de/img/headeriljz6.png]
Originalgröße Screenshot| Livevorschau Codepen

Code:

<style>
@import url('https://fonts.googleapis.com/css2?family=Water+Brush&display=swap');:root{--ni_header_hintergrundfarbe:#1c3c58;--ni_header_navifarbe:#3189d6;--ni_header_spiegelfarbe:#a6b6c5}.ni_header{color:#fff;background:var(--ni_header_hintergrundfarbe);display:flex;flex-direction:column;font-family:Georgia,serif;padding:10px;margin:5px;width:1000px}.ni_header_ueberschrift{font-size:50px;font-family:'Water Brush';margin:30px 0 0 20px;text-align:center}.ni_header_navi{background:var(--ni_header_navifarbe);display:flex;flex-direction:row;font-size:50px;justify-content:center;width:1000px}.ni_header_navi_element{min-width:100px}.ni_header_koerper{color:#000;display:flex;flex-direction:row}.ni_header_spiegel{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;margin:5px 10px 10px 10px;width:300px}.ni_header_spiegel_wrapper{background:var(--ni_header_spiegelfarbe);height:475px}.ni_header_spiegel_element{background:#fff;margin:5px;padding:5px;min-width:200px}#ni_header_spiegel_charaktername{background:0;color:#fff;font-size:25px;text-align:Center;margin:10px 5px 0 5px}#ni_header_spiegel_bild{background:0;padding:0;margin-bottom:-4px;width:190px}.ni_header_spiegel_avatar{border:5px solid var(--ni_header_navifarbe);width:180px;height:auto}.ni_header_foruminfos{font-size:16px;margin:5px;max-height:400px;width:400px}.ni_header_foruminfos_text{background:var(--ni_header_spiegelfarbe);line-height:24px;overflow:auto;height:465px;padding:5px;text-align:justify}.ni_header_gesuche{width:300px}.ni_header_gesuche_wrapper{max-height:485px;overflow:auto}.ni_header_gesuche_ueberschrift{color:#fff;font-size:30px;font-family:'Water Brush';text-align:center}.ni_header_gesuche_element{background:var(--ni_header_spiegelfarbe);margin:5px;padding:5px}.ni_header_gesuche_element_titel{font-weight:bold}.ni_header_gesuche_element_infos{font-size:12px;font-style:italic}</style>
<div class="ni_header">
   <div class="ni_header_ueberschrift"><i class="fa-solid fa-fish"></i> <i class="fa-solid fa-otter"></i> Meerumrauscht <i class="fa-solid fa-ship"></i> <i class="fa-solid fa-anchor"></i>
  </div>
  <div class="ni_header_navi">
    <div class="ni_header_navi_element"><i class="fa-solid fa-signs-post"></i></div>
    <div class="ni_header_navi_element"><i class="fa-solid fa-people-group"></i></div>
    <div class="ni_header_navi_element"><i class="fa-solid fa-people-arrows-left-right"></i></div>
    <div class="ni_header_navi_element"><i class="fa-solid fa-magnifying-glass"></i></div>
    <div class="ni_header_navi_element"><i class="fa-solid fa-list"></i></div>
    <div class="ni_header_navi_element"> <i class="fa-brands fa-discord"></i></div>
  </div>
  <div class="ni_header_koerper">
    <div class="ni_header_spiegel">
      <div class="ni_header_gesuche_ueberschrift">Benutzerspiegel</div>
      <div class="ni_header_spiegel_wrapper"><div class="ni_header_spiegel_element" id="ni_header_spiegel_charaktername">Mirabella Mustermensch</div>
      <div class="ni_header_spiegel_element" id="ni_header_spiegel_bild"><img class="ni_header_spiegel_avatar" src="https://abload.de/img/schafcikqo.jpg" /></div>
        <div class="ni_header_spiegel_element">letzter Besuch: Heute, 11:11</div>
      <div class="ni_header_spiegel_element"><i class="fa-regular fa-address-card"></i>Benuter CP</div>
      <div class="ni_header_spiegel_element">Inplay Szenen (0/11 offen)</div>
      <div class="ni_header_spiegel_element">Neue Beiträge ansehen</div>
      <div class="ni_header_spiegel_element">ungelesene Beiträge ansehen</div>
      <div class="ni_header_spiegel_element"><i class="fa-regular fa-envelope"></i>Private Nachrichten</div>
      </div>
    </div>
  <div class="ni_header_foruminfos">
    <div class="ni_header_gesuche_ueberschrift">Über das Forum</div><div class="ni_header_foruminfos_text"><p>Pack den <i class="fa-solid fa-fish"></i> ein und deinen <i class="fa-solid fa-otter"></i>! Wir suchen uns ein <i class="fa-solid fa-ship"></i>, auf dem wir bis nach <i class="fa-solid fa-earth-oceania"></i> segeln und dort gehen wir vor <i class="fa-solid fa-anchor"></i>!</p>
    <p>Hoffentlich kannst du <i class="fa-solid fa-person-swimming"></i> und isst gerne <i class="fa-solid fa-shrimp"></i>!</p>
    <p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben.</p>
<p>Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem.</p>
  </div>
    </div>
    <div class="ni_header_gesuche">
      <div class="ni_header_gesuche_ueberschrift">Gesuche</div>
      <div class="ni_header_gesuche_wrapper">
      <div class="ni_header_gesuche_element"><div class="ni_header_gesuche_element_titel">Popo sucht Eimer</div>
        <div class="ni_header_gesuche_element_infos"><i class="fa-solid fa-cake-candles"></i> 2 Jahre | <i class="fa-solid fa-person-digging"></i> Bauarbeiter | <i class="fa-solid fa-image-portrait"></i> irgendein Eimer</div>
      </div>
      <div class="ni_header_gesuche_element"><div class="ni_header_gesuche_element_titel">Landwirt sucht Lebensabschnittsgefährtin</div>
        <div class="ni_header_gesuche_element_infos"><i class="fa-solid fa-cake-candles"></i> 35 Jahre | <i class="fa-solid fa-person-digging"></i> egal | <i class="fa-solid fa-image-portrait"></i> Sandra Bullock</div>
      </div>
      <div class="ni_header_gesuche_element"><div class="ni_header_gesuche_element_titel">Hier könnte Ihre Werbung stehen!</div>
        <div class="ni_header_gesuche_element_infos"><i class="fa-solid fa-cake-candles"></i> ? Jahre | <i class="fa-solid fa-person-digging"></i> Marketinggenie | <i class="fa-solid fa-image-portrait"></i> Hugh Jackman</div>
      </div>
      <div class="ni_header_gesuche_element"><div class="ni_header_gesuche_element_titel">Bitte weitergehen, hier gibt es nichts zu sehen!</div>
        <div class="ni_header_gesuche_element_infos"><i class="fa-solid fa-cake-candles"></i> 75 Jahre | <i class="fa-solid fa-person-digging"></i> Spion*in | <i class="fa-solid fa-image-portrait"></i> Sean Connery?</div>
      </div>
          <div class="ni_header_gesuche_element"><div class="ni_header_gesuche_element_titel">Bitte weitergehen, hier gibt es nichts zu sehen!</div>
        <div class="ni_header_gesuche_element_infos"><i class="fa-solid fa-cake-candles"></i> 40 Jahre | <i class="fa-solid fa-person-digging"></i> Spion*in | <i class="fa-solid fa-image-portrait"></i> Daniel Craig?</div>
      </div>
        <div class="ni_header_gesuche_element"><div class="ni_header_gesuche_element_titel">Bitte weitergehen, hier gibt es nichts zu sehen!</div>
        <div class="ni_header_gesuche_element_infos"><i class="fa-solid fa-cake-candles"></i> 65 Jahre | <i class="fa-solid fa-person-digging"></i> Spion*in | <i class="fa-solid fa-image-portrait"></i> Pierce Brosnan?</div>
    </div>
        <div class="ni_header_gesuche_element"><div class="ni_header_gesuche_element_titel">Bitte weitergehen, hier gibt es wirklich nichts zu sehen!</div>
        <div class="ni_header_gesuche_element_infos"><i class="fa-solid fa-cake-candles"></i> 45 Jahre | <i class="fa-solid fa-person-digging"></i> Spion*in | <i class="fa-solid fa-image-portrait"></i> Catherine Zeta-Jones?</div>
      </div>
        <div class="ni_header_gesuche_element"><div class="ni_header_gesuche_element_titel">Hein Blöd sucht Käpt'n Blaubär</div>
        <div class="ni_header_gesuche_element_infos"><i class="fa-solid fa-cake-candles"></i> 62 Jahre | <i class="fa-solid fa-person-digging"></i> Käpt'n und Opa | <i class="fa-solid fa-image-portrait"></i> Robin Williams?</div>
      </div>
  </div>
    </div>
</div>
</div>

10.07.2022, 12:40: Hugo hat diesen Beitrag moderiert

Kopf einziehen. Es hagelt Rubine

19. Juli - 23:59

Es hagelt Nüsse

am

Bitte die Nuss Nr. XXX für mich, danke!

19. Juli - 23:59

Es hagelt Nüsse

am

Und dann noch eine XXX bitte.

Hei Hei

I am a chicken godamit, what do you expect me to do

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis velit amet tempor amet eu congue sapien habitant scelerisque. Pharetra vestibulum lectus aliquet proin amet. Amet facilisis donec diam facilisi erat. Non vitae congue malesuada nibh sollicitudin viverra. Sed mi at venenatis, scelerisque sagittis. Et cursus proin sed in quam.
Vitae ornare iaculis vitae turpis lobortis neque. Venenatis egestas eget commodo accumsan auctor. Pellentesque egestas aliquam viverra montes, egestas blandit lorem urna. Eu et interdum vulputate vitae gravida. Imperdiet fringilla sagittis posuere turpis arcu sapien. Ullamcorper porttitor nibh sit tempus tempus cursus. Nulla ac vehicula eget lacus. Nulla integer in nisl ac dolor. Sit elementum nec et felis lorem blandit turpis tincidunt. Libero commodo lobortis egestas eu. Aliquet arcu venenatis, condimentum scelerisque accumsan, aliquet semper. Mi ultricies egestas porttitor consectetur

Hei Hei dislikes

Idioten

Kanus

Moana

Disney

Motunui

Steine

Ocean

Regen

Maui

secret superhero

kräht pünktlich

Haustier

alt für ein Huhn

kann nicht schwimmen

könig von Motunui

If I could talk i would tell you thats stupid

Code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Life+Savers&family=Roboto&display=swap" rel="stylesheet">

<div class="fehn_huhn_container">
  <div class="fehn_huhn_header"></div>
  <div class="fehn_huhn_name">Hei Hei</div>
  <div class="fehn_huhn_quote">
    I am a chicken godamit, what do you expect me to do
  </div>
  <div class="fehn_huhn_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis velit amet tempor amet eu congue sapien habitant scelerisque. Pharetra vestibulum lectus aliquet proin amet. Amet facilisis donec diam facilisi erat. Non vitae congue malesuada nibh sollicitudin viverra. Sed mi at venenatis, scelerisque sagittis. Et cursus proin sed in quam.
Vitae ornare iaculis vitae turpis lobortis neque. Venenatis egestas eget commodo accumsan auctor. Pellentesque egestas aliquam viverra montes, egestas blandit lorem urna. Eu et interdum vulputate vitae gravida. Imperdiet fringilla sagittis posuere turpis arcu sapien. Ullamcorper porttitor nibh sit tempus tempus cursus. Nulla ac vehicula eget lacus. Nulla integer in nisl ac dolor. Sit elementum nec et felis lorem blandit turpis tincidunt. Libero commodo lobortis egestas eu. Aliquet arcu venenatis, condimentum scelerisque accumsan, aliquet semper. Mi ultricies egestas porttitor consectetur</div>
  <div class="fehn_huhn_factbox">
    <div class="fehn_huhn_upperfact">
      <div class="fehn_huhn_image"><img src="https://i.imgur.com/0Xwt7XV.png"></div>
      <div class="fehn_huhn_likes">
        <div class="fehn_huhn_likesub">Hei Hei dislikes</div>
        <div class="fehn_huhn_like">Idioten</div>
        <div class="fehn_huhn_like">Kanus</div>
        <div class="fehn_huhn_like">Moana</div>
        <div class="fehn_huhn_like">Disney</div>
        <div class="fehn_huhn_like">Motunui</div>
        <div class="fehn_huhn_like">Steine</div>
        <div class="fehn_huhn_like">Ocean</div>
        <div class="fehn_huhn_like">Regen</div>
        <div class="fehn_huhn_like">Maui</div>
      </div>
    </div>
    <div class="fehn_huhn_lowerfacts">
      <div class="fehn_huhn_fact">secret superhero</div>
      <div class="fehn_huhn_fact">kräht pünktlich</div>
      <div class="fehn_huhn_fact">Haustier</div>
      <div class="fehn_huhn_fact">alt für ein Huhn</div>
      <div class="fehn_huhn_fact">kann nicht schwimmen</div>
      <div class="fehn_huhn_fact">könig von Motunui</div>
    </div>
  </div>
    <div class="fehn_huhn_quote">
    If I could talk i would tell you thats stupid
  </div>
</div>
<style>:root{--fehn_main:#b68645;--fehn_back:#bbbebc;--fehn_text:#252626;--fehn_mark:#a64236;--fehn_ub:"Life Savers",cursive;--fehn_font:"Roboto",sans-serif}.fehn_huhn_container{color:var(--fehn_text);font-family:var(--fehn_font);line-height:1.4;font-size:15px;width:600px;margin:auto;background:var(--fehn_back)}.fehn_huhn_likesub,.fehn_huhn_quote{font-family:var(--fehn_ub);display:flex}.fehn_huhn_header{background:url("https://i.imgur.com/sZgfQji.png") center center/cover no-repeat;height:240px}.fehn_huhn_name,.fehn_huhn_quote::after,.fehn_huhn_quote::before,.fehn_huhn_text{background:var(--fehn_main)}.fehn_huhn_name{height:55px;display:flex;justify-content:center;align-items:center;font-weigth:bold;font-size:35px;color:var(--fehn_back);text-transform:uppercase}.fehn_huhn_quote{color:var(--fehn_mark);font-size:29px;text-align:center;align-items:center;padding:40px;font-weight:700}.fehn_huhn_quote::before{content:"";height:80px;width:100px;-webkit-clip-path:polygon(0 0,0% 100%,100% 50%);clip-path:polygon(0 0,0% 100%,100% 50%);margin-right:20px}.fehn_huhn_quote::after{content:"";height:80px;width:100px;-webkit-clip-path:polygon(100% 0,100% 100%,0 50%);clip-path:polygon(100% 0,100% 100%,0 50%);margin-left:20px}.fehn_huhn_text{padding:40px;text-align:justify}.fehn_huhn_factbox{background:var(--fehn_mark);padding:40px}.fehn_huhn_upperfact{display:flex;gap:10px;justify-content:space-between}.fehn_huhn_likes{display:flex;flex-wrap:wrap;gap:10px}.fehn_huhn_likesub{background:var(--fehn_back);flex:1 0 100%;height:45px;align-items:center;justify-content:center;font-size:25px}.fehn_huhn_like{flex:1 0 10%;background:var(--fehn_main);padding:5px;display:flex;justify-content:center;align-items:center}.fehn_huhn_lowerfacts{display:flex;flex-wrap:wrap;gap:10px;padding:20px 0;border-top:10px solid var(--fehn_back);border-bottom:10px solid var(--fehn_back);margin:30px 0}.fehn_huhn_fact{flex:1 0 45%;background:var(--fehn_back);display:flex;justify-content:center;align-items:center;padding:5px}.fehn_huhn_image img{width:150px}</style>

28.06.2022, 21:32: Hugo hat diesen Beitrag moderiert

Rubine sind auf dem Weg

19. Juli - 23:59