Themenübersicht (Neueste zuerst)

Geschrieben von Ty Shadar - 07.09.2023, 17:49

Code Nummer 4

Hier steht ein Beschreibungstext zum Gesuch. Fettgeschriebenes sieht so aus, Kursivgeschriebenes sieht so aus und Unterstrichenes sieht so aus.

Charaktername

Hier steht ein Beschreibungstext zum Charakter. Fettgeschriebenes sieht so aus, Kursivgeschriebenes sieht so aus und Unterschrichtenes sieht so aus. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter.

Alter

Beruf

Rasse

Dieses Gesuch ist frei

Alter

Beruf

Rasse

Charaktername

Hier steht ein Beschreibungstext zum Charakter. Fettgeschriebenes sieht so aus, Kursivgeschriebenes sieht so aus und Unterstrichenes sieht so aus. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter.

Dieses Gesuch ist frei

Hier steht ein Beschreibungstext zum Gesuch. Fettgeschriebenes sieht so aus, Kursivgeschriebenes sieht so aus und Unterstrichenes sieht so aus.

HTML

Code:
<head>

    <link rel="stylesheet" href="classicgesuch.css">

    <link href="https://fonts.cdnfonts.com/css/afterglow" rel="stylesheet">

    <link href="https://fonts.cdnfonts.com/css/apple-garamond" rel="stylesheet">

</head>

<div class="safbg">

<div class="safbox1">

    <a href="https://bilgewater-rpg.de/index.php" target="_blank">

    <div class="saf_titel">Titel des Gesuchs</div>

    <div class="saf_untert">Untertitel des Gesuchs</div>

    </a>

</div>

<div class="saf_text">

    Hier steht ein Beschreibungstext zum Gesuch. <b>Fettgeschriebenes</b> sieht so aus, <i>Kursivgeschriebenes</i> sieht so aus und <u>Unterstrichenes</u> sieht so aus.

</div>

<div class="saf_rechts">

    <div class="saf_boxa">

        <div class="saf_name">Charaktername</div>

        <div class="saf_beschr">Hier steht ein Beschreibungstext zum Charakter. <b>Fettgeschriebenes</b> sieht so aus, <i>Kursivgeschriebenes</i> sieht so aus und <u>Unterstrichenes</u> sieht so aus. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. </div>

    </div>

    <div class="saf_boxb">

        <div class="saf_icon">

            <img src="https://via.placeholder.com/200x100">

        </div>

        <div class="saf_stichpunkte">

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Alter

            </div>

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Beruf

            </div>

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Rasse

            </div>

        </div>

    </div>

</div>

<div class="saf_status">Dieses Gesuch ist <i>frei</i></div>

<div class="saf_links">

    <div class="saf_boxb">

        <div class="saf_icon">

            <img src="https://via.placeholder.com/200x100">

        </div>

        <div class="saf_stichpunkte">

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Alter

            </div>

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Beruf

            </div>

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Rasse

            </div>

        </div>

    </div>

    <div class="saf_boxa">

        <div class="saf_name">Charaktername</div>

        <div class="saf_beschr">Hier steht ein Beschreibungstext zum Charakter. <b>Fettgeschriebenes</b> sieht so aus, <i>Kursivgeschriebenes</i> sieht so aus und <u>Unterstrichenes</u> sieht so aus. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. </div>

    </div>

</div>

<div class="saf_status">Dieses Gesuch ist <i>frei</i></div>

<div class="saf_text">

    Hier steht ein Beschreibungstext zum Gesuch. <b>Fettgeschriebenes</b> sieht so aus, <i>Kursivgeschriebenes</i> sieht so aus und <u>Unterstrichenes</u> sieht so aus.

</div>

</div>

Einen weiteren Gesuchten mit dem Icon rechts kannst du mit diesem Codeschnipsel einfügen:

Code:
<div class="saf_rechts">

    <div class="saf_boxa">

        <div class="saf_name">Charaktername</div>

        <div class="saf_beschr">Hier steht ein Beschreibungstext zum Charakter. <b>Fettgeschriebenes</b> sieht so aus, <i>Kursivgeschriebenes</i> sieht so aus und <u>Unterstrichenes</u> sieht so aus. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. Hier steht ein Beschreibungstext zum Charakter. </div>

    </div>

    <div class="saf_boxb">

        <div class="saf_icon">

            <img src="https://via.placeholder.com/200x100">

        </div>

        <div class="saf_stichpunkte">

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Alter

            </div>

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Beruf

            </div>

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Rasse

            </div>

        </div>

    </div>

</div>

<div class="saf_status">Dieses Gesuch ist <i>frei</i></div>

Einen weiteren Gesuchten mit dem Icon links kannst du mit diesem Codeschnipsel einfügen:

Code:
<div class="saf_links">

    <div class="saf_boxb">

        <div class="saf_icon">

            <img src="https://via.placeholder.com/200x100">

        </div>

        <div class="saf_stichpunkte">

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Alter

            </div>

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Beruf

            </div>

            <div class="saf_short">

                <i class="fa-solid fa-skull"></i> Rasse

            </div>

        </div>

    </div>

CSS (wird nur benötigt, wenn du Bilder/Farben ändern möchtest)

Code:
<style type="text/css">.safbg {width:550px;height:auto;background: url('https://bilgewater-rpg.de/images/gesuch_bg2.png');background-position: center;background-attachment: fixed;padding:20px 10px 20px 10px;box-sizing: border-box;margin:auto;color: #f4f3e6;font-size: 12px;font-family: 'Calibri';text-align: justify;}.safbg b {color: #e1e0dd;background-color: #886A3A;padding: 0px 3px;}.safbg i {color: #b69561;}.safbg u {text-decoration: none;border-bottom: 1px dotted #886a3a;}.safbox1 {display: flex;flex-direction: column;justify-content: center;align-items: center;margin:auto;height:115px;width:50px;background-image: url('https://abload.de/img/bilgewater2s3fba.png');background-size: 120px auto;background-position: center;margin: 20px auto 40px auto;}.safbox1 a {text-decoration: none;}.saf_titel {font-family: 'Afterglow', sans-serif;text-align: center;color:#886a3a;text-transform: uppercase;letter-spacing: 3px;font-size: 40px;height:45px;line-height:40px;background: #886A3A;background: linear-gradient(to top, #886A3A 0%, #b69561 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.saf_untert {font-family: 'Apple Garamond', sans-serif;text-align: center;color:#f4f3e6;text-transform: uppercase;letter-spacing: 4px;font-size: 11px;margin-top:-6px;width:480px;}.saf_text {width:480px;max-height: 200px;overflow: auto;margin: auto;background-color: #00000040;border: 0.5px solid #b6956144;padding:10px;box-sizing: border-box;line-height: 1.4em;margin-top: 20px;}.saf_links, .saf_rechts {display: flex;flex-direction: row;gap: 10px;width: 480px;margin: auto;margin-top: 20px;}.saf_boxa {width:60%;}.saf_name {display: flex;justify-content: center;align-items: center;font-family: 'Afterglow', sans-serif;text-align: center;font-size: 1.3em;text-transform: uppercase;letter-spacing: 2px;color:#b69561;background-color: #00000040;border: 0.5px solid #b6956144;padding:10px;box-sizing: border-box;height: 40px;}.saf_beschr {background-color: #00000040;border: 0.5px solid #b6956144;padding:10px;box-sizing: border-box;margin-top: 5px;height: 155px;overflow: auto;line-height: 1.4em;}.saf_icon {border: 0.5px solid #b6956144;padding: 3px;}.saf_icon img {width:200px; height:100px;}.saf_stichpunkte {width:208px;height: 87px;display: flex;flex-direction: column;justify-content: space-between;margin-top: 5px;}.saf_short {background-color: #00000040;border: 0.5px solid #b6956144;padding: 0px 10px;box-sizing: border-box;}.saf_short i {color: #886A3A;font-size: 0.9em;margin-right: 4px;}.saf_status {width: 480px;margin:auto;background-color: #00000040;border: 0.5px solid #b6956144;padding: 5px 10px;box-sizing: border-box;margin-top: 5px;text-align: center;}.saf_status i {text-transform: uppercase;}</style>

Geschrieben von Jesse Cree - 22.07.2023, 12:35

Code Nummer 3

Beschreibung des Gesuchs

Titel des Gesuchs

Hier steht ein Beschreibungstext zum Gesuch. Fettgeschriebenes sieht so aus, Kursivgeschriebenes sieht so aus und Unterstrichenes sieht so aus.

Name des Charakters

Hier steht eine Beschreibung des Charakters. Fettgeschriebenes sieht so aus, Kursivgeschriebenes sieht so aus und Unterstrichenes sieht so aus.

Vorname Nachname

XY Jahre

Beruf

Der Suchende

Die Gesuchte

Name des Charakters

Hier steht eine Beschreibung des Charakters. Fettgeschriebenes sieht so aus, Kursivgeschriebenes sieht so aus und Unterstrichenes sieht so aus.

Vorname Nachname

XY Jahre

Beruf

HTML:

Code:
<head>

    <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=EB+Garamond&display=swap" rel="stylesheet">

</head>

<div class="ki_balken"></div>

<div class="ki_bg">

    <div class="ki_box1"><div class="ki_backdrop">Beschreibung des Gesuchs</div></div>

    <div class="ki_box2">

        <div class="ki_ubers">Titel des Gesuchs</div>

        <div class="ki_beschr_top">Hier steht ein Beschreibungstext zum Gesuch. <b>Fettgeschriebenes</b> sieht so aus, <i>Kursivgeschriebenes</i> sieht so aus und <u>Unterstrichenes</u> sieht so aus.</div>

    </div>

</div>

<div class="ki_bg2">

    <div class="ki_box2">

        <div class="ki_ubers">Name des Charakters</div>

        <div class="ki_beschr">Hier steht eine Beschreibung des Charakters. <b>Fettgeschriebenes</b> sieht so aus, <i>Kursivgeschriebenes</i> sieht so aus und <u>Unterstrichenes</u> sieht so aus.</div>

        <div class="ki_shortcuts">

            <div class="ki_short" title="Faceclaim"><i class="fa-solid fa-bookmark"></i>Vorname Nachname</div>

            <div class="ki_short" title="Alter"><i class="fa-solid fa-gear"></i>XY Jahre</div>

            <div class="ki_short" title="Beruf"><i class="fa-solid fa-briefcase"></i>Beruf</div>

        </div>

    </div>

    <div class="ki_box4">

        <div class="ki_oben">

            <div class="ki_backdrop2">Der Suchende</div>

        </div>

        <div class="ki_unten">

            <img class="ki_image" src="https://via.placeholder.com/150x90">

        </div>

    </div>

</div>

<div class="ki_bg2">

    <div class="ki_box4">

        <div class="ki_oben">

            <div class="ki_backdrop2">Die Gesuchte</div>

        </div>

        <div class="ki_unten">

            <img class="ki_image" src="https://via.placeholder.com/150x90">

        </div>

    </div>

    <div class="ki_box2">

        <div class="ki_ubers">Name des Charakters</div>

        <div class="ki_beschr">Hier steht eine Beschreibung des Charakters. <b>Fettgeschriebenes</b> sieht so aus, <i>Kursivgeschriebenes</i> sieht so aus und <u>Unterstrichenes</u> sieht so aus.</div>

        <div class="ki_shortcuts">

            <div class="ki_short" title="Faceclaim"><i class="fa-solid fa-bookmark"></i>Vorname Nachname</div>

            <div class="ki_short" title="Alter"><i class="fa-solid fa-gear"></i>XY Jahre</div>

            <div class="ki_short" title="Beruf"><i class="fa-solid fa-briefcase"></i>Beruf</div>

        </div>

    </div>

</div>

<div class="ki_balken2">

    <div id="ki_foru" title="ZUM FORUM"><a href="https://bilgewater-rpg.de/index.php" target="blank"><i class="fa-solid fa-circle-right"></i></a></div>

</div>

Einen weiteren Gesuchten mit dem Icon rechts kannst du mit diesem Codeschnipsel einfügen:

Code:
<div class="ki_bg2">

    <div class="ki_box2">

        <div class="ki_ubers">Name des Charakters</div>

        <div class="ki_beschr">Hier steht eine Beschreibung des Charakters. <b>Fettgeschriebenes</b> sieht so aus, <i>Kursivgeschriebenes</i> sieht so aus und <u>Unterstrichenes</u> sieht so aus.</div>

        <div class="ki_shortcuts">

            <div class="ki_short" title="Faceclaim"><i class="fa-solid fa-bookmark"></i>Vorname Nachname</div>

            <div class="ki_short" title="Alter"><i class="fa-solid fa-gear"></i>XY Jahre</div>

            <div class="ki_short" title="Beruf"><i class="fa-solid fa-briefcase"></i>Beruf</div>

        </div>

    </div>

    <div class="ki_box4">

        <div class="ki_oben">

            <div class="ki_backdrop2">Der Suchende</div>

        </div>

        <div class="ki_unten">

            <img class="ki_image" src="https://via.placeholder.com/150x90">

        </div>

    </div>

</div>

Einen weiteren Gesuchten mit dem Icon links kannst du mit diesem Codeschnipsel einfügen:

Code:
<div class="ki_bg2">

    <div class="ki_box4">

        <div class="ki_oben">

            <div class="ki_backdrop2">Die Gesuchte</div>

        </div>

        <div class="ki_unten">

            <img class="ki_image" src="https://via.placeholder.com/150x90">

        </div>

    </div>

    <div class="ki_box2">

        <div class="ki_ubers">Name des Charakters</div>

        <div class="ki_beschr">Hier steht eine Beschreibung des Charakters. <b>Fettgeschriebenes</b> sieht so aus, <i>Kursivgeschriebenes</i> sieht so aus und <u>Unterstrichenes</u> sieht so aus.</div>

        <div class="ki_shortcuts">

            <div class="ki_short" title="Faceclaim"><i class="fa-solid fa-bookmark"></i>Vorname Nachname</div>

            <div class="ki_short" title="Alter"><i class="fa-solid fa-gear"></i>XY Jahre</div>

            <div class="ki_short" title="Beruf"><i class="fa-solid fa-briefcase"></i>Beruf</div>

        </div>

    </div>

</div>

CSS (wird nur benötigt, wenn Farben/Bilder verändert werden sollen):

Code:
<style type="text/css">:root {--akzentco1: #42a18f;--akzentco2: #f2fefb;--borderr1: #1a40391c;--border2: #5f7d754f;--Schrift: #1a4039;--Schrift2: #a14254;}.ki_balken {width:550px;height:50px;margin:auto;background-color: var(--akzentco1);}.ki_balken2 {display:flex;flex-direction: column;justify-content: center;align-items: center;width:550px;height:50px;margin:auto;background-color: var(--akzentco1);}.ki_balken2 i {color: var(--akzentco2);font-size: 30px;text-decoration: none;}.ki_balken2 i:hover {color: var(--Schrift);}.ki_bg {width:550px;height:225px;background: var(--akzentco2);display: flex;flex-direction: row;justify-content: space-between;margin:auto;padding:10px 15px;box-sizing: border-box;border-bottom: 1px solid var(--border2);}.ki_box1 {display:flex;flex-direction: column;justify-content: center;align-items: center;width:150px;height:200px;border: 1px solid var(--borderr1);background-image: url('https://abload.de/img/gesuchgrossypi5u.png');box-sizing: border-box;}.ki_backdrop {background-color: #ffffff18;width:100px;height:auto;border: 1px solid var(--border2);color: #fff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;text-align: center;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);padding: 5px;box-sizing: border-box;}.ki_box2 {display:flex;flex-direction: column;justify-content: space-between;width:350px;height:200px;border: 1px solid var(--borderr1);background-color: var(--akzentco2);padding:3px 10px 0px 10px;box-sizing: border-box;}.ki_ubers {height:auto;font-family: 'EB Garamond', serif;text-align: center;color: var(--Schrift);font-size: 25px;}.ki_beschr_top {height:155px;background-color: var(--akzentco2);box-sizing: border-box;color: var(--Schrift);font-size: 12px;font-family: Arial, Helvetica, sans-serif;overflow: auto;text-align: justify;line-height: 17px;padding-bottom:15px;}.ki_beschr_top::-webkit-scrollbar {width:0px;}.ki_beschr_top b {background-color: var(--Schrift2);padding:0px 3px;color:#fff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;}.ki_beschr_top i {color: var(--Schrift2);font-size: 12px;font-family: Arial, Helvetica, sans-serif;}.ki_beschr {height:120px;background-color: var(--akzentco2);box-sizing: border-box;color: var(--Schrift);font-size: 12px;font-family: Arial, Helvetica, sans-serif;overflow: auto;text-align: justify;line-height: 17px;}.ki_beschr b {background-color: var(--Schrift2);padding:0px 3px;color:#fff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;}.ki_beschr i {color: var(--Schrift2);font-size: 12px;font-family: Arial, Helvetica, sans-serif;}.ki_beschr::-webkit-scrollbar {width:0px;}.ki_shortcuts {display: flex;flex-direction: row;justify-content: space-around;align-items: center;height:30px;color: var(--Schrift);font-size: 12px;font-family: Arial, Helvetica, sans-serif;}.ki_short i {padding-right:5px;color: var(--Schrift);}.ki_bg2 {width:550px;height:225px;background: var(--akzentco2);display: flex;flex-direction: row;justify-content: space-between;margin:auto;padding:10px 15px;box-sizing: border-box;border-bottom: 1px solid var(--border2);}.ki_box4 {display:flex;flex-direction: column;justify-content: space-around;align-items: center;}.ki_oben {display:flex;flex-direction: column;justify-content: center;align-items: center;width:90px;height:90px;border-radius: 100%;border: 1px solid var(--borderr1);background-image: url('https://abload.de/img/gesuchkleinaqiwf.png');}.ki_unten {width:150px;height:90px;}

.ki_image {width:150px;height:90px;border: 1px solid var(--borderr1);}.ki_backdrop2 {background-color: #ffffff18;width:100px;height:auto;border: 1px solid var(--border2);color: #fff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;text-align: center;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);padding: 5px;box-sizing: border-box;}</style>

Geschrieben von Jesse Cree - 21.07.2023, 15:25

Code Nummer 2

Hier steht ein Titel

Hier kannst du einen Einleitungstext schreiben. Fett geschriebenes sieht so aus, Kursives sieht so aus und Unterstrichenes so.

Der Suchende

Name // Alter // Status

Hier steht ein Text zum suchenden/gesuchten Charakter. Fett geschriebenes sieht so aus, Kursives sieht so aus und Unterstrichenes so.

Die Gesuchten

Name // Alter // Status

Hier steht ein Text zum suchenden/gesuchten Charakter. Fett geschriebenes sieht so aus, Kursives sieht so aus und Unterstrichenes so.

Sonstiges

Hier kannst du einen Abschlusstext schreiben. Fett geschriebenes sieht so aus, Kursives sieht so aus und Unterstrichenes so.

Zum Forum

HTML

Code:
<head>

    <link href="https://fonts.cdnfonts.com/css/afterglow" rel="stylesheet">

    <link href="https://fonts.cdnfonts.com/css/apple-garamond" rel="stylesheet">

</head>

<div class="yasbg">

    <img class="yashead" src="https://via.placeholder.com/510x250">

    <div class="yasline"><h1>Hier steht ein Titel</h1></div>

    <p>Hier kannst du einen Einleitungstext schreiben. <b>Fett geschriebenes</b> sieht so aus, <i>Kursives</i> sieht so aus und <u>Unterstrichenes</u> so.</p>

    <span class="yasline">

        <h1><span>Der Suchende</span></h1>

<div class="yasfamwrap">

    <div class="yasfam">

        <yasfamh1>Name // Alter // Status</yasfamh1>

        <p><img class="yasimgright" src="https://via.placeholder.com/100x100">Hier steht ein Text zum suchenden/gesuchten Charakter. <b>Fett geschriebenes</b> sieht so aus, <i>Kursives</i> sieht so aus und <u>Unterstrichenes</u> so.</p>

    </div>

</div>

    <div class="yasline"><h1>Die Gesuchten</h1></div>

    <div class="yasfamwrap">

    <div class="yasfam">

        <yasfamh1 >Name // Alter // Status</yasfamh1 >

        <p><img class="yasimgright" src="https://via.placeholder.com/100x100">Hier steht ein Text zum suchenden/gesuchten Charakter. <b>Fett geschriebenes</b> sieht so aus, <i>Kursives</i> sieht so aus und <u>Unterstrichenes</u> so.</p>

    </div>

    </div>

    <div class="yasline"><h1>Sonstiges</h1></div>

    <p>Hier kannst du einen Abschlusstext schreiben. <b>Fett geschriebenes</b> sieht so aus, <i>Kursives</i> sieht so aus und <u>Unterstrichenes</u> so.</p>

    <div class="yasadm">

<a href="https://bilgewater-rpg.de/index.php" target="_blank">Zum Forum</a>

    </div>

</div>

Mit diesem Codeschnipsel kannst du einen weiteren Gesuchten einfügen:

Code:
<div class="yasfamwrap">

    <div class="yasfam">

        <yasfamh1>Name // Alter // Status</yasfamh1>

        <p><img class="yasimgright" src="https://via.placeholder.com/100x100">Hier steht ein Text zum suchenden/gesuchten Charakter. <b>Fett geschriebenes</b> sieht so aus, <i>Kursives</i> sieht so aus und <u>Unterstrichenes</u> so.</p>

    </div>

</div>

CSS (wird nur benötigt, wenn du Bilder/Farben ändern möchtest)

Code:
<style type="text/css">:root {--yasborder: #d0a85c;--yash1border: #d0a75c8a; --yasbg: #131420;--yastext: #eeeeee;--yasmainfont: 'Afterglow', sans-serif;--yassubfont: 'Apple Garamond', sans-serif;}.yasbg {width:550px;height:auto;min-height:400px;background-color: var(--yasbg);margin:auto;padding:20px;box-sizing: border-box;}.yasbg p {width:400px;height:auto;margin:auto;font-size: 12px;font-family: 'Calibri';line-height: 20px;color: var(--yastext);text-align: justify;}.yasbg b {background-color: var(--yasborder);text-transform: uppercase;padding: 1px 4px;color: var(--yastext);font-size: 12px;}.yasbg i {color: var(--yasborder);letter-spacing: 1.5px;    }.yasbg u {text-decoration: none;border-bottom: 3px double var(--yasborder);}.yasbg a {text-decoration: none;color: var(--yasborder);font-style: normal;}.yasbg a:hover {transition: 1s;text-decoration: none;color: var(--yastext);text-transform: uppercase;}.yasbg img {pointer-events: none;}.yasimgleft {border: 1px solid var(--yasborder);float: left;margin: 5px 20px 0px 0px;}.yasimgright {border: 1px solid var(--yasborder);float: right;margin: 5px 0px 0px 20px;}.yashead {width:510px;height:250px;border: 2px solid var(--yasborder);}.yasline {display:block; margin:25px 0px;}.yasline h1 {font-size:22px;letter-spacing: 2px;font-family: var(--yassubfont);text-transform: uppercase;color: var(--yasborder);text-align:center; border-bottom:1px solid var(--yash1border);padding: 0px;}.yasfamwrap {position: relative;}.yasfamwrap:before {content: ' ';display: block;position: absolute;top: 0;width: 510px;height: 100%;opacity: 0.5;background-image: url('https://abload.de/img/hintergrundh1fo7.png');background-attachment: fixed;background-size: cover;}.yasfam {width:450px;height:200px;padding: 10px;box-sizing: border-box;margin:10px auto;position: relative;}.yasfam p {max-height: 140px;overflow: auto;}.yasfam p::-webkit-scrollbar {width: 0px;}yasfamh1 {font-size:15px; font-family: var(--yassubfont);text-transform: uppercase;border-bottom: 1px solid var(--yash1border);width: 100%;display: block;}.yasadm {display: flex;flex-direction: row;justify-content: center;color: var(--yastext);font-family: Arial, Helvetica, sans-serif;font-size: 11px;margin: 30px auto;}</style>

Geschrieben von Jesse Cree - 21.07.2023, 13:42

Code Nummer 1

Titel des Gesuchs

Untertitel des Gesuchs

Hier kannst du einen Einleitungstext schreiben. Fett geschriebenes sieht so aus, Kursives sieht so aus und Unterstrichenes so.

Charaktername

Avatar

"Hier kannst du z.B. ein Charakterzitat schreiben"

Shortfact

Hier kannst du einen Text zum Charakter schreiben. Fett geschriebenes sieht so aus, Kursives sieht so aus und Unterstrichenes so.

Charaktername

Avatar

"Hier kannst du z.B. ein Charakterzitat schreiben"

Shortfact

Hier kannst du einen Text zum Charakter schreiben. Fett geschriebenes sieht so aus, Kursives sieht so aus und Unterstrichenes so.

Hier kannst du einen Abschlusstext schreiben. Fett geschriebenes sieht so aus, Kursives sieht so aus und Unterstrichenes so.

Zum Forum

HTML

Code:
<head>

    <link href="https://fonts.cdnfonts.com/css/afterglow" rel="stylesheet">

    <link href="https://fonts.cdnfonts.com/css/apple-garamond" rel="stylesheet">

</head>

<div class="safhg">

<div class="safbox1"><a href="https://bilgewater-rpg.de/index.php" target="_blank">

    <div id="saf_ti">Titel des Gesuchs</div>

    <div class="saf_untert">Untertitel des Gesuchs</div>

</a></div>

<div class="safbox3">Hier kannst du einen Einleitungstext schreiben. <b>Fett geschriebenes</b> sieht so aus, <i>Kursives</i> sieht so aus und <u>Unterstrichenes</u> so.

</div>

[align=center]<h2>Charaktername</h2>[/align]<div class="safnam">Avatar</div><div class="safhr"></div><img class="safimggross" src="https://via.placeholder.com/440x120">

<div class="safzitat">"Hier kannst du z.B. ein Charakterzitat schreiben"</div>

<div class="safbox4">

    <div class="safshort">Shortfact</div>

    <div class="safshort">Shortfact</div>

    <div class="safshort">Shortfact</div>

</div>

<div class="saftext">Hier kannst du einen Text zum Charakter schreiben. <b>Fett geschriebenes</b> sieht so aus, <i>Kursives</i> sieht so aus und <u>Unterstrichenes</u> so.</div>

[align=center]<h2>Charaktername</h2>[/align]<div class="safnam">Avatar</div><div class="safhr"></div><img class="safimggross" src="https://via.placeholder.com/440x120">

<div class="safzitat">"Hier kannst du z.B. ein Charakterzitat schreiben"</div>

<div class="safbox4">

    <div class="safshort">Shortfact</div>

    <div class="safshort">Shortfact</div>

    <div class="safshort">Shortfact</div>

</div>

<div class="saftext">Hier kannst du einen Text zum Charakter schreiben. <b>Fett geschriebenes</b> sieht so aus, <i>Kursives</i> sieht so aus und <u>Unterstrichenes</u> so.</div>

<div class="safbox3">

Hier kannst du einen Abschlusstext schreiben. <b>Fett geschriebenes</b> sieht so aus, <i>Kursives</i> sieht so aus und <u>Unterstrichenes</u> so.

</div>

<div id="saflink"><a href="https://bilgewater-rpg.de/index.php" target="_blank" id="saflink">Zum Forum</a></div>

</div>

Mit diesem Codeschnipsel kannst du einen weiteren Gesuchten einfügen:

Code:
[align=center]<h2>Charaktername</h2>[/align]<div class="safnam">Avatar</div><div class="safhr"></div><img class="safimggross" src="https://via.placeholder.com/440x120">

<div class="safzitat">"Hier kannst du z.B. ein Charakterzitat schreiben"</div>

<div class="safbox4">

    <div class="safshort">Shortfact</div>

    <div class="safshort">Shortfact</div>

    <div class="safshort">Shortfact</div>

</div>

<div class="saftext">Hier kannst du einen Text zum Charakter schreiben. <b>Fett geschriebenes</b> sieht so aus, <i>Kursives</i> sieht so aus und <u>Unterstrichenes</u> so.</div>

CSS (wird nur benötigt, wenn du Bilder/Farben ändern möchtest)

Code:
<style type="text/css">.safhg {width: 500px;height: auto;background-color: #000;background-image: linear-gradient(to bottom, #000000cc, rgba(0, 0, 0, 0)), url('https://bilgewater-rpg.de/images/gesuch_bg.png'); background-size: cover;background-attachment: fixed;padding: 20px 30px;background-position: top center;box-sizing: border-box;margin: auto;}.safbox1 {display: flex;flex-direction: column;justify-content: center;align-items: center;margin:auto;height:95px;background-image:url('https://abload.de/img/bilgewater2fdf8e.png');background-size: 100px auto;background-position: center;background-repeat: no-repeat;}#saf_ti {font-family: 'Afterglow', sans-serif;text-align: center;color:#886a3a;text-transform: uppercase;letter-spacing: 3px;font-size: 20px;background: linear-gradient(to top, #886A3A 0%, #b69561 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: bold;}.saf_untert {font-family: 'Apple Garamond', sans-serif;text-align: center;color:#f4f3e6;text-transform: uppercase;letter-spacing: 4px;font-size: 11px;margin-top:-4px;width:480px;}.safbox1 a {text-decoration: none;}.safbox2 {display: flex;flex-direction: row;justify-content: space-evenly;flex-wrap: wrap;max-width:200px;height:auto;margin:15px auto 0px auto;}.img_box2 {width:30px;height:30px;margin:1px;opacity: 0.5;}.img_box2:hover {border:0.5px solid #af8f5b;opacity: 1;}.safnam {font-family: 'Apple Garamond', sans-serif;text-align: center;color:#f4f3e6;text-transform: uppercase;letter-spacing: 4px;font-size: 11px;width:100%;margin:-6px 0px 10px 0px;}.safbox3 {width:100%;max-height:150px;background-color: #00000071;margin:10px 0px;font-family: Calibri;font-size: 12px;line-height: 18px;padding:10px;box-sizing: border-box;color: #fff;text-align: justify;overflow: auto;}.safbox3 b, .saftext b {background-color: #886A3A;padding: 1px 4px;}.safbox3 i, .saftext i {font-family: apple garamond light;color:#f4f3e6;text-transform: uppercase;letter-spacing: 4px;font-size: 12px;}.safbox3 u, .saftext u {color: #b69561;}.safbox3 a, .saftext a {color: #0490a9;text-transform: uppercase;text-decoration: none;}.safbox3::-webkit-scrollbar, .saftext::-webkit-scrollbar {width: 0px;}.safimggross {margin: 0px 0px 2px 1px;width: 438px;height:150px;opacity: 0.5;}.safhr {background-image: url("https://abload.de/img/trennstrichv2ec1.png");background-size: 440px auto;width:438px;height:20px;margin: 10px 0px;}.safheadl {font-family: 'Afterglow', sans-serif;text-align: center;margin-top: 20px;color:#886a3a;text-transform: uppercase;letter-spacing: 3px;font-size: 25px;background: linear-gradient(to top, #886A3A 0%, #b69561 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: bold;display:block;}.safzitat {margin: 0px auto 1px auto;background-color: #1d1d1de3;font-family: Calibri;font-size: 12px;color: #af8f5b;text-align: center;padding: 15px 10px;font-style: italic;width: 438px;box-sizing: border-box;}.safbox4 {display:flex;flex-direction: row;flex-wrap: wrap;flex-grow: inherit;justify-content: center;width:440px;height:auto;}.safshort {flex-grow: 2;background-color: #1d1d1de3;font-family: Calibri;text-align: center;font-size: 12px;color: #af8f5b;padding:10px 50px;margin:1px;}.saftext {width:438px;max-height:150px;background-color: #1d1d1de3;font-family: Calibri;font-size: 12px;color: #fff;padding:10px;line-height: 18px;text-align: justify;box-sizing: border-box;margin:1px auto 20px auto;overflow: auto;}#saflink {display:flex;flex-direction: column;justify-content: center;align-items: center;width: 120px;height:40px;background-color: rgba(29, 29, 29, 0.89);margin:auto;font-family: apple garamond light;color:#886A3A;text-transform: uppercase;letter-spacing: 4px;font-size: 14px;font-weight: bold;background: linear-gradient(rgba(29,29,29,0.89), rgba(29,29,29,0.89)) 50% 50%/calc(100% - 2px)calc(100% - 2px) no-repeat,linear-gradient(47deg, #4e412d 0%, #c5a067 100%);border-radius: 0px;box-sizing: border-box;}#saflink a {text-decoration: none;}</style>

Geschrieben von Jesse Cree - 20.07.2023, 12:47

Codes für Gesuche

Hier haben wir eine kleine Auswahl an Codes für Gesuche zusammengestellt. Für diese Codes bieten wir einen Support an und unterstützen dich gerne, wenn es zu Anzeigefehlern kommt. Solltest du einen anderen, eigenen Code für ein Gesuch verwenden wollen, dann kannst du dies gerne tun, aber hier solltest du bei Problemen bitte denjenigen ansprechen, der den Code auch geschrieben hat.

Um einen von uns bereitgestellten Code zu verwenden kopiere einfach den HTML-Part. Füge (falls nötig) weitere Gesuchte mit dem entsprechenden Codeschnipsel hinzu. Sag gerne Bescheid, wenn du dabei Hilfe benötigen solltest. Den CSS Part brauchst du nur, wenn du Hintergrundfarben und -bilder verändern möchtest.

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken