Coding Es hagelt Nüsse

Es hagelt Nüsse

am

Einmal bitte die XX.

Die vier Elemente

Erde

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 tak

Wasser

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 tak

Luft

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 tak

Feuer

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 tak

Code:

Einmal bitte die XX. :happy:

<style>@import url('https://fonts.googleapis.com/css2?family=Water+Brush&display=swap');
</style><style type="text/css">:root{--umrandungsfarbe:#aaa;--inhaltsfont:Verdana;--inhaltsfarbe:#eee;--ueberschriftenfont:'Water Brush';--ueberschriftenfarbe:#191970;--erde:#473d34;--wasser:#4587a1;--luft:#705872;--feuer:#b72108}.ueberschrift_elemente{font-family:var(--ueberschriftenfont);font-size:30px;width:400px;text-align:center;margin-bottom:-5px}#aussen{border:2px solid var(--umrandungsfarbe);align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:Center;width:400px;height:400px}.himmelsrichtung{background:var(--inhaltsfarbe);border:2px solid var(--umrandungsfarbe);font-family:var(--inhaltsfont);font-size:10px;width:196px;height:196px;text-align:justify}.ueberschrift{border-bottom:1px solid var(--ueberschriftenfarbe);font-family:var(--ueberschriftenfont);margin:15px 10px 5px 5px;line-height:.7em;font-size:25px;text-align:center}.himmelsrichtung_bild{float:left;text-align:right;height:75px;width:auto;margin:5px}.beschreibung{margin:10px 10px 5px 7px;line-height:12px}#luft{border-bottom:1px solid var(--luft);color:var(--luft)}#feuer{border-bottom:1px solid var(--feuer);color:var(--feuer)}#erde{border-bottom:1px solid var(--erde);color:var(--erde)}#wasser{border-bottom:1px solid var(--wasser);color:var(--wasser)}</style><style>
@import url('https://fonts.googleapis.com/css2?family=Water+Brush&display=swap');
</style><div class="ueberschrift_elemente">Die vier Elemente</div>
<div id="aussen"><div class="himmelsrichtung"><div class="ueberschrift" id="erde">Erde</div><img  class="himmelsrichtung_bild" id="erde" src="https://abload.de/img/erde8yjc1.jpg" /><div class="beschreibung">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 tak</div></div>
  <div class="himmelsrichtung"><div class="ueberschrift" id="wasser">Wasser</div><img class="himmelsrichtung_bild" id="wasser" src="https://abload.de/img/wasser0ijso.jpg" /><div class="beschreibung">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 tak</div></div>
  <div class="himmelsrichtung"><div class="ueberschrift" id="luft">Luft</div><img  class="himmelsrichtung_bild" id="luft" src="https://abload.de/img/luftcqjpm.jpg" /><div class="beschreibung">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 tak</div></div>
  <div class="himmelsrichtung"><div class="ueberschrift" id="feuer">Feuer</div><img class="himmelsrichtung_bild" id="feuer" src="https://abload.de/img/feuer6ujis.jpg" /><div class="beschreibung">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 tak</div></div>
</div>

24.06.2022, 22:21: Hugo hat diesen Beitrag moderiert

Rubine sind verrabt

19. Juli - 23:59

Es hagelt Nüsse

am

Herr der Nüsse, reiche mir bitte die XXX.

Edit: So, da ist es. Weil @Sollbruchstelle gesagt hat, ich soll mich wie Elsa gehen lassen.

Let it go

wagemutig

neugierig

freiheitsliebend

beobachtend

misstrauisch

laut

Abneigungen

Rührei

Spiegelei

Omelette

Eierlikör

Senfeier

Eiersalat

Henry Hahn. 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="mp-nuss8_container">
  <div class="mp-nuss8_header">
<div class="mp-nuss8_dreieck"><img src="https://images.unsplash.com/photo-1580866177074-5c0b1b924d32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"></img></div>
  <div class="mp-nuss8_titel">Let it go</div>
  </div><div class="mp-nuss8_textbox">
    <div class="mp-nuss8_textbox_short">
    <div class="mp-nuss8_shortfacts">wagemutig</div>
<div class="mp-nuss8_dreieck_klein">
</div><div class="mp-nuss8_shortfacts">neugierig</div>
    <div class="mp-nuss8_dreieck_klein"></div>
<div class="mp-nuss8_shortfacts">freiheitsliebend</div>
    <div class="mp-nuss8_dreieck_klein"></div>
    <div class="mp-nuss8_shortfacts">beobachtend</div>
    <div class="mp-nuss8_dreieck_klein"></div>    
<div class="mp-nuss8_shortfacts">misstrauisch</div>
    <div class="mp-nuss8_dreieck_klein"></div>
<div class="mp-nuss8_shortfacts">laut</div>
    <div class="mp-nuss8_dreieck_klein"></div>
      </div>
    <div class="mp-nuss8_textbox_breit">
      <div class="mp-nuss8_textbox_breit-links">
        <div class="mp-nuss8_textbox_links-oben"></div>
        <div class="mp-nuss8_textbox_links-unten">Abneigungen
          <div class="mp-nuss8_donts">Rührei</div>
           <div class="mp-nuss8_donts">Spiegelei</div>
           <div class="mp-nuss8_donts">Omelette</div>
           <div class="mp-nuss8_donts">Eierlikör</div>
          <div class="mp-nuss8_donts">Senfeier</div>
          <div class="mp-nuss8_donts">Eiersalat</div>
        </div>
      </div>
      <div class="mp-nuss8_textbox_breit-rechts">Henry Hahn. 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>
    </div>
    </div>
  </div>
<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=Cabin+Sketch&family=Roboto&display=swap" rel="stylesheet">

:root {
  --mp-nuss8_col1: #878D8A; /*mintgrau*/
  --mp-nuss8_col2: #2B312D; /*graugrün*/
  --mp-nuss8_col3: #56553E; /*khaki*/
  --mp-nuss8_col4: #DFDCDE; /*gips*/
  --mp-nuss8_col5: #543C34; /*braun*/
}

.mp-nuss8_container {
  width: 600px;
  height: 650px;
  margin: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--mp-nuss8_col4);
}

.mp-nuss8_header {
  background-image: url('https://images.unsplash.com/photo-1580866177074-5c0b1b924d32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
  /*ackground-size: 600px;*/
  background-position: right bottom;
  width: 600px;
  height: 150px;
  display: flex;
  flex-direction: row;
}

.mp-nuss8_dreieck {
  width: 300px;
  height: 450px;
  overflow:hidden;  
}

.mp-nuss8_dreieck:before {
    content:"";
    display:block;
    width: 100%;
    height: 100%;
    background-image: url('https://images.unsplash.com/photo-1580866177074-5c0b1b924d32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
    background-repeat: no-repeat;
    background-position: -400px -100px;
    transform: rotate(45deg);
    transform-origin:0 0;
    -ms-transform: rotate(45deg);
    -ms-transform-origin:0 0;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin:0 0;
}

.mp-nuss8_titel {
  color: var(--mp-nuss8_col4);
  font-family: 'Cabin Sketch', cursive;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 60px;
  padding: 60px 20px 0 300px;
  position: absolute;
  
}

.mp-nuss8_textbox {
  width: 600px;
  height: 500px;
  background: var(--mp-nuss8_col2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
/* border: 2px solid;*/
}

.mp-nuss8_textbox_short {
  width: 390px;
  height: 90px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 5px;
  padding: 20px 10px 10px 30px;
  border-color: #fff;
}

.mp-nuss8_shortfacts {
  color: var(--mp-nuss8_col4);
  font-family: 'Roboto';
  font-size: 16px;
  font-variant: small-caps;
  text-transform: capitalize;
}

.mp-nuss8_dreieck_klein {
  width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid var(--mp-nuss8_col4);
    border-bottom: 5px solid transparent;
}

.mp-nuss8_textbox_breit {
  width: 600px;
  height: 405px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  color: var(--mp-nuss8_col4);
  font-family: 'Roboto';
  font-size: 14px;
}

.mp-nuss8_textbox_breit-links {
  width: 210px;
  height: 400px;
  display: flex;
  flex-direction: column;
  }

.mp-nuss8_textbox_links-oben {
  width: 210px;
  height: 180px;  
}

.mp-nuss8_textbox_links-unten {
  width: 210px;
  height: 220px;
  font-family: 'Cabin Sketch', cursive;
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: 10px;
}

.mp-nuss8_donts {
  font-family: 'Roboto';
  font-size: 14px;
  text-transform: capitalize;
}

.mp-nuss8_textbox_breit-rechts {
  width: 395px;
  height: 400px;
  line-height: 160%;
  text-align: justify;
  box-sizing: border-box;
  padding: 0 20px 20px 10px;
}

26.06.2022, 11:13: Hugo hat diesen Beitrag moderiert

Rubine wurden verteilt

19. Juli - 23:59

Es hagelt Nüsse

am

Einmal die Nr. XX, bitte!

Eine Überschrift

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.

Code:

<div class="dyspat_box">

  <div class="dyspat_bildbox"><img src="https://abload.de/img/epic15xkey.png"></div>
  <div class="dyspat_textbox">
    <div class="dyspat_textschrift">Eine Überschrift</div>

    <p>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.</p>
  </div>
</div>

<style>@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap");:root{--dyspat-bg:url("https://www.toptal.com/designers/subtlepatterns/uploads/vintage-wallpaper.png");--dyspat-col1:#e7d3e2;--dyspat-col2:#d3e2e7;--dyspat-col3:#71a0b1;--dyspat_font1:"Satisfy",cursive;--dyspat_font2:"Lato",sans-serif}.dyspat_box{height:800px;width:500px;background:var(--dyspat-bg);margin:auto;border-color:var(--dyspat-col3);border-style:solid;border-width:5px}.dyspat_bildbox{padding:20px;text-align:center}.dyspat_textbox{padding:40px}.dyspat_textbox p{padding:40px;text-align:justify;color:var(--dyspat-col1);font-family:var(--dyspat_font2);font-size:20px;border-color:var(--dyspat-col3);border-style:solid;border-width:1px}.dyspat_textschrift{text-align:center;color:var(--dyspat-col3);font-weight:bold;font-family:var(--dyspat_font1);font-size:50px}.dyspat_bildbox img{width:200px;border-radius:50%;border:dotted;padding:10px;background:var(--dyspat-col2)}</style>

26.06.2022, 11:13: Hugo hat diesen Beitrag moderiert

Rubine wurden verteilt

19. Juli - 23:59

Es hagelt Nüsse

am

Ich hätte bitte gerne die Nuss Nr. XX.

Endzeit.

Forum

Infos

Gesuche

Listen

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.

Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.

spielbare Wesen: Dinosaurier, Mammuts, Neandertaler

L3V3S3 / FSK 18

Szenentrennung

Code:

<style>@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');</style><style type="text/css">:root{--beschreibungsfarbe:#adc7c0;--boxenfarbe:#22312d;--hintergrundfarbe:#709d90;--hoverfarbe:#b0c9c2;--hoverfontfarbe:#000;--linkfarbe:#fff;--umrandungsfarbe:#415f56;--inhaltsfont:'Trebuchet MS',sans-serif}#aussen_dino{background:var(--hintergrundfarbe);border:5px solid var(--umrandungsfarbe);width:500px}.ueberschrift_dino{color:#fff;font-family:Creepster;font-size:50px;margin-top:-60px;margin-bottom:10px;text-align:center}.navigation_dino{display:flex;flex-direction:row;justify-element:space-between;margin:0 5px 0 5px}.navigation_element{color:#fff;background:var(--boxenfarbe);border:2px solid var(--umrandungsfarbe);font-family:var(--inhaltsfont);padding:5px;margin:5px;text-align:center;text-transform:uppercase;width:120px}.navigation_element:hover{color:var(--hoverfontfarbe);background:var(--hoverfarbe)}.navi{color:var(--linkfarbe);text-decoration:none}.navi:hover{color:var(--hoverfontfarbe)}.beschreibungstext{background:var(--beschreibungsfarbe);font-family:var(--inhaltsfont);font-size:15px;line-height:23px;margin:10px;padding:5px 10px;text-align:justify}.bild_links{float:left;height:auto;padding:5px 10px 0 5px;width:116px}.bild_rechts{float:right;height:auto;padding:5px 5px 0 10px;width:116px}.shortfacts_dino{align-items:center;display:flex;flex-direction:column;justify-element:center}.shortfacts_element_dino{border:2px solid var(--umrandungsfarbe);background:var(--boxenfarbe);color:var(--linkfarbe);font-family:var(--inhaltsfont);margin:0 0 5px 0;padding:2px;text-align:center;width:250px}</style><div id="aussen_dino">
  <div class="kopf_dino"><img src="https://abload.de/img/header21tj7x.jpg" /></div>
  <div class="koerper_dino">
    <div class="ueberschrift_dino">Endzeit.</div>
    <div class="navigation_dino">
      <div class="navigation_element">Forum</div>
      <div class="navigation_element">Infos</div>
        <div class="navigation_element">Gesuche</div>
        <div class="navigation_element">Listen</div>
    </div>
    <div class="beschreibungstext"> <img  class="bild_links" src="https://abload.de/img/triceratops3pkjo.png" /><p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. </p>
    <img class="bild_rechts" src="https://abload.de/img/brontosaurusdpksx.png" /><p>Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. </p></div>
    <div class="shortfacts_dino">
      <div class="shortfacts_element_dino">spielbare Wesen: Dinosaurier, Mammuts, Neandertaler</div>
      <div class="shortfacts_element_dino">L3V3S3 / FSK 18</div>
      <div class="shortfacts_element_dino">Szenentrennung</div>
    </div>
    </div>
</div>

26.06.2022, 11:14: Hugo hat diesen Beitrag moderiert

Rubine sind verrabt

19. Juli - 23:59

Es hagelt Nüsse

am

Ich hätte gern noch eine XXX

[Bild: https://abload.de/img/2022-06-261tajo3.png]
CodePen

Schon wieder KAtegorie: So war das bestimmt nicht gedacht
Credits: Colors and Mainconcept by @White_Rabbit for PiCoG.

Html

Code:

<div class="wrapper">
  <div class="content2">
<div class="feye_gesuchelist_container">
   <div class="feye_gesuchelist_head">
     <div class="header_2-emblem"><i class="fa-solid fa-swords"></i></div>
     <div class="feye_gesuchelist_fname">A Bounty on your head</div><div class="feye_gesuchelist_links">
     <a href="">Reservierungen</a>
     <a href="">Avatarliste</a>
     <a href="">Regeln</a>
     <a href="">Chronologie</a>
     <a href="">Gesuchsvorlage</a>
</div>
    <div class="feye_gesuchelist_mod">
      Foren gelesen, bla
    </div>  </div>
   <div class="feye_gesuchelist_body">
     <!-----einzelner Thread------>
     <div class="feye_gesuchelist_thread">
       <div class="feye_gesuchelist_image"><img src="https://abload.de/img/wanted_curseucjjg.png"></div>
       <div class="feye_gesuchelist_content">
<div class="feye_gesuchelist_threadname">Jaskier - Barde, Wohltäter, und ... so weiter</div>
         <div class="feye_gesuchelist_subtitle">hier steht was</div>
         <div class="feye_gesuchelist_line"></div>
         <div class="feye_gesuchelist_infos">
           <div class="feye_gesuchelist_info">canon</div>
           <div class="feye_gesuchelist_info">1</div>
           <div class="feye_gesuchelist_info"><i class="fa-solid fa-mars"></i></div>
           <div class="feye_gesuchelist_info">Barde, Reisender, Geldeintreiber</div>
           <div class="feye_gesuchelist_info">Joey Batey</div>
         </div>
       </div>
     </div>
     <!-----End einzelner Thread------>
          <!-----einzelner Thread------>
     <div class="feye_gesuchelist_thread">
       <div class="feye_gesuchelist_image"><img src="https://abload.de/img/wanted_sorceresschjxt.png"></div>
       <div class="feye_gesuchelist_content">
<div class="feye_gesuchelist_threadname">Loge der Zauberinnen</div>
         <div class="feye_gesuchelist_subtitle">es könnte sinnvoller sein</div>
         <div class="feye_gesuchelist_line"></div>
         <div class="feye_gesuchelist_infos">
           <div class="feye_gesuchelist_info">teilweise canon</div>
           <div class="feye_gesuchelist_info">0/7</div>
           <div class="feye_gesuchelist_info"><i class="fa-solid fa-venus-double"></i></div>
           <div class="feye_gesuchelist_info">Zauberinnen </div>
           <div class="feye_gesuchelist_info">
Sophie Skelton, Therica Wilson-Read,
Natalie Dormer, Marie Avgeropoulos,
Charlotte Hope </div>
         </div>
       </div>
     </div>
     <!-----End einzelner Thread------>
          <!-----einzelner Thread------>
     <div class="feye_gesuchelist_thread">
       <div class="feye_gesuchelist_image"><img src="https://abload.de/img/wanted_skulltdj6f.png"></div>
       <div class="feye_gesuchelist_content">
<div class="feye_gesuchelist_threadname">Die Scoia'tael</div>
         <div class="feye_gesuchelist_subtitle">Eichhörnchen auf dem Kriegspfad</div>
         <div class="feye_gesuchelist_line"></div>
         <div class="feye_gesuchelist_infos">
           <div class="feye_gesuchelist_info">teilweise canon</div>
           <div class="feye_gesuchelist_info">1/7</div>
           <div class="feye_gesuchelist_info"><i class="fa-solid fa-venus-double"></i></div>
           <div class="feye_gesuchelist_info">Guerillakämpfer, Anderlinge</div>
           <div class="feye_gesuchelist_info">Jamie Campell-Bower, Alexader Dreymon, Ben Barnes, Jared Padalecki</div>
         </div>
       </div>
     </div>
     <!-----End einzelner Thread------>
          <!-----einzelner Thread------>
     <div class="feye_gesuchelist_thread">
       <div class="feye_gesuchelist_image"><img src="https://abload.de/img/wanted_monsternojvy.png"></div>
       <div class="feye_gesuchelist_content">
<div class="feye_gesuchelist_threadname">Geralts Hanse</div>
         <div class="feye_gesuchelist_subtitle">Feye ist super Unkreative</div>
         <div class="feye_gesuchelist_line"></div>
         <div class="feye_gesuchelist_infos">
           <div class="feye_gesuchelist_info">teilweise canon</div>
           <div class="feye_gesuchelist_info">1/4</div>
           <div class="feye_gesuchelist_info"><i class="fa-solid fa-venus-double"></i></div>
           <div class="feye_gesuchelist_info">Abenteurergruppe, Action</div>
           <div class="feye_gesuchelist_info">Henry Cavill, Ivana Baquero, Eamon Farren, Giorgia Whigham</div>
         </div>
       </div>
     </div>
     <!-----End einzelner Thread------>
          <!-----einzelner Thread------>
     <div class="feye_gesuchelist_thread">
       <div class="feye_gesuchelist_image"><img src="https://abload.de/img/wanted_adventure8uk5x.png"></div>
       <div class="feye_gesuchelist_content">
<div class="feye_gesuchelist_threadname">Have a Secret can you keep it</div>
         <div class="feye_gesuchelist_subtitle">redanischer Geheimdienst</div>
         <div class="feye_gesuchelist_line"></div>
         <div class="feye_gesuchelist_infos">
           <div class="feye_gesuchelist_info">teilweise canon</div>
           <div class="feye_gesuchelist_info">0/4</div>
           <div class="feye_gesuchelist_info"><i class="fa-solid fa-venus-double"></i></div>
           <div class="feye_gesuchelist_info">Guerillakämpfer</div>
           <div class="feye_gesuchelist_info">Jamie Campell-Bower, Alexader Dreymon, Ben Barnes, Jared Padalecki</div>
         </div>
       </div>
     </div>
     <!-----End einzelner Thread------>
   </div>
</div>  
  </div>
</div>

css

Code:

.feye_gesuchelist_container{
  background:var(--col4);
  max-width:100%;
  line-height:1.4;
  font-size:14px;
  font-family:var(--text-f);
  margin: 40px 0px; /*entfernen für template; nur codepen*/
  text-align:left;
}

.feye_gesuchelist_head {
  background:url('https://yrden.quodvide.de/images_silver/background.png');
  padding:20px;
  text-align:center;
}

.feye_gesuchelist_fname {
  color:var(--text);
  font-size:42px;
  font-family:var(--title);
  margin-top:-30px;
  margin-bottom:20px;
}

.feye_gesuchelist_links a:link, .feye_gesuchelist_links a:visited {
  background:var(--col11);
  padding:12px;
  margin: 0px 5px;
  font-size:15px;
}

.feye_gesuchelist_links a:hover {
  color:var(--text);
  background:var(--highlight);
  border-radius:4px;
}

.feye_gesuchelist_mod {
  margin-top: 30px;
  color:var(--highlight);
}

.feye_gesuchelist_body {
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.feye_gesuchelist_image img {
  height:260px;
}

.feye_gesuchelist_thread {
  display:flex;
background:var(--col3);
  padding:10px;
  flex: 0 0 47%;
}

.feye_gesuchelist_content {
  background:var(--col2);
  padding:10px;
  height:260px;
  box-sizing:border-box;
}

.feye_gesuchelist_threadname {
  color:var(--highlight);
  font-size:20px;
}

.feye_gesuchelist_subtitle {
  font-size:15px;
}

.feye_gesuchelist_line {
  height:5px;
  background:var(--highlight);
width:100%;
  margin: 10px 0px;
}

.feye_gesuchelist_infos {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.feye_gesuchelist_info {
  background:var(--col3);
  padding:5px;
  display:flex;
  align-items:center;
  
}

.feye_gesuchelist_info:nth-child(-n+3) {
  flex: 1 1 29%;
  justify-content:center;
}

.feye_gesuchelist_info:nth-child(4), .feye_gesuchelist_info:nth-child(5){
  flex:1 1 100%;
  padding: 5px 20px;
}

26.06.2022, 11:15: Hugo hat diesen Beitrag moderiert

Rubine sind in deinem Invetar aufgetaucht

19. Juli - 23:59

Es hagelt Nüsse

am

Bäumchen rüttel dich und schüttel dich, wirf Nüsslein Nr. [AUTSCH!] über mich!

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

CodePen

HTML:

Code:

<div class="dysfoot_container">
  <div class="dysfoot_reiheoben">

    <div class="dysfoot_normalebox">
      <div class="dysfoot_kubus"></div>
      <div class="dysfoot_heading">Legende</div>
      <div class="dysfoot_legende">
        <div class="dysfoot_team">Admins</div>
        <div class="dysfoot_fantast">Fantasten</div>
        <div class="dysfoot_kanin">Kaninchen</div>
        <div class="dysfoot_astro">Astronauten</div>
      </div>
    </div>

    <div class="dysfoot_normalebox">
      <div class="dysfoot_kubus"></div>
      <div class="dysfoot_heading">Wer ist online</div>
      <div class="dysfoot_on">
        <div class="dysfoot_team">Günther</div>, Marlene, SpaceDuck3000
      </div>
    </div>

    <div class="dysfoot_normalebox">
      <div class="dysfoot_kubus"></div>
      <div class="dysfoot_heading">Wer war online</div>
      <div class="dysfoot_off">
        <div class="dysfoot_team">Günther</div>, Marlene, SpaceDuck3000, Das Pferd, Waschbär
      </div>
    </div>

  </div>

  <div class="dysfoot_reiheunten">
    <div class="dysfoot_normalebox2">
      <div class="dysfoot_kubus"></div>
      <div class="dysfoot_heading">Statistiken</div>
      <div class="dysfoot_innenstat">
        <div class="dysfoot_innenstat1"> 1234 Threads</br>
          1234 Beiträge</div>
        <div class="dysfoot_innenstat2">Gegründet: 2022</br>
          25 Nutzer</br>
          Neustes Mitglied: Nussknacker</div>
      </div>
    </div>

    <div class="dysfoot_normalebox2">
      <div class="dysfoot_kubus"></div>
      <div class="dysfoot_heading">Zitate</div>
      <div class="dysfoot_zitat">"Ein Königreich für eine Badewanne im All!"</div>
      <div class="dysfoot_zitat_name">SpaceDuck 3000</div>

    </div>
  </div>
</div>

CSS:

Code:

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

:root {
  --dysfoot-font1: "Montserrat", sans-serif;
  --dysfoot-font2: "Bebas Neue", cursive;
  --dysfoot-col1: #b5b2b9;
  --dysfoot-col2: #f4cccc;
}

.dysfoot_container {
  width: 1100px;
  margin: auto;
  background-color: #0b0017;
  background-image: url("https://www.transparenttextures.com/patterns/black-felt.png");
  padding: 20px;
  color: var(--dysfoot-col1);
  font-family: var(--dysfoot-font1);
}

.dysfoot_reiheoben {
  padding: 20px;
  display: flex;
  justify-content: space-around;
}

.dysfoot_reiheunten {
  padding: 20px;
  display: flex;
}

.dysfoot_heading {
  font-family: var(--dysfoot-font2);
  font-size: 30px;
  text-align: center;
}

.dysfoot_kubus {
  width: 30px;
  height: 30px;
  background: var(--dysfoot-col1);
  transform: rotate(45deg);
}

.dysfoot_normalebox {
  border: 1px solid;
  border-color: var(--dysfoot-col1);
  padding: 20px;
  width: 33%;
}

.dysfoot_normalebox2 {
  border: 1px solid;
  border-color: var(--dysfoot-col1);
  padding: 20px;
  width: 50%;
}

.dysfoot_zitat {
  font-style: italic;
  text-align: justify;
}

.dysfoot_zitat_name {
  text-align: right;
}

.dysfoot_on {
  text-align: justify;
  display: flex;
  flex-direction: row;
}

.dysfoot_off {
  align-content: center;
  text-align: justify;
  display: flex;
  flex-direction: row;
}

.dysfoot_team {
  color: var(--dysfoot-col2);
  font-weight: bold;
}

.dysfoot_fantast {
  font-style: italic;
}

.dysfoot_kanin {
  text-decoration: underline;
  text-decoration-style: dotted;
}

.dysfoot_legende {
  text-align: center;
}

.dysfoot_innenstat {
  display: flex;
  flex-direction: row;
}

.dysfoot_innenstat1 {
  width: 260px;
}

.dysfoot_innenstat2 {
  width: 260px;
  text-align: right;
}

26.06.2022, 11:16: Hugo hat diesen Beitrag moderiert

Es hagelt Rubine

19. Juli - 23:59

Es hagelt Nüsse

am

Die letzte Nuss ist mir auf den Kopf gefallen. Jetzt sehe ich alles [XY?]-fach.

black as midnight on a moonless night

damn fine coffee

Code:

<div class="dystp_gesamt">
  <div class="dystp_text1">black as midnight on a moonless night</div>
  <div class="dystp-bilder">
    <div class="dystp_box1"> </div>

    <div class="dystp_box2"></div>

    <div class="dystp_box3"></div>
  </div>

  <div class="dystp_text2">damn fine coffee</div>

</div>

<style>@import url("https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap");@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200&display=swap");:root{--dystp-col1:#fff;--dystp-col2:#8a373a;--dystp-font1:"Homemade Apple",cursive;--dystp-font2:"Cairo",sans-serif;--dystp-col3:#f4cccc}.dystp_gesamt{margin:auto;color:var(--dystp-col1);font-family:var(--dystp-font2);width:600px}.dystp-bilder{display:flex;border:2px solid;border-color:var(--dystp-col2)}.dystp_box1{width:250px;height:200px;background:url("https://knightsofwalpurgis.de/images/Extras/SG/EpicTPSig.png");font-weight:bold;text-align:right;font-size:10px}.dystp_box2{width:250px;height:200px;background:url("https://knightsofwalpurgis.de/images/Extras/SG/EpicTPSig2.png")}.dystp_box3{width:250px;height:200px;background:url("https://knightsofwalpurgis.de/images/Extras/SG/EpicTPSig3.png")}.dystp_text1{font-family:var(--dystp-font2);color:var(--dystp-col2);font-weight:bold;font-size:30px;text-align:center}.dystp_text2{font-family:var(--dystp-font1);color:var(--dystp-col2);font-weight:bold;font-size:35px;text-align:right;padding-right:30px;margin:-55px 0 0 0;text-shadow:2px 1px var(--dystp-col3)}</style>

26.06.2022, 20:06: Hugo hat diesen Beitrag moderiert

Es regnet Rubine

19. Juli - 23:59

Es hagelt Nüsse

am

Ich hätte gerne die XXX bitte.

Flatterhafte Demut,

schlag deine krummen Flügel um mich

Gesucht wird ...

Avatar: Ei

Alter: 1 Stunde

Name: frei wählbar

Ich hoffe, es verirrt sich nicht,
so verwirrt wie es ist
auf dieser endlosen Suche
nach ein bisschen mehr Licht.
Was auch immer das dann ist.

Fakt 1

Fakt 2

Fakt 3

Fakt 4

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb.

204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

Es sucht ...

Avatar: Huhn

Alter: 2 Jahre

Name: Hannelore

Immer ist da irgendetwas
das mich einlullt und mich lähmt
und ist es nicht die Hitze,
dann meine Dickköpfigkeit.

Fakt 1

Fakt 2

Fakt 3

Fakt 4

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb.

204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

Über das Board ...

FSK18

GTA-RPG

Ortstrennung

Unergründliches Leben,
was wissen wir denn schon von dir?
Wir wurden geboren und wir sterben
und danach weht der Wind wie immer.

Fakt 1

Fakt 2

Fakt 3

Fakt 4

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.

Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb.

204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

Code:

<style>@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Average+Sans&family=Scope+One&family=Yesteryear&display=swap');</style><style type="text/css">:root{--ni_gesuch_boxenfarbe:#86c8c6;--ni_gesuch_inhaltsfarbe:#fff;--ni_gesuch_ueberschriftenfont:Yesteryear,Verdana;--ni_gesuch_zitatfont:'Amatic SC','Scope One',serif;--ni_gesuch_umrandungsfarbe:#3b7f7d}#ni_gesuch_aussen{background-image:url('https://abload.de/img/restaurantjej4n.jpg');font-family:'Average Sans',sans-serif;padding:5px;width:500px}.ni_gesuch_ueberschrift{font-family:var(--ni_gesuch_ueberschriftenfont);font-size:40px;margin:40px 0px 10px 0px;text-align:center}.ni_gesuch_ueberschrift2{font-family:var(--ni_gesuch_zitatfont);font-size:22px;margin:-5px 0px 0px -20px;text-align:center}.ni_gesuch_zwischenueberschrift{border-bottom:1px solid var(--umrandungsfarbe);font-family:var(--ni_gesuch_ueberschriftenfont);font-size:25px;margin:10px 10px -5px 10px;text-align:center}.ni_gesuch_shortfacts{align-items:center;display:flex;flex-direction:row;justify-content:space-between;text-align:center;margin:0 -5px 15px -5px}.ni_gesuch_shortfacts_element{background:var(--ni_gesuch_boxenfarbe);border:1px solid var(--ni_gesuch_umrandungsfarbe);margin:5px 5px 0 5px;padding:5px;width:200px}.ni_gesuch_zitat{font-family:'Scope One',serif;font-style:italic;font-size:12px;line-height:16px;margin:10px;text-align:center}.ni_gesuch_administratives_rechts{float:left}.ni_gesuch_administratives_links{float:right}.ni_gesuch_administratives_element{background:var(--ni_gesuch_boxenfarbe);border:1px solid var(--ni_gesuch_umrandungsfarbe);padding:5px;text-align:center}#ni_gesuch_links{margin:0 0 5px 10px}#ni_gesuch_rechts{margin:5px 10px 0 0}.ni_gesuch_bild_rechts{border:2px solid var(--ni_gesuch_umrandungsfarbe)}.ni_gesuch_bild_links{border:2px solid var(--ni_gesuch_umrandungsfarbe);margin:5px 0 0 10px}.ni_gesuch_text{background:var(--ni_gesuch_inhaltsfarbe);margin:10px 10px 10px 10px;padding:5px 10px 5px 10px;text-align:justify}</style>
<div id="ni_gesuch_aussen">
  <div class="ni_gesuch_ueberschrift">Flatterhafte Demut, </div>
  <div class="ni_gesuch_ueberschrift2">schlag deine krummen Flügel um mich</div>
  <div class="ni_gesuch_text">
<div class="ni_gesuch_zwischenueberschrift">Gesucht wird ...</div>
    <div class="ni_gesuch_shortfacts">
      <div class="ni_gesuch_shortfacts_element"><strong>Avatar:</strong> Ei</div>
      <div class="ni_gesuch_shortfacts_element"><strong>Alter:</strong> 1 Stunde</div>
      <div class="ni_gesuch_shortfacts_element"><strong>Name: </strong>frei wählbar</div>
  </div>
    <div class="ni_gesuch_zitat">Ich hoffe, es verirrt sich nicht, <br />so verwirrt wie es ist<br />
auf dieser endlosen Suche<br />
nach ein bisschen mehr Licht.<br />
    Was auch immer das dann ist.</div>
  <div class="ni_gesuch_administratives_rechts">
    <img class="ni_gesuch_bild_rechts" id="ni_gesuch_rechts" src="https://abload.de/img/eikzjvs.jpg" />
    <div class="ni_gesuch_administratives_element" id="ni_gesuch_rechts">Fakt 1</div>
    <div class="ni_gesuch_administratives_element" id="ni_gesuch_rechts">Fakt 2</div>
    <div class="ni_gesuch_administratives_element" id="ni_gesuch_rechts">Fakt 3</div>
    <div class="ni_gesuch_administratives_element" id="ni_gesuch_rechts">Fakt 4</div>
    </div>
  <p>Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.</p>
<p>Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb.</p>
<p>204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks</p></div>
  <div class="ni_gesuch_text">
    <div class="ni_gesuch_zwischenueberschrift">Es sucht ...</div>
    <div class="ni_gesuch_shortfacts">
      <div class="ni_gesuch_shortfacts_element"><strong>Avatar:</strong> Huhn</div>
      <div class="ni_gesuch_shortfacts_element"><strong>Alter:</strong> 2 Jahre</div>
      <div class="ni_gesuch_shortfacts_element"><strong>Name: </strong>Hannelore</div>
  </div><div class="ni_gesuch_zitat">Immer ist da irgendetwas <br />
das mich einlullt und mich lähmt<br />
und ist es nicht die Hitze, <br />
dann meine Dickköpfigkeit.</div>
    <div class="ni_gesuch_administratives_links">
      <img class="ni_gesuch_bild_links" id="ni_gesuch_links" src="https://abload.de/img/huhnj7je4.jpg" />
    <div class="ni_gesuch_administratives_element" id="ni_gesuch_links">Fakt 1</div>
        <div class="ni_gesuch_administratives_element" id="ni_gesuch_links">Fakt 2</div>
        <div class="ni_gesuch_administratives_element" id="ni_gesuch_links">Fakt 3</div>
        <div class="ni_gesuch_administratives_element" id="ni_gesuch_links">Fakt 4</div>
  </div>
  <p>Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.</p>
<p>Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb.</p>
<p>204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks</p></div>
    <div class="ni_gesuch_text">
<div class="ni_gesuch_zwischenueberschrift">Über das Board ...</div>
    <div class="ni_gesuch_shortfacts">
      <div class="ni_gesuch_shortfacts_element">FSK18</div>
      <div class="ni_gesuch_shortfacts_element">GTA-RPG</div>
      <div class="ni_gesuch_shortfacts_element">Ortstrennung</div>
  </div>
    <div class="ni_gesuch_zitat">Unergründliches Leben, <br />
was wissen wir denn schon von dir?<br />
Wir wurden geboren und wir sterben<br />
und danach weht der Wind wie immer.</div>
  <div class="ni_gesuch_administratives_rechts">
    <img class="ni_gesuch_bild_rechts" id="ni_gesuch_rechts" src="https://abload.de/img/huhnundeicdjga.jpg" />
    <div class="ni_gesuch_administratives_element" id="ni_gesuch_rechts">Fakt 1</div>
    <div class="ni_gesuch_administratives_element" id="ni_gesuch_rechts">Fakt 2</div>
    <div class="ni_gesuch_administratives_element" id="ni_gesuch_rechts">Fakt 3</div>
    <div class="ni_gesuch_administratives_element" id="ni_gesuch_rechts">Fakt 4</div>
    </div>
  <p>Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog.</p>
<p>Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb.</p>
<p>204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks</p></div>
</div>

26.06.2022, 20:08: Hugo hat diesen Beitrag moderiert

Alle Rubine sind schon da

19. Juli - 23:59

Es hagelt Nüsse

am

Und eine Nummer XX für mich

[Bild: https://i.imgur.com/0jjXpci.png]
CodePen

Wir igggnorieren einfach dass das da oben nicht nur RealLife Foren sind, aber ich brauchte lange Forentitel
Diesmal eines fürs SaNo.

Html

Code:

<div class="wrapper">

<div class="partner_threadbit">
<div class="partner_forentitle">Real Life</div>
  <div class="partner_modbit"></div>
  <div class="partner_threadlist_body">
    <div class="partner_thread">
      <div class="partner_fname">Lie together Die together</div>
      <div class="partner_sub">Uni RL Board | L3S3V3 | Gossip</div>
      <div class="partner_infos">
        <div class="partner_info">2020</div>
        <div class="partner_info">Szenentrennung</div>
        <div class="partner_info">MPL: Keine</div>
        <div class="partner_info">Greylist</div>
        <div class="partner_info">besonderheiten</div>
      </div>
      <a class="partner_link">Zum Forum</a>
    </div>

  </div>
  </div>
</div>

Code:

.partner_threadbit {
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.4;
}

.partner_forentitle {
  font-family:var(--heading);
  font-size:30px;
  color:var(--link);
  margin: 10px 0px;
  display:flex;
  align-items:center;
  text-transform:uppercase;
}
  

.partner_forentitle:before, .partner_forentitle:after {
  content: "";
border-top: 15px solid var(--box);
margin-bottom: 0px;
flex: 1 0 20px;
opacity: 0.7;
}

.partner_forentitle:before {
  margin-right: 10px;
}

.partner_forentitle:after{
  margin-left: 10px;
}

.partner_threadlist_body {
padding:10px;
display:flex;
  flex-wrap:wrap;
  gap:10px;
  
}

.partner_thread {
  border:5px solid var(--box);
  padding:10px;
  flex:1 1 46%;
}

.partner_thread:nth-last-child(1){
  flex:0 1 46%;
}

.partner_fname {
  font-family:var(--heading);
  color:var(--link);
  font-size:20px;
  text-align:center;
}

.partner_sub {
  font-size:15px;
  text-align:center;
}

.partner_infos {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  margin:20px 0px;
}

.partner_info {
  flex: 1 0 45%;
  background:var(--boxshade);
  font-family:var(--text);
  font-size:15px;
  text-align:center;
  padding:5px;
}

.partner_link{
  background:var(--link);
  display:flex;
  padding:5px;
  color:var(--bg);
  justify-content:center;
  align-items:center;
}

.partner_link:hover {
  background:var(--box);
  color:var(--link);
  cursor:pointer;
}

28.06.2022, 21:33: Hugo hat diesen Beitrag moderiert

Rubine wurden verrabt

19. Juli - 23:59

Es hagelt Nüsse

am

Natürlich riskiere ich den Jojo-Effekt! Passend dazu knacke ich die XX.

19. Juli - 23:59