Gesuch-Vorlage

titel

untertitel

• 
  
  
  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.
  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.
  
• 
  
  
  ...tab2
  
• 
  
  
  ...tab3
  
• 
  
  
  Fakten über's Board
  » Wir sind ein Götter RPG née 2025
  » Bei uns sind Götter, Halbgötter, Mythenwesen und Menschen spielbar
  » Bei uns gibt es folgende Pantheone: griechisch, nordisch, ägyptisch, japanisch, chinesisch, hinduistisch
  » Wir haben einen 3-monatigen Inplayzeitraum
  » Unser Hauptspielort ist in Los Angeles & die Götterbereiche
  » Unser Steckbrief ist überschaubar (Profil)
  » Wir spielen nach dem Prinzip der Szenentrennung
  » Wir haben keine Mindestpostlänge
  » Wir sind L3S3V3 gerated
  » Wir arbeiten mit der Whitelist, welche nur alle 2 Monate online kommt
  » Im Moment sind die Götter in der Menschenwelt gefangen
  
  FAQ | Storyline
  

Code:

<div id="aetheria-gesuch">
    <div id="aetheria-gesuch-bg"></div>
    <div id="aetheria-gesuch-titel">titel</div>
    <div id="aetheria-gesuch-untertitel">untertitel</div>
    <div class="aetheria-gesuch-bilder">
        <img src="https://placehold.co/150x300" style="height: 300px;">
        <img src="https://placehold.co/150x300" style="height: 300px;">
    </div>
    <div id="aetheria-gesuch-content">
        <ul class="aetheria-gesuch-tabs">
            <li>
                <input type="radio" checked name="aetheriagesuchtabs" id="aetheriagesuch-tab1">
                <label for="aetheriagesuch-tab1"><i class="fas fa-angle-double-left"></i></label>
                <div id="aetheriagesuch-tab-content1" class="aetheria-gesuch-tab-content animated fadeIn">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam <aetheria-bold>voluptua</aetheria-bold>. 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 <aetheria-bold>voluptua</aetheria-bold>. 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 <aetheria-bold>voluptua</aetheria-bold>. 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 <aetheria-bold>voluptua</aetheria-bold>. 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 <aetheria-bold>voluptua</aetheria-bold>. 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 <aetheria-bold>voluptua</aetheria-bold>. 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 <aetheria-bold>voluptua</aetheria-bold>. 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>
            </li>
            <li>
                <input type="radio" name="aetheriagesuchtabs" id="aetheriagesuch-tab2">
                <label for="aetheriagesuch-tab2"><i class="fas fa-angle-double-left"></i></label>
                <div id="aetheriagesuch-tab-content2" class="aetheria-gesuch-tab-content animated fadeIn">
                    ...tab2
                </div>
            </li>
            <li>
                <input type="radio" name="aetheriagesuchtabs" id="aetheriagesuch-tab3">
                <label for="aetheriagesuch-tab3"><i class="fas fa-angle-double-left"></i></label>
                <div id="aetheriagesuch-tab-content3" class="aetheria-gesuch-tab-content animated fadeIn">
                    ...tab3
                </div>
            </li>
            <li>
                <input type="radio" name="aetheriagesuchtabs" id="aetheriagesuch-tab4">
                <label for="aetheriagesuch-tab4"><i class="fas fa-angle-double-left"></i></label>
                <div id="aetheriagesuch-tab-content4" class="aetheria-gesuch-tab-content animated fadeIn">
                    <aetheria-bold>Fakten über's Board</aetheria-bold>
» Wir sind ein Götter RPG née 2025
» Bei uns sind Götter, Halbgötter, Mythenwesen und Menschen spielbar
» Bei uns gibt es folgende Pantheone: griechisch, nordisch, ägyptisch, japanisch, chinesisch, hinduistisch
» Wir haben einen 3-monatigen Inplayzeitraum
» Unser Hauptspielort ist in Los Angeles & die Götterbereiche
» Unser Steckbrief ist überschaubar (Profil)
» Wir spielen nach dem Prinzip der Szenentrennung
» Wir haben keine Mindestpostlänge
» Wir sind L3S3V3 gerated
» Wir arbeiten mit der Whitelist, welche nur alle 2 Monate online kommt
» Im Moment sind die Götter in der Menschenwelt gefangen

<a href="https://blackunicorn2279.de/lexicon.php?page=faq" target="_blank">FAQ</a> | <a href="https://blackunicorn2279.de/lexicon.php?page=storyline" target="_blank">Storyline</a>
                </div>
            </li>
        </ul>
    </div>
</div>

<style>/* Hauptcontainer */#aetheria-gesuch {width: 500px;height: 600px;background-color: #141A18;box-sizing: border-box;position: relative;margin: auto;overflow: hidden;}/* Textbox */#aetheria-gesuch-content {width: 350px;height: 600px;overflow: hidden;box-sizing: border-box;padding: 0;position: relative;color: #BFC8C1;font-family: var(--inter-regular);font-size: 12px;line-height: 150%;text-align: justify;border-bottom: 1px #C9B68D solid;}/* Bilder */.aetheria-gesuch-bilder {width: 150px;height: 600px;float: right;position: relative;filter: grayscale(30%);}.aetheria-gesuch-bilder::before {content: "";display: block;background-image: linear-gradient(rgba(46, 74, 63, 0.6), rgba(79, 111, 96, 0.6));background-image: -moz-linear-gradient(rgba(46, 74, 63, 0.6), rgba(79, 111, 96, 0.6));background-image: -webkit-linear-gradient(rgba(46, 74, 63, 0.6), rgba(79, 111, 96, 0.6));background-image: -o-linear-gradient(rgba(46, 74, 63, 0.6), rgba(79, 111, 96, 0.6));position: absolute;top: 0;bottom: 0;left: 0;right: 0;}/* Überschrift */#aetheria-gesuch #aetheria-gesuch-titel {font-family: var(--cinzel-black);font-size: 60px;text-align: center;color: #C9B68D;position: absolute;z-index: 10;transition: 3s;letter-spacing: 3px;top: 270px;transform: rotate(-90deg);left: 40px;}#aetheria-gesuch:hover #aetheria-gesuch-titel {left: 37px;top: 15px;transition: 3s;color: #C9B68D;opacity: 1;transform: rotate(0deg);font-size: 30px;}/* Untertitel */#aetheria-gesuch #aetheria-gesuch-untertitel {width: 500px;font-family: var(--inter-regular);font-style:italic;font-size: 16px;text-transform: uppercase;color: #BFC8C1;position: absolute;z-index: 10;transition: 3s;letter-spacing: 2px;left: -95px;top: 250px;transform: rotate(-90deg);}#aetheria-gesuch:hover #aetheria-gesuch-untertitel {width: 300px;text-align: center;left: 28px;top: 55px;transition: 3s;color: #A5B4A7;opacity: 1;transform: rotate(0deg);font-size: 10px;letter-spacing: 1px;}/* Hover-Hintergrund */#aetheria-gesuch #aetheria-gesuch-bg {position: absolute;width: 350px;height: 600px;background-color: #4F6F60;box-sizing: border-box;left: 0px;transition: 2s;z-index: 5;}#aetheria-gesuch:hover #aetheria-gesuch-bg {width: 20px;height: 600px;background-color: #4F6F60;left: 340px;transition: 2s;}/* START TABS */#aetheria-gesuch-content .aetheria-gesuch-tabs input[type=radio] {position: absolute;display: none;}#aetheria-gesuch-content .aetheria-gesuch-tabs {float: none;list-style: none;position: relative;padding: 0;margin: auto;height: 600px;} /* Auswahl-Buttons */#aetheria-gesuch-content .aetheria-gesuch-tabs label {width: 30px;height: 80px;box-sizing: border-box;text-align: center;display: block;background: transparent;cursor: pointer;color: #4F6F60;font-size: 36px;padding-top: 10px;overflow: hidden;text-transform: uppercase;font-weight: bold;position:relative;top: 80px;left: 285px;z-index: 4;line-height: 90%;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}#aetheria-gesuch-content .aetheria-gesuch-tabs label:hover {color: #C9B68D;background: transparent;top: 80px;}#aetheria-gesuch-content [type=radio]:checked ~ label {background: transparent;color: #C9B68D;top: 80px;}#aetheria-gesuch-content [type=radio]:checked ~ label ~ .aetheria-gesuch-tab-content {display: block;}/* Tab-Boxen */#aetheria-gesuch-content .aetheria-gesuch-tab-content {z-index: 2;display: none;text-align: justify;width: 280px;height: 440px;overflow: auto;font-family: var(--inter-regular);font-size: 11px;padding: 15px;padding-top: 5px;box-sizing: border-box;color:#BFC8C1;background: transparent;position: absolute;top: 80px;left: 0;-webkit-animation-duration: 0.5s;-o-animation-duration: 0.5s;-moz-animation-duration: 0.5s;animation-duration: 0.5s;}/* Textformatierung */aetheria-bold {font-family: var(--inter-black);text-transform: uppercase;color: #C9B68D;}aetheria-unterstrichen {color: #ECEDE8;border-bottom: 1px dashed #A5B4A7;}.cinzel-black {font-family: "Cinzel", serif;font-optical-sizing: auto;font-weight: 900;font-style: normal;}.inter-regular {font-family: "Inter", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;}.inter-black {font-family: "Inter", sans-serif;font-optical-sizing: auto;font-weight: 700;font-style: normal;}:root{--cinzel-black:cinzel-black;--inter-regular:inter-regular;inter-bold:inter-bold;}</style>

<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=Cinzel:wght@400..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">