Neutrale Hexen und Zauberer - HTML & CSS Code

<style>
/* 
 * ==============================================
 * STECKBRIEF: NEUTRALE HEXEN & ZAUBERER 
 * Isoliertes CSS
 * ==============================================
 */

.hof-sb-neutral {
    font-family: 'Merriweather', serif;
    color: #333333; /* Dunkles Grau */
    font-size: 13px;
    line-height: 1.7;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(50px, auto);
    gap: 15px !important;
    max-width: 960px;
    margin: 0 auto;
    grid-template-areas:
        "meincharakterinkuerze meincharakterinkuerze faehigkeiten faehigkeiten faehigkeiten faehigkeiten"
        "diefamilie diefamilie diefamilie diefamilie diefamilie diefamilie"
        "staerken staerken staerken schwaechen schwaechen schwaechen"
        "vorlieben vorlieben vorlieben abneigungen abneigungen abneigungen"
        "charakterisierung charakterisierung charakterisierung charakterisierung charakterisierung charakterisierung"
        "lebenslaufkind lebenslaufkind lebenslaufkind lebenslaufkind lebenslaufkind lebenslaufkind"
        "lebenslaufschulzeit lebenslaufschulzeit lebenslaufschulzeit lebenslaufschulzeit lebenslaufschulzeit lebenslaufschulzeit"
        "lebenslaufalserwachsener lebenslaufalserwachsener lebenslaufalserwachsener lebenslaufalserwachsener lebenslaufalserwachsener lebenslaufalserwachsener"
        "schreibprobe schreibprobe schreibprobe schreibprobe schreibprobe schreibprobe"
        "wuenscheundzumuser1 wuenscheundzumuser1 wuenscheundzumuser2 wuenscheundzumuser2 wuenscheundzumuser3 wuenscheundzumuser3" 
        "wuenscheundzumuser4 wuenscheundzumuser4 wuenscheundzumuser5 wuenscheundzumuser5 wuenscheundzumuser6 wuenscheundzumuser6";
}

@media screen and (min-width: 760px) {
    .hof-sb-neutral {
        grid-auto-rows: minmax(100px, auto);
    }
}

@media screen and (max-width: 759px) {
    .hof-sb-neutral {
        grid-template-columns: 1fr;
        gap: 10px !important; 
        grid-template-areas:
            "meincharakterinkuerze" "faehigkeiten" "diefamilie" "staerken" "schwaechen" "vorlieben" "abneigungen"
            "charakterisierung" "lebenslaufkind" "lebenslaufschulzeit" "lebenslaufalserwachsener" "schreibprobe"
            "wuenscheundzumuser1" "wuenscheundzumuser2" "wuenscheundzumuser3" "wuenscheundzumuser4" "wuenscheundzumuser5" "wuenscheundzumuser6";
    }
}

.hof-sb-neutral .hof-sb-box { 
    padding: 30px !important; 
    box-sizing: border-box !important;
    border-radius: 8px !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important; 
    backdrop-filter: blur(4px); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .hof-sb-neutral .hof-sb-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(82, 80, 72, 0.2) !important; 
    }
}

.hof-sb-neutral a { 
    color: #525048; 
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease;
}
.hof-sb-neutral a:hover { color: #858277; }

.hof-sb-neutral ul, .hof-sb-neutral ol { margin: 10px 0; padding-left: 20px; }

.hof-sb-neutral hr { 
    border: 0 !important; 
    height: 1px !important; 
    background: linear-gradient(to right, transparent, rgba(82, 80, 72, 0.3), transparent) !important; 
    margin: 20px 0 !important; 
}

/* Typografie */
.hof-sb-neutral .hof-sb-ueberschrift {
    font-family: 'Cinzel', serif;
    color: #e6e4dc !important; 
    background: linear-gradient(135deg, #525048 0%, #3b3a36 100%) !important; 
    border-left: 4px solid #c4c1b3 !important; 
    border-right: none;
    border-top: none;
    border-bottom: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    font-size: 17px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 10px 15px !important;
    margin: 0 0 20px 0 !important;
    width: fit-content !important;
    line-height: 1.2 !important;
    border-radius: 3px !important;
}

.hof-sb-neutral .hof-sb-unterueberschrift {
    font-family: 'Bad Script', cursive;
    color: #3b3a36 !important; 
    font-size: 20px !important;
    margin: 10px 0 5px 0 !important;
    display: inline-block !important;
    border-bottom: 1px dashed rgba(82, 80, 72, 0.4) !important; 
}

/* Bereiche und Farben */
.hof-sb-neutral .hof-sb-meincharakterinkuerze {
    grid-area: meincharakterinkuerze;
    background-image: url('https://www.hogwarts-on-fire.de/core/media/411-neutrale-hexen-zauberer-steckbrief-neu-jpg/');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
.hof-sb-neutral .hof-sb-meincharakterinkuerze strong { color: #e6e4dc; }

.hof-sb-neutral .hof-sb-faehigkeiten { grid-area: faehigkeiten; background-color: rgba(224, 223, 213, 0.85) !important; }
.hof-sb-neutral .hof-sb-diefamilie { grid-area: diefamilie; background-color: rgba(196, 193, 179, 0.85) !important; }
.hof-sb-neutral .hof-sb-staerken { grid-area: staerken; background-color: rgba(224, 223, 213, 0.85) !important; }
.hof-sb-neutral .hof-sb-schwaechen { grid-area: schwaechen; background-color: rgba(209, 207, 195, 0.85) !important; }
.hof-sb-neutral .hof-sb-vorlieben { grid-area: vorlieben; background-color: rgba(224, 223, 213, 0.85) !important; }
.hof-sb-neutral .hof-sb-abneigungen { grid-area: abneigungen; background-color: rgba(209, 207, 195, 0.85) !important; }
.hof-sb-neutral .hof-sb-charakterisierung { grid-area: charakterisierung; background-color: rgba(196, 193, 179, 0.85) !important; }
.hof-sb-neutral .hof-sb-lebenslaufkind { grid-area: lebenslaufkind; background-color: rgba(224, 223, 213, 0.85) !important; }
.hof-sb-neutral .hof-sb-lebenslaufschulzeit { grid-area: lebenslaufschulzeit; background-color: rgba(196, 193, 179, 0.85) !important; }
.hof-sb-neutral .hof-sb-lebenslaufalserwachsener { grid-area: lebenslaufalserwachsener; background-color: rgba(224, 223, 213, 0.85) !important; }
.hof-sb-neutral .hof-sb-schreibprobe { grid-area: schreibprobe; background-color: rgba(196, 193, 179, 0.85) !important; }

/* Die unteren Bilder-Boxen */
.hof-sb-neutral .hof-sb-wuensche {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #f2f0e6 !important; 
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    text-shadow: 1px 2px 4px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.6); 
}

.hof-sb-neutral .hof-sb-w1 { grid-area: wuenscheundzumuser1; background-image: url('https://www.hogwarts-on-fire.de/core/media/272-steckbrieferstellen1-jpg/'); }
.hof-sb-neutral .hof-sb-w2 { grid-area: wuenscheundzumuser2; background-image: url('https://www.hogwarts-on-fire.de/core/media/272-steckbrieferstellen2-jpg/'); }
.hof-sb-neutral .hof-sb-w3 { grid-area: wuenscheundzumuser3; background-image: url('https://www.hogwarts-on-fire.de/core/media/271-regeln2-jpg/'); }
.hof-sb-neutral .hof-sb-w4 { grid-area: wuenscheundzumuser4; background-image: url('https://www.hogwarts-on-fire.de/core/media/270-storyline2-jpg/'); }
.hof-sb-neutral .hof-sb-w5 { grid-area: wuenscheundzumuser5; background-image: url('https://www.hogwarts-on-fire.de/core/media/275-fragdasteam2-jpg/'); }
.hof-sb-neutral .hof-sb-w6 { grid-area: wuenscheundzumuser6; background-image: url('https://www.hogwarts-on-fire.de/core/media/273-faq2-jpg/'); }
</style>

<!-- ============================================== -->
<!-- HTML BEREICH                                   -->
<!-- ============================================== -->
<div class="hof-sb-neutral">

    <div class="hof-sb-box hof-sb-meincharakterinkuerze">
        <div class="hof-sb-ueberschrift">Name</div>
        <p>
            <strong>Vollständiger Name:</strong> Vorname Nachname<br />
            <strong>Alter:</strong> XX Jahre<br />
            <strong>Geburtstag:</strong> TT.MM.JJJJ<br />
            <strong>Wohnort:</strong> Wo wohnt Dein Charakter?<br />
            <strong>Familienstand:</strong> single / verheiratet usw.<br />
            <strong>Gruppenzugehörigkeit:</strong> Zauberer/Hexe, Muggel, Schüler, Todesser, usw.<br />
            <strong>Beruf:</strong> ggf. Schüler oder Hausfrau/Hausmann<br />
            <strong>Haus und Schule:</strong> Wo ging Dein Charakter zur Schule und ggf. Haus<br />
            <strong>Position in der Gesellschaft:</strong> ggf. gesellschaftlicher Status<br />
            <strong>Blutstatus:</strong> Reinblut/Halbblut/ Muggelgeboren oder Muggel
        </p>
    </div>

    <div class="hof-sb-box hof-sb-faehigkeiten">
        <div class="hof-sb-ueberschrift">Magische Fähigkeiten</div>
        <ul>
            <li>Avada Kedavra: Ja/Nein | Cruciatusfluch: Ja/Nein | Imperiusfluch: Ja/Nein</li>
            <li>Okklumentik: Ja/Nein | Legilimentik: Ja/Nein</li>
            <li>Wortlose Magie: Ja/Nein | Stablose Magie: Ja/Nein </li>
            <li>Animagi: Ja/Nein | Metamorphmagi: Ja/Nein</li>
            <li>Vampir: Ja/Nein | Werwolf: Ja/Nein | Veela: Ja/Nein</li>
            <li>Vertrauensschüler: Ja/Nein | Schulsprecher: Ja/Nein</li>
            <li>Quidditch: Ja/Nein</li>
            <li>Dumbledores Armee: Ja/Nein | Jungtodesser: Ja/Nein</li>
            <li>Koboldsteinclub: Ja/Nein | Chor: Ja/Nein | Schülerzeitung: Ja/Nein | Schachclub: Ja/Nein</li>
        </ul>
        <hr>
        <strong>Zauberstab:</strong> Beschreibe Deinen Zauberstab: Holz, Zoll und Kern. ggf. weitere Beschreibung<br />
        <hr>
        Ggf. Charakterspruch
    </div>

    <div class="hof-sb-box hof-sb-diefamilie">
        <div class="hof-sb-ueberschrift">Über Deine Familie</div>
         <span class="hof-sb-unterueberschrift">Vater: Name Beruf Alter und Blutstatus</span>
        <p>Beschreibe die Beziehung</p>
        <span class="hof-sb-unterueberschrift">Mutter: Name Beruf Alter und Blutstatus</span>
        <p>Beschreibe die Beziehung</p>

        <span class="hof-sb-unterueberschrift">Geschwister: Name Beruf Alter und Blutstatus</span>
        <p>Beschreibe die Beziehung</p>
    </div>

    <div class="hof-sb-box hof-sb-staerken">
        <div class="hof-sb-ueberschrift">Stärken</div>
        <ul>
            <li>Stärke 1</li>
            <li>Stärke 2</li>
            <li>Stärke 3</li>
            <li>Stärke 4</li>
            <li>Stärke 5</li>
        </ul>
    </div>

    <div class="hof-sb-box hof-sb-schwaechen">
        <div class="hof-sb-ueberschrift">Schwächen</div>
        <ul>
            <li>Schwäche 1</li>
            <li>Schwäche 2</li>
            <li>Schwäche 3</li>
            <li>Schwäche 4</li>
            <li>Schwäche 5</li>
        </ul>
    </div>

    <div class="hof-sb-box hof-sb-vorlieben">
        <div class="hof-sb-ueberschrift">Vorlieben</div>
        <ul>
            <li>Vorliebe 1</li>
            <li>Vorliebe 2</li>
            <li>Vorliebe 3</li>
            <li>Vorliebe 4</li>
            <li>Vorliebe 5</li>
        </ul>
    </div>   
    
    <div class="hof-sb-box hof-sb-abneigungen">
        <div class="hof-sb-ueberschrift">Abneigungen</div>
        <ul>
            <li>Abneigung 1</li>
            <li>Abneigung 2</li>
            <li>Abneigung 3</li>
            <li>Abneigung 4</li>
            <li>Abneigung 5</li>
        </ul>
    </div>

    <div class="hof-sb-box hof-sb-charakterisierung">
        <div class="hof-sb-ueberschrift">Deine Charakterisierung</div>
        <p>Die Charakterbeschreibung legt die Grundzüge für das Verhalten Deines Charakters dar. Stelle dabei die Geisteshaltung, Gedankenwelt und gegebenenfalls wichtige Emotionen dar. Hier hast Du die Gelegenheit, bestimmte und typische Verhaltensmuster zu erklären. Ein Beispiel: Ein Charakter prüft immer alle Fakten, bevor er eine Entscheidung trifft oder etwas in seinen Aufsatz schreibt. Woher kommt diese Genauigkeit? Oder tritt Dein Charakter vehement gegen mobbende Mitschüler auf? Warum? Hat er vielleicht selbst Mobbing erlebt? Die Charakterisierung erlaubt Rückschlüsse über das Wesen Deines Charakters.</p>
        <p>Von Anfängern erwarten wir keine perfekte Charakterbeschreibung und es gilt, Übung macht den Meister! Tipp: Starte mit äußeren Merkmalen und gehe auf die inneren später ein. Dir stehen dabei verschiedene Möglichkeiten offen: Du kannst in der dritten Person über Deinen Charakter schreiben. Oder Du lässt Familie und Freunde über Deinen Charakter berichten. Du kannst ihn auch selbst zu Wort kommen lassen. Als Beispiel dienen Dir die Charakterbeschreibung von Viktor Krum sowie eines erdachten Charakters aus dem Team.</p>
    </div>

    <div class="hof-sb-box hof-sb-lebenslaufkind">
        <div class="hof-sb-ueberschrift">Dein Lebenslauf - die Kindheit</div>
        <p>Wie ist dein Lebenslauf als Kind gewesen, das heißt vor der Einschulung in Hogwarts oder einer anderen magischen Schule? Was war dein erstes magisches Erlebnis? Welche Ereignisse haben dich geprägt? Dieser Bereich besteht in der Regel doch im aus mehr als 5 bis 6 Sätzen. Du kannst hier zum Beispiel Gründe für die Beziehung zu deinen Verwandten angeben und besondere Erlebnisse festhalten.</p>
    </div>

    <div class="hof-sb-box hof-sb-lebenslaufschulzeit">
        <div class="hof-sb-ueberschrift">Lebenslauf als Schüler</div>
        <p>Wie ist dein bisheriger Werdegang in Hogwarts oder einer anderen magischen Schule? Welche Ereignisse haben sich geprägt? Du kannst insbesondere auf die Ereignisse der Bücher eingehen. Während des Trimagischen Turniers haben zum Beispiel die Schüler aus Beauxbaton oder Durmstrang an den Haustischen von Ravenclaw bzw. Slytherin gesessen. D.h. Interaktionsmöglichkeiten sind durchaus gegeben.</p>
    </div>

    <div class="hof-sb-box hof-sb-lebenslaufalserwachsener">
        <div class="hof-sb-ueberschrift">Lebenslauf als Erwachsener</div>
        <p>Beschreibe deinen Werdegang nachdem du die Schule verlassen hast. Falls du nun einen Schüler spielen möchtest kannst du hier einen kurzen Vermerk eintragen.</p>
    </div>

    <div class="hof-sb-box hof-sb-schreibprobe">
        <div class="hof-sb-ueberschrift">Deine Schreibprobe</div>
        <p>Trage hier eine freie Schreibprobe mit 1000 Zeichen inklusive Leerzeichen ein. Falls dir nichts einfällt, kannst du um eine Situation bitten oder in dem entsprechenden Bereich ein Probeplay mit uns starten. Das Probeplay besteht aus nur einem Post deinerseits, falls du bis hier einen sonst fertigen Steckbrief einreist. Bist du dagegen einen Neuling und möchtest in Ruhe dein Steckbrief noch weiter entwickeln und benötigst dabei besondere Hilfe, ist dies auch kein Problem.</p>
        <p>Du erhältst in diesem Fall länger Zugriff auf diesen Bereich und kannst hier auch schon in Ruhe deine ersten Plays beginnen und so mit der Community Kontakt aufnehmen und schon spielen. Dies hilft dir auch dein Charakter besser kennen zu lernen und auszuarbeiten. Trag einfach in diesem Feld ein wie wir es in deinem Fall gegebenenfalls handhaben sollen. Probeplays können später ins Inplay übernommen werden.</p>
    </div>

    <div class="hof-sb-box hof-sb-wuensche hof-sb-w1">Dein Weg zu uns: freiwillig</div>
    <div class="hof-sb-box hof-sb-wuensche hof-sb-w2">Weitere Charaktere: wenn ja welche</div>
    <div class="hof-sb-box hof-sb-wuensche hof-sb-w3">Spieleralter: Wie alt bist Du als Spieler?</div>
    <div class="hof-sb-box hof-sb-wuensche hof-sb-w4">Gesuch: -</div>
    <div class="hof-sb-box hof-sb-wuensche hof-sb-w5">Wunsch für Deine erste Szene: falls vorhanden</div>
    <div class="hof-sb-box hof-sb-wuensche hof-sb-w6">Avatarperson: Wer ist auf Deinem Avatar zu sehen?</div>
</div>