Coding Es hagelt Nüsse

Es hagelt Nüsse

am

Ich möchte mich noch an der XXX versuchen

19. Juli - 23:59

Es hagelt Nüsse

am

Gruß und Kuss
Ich nehm ne Nuss!
Die XX darfs sein,
das wär fein.

Geisterstunde

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="dysgrey_container">
  <div class="dysgrey_text">
    <div class="dysgrey_text_titel">Geisterstunde</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.</p>
  </div>

  <div class="dysgrey_bild"><img src="https://abload.de/img/nebeldak48.png"></div>

</div>

<style>@import url("https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap");@import url("https://fonts.googleapis.com/css2?family=Assistant&display=swap");:root{--dysgrey-font1:"Amatic SC",cursive;--dysgrey-font2:"Assistant",sans-serif;--dysgrey-color1:#b3c6c0}.dysgrey_container{margin:auto;font-family:var(--dysgrey-font2);width:550px;background:var(--dysgrey-color1);padding:20px;border-radius:5%;display:flex}.dysgrey_bild{width:300px;margin-top:20px}.dysgrey_bild img{border-radius:20%;width:200px;height:200px;padding:10px;filter:grayscale(100%)}.dysgrey_bild img:hover{filter:grayscale(0)}.dysgrey_text{text-align:justify;width:400px;padding:10px}.dysgrey_text_titel{font-family:var(--dysgrey-font1);font-size:50px;text-align:right;}</style>

28.06.2022, 22:32: Hugo hat diesen Beitrag moderiert

Deine Rubine sind unterwegs

19. Juli - 23:59

Es hagelt Nüsse

am

Ich sammel noch eine XX auf

Theodorus

von Haderstaedt

Avatarperson: Eggy Eggster Eggerson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra.

Bartender

7 Monate

Wollmilchsau

bester Kumpel

Barbesucher

2 Jahre

eierlegend

Schneewittchen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra.

Von Landeiern

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra.

Kleinstadt

L3S2V1

keine MLP

Whitelist

Zum Forum

HTML

Code:

<div class="fehn2_container">
  <div class="fehn2_banner"></div>
  <div>
    <div class="fehn2_picture"><div class="fehn2_prenom">Theodorus</div><img src="https://abload.de/img/eggwwjt2.png"></div>
    
    <div class="fehn2_surnom">von Haderstaedt</div>
    <div class="fehn2_avatar">Avatarperson: Eggy Eggster Eggerson</div>
    <div class="fehn2_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra.</div>
    <div class="fehn2_facts">
      <div class="fehn2_fact">Bartender</div>
      <div class="fehn2_fact">7 Monate</div>
      <div class="fehn2_fact">Wollmilchsau</div>
      <div class="fehn2_fact">bester Kumpel</div>
    </div>
  </div>
  <div class="fehn2_banner"></div>
  <div class="fehn2_suchender">
    <div>
      <div class="fehn2_suchpic"><img src="https://abload.de/img/huhn4fkql.png"></div>
      <div class="fehn2_fact">Barbesucher</div>
      <div class="fehn2_fact">2 Jahre</div>
      <div class="fehn2_fact">eierlegend</div>
      <div class="fehn2_fact">Schneewittchen</div>
    </div>
    <div class="fehn2_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra.</div>
  </div>
  <div class="fehn2_banner"></div>
  <div>
  <div class="fehn2_surnom">Von Landeiern</div>
  <div class="fehn2_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam dictum nulla nullam amet morbi eros id fringilla. Sed quis morbi dictum aliquam tristique quis euismod id. Libero placerat mollis tincidunt magna praesent commodo. Suspendisse non diam ut donec morbi massa pharetra.</div>
  <div class="fehn2_facts">
    <div class="fehn2_fact">Kleinstadt</div>
    <div class="fehn2_fact">L3S2V1</div>
    <div class="fehn2_fact">keine MLP</div>
    <div class="fehn2_fact">Whitelist</div>
  </div>
    <div class="fehn2_boardlink"><a href="">Zum Forum</a></div></div>
</div>

Css

Code:

<style>:root{--fehn2_bg:#D4D4C8;--fehn2_text:#232C27;--fehn2_mark:#60747B;--fehn2_link:#D9A774;--fehn2_ub:'Karla',sans-serif;--fehn2_font:'Merriweather',serif}.fehn2_container{width:600px;background:var(--fehn2_bg);margin:auto;font-family:var(--fehn2_font);font-size:14px;line-height:1.5;color:var(--fehn2_text);padding-bottom:2px}.fehn2_banner{background:url('https://abload.de/img/swirl_patternmakgi.png');height:50px;width:100%}.fehn2_banner:first-of-type{height:220px}.fehn2_picture{display:flex;justify-content:flex-end;align-items:flex-end}.fehn2_picture img{width:240px;margin-top:-150px;margin-right:40px}.fehn2_prenom,.fehn2_surnom{font-family:var(--fehn2_ub);font-size:40px}.fehn2_prenom{opacity:.9;font-weight:700;margin-bottom:-15px;margin-right:20px}.fehn2_surnom{color:var(--fehn2_mark);font-weight:800;display:flex;align-items:center}.fehn2_surnom:after,.fehn2_surnom:before{content:'';background:var(--fehn2_mark);height:20px;flex:1 1 20px;margin-top:7px}.fehn2_surnom:before{margin-left:40px;margin-right:10px}.fehn2_surnom:after{margin-left:10px;margin-right:40px}.fehn2_avatar{text-align:center;color:var(--fehn2_mark);margin-top:-10px}.fehn2_text{padding:40px;text-align:justify}.fehn2_facts{margin:0 40px 40px;display:flex;flex-wrap:wrap;gap:10px}.fehn2_facts .fehn2_fact{flex:1 0 40%}.fehn2_fact{background:var(--fehn2_link);padding:5px}.fehn2_suchender{display:flex;margin-left:40px;margin-bottom:40px}.fehn2_suchpic img{width:150px;margin-top:40px}.fehn2_suchender .fehn2_fact{margin-top:10px}.fehn2_boardlink a:link,.fehn2_boardlink a:visited{background:var(--fehn2_link);display:flex;margin:-30px 40px 40px;padding:10px;justify-content:center;text-decoration:none;font-size:20px;color:Var(--fehn2_mark);transition:.3s ease-in}.fehn2_boardlink a:hover{background:var(--fehn2_mark);color:Var(--text);transition:.3s ease-in;border-radius:5px}

10.07.2022, 12:42: Hugo hat diesen Beitrag moderiert

Rubine sind in deinem Inventar aufgetaucht.

19. Juli - 23:59

Es hagelt Nüsse

am

Noch eine Nuss,
dann ist hier Schluss
für mich.
Drum, lieber Hugo, sprich,
was sich hinter der XX versteckt
und Codingfreude weckt.

Mein Name ist Huhn

Hortensia Huhn

Fakten

• Freilandhaltung
• Bio
• Lieblingsfutter: Würmer
• verrücktes Huhn
• superweiche Federn
• träumt vom Leben als Eiermilliardärin

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.

Abneigungen

Fuchs

Eiersalat

Regen

Nachbarsesel

Geist Günther

Rowdies

Code:

<div class="dyshuhn_container">
  <div class="dyshuhn_header">
    <div class="dyshuhn_header-heading">Mein Name ist Huhn</div>
  </div>

  <div class="dyshuhn_dreieck"></div>

  <div class="dyshuhn_titel">
    <div class="dyshuhn_titel-bild"><img src="https://abload.de/img/epichuhnfotov9k7r.png"></div>
    <div>
      <div class="dyshuhn_titel-name">Hortensia Huhn</div>
      <div class="dyshuhn_fakten">
        <div class="dyshuhn_fakten-titel">Fakten</div>
        <div class="dyshuhn_fakten-liste">
          <ul>
            <li>Freilandhaltung</li>
            <li>Bio</li>
            <li>Lieblingsfutter: Würmer</li>
            <li>verrücktes Huhn</li>
            <li>superweiche Federn</li>
            <li>träumt vom Leben als Eiermilliardärin</li>
          </ul>
        </div>
      </div>
    </div>

  </div>
  <div class="dyshuhn_dreieck"></div>

  <div class="dyshuhn_weiteres">
    <div class="dyshuhn_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 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 class="dyshuhn_abneigungen">
      <div class="dyshuhn_abneigungen-titel">
        Abneigungen</div>

      <div class="dyshuhn_abneigungen-items">Fuchs</div>
      <div class="dyshuhn_abneigungen-items2">Eiersalat</div>
      <div class="dyshuhn_abneigungen-items">Regen</div>
      <div class="dyshuhn_abneigungen-items2">Nachbarsesel</div>
      <div class="dyshuhn_abneigungen-items"> Geist Günther</div>
      <div class="dyshuhn_abneigungen-items2">Rowdies</div>

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

<style>@import url("https://fonts.googleapis.com/css2?family=Titan+One&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");:root{--dyshuhn-col1:#4d76a1;--dyshuhn-col2:#fff;--dyshuhn-col3:#b47330;--dyshuhn-font1:"Titan One",cursive;--dyshuhn-font2:"Roboto",sans-serif}.dyshuhn_container{margin:auto;width:600px;background:var(--dyshuhn-col3);color:var(--dyshuhn-col2);font-family:var(--dyshuhn-font2)}.dyshuhn_header{background:url("https://abload.de/img/epichuhnheaderjikew.png");width:600px;height:300px}.dyshuhn_header-heading{color:var(--dyshuhn-col1);font-family:var(--dyshuhn-font1);font-size:40px;text-align:center;padding-top:230px;text-shadow:2px 1px var(--dyshuhn-col2)}.dyshuhn_titel{padding:40px;display:flex;justify-content:space-between}.dyshuhn_titel-bild img{border-radius:50%}.dyshuhn_titel-name{font-family:var(--dyshuhn-font1);color:var(--dyshuhn-col2);font-size:30px;text-shadow:2px 1px var(--dyshuhn-col1);text-align:center}.dyshuhn_beschreibung{padding:40px;width:500px;text-align:justify}.dyshuhn_fakten{padding:20px}.dyshuhn_fakten-titel{font-family:var(--dyshuhn-font1);font-size:20px;text-align:center;line-height:35px}.dyshuhn_fakten-liste ul{list-style-type:circle;line-height:25px}.dyshuhn_abneigungen{padding:40px;width:200px}.dyshuhn_dreieck{margin:auto;width:0;height:0;border-left:100px solid transparent;border-right:100px solid transparent;border-top:50px solid var(--dyshuhn-col2)}.dyshuhn_weiteres{display:flex}.dyshuhn_abneigungen-titel{font-family:var(--dyshuhn-font1);font-size:20px;text-align:center;line-height:35px}.dyshuhn_abneigungen-items{text-align:right;background:var(--dyshuhn-col1);line-height:20px;border-radius:10px;padding:5px}.dyshuhn_abneigungen-items2{text-align:right;background:var(--dyshuhn-col2);line-height:20px;border-radius:10px;padding:5px;color:var(--dyshuhn-col1)}</style>

29.06.2022, 19:19: Hugo hat diesen Beitrag moderiert

Deine letzten Rubine für dieses Codingformat sind ausgeschüttet. Es war uns ein Fest

19. Juli - 23:59

Es hagelt Nüsse

am

Für mich bitte einmal gerne die XXX.

19. Juli - 23:59

Es hagelt Nüsse

am

Ich hätte bitte gerne die XXX.

Sarkasmus

ist die niedrigste Form von Esprit.

Code:

<style>@import url('https://fonts.googleapis.com/css2?family=Allura&family=Bebas+Neue&display=swap');.ni_signatur{background:#000;border:5px solid #000;display:flex;flex-direction:column;width:500px;height:200px}.ni_signatur_text{align-items:center;display:flex;flex-direction:column;justify-content:space-between;height:200px;margin-top:-210px}.ni_signatur_text_normal{color:#fff;font-family:'Bebas Neue';margin-top:130px}.ni_signatur_text_hervorgehoben{color:#fff;font-family:'Allura';font-size:48px;margin-top:30px}.ni_signatur_bilder{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.ni_signatur_jpg{height:auto;width:150px}.ni_signatur_gif{width:190px;height:auto}
</style> <div class="ni_signatur">
  <div class="ni_signatur_bilder"><img class="ni_signatur_jpg" src="https://abload.de/img/1rykzh.jpg">
<div><img class="ni_signatur_gif" src="https://abload.de/img/68747470733a2f2f73332y0jbw.gif"></div>
<img class="ni_signatur_jpg" src="https://abload.de/img/10h9jr3.jpg">
</div>
    <div class="ni_signatur_text"><div class="ni_signatur_text_hervorgehoben">Sarkasmus</div><div class="ni_signatur_text_normal">ist die niedrigste Form von Esprit.</div></div>
</div>

10.07.2022, 12:39: Hugo hat diesen Beitrag moderiert

Rubine wurden verrabt

19. Juli - 23:59

Es hagelt Nüsse

am

Zu meinem Haufen schnapp ich mir noch Nuss Nr XXX

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

*screenshot, weil filter hier auf dem Forum eine Onclick Version mitbringt, die ich nicht ausschalten kann.
Screenshot aus einem Forum

Html

Code:

<div class="fehn6_container">
  <div class="fehn6_flex">
    <div class="fehn6_box">
      <div class="fehn6_bild"><img src="https://loremflickr.com/265/150"></div>
      <div class="fehn6_h">*Admin</div>
      <div class="fehn6_text">
        <b>Lorem ipsum dolor</b> sit amet, consectetur adipiscing elit. Vel est non vitae at gravida id velit hendrerit. <br><b>Cursus interdum</b> aenean nisl mauris lectus erat elit cras id. Diam condimentum vitae molestie sit tortor egestas in phasellus volutpat.<br><b>Nullam semper</b> sit amet, eu vestibulum facilisis fames euismod. Felis adipiscing sagittis, justo eget. Rutrum gravida sit amet id mattis nunc, sed.

      </div>
    </div>
        <div class="fehn6_box">
      <div class="fehn6_bild"><img src="https://loremflickr.com/265/150/dog"></div>
      <div class="fehn6_h">*personal</div>
      <div class="fehn6_text">
        <b>Lorem ipsum dolor</b> sit amet, consectetur adipiscing elit. Vel est non vitae at gravida id velit hendrerit. <br><b>Cursus interdum</b> aenean nisl mauris lectus erat elit cras id. Diam condimentum vitae molestie sit tortor egestas in phasellus volutpat.<br><b>Nullam semper</b> sit amet, eu vestibulum facilisis fames euismod. Felis adipiscing sagittis, justo eget. Rutrum gravida sit amet id mattis nunc, sed.

      </div>
    </div>
  </div>
  <div class="fehn6_dossier">*Dossier</div>
  <div class="fehn6_epilog">
    <b>Lorem ipsum dolor sit</b> amet, consectetur adipiscing elit. Vel est non vitae at gravida id velit hendrerit.
    Cursus interdum aenean nisl mauris lectus erat elit cras id.<br> <b>Diam condimentum</b> vitae molestie sit tortor egestas in phasellus volutpat. <br><b>Nullam semper</b> sit amet, eu vestibulum facilisis fames euismod. Felis adipiscing sagittis, justo eget. Rutrum gravida sit amet id mattis nunc, sed.

  </div>
</div>

Css

Code:

:root {
  --fehn6_orange:#E55812;
  --fehn6_text:#404040;
  --fehn6_bg:#DAC6B5;
      --fehn6_links: 'IM Fell Great Primer SC', serif;
    --fehn6_texting: 'Roboto', sans-serif;
}

.fehn6_container {
  width:550px;
  background:var(--fehn6_orange);
  margin:auto;
  padding:20px;
font-size:14px;
  line-height:1.8;
  font-family:var(--fehn6_texting);
  color:var(--fehn6_text);
}

.fehn6_flex {
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.fehn6_bild{
  background:#232323;
  width:100%;
  height:150px;
}

.fehn6_bild img {
   filter:opacity(0.5) brightness(0.6) sepia(0.9);
}

.fehn6_box {
  background:var(--fehn6_bg);
}

.fehn6_h {
  font-family:var(--fehn6_links);
  color:var(--fehn6_bg);
  font-size:30px;
  text-align:right;
  margin-top:-50px;
  margin-right:10px;
}

.fehn6_text {
  padding:10px;
  text-align:justify;
}

.fehn6_text b {
  color:var(--fehn6_orange);
}

.fehn6_dossier {
  font-size:56px;
  text-align:right;
  font-family:var(--fehn6_links);
  color:var(--fehn6_bg);
  text-transform:uppercase;
  margin-top:-25px;
}

.fehn6_epilog {
  background:var(--fehn6_text);
  color:var(--fehn6_bg);
  padding:10px;
  text-align:justify;
}

.fehn6_epilog b {
  color:var(--fehn6_orange);
}

16.07.2022, 11:53: Hugo hat diesen Beitrag moderiert

Rubine sind ausgeschüttet

19. Juli - 23:59

Es hagelt Nüsse

am

Für mich bitte auch einmal die [ABC].

19. Juli - 23:59

Es hagelt Nüsse

am

Dann noch eine XXX hinterher, bitte

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

Gosh. So viele Informationen... -.-

HTML

Code:

<div class="fehn_container">
  <div class="fehn_posthead">
    <div class="fehn_postquote">All people are players</div>
    <div class="fehn_postusername">
      Theodorus von Haderstaedt
    </div></div>
    <div class="fehn_postflex">
      <div class="fehn_postbit">
        <div class="fehn_postava"><img src="https://abload.de/img/ryuava6tjx9.png"></div>
        <div class="fehn_postsubava"><div class="fehn_postsubtitle">villain or hero</div>
          <div class="fehn_postgroup"><i class="fa-solid fa-broom"></i></div></div>
        <div class="fehn_postdesript">Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit </div>
        
        <div class="fehn_postfact">
          hier steht eine Info
        </div>
          <div class="fehn_postfact">
          hier steht eine Info
        </div>
          <div class="fehn_postfact">
          hier steht eine Info
        </div>
        <div class="fehn_posticon"><img src="https://abload.de/img/ryusigmgkm2.png"></div>
<div class="fehn_postawards">
  <i class="fa-solid fa-dove"></i><i class="fa-solid fa-seedling"></i><i class="fa-solid fa-sun"></i><i class="fa-solid fa-book-skull"></i><i class="fa-solid fa-dragon"></i>
</div>        
      
      </div>
      <div class="fehn_posttext">
        <div class="fehn_postheadinfos">
          <div class="fehn_postinfo">38 Jahre</div>
          <div class="fehn_postinfo">Anwalt</div>
          <div class="fehn_postinfo">Manhatten</div>
        </div>
        <div class="fehn_postinfos">gepostet am 23.03.2021 </div>
        <div class="fehn_postmessage">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa cursus aliquet volutpat odio mattis nunc. At enim tincidunt maecenas in sem enim felis elit. Fringilla enim, pharetra morbi enim. Congue libero vitae elit id fermentum sagittis feugiat posuere laoreet. Egestas tellus turpis lorem pharetra vulputate diam eu cursus senectus. Purus amet, non suspendisse sapien. Quis pharetra risus interdum purus quis nunc. Elit urna purus pellentesque pharetra aenean. Odio pharetra egestas sit neque. Nec ut quis nam tempus.
Natoque pellentesque nunc nunc, ridiculus et urna, euismod. Porttitor nulla id donec tincidunt lobortis urna eget nunc venenatis. Ultrices ac id eleifend iaculis turpis vivamus at. Aliquet a faucibus nulla in pharetra turpis lacus pretium. Diam quis suspendisse elit ut blandit nascetur pellentesque turpis commodo.
Feugiat nisi sed mattis pharetra aliquet egestas nam venenatis semper. Volutpat fermentum ipsum feugiat integer posuere aenean. Sit laoreet urna feugiat a gravida sed. Dui tortor arcu ipsum cursus. Maecenas sit enim iaculis pharetra quis id laoreet. Turpis ac vitae venenatis, malesuada sollicitudin ornare nisi, hac potenti. Rhoncus felis malesuada aliquam massa consectetur sit. Sapien enim arcu egestas mauris, enim. Lobortis aenean vitae suscipit fusce diam malesuada amet leo, a.
Quisque integer varius sed lorem vel ipsum gravida venenatis. Mi tempor adipiscing semper felis, dictum sit. Adipiscing nec arcu mollis tortor ridiculus enim tempus scelerisque dui. Duis ante amet, velit, id. A tristique consectetur enim vestibulum quis maecenas nisi. Libero purus placerat lorem purus libero, nec ultrices fermentum. Dui libero, posuere vel vel penatibus neque sed. Senectus sit pharetra, velit ornare aliquam. Arcu, elit in dictum in urna scelerisque. Vulputate duis elementum tortor elementum.
Ultrices erat risus platea leo, proin non risus. In cum fermentum parturient nibh bibendum sapien justo quis cras. Phasellus risus lorem amet vestibulum, nisl aenean arcu. Sed scelerisque in nec potenti quis tempor risus. Congue felis mollis lobortis interdum scelerisque congue maecenas. Ultricies pellentesque vulputate leo est. Orci ultricies ultrices amet porttitor risus non. Ornare tristique suspendisse tellus nunc, vulputate. Molestie purus in tincidunt non at etiam tincidunt dignissim. Egestas nisi, semper ac mi risus velit blandit.
Leo sagittis, varius enim, amet, aliquam placerat. Nullam congue in nisl, volutpat fermentum. Felis semper aliquam id imperdiet massa, adipiscing vel, adipiscing. Consequat risus cras morbi pharetra est posuere.
        </div>
      </div>
    </div>
  <div class="fehn_postbuttons">
    <a class="fehn_postbutton">bearbeiten</a>
    <a class="fehn_postbutton">zitieren</a>
  </div>
  </div>

Css

Code:

html{background:#232323;}

:root {
--main: #3E5952; /*maincolor*/
--boxes:#D9D9D9; /*boxenhintergrund*/
  --text:#243430; /*maintextcolor*/
  --contrast:#F5F5F5; /*contrast to main*/
  --ub:'Gilda Display', serif;
  --font: 'Jomolhari', serif;
}

a {
  text-decoration:none;
  color:var(--main);
  opacity:0.95;
  transition:0.3s ease-in;
}

a:hover {
  color:var(--contrast);
}

.fehn_container {
  font-family:var(--font);
width: 1200px;
  margin:auto;
  line-height:160%;
  background:var(--boxes);
  border:5px solid var(--main);
}

.fehn_posthead {
  display:flex;
  justify-content:space-between;
  margin:20px 20px 0 20px;
border-bottom:15px solid var(--main);
  padding-bottom:10px;
}

.fehn_postusername {
  font-family:var(--ub);
  color:var(--main);
  font-size:36px;
  
}

.fehn_postquote {
  color:var(--main);
}

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

.fehn_postsubava  {
  display:flex;
  justify-content:space-between;
}

.fehn_postgroup {
  width:55px;
  height:55px;
background:var(--main);
  transform:rotate(45deg);
  margin-top:-35px;
}

.fehn_postgroup i {
  color:var(--boxes);
  font-size:23px;
  transform:rotate(-45deg);
  margin-top:15px;
  margin-left:13px;
}

.fehn_postdesript {
  font-size:14px;
  opacity:0.8;
  text-align:justify;
  line-height:1.5;
  padding: 20px 0px;
}

.fehn_postfact, .fehn_postinfo {
  background:var(--main);
  color:var(--boxes);
  justify-content:center;
  display:flex;
  align-items:center;
  font-size:13px;
  padding:10px;
}

.fehn_postfact {
  margin-bottom:10px;
}


.fehn_posticon img {
  max-width:240px;
}

.fehn_postawards {
  color:var(--main);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  font-size:33px;
  margin:20px 0px;
}

.fehn_posttext {
  padding:0px 50px;
}

.fehn_postheadinfos {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
}

.fehn_postinfo {
  flex: 1 0 30%;
}

.fehn_postinfos {
text-align:center;
  opacity:0.4;
  font-size:12px;
}

.fehn_postmessage {
  width:80%;
  text-align:justify;
  margin: 20px auto;
}

.fehn_postbuttons {
  background:var(--main);
  height:50px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  paddin-top: 5px;
}

.fehn_postbutton {
background:var(--boxes);
  margin-left:10px;
  padding:5px;
}

.fehn_postbutton:hover {
  background:var(--main);
  color:var(--contrast);
  cursor:pointer;
}

16.07.2022, 11:53: Hugo hat diesen Beitrag moderiert

Rubine sind verrabt

19. Juli - 23:59

Es hagelt Nüsse

am

Endspurt: Ich nehm ne Nr [NUSS].

Paid in Coin of Gold

Witcherverse

&

Savage
Noble

Victorian Age UrbanFantasy

HTML

Code:

<div class="fehn5_container">
  <div class="fehn5_flex">
    <a href="https://yrden.quodvide.de">
  <div class="fehn5_left">
    <div class="fehn5_lefttext">Paid <span>in</span> Coin <span>of</span> Gold</div>
    <div class="fehn5_smalltext">Witcherverse</div>
      </div></a>
  <div class="fehn5_right">
<a href="https://sano.ajarofink.net"><div class="fehn5_upper">
      <div class="fehn5_rightflex"><div class="fehn5_rightand">&</div>
      <div class="fehn5_righttext">Savage <br>Noble</div>
    </div>
    <div class="fehn5_smalltext">Victorian Age UrbanFantasy</div>
  </div></a>
    <div class="fehn5_lower"></div></div> </div>
  <div class="fehn5_discord">
    <a href="https://discord.gg/qyzSMnMY8t"><i class="fa-brands fa-discord"></i></a>
        <a href="https://discord.gg/dvtJvtcGsp"><i class="fa-brands fa-discord"></i></a>
  </div>

  
</div>
[code]
<h3>CSS</h3>[code].fehn5_container a:link, .fehn5_container a:visited  {
  text-decoration:none;
  color: #ededed;
  transition:0.3s ease-in;
}

.fehn5_left:hover, .fehn5_upper:hover {
  color:#b99b6d;
filter: sepia(100%);
    transition:0.3s ease-in;
}

.fehn5_container {
  width:500px;
  height:350px;
  overflow:hidden;
  font-family: 'Vollkorn SC', serif;

  margin: 200px auto;
    font-size:12px;

}

.fehn5_flex {
  display:flex;
}

.fehn5_left{
  background:url('https://abload.de/img/yrden4djvg.png');
  height:244px;
  width:208px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:10px;
    box-sizing:border-box;
}

.fehn5_upper{
  background:url('https://abload.de/img/savageuzkze.png');
  width:292px;
  height:184px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  padding:10px;
  box-sizing:border-box;
}
.fehn5_lower {
   background:url('https://abload.de/img/feyewgke0.png');
    width:292px;
  height:60px;
}

.fehn5_lefttext{
  font-size:19px;
}

.fehn5_lefttext span {
  font-size:11px;
}

.fehn5_righttext {
  font-size:20px;
  line-height:66%;
}

.fehn5_rightflex {
  display:flex;
}

.fehn5_rightand {
  font-size:35px;
  line-height:81%;
}

.fehn5_discord {
  display:flex;
  justify-content:space-between;
  font-size:33px;
  padding: 10px 100px;
}

.fehn5_discord a:link, .fehn5_discord a:visited {
   color:#665537;
}

18.07.2022, 22:49: Hugo hat diesen Beitrag moderiert

Rubine sind in deinem Inventar aufgetaucht

19. Juli - 23:59