Sans Magische Ecke

Hello Friends

hier poste ich mal ein paar Codes zum teilen und nutzen <3

Kurzübersicht
Gesuchscode
Szenenüberschriften

Gesuchscode

ich bring euch heute als erstes meinen Gesuchscode mit, den ihr gerne nutzen könnte. Wenn ihr das Icon oben ändern wollt, dann einfach diese Zeile hier entsprechend anpassen wie bspw. iconnacht

Code:

<img src="https://in-revery.de/images/lexikon/icontag.png" class="rev_logo">

Wie ändere ich die Farbe vom Strich und dem, was grade gelb ist?
ganz oben findet ihr: accent:#d7b56d dort ändert ihr einfach hinten den hexcode ab:
sommer: #1f8591
frühling: #6b9939
herbst: #976a30
winter: #7e969d
mitte: #898989
nacht: #7959b5
tag: #bf9e1f
morgen: #b58098

Gesuch · Hof des Tages

the history
between us

this is not a love story

Worum geht es?

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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Every story begins with the ones who are still missing.

Gesuchte Charaktere 0 / 1 vergeben

Frei

Vorname Nachname

"Untertitel oder so was."

xx Jahre · xx Fae · Hof des xxx

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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Suchende Charaktere

Vorname Nachname

"Untertitel oder so was."

xx Jahre · xx Fae · Hof des xx

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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Zum Abschluss

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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Code:

<style>#rev_wanted{--bg:#20192f;--card:#f5f2ec;--text:#2d2935;--muted:#756f82;--accent:#d7b56d;--primary:#312849;max-width:650px;margin:40px auto;background:radial-gradient(circle at top, rgba(215,181,109,.22), transparent 34%),linear-gradient(135deg, var(--primary), var(--bg));border-radius:8px;overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.35);font-family:Tahoma,Verdana,Arial,sans-serif;}.rev_hero{min-height:250px;padding:42px;text-align:center;color:#f4f0ff;display:grid;place-content:center;justify-items:center;gap:14px;}.rev_kicker,.rev_profile span,.rev_state{text-transform:uppercase;letter-spacing:2px;}.rev_kicker{font-size:10px;color:var(--accent);}.rev_logo{width:92px;opacity:.72;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));}.rev_hero h1,.rev_hero p,.rev_card h2,.rev_profile h3,.rev_quote,.rev_sectiontitle{font-family:Georgia,serif;}.rev_hero h1{margin:0;font-size:40px;line-height:.9;letter-spacing:-1px;text-transform:uppercase; font-weight: bold; color: #fff;text-decoration: none;}.rev_hero p,.rev_quote,.rev_sectiontitle{font-style:italic;}.rev_hero p{margin:0;color:#d9d4e5;}.rev_card,.rev_stats,.rev_sectiontitle{margin:0 28px 28px;}.rev_card,.rev_stats,.rev_profile img{border-radius:6px;}.rev_card{padding:34px;background:var(--card);color:var(--text);line-height:1.75;text-align:justify;border:1px solid rgba(49,40,73,.16);box-shadow:0 6px 18px rgba(0,0,0,.08);position:relative;}.rev_card:before{content:"";position:absolute;inset:10px;border:1px solid rgba(49,40,73,.08);pointer-events:none;}.rev_card h2{margin:0 0 20px;padding-left:12px;border-left:3px solid var(--accent);color:var(--primary);font-size:16px;letter-spacing:3px;text-transform:uppercase; background: none; filter: none;}.rev_card p{margin:0;font-size:12px;}.rev_stats{position:relative;overflow:hidden;padding:18px 24px;display:flex!important;justify-content:space-between!important;align-items:center;box-sizing:border-box;color:#f4f0ff;background:var(--primary);border:1px solid rgba(215,181,109,.18);text-transform:uppercase;letter-spacing:1.5px;font-size:11px;}.rev_stats:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(49,40,73,.82), rgba(49,40,73,.82)),url("https://in-revery.de/images/gesuchheader2.png") center/cover no-repeat;pointer-events:none;}.rev_stats span,.rev_stats strong{position:relative;z-index:2;}.rev_stats strong,.rev_sectiontitle{color:var(--accent);}.rev_profile{display:flex;gap:24px;align-items:flex-start;position:relative;z-index:1;}.rev_profile img{width:120px;height:120px;object-fit:cover;flex-shrink:0;border:1px solid rgba(49,40,73,.14);box-shadow:0 10px 24px rgba(0,0,0,.18);}.rev_profile h3{margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid rgba(49,40,73,.15);color:var(--primary);font-size:23px;text-transform:uppercase;}.rev_quote{margin:8px 0 12px;color:#b69556;font-size:15px;letter-spacing:.4px;}.rev_profile span{display:block;margin:5px 0 14px;color:var(--muted);font-size:10px;letter-spacing:1.5px;}.rev_state{display:inline-block;margin:0 0 24px;padding:7px 14px;border-radius:3px;font-size:10px;font-weight:bold;}.rev_state.frei{background:#efe3c5;color:#8d6c2d;}.rev_state.reserviert{background:#d8e6f4;color:#466d97;}.rev_state.vergeben{background:#e4d1d1;color:#874848;}.rev_sectiontitle{position:relative;margin-top:40px;text-align:center;font-size:10px;letter-spacing:1px;text-transform:lowercase;}.rev_sectiontitle:before,.rev_sectiontitle:after{content:"";position:absolute;top:50%;width:20%;height:1px;background:rgba(215,181,109,.35);}.rev_sectiontitle:before{left:0;}.rev_sectiontitle:after{right:0;}@media (max-width:640px){#rev_wanted{margin:20px auto;border-radius:6px}.rev_hero,.rev_card{padding:28px}.rev_profile{flex-direction:column}.rev_profile img{width:100%;height:180px}}</style> <div id="rev_wanted"><div class="rev_hero"><div class="rev_kicker">Gesuch · Hof des Tages</div> <img src="https://in-revery.de/images/lexikon/icontag.png" class="rev_logo"><h1>the history between us</h1><p>this is not a love story</p></div> <div class="rev_card"> <h2>Worum geht es?</h2> <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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div> <div class="rev_sectiontitle"> Every story begins with the ones who are still missing.</div> <div class="rev_stats" style="justify-content: space-between !important;"><span>Gesuchte Charaktere</span> <strong>0 / 1 vergeben</strong></div> <div class="rev_card"> <div class="rev_state frei">Frei</div> <div class="rev_profile"> <img src="https://in-revery.de/images/gesuchgif2.gif"> <div> <h3>Vorname Nachname</h3> <div class="rev_quote"> "Untertitel oder so was." </div> <span>xx Jahre · xx Fae · Hof des xxx</span> <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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div> </div> </div> <div class="rev_stats"> <span>Suchende Charaktere</span> </div> <div class="rev_card"> <div class="rev_profile"> <img src="https://in-revery.de/images/gesuchgif1.gif"> <div> <h3>Vorname Nachname</h3> <div class="rev_quote"> "Untertitel oder so was." </div> <span>xx Jahre · xx Fae · Hof des xx</span> <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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div> </div> </div> <div class="rev_card"> <h2>Zum Abschluss</h2> <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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div> </div>

Szenenüberschriften

Raise a glass for everyone» Wichtel I & Wichtel II

» Nordpol » 24. Dezember 2021 » Abends

Code:

<link href="https://fonts.googleapis.com/css2?family=Karla&family=Staatliches&display=swap" rel="stylesheet"> <style type="text/css">#scenenrbg {width:500px;margin:auto; font-family: 'Karla', sans-serif;}/* */#scenenrbg .imgcont {width: 500px;text-align:center;margin-top:15px;}/* */#scenenrbg .imgcont img {height:100px;width:100px; border: 1px solid #d59e31; padding:5px; margin-left:10px;} */.scenenrtitel {display: block;line-height: 150%;text-align: left;padding: 25px;}/* */.scenenrtitel titel {font-family: 'Staatliches', cursive; font-size: 30px;text-transform:uppercase;letter-spacing:1px; display: block;position: relative;text-align:left;color:#d59e31;}/* */.scenenrtitel subtitel {display: grid;grid-template-columns: fit-content(100%) 1fr;grid-gap: 25px;width: 100%;line-height: 100%;}/* */.scenenrtitel subtitel lycri{display: block;font-size: 11px; font-weight: 500;letter-spacing: 1.5px;text-transform: uppercase; margin-top:5px;}/* */.scenenrtitel subtitel line {display: block;vertical-align: middle; width: 100%; height: 2px; background: #d59e31; margin-top:15px;}/* */.scenenrutitel {font-size: 11px;text-align:center;}</style> <div id="scenenrbg"> <div class="scenenrtitel"> <titel>Raise a glass for everyone</titel><subtitel><lycri>» Wichtel I & Wichtel II</lycri><line></line></div> <div class="imgcont"> <img src="https://hollow-art.com/files/bases/hollowart_baubles025.jpg"> <img src="https://hollow-art.com/files/bases/hollowart_baubles024.jpg"> </div> <div class="scenenrutitel">» Nordpol » 24. Dezember 2021 » Abends </div> </div>

Szenenüberschrift #2

Wenn die Fähigkeit flöten geht

Jamie & Charlotte | Bibliothek Seven Oaks | 25.07.2024

Code:

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sacramento" rel="stylesheet"> <style type="text/css">#sanuebers {width:400px;margin:auto}/* */.sanuebers1 {font-family: 'Sacramento', cursive; font-size: 40px; color:#5F4B73;text-align:center;line-height: 25px;}/* */.sanuebersdiv1 {background:#958DA6;height:10px;width:130px;float:left;}/* */.sanuebersdiv2 {background:#D8D4DA;height:10px;width:140px;float:left;}/* */.sanuebersdiv3 {background:#958DA6;height:10px;width:130px;float:left;}/* */.sanuebers2 {font-family: 'Open Sans Condensed', sans-serif; font-size: 12px; color:#312B3E;text-align:center;text-transform: uppercase;letter-spacing: 2px;}/* </style> <div id="sanuebers"> <div class="sanuebers1">Wenn die Fähigkeit flöten geht</div> <div class="sanuebersdiv1"></div><div class="sanuebersdiv2"></div><div class="sanuebersdiv3"></div> <div class="sanuebers2">Jamie & Charlotte | Bibliothek Seven Oaks | 25.07.2024</div> </div>

Szenenüberschrift #3

Szenentitel

Chara(Wichtel)namen Ort (Weihnachtswerkstatt)
Datum Tageszeit Wichteloutfit

Code:

<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Open+Sans" rel="stylesheet"> <style type="text/css">#sgaduebers {width:400px;margin:auto}/* */.sgaduebers1 {font-family: 'Amatic SC', cursive; font-size: 40px; text-align:center;line-height: 30px;color:#317ea1;}/* */.sgaduebersdiv {background:#000;height:2px;width:400px;margin: 5px auto;}/* */.sgaduebers2 {font-family: 'Open Sans', sans-serif; font-size: 11px; text-align:center;text-transform: uppercase;letter-spacing: 2px;line-height: 10px;}/* </style> <div class="sgaduebers1">Szenentitel</div> <div class="sgaduebersdiv"></div> <div class="sgaduebers2"><i class="fa fa-user" aria-hidden="true"></i> Chara(Wichtel)namen <i class="fa fa-map-marker" aria-hidden="true"></i> Ort (Weihnachtswerkstatt)<br> <i class="fas fa-calendar-alt"></i> Datum <i class="fa fa-hourglass-start" aria-hidden="true"></i> Tageszeit <i class="fas fa-tshirt"></i> [url=LINK ZUM OUTFIT]Wichteloutfit[/url]</div>