GESUCHSVORLAGE I
Dieser Gesuchscode kann entweder für Einzelgesuch oder für Gruppengesuch genutzt werden. Du kannst ihn natürlich an deine Bedürfnisse anpassen. Sollte sich der Code nach Eingabe deiner Daten verschieben, prüfe ob alle Divs richtig geschlossen sind. Den kompletten Code findest du
ganz unten.
### INHALTLICHE ANPASSUNG
In der Codevorlage sind bereits zwei Codeblöcke vorhanden: einmal mit Avatar links und einmal mit Avatar rechts. Du kannst beliebig viele Blöcke untereinander setzen, sie entweder mischen oder auch nur auf einer Seite nutzen. Die vollständigen Codeblöcke findest du hier. Damit sie im salbei-grünen Hintergrund stehen müssen sie immer in dem Div-Tag "ifgesuch_content" steht. Folglich muss hinter dem allerletzten Codeblock auch immer ein zusätzliches Div geschlossen werden (im Originalcode natürlich schon erhalten).
Codeblock mit Avatar links
<div class="ifgesuch_content_sideflex_left"><div class="ifgesuch_content_sideava_left"><img src="https://lettersfromjane.de/imagesagony/gesuche/if_gesuch_img2.png" class="ifgesuch_content_sideavaimg"></div><div class="ifgesuch_content_sidetitle_left">NAME DES SUCHENDEN
<div class="ifgesuch_content_sidetitlesmall_left">SUCHT # XX Jahre # GESELLSCHAFTSSCHICHT</div></div></div>
<div class="ifgesuch_content_sidetext_left">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.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
</div>
<div class="ifgesuch_content_sideflex_right"><div class="ifgesuch_content_sidetitle_right">Name des Suchenden
<div class="ifgesuch_content_sidetitlesmall_right">SUCHT # XX Jahre # GESELLSCHAFTSSCHICHT</div></div><div class="ifgesuch_content_sideava_right"><img src="https://lettersfromjane.de/imagesagony/gesuche/if_gesuch_img2.png" class="ifgesuch_content_sideavaimg"></div></div>
<div class="ifgesuch_content_sidetext_right">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.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
</div>
Um die Farben anzupassen kannst du einfach in der ersten Zeile unter :root den Farbcode ersetzten. Hier siehst du für was welche Variable steht.
--col_1 - Hintergrundfarbe hell
--col_2 - Hintergrundfarbe salbei
--colfont_1 - Schriftfarbe
--colfont_2 - Linkfarbe
--colfont_3 - Linkhoverfarbe
Für alle weiteren Anpassungen müsste ihr dann selbst im Stylesheet suchen.
Bildergrößen: Großer Icon: 250x250px | kleiner Icon: 100x100px
Sind sie größer werden sie automatisch skaliert, sind sie nicht quadratisch verzerren sie entsprechend. Wenn du keine eigenen Bilder verwenden möchtest, darfst du die Platzhalterbilder von uns natürlich beibehalten.
ich suchte dich und fand nur mich
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.
# XX Jahre # Gesellschaftsschicht # FC-Vorschlag
NAME DES SUCHENDEN
SUCHT # XX Jahre # GESELLSCHAFTSSCHICHT
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.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
Name des Suchenden
SUCHT # XX Jahre # GESELLSCHAFTSSCHICHT
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.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
aus welchen fängen muss ich dich befreien?
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.
<style>:root { --col_1: #f3efeb; --col_2:#b0bfbb; --colfont_1:#2f3a36; --colfont_2:#525a58; --colfont_3:#7b918b;} .ifgesuch_around {width: 460px; margin: auto; background: var(--col_1); height: auto; font-size: 12px; letter-spacing: 0.3pt; text-align: justify; padding: 20px 20px 50px 20px; line-height: 16px; font-family: 'Times New Roman'; color: var(--colfont_1);} .ifgesuch_around a:link, .ifgesuch_around a:visited {color: var(--colfont_3); text-transform: uppercase;} .ifgesuch_around a:hover {color: var(--colfont_2); text-transform: uppercase;} .ifgesuch_content {background: var(--col_2); margin: -70px 0px 20px 0px; padding: 90px 20px 40px 20px; } .ifgesuch_ava {width: 250px; height: 250px; margin: auto; padding-top: 30px;} .ifgesuch_avaimg {border: #fff solid 1px; padding: 10px; border-radius: 200px; width: 220px; height: 220px;} .ifgesuch_content_title { text-transform: lowercase; font-weight: bold; text-align: center; margin: 5px 20px 0px 20px; letter-spacing: 1pt; } .ifgesuch_content_title_line { border-bottom: 1px solid #000; padding: 0px 0px 5px 0px; } .ifgesuch_content_facts { text-align: center; margin: 10px; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5pt;} .ifgesuch_linklist {display: flex; text-align: center; padding: 40px 0px 0px 0px; justify-content: center; gap: 20px;} .ifgesuch_link a {text-transform: uppercase; text-decoration: none; color: var(--colfont_1); letter-spacing: 1pt; font-size: 10px; font-weight: bold; border-top: 1px solid var(--colfont_1); border-bottom: 1px solid var(--colfont_1); padding: 5px;} .ifgesuch_link a:hover {color: var(--colfont_2);} .ifgesuch_content_sideflex_left {display: flex; align-items: center; margin: 20px 0px 0px 0px;} .ifgesuch_content_sideavaimg {border: #fff solid 0px; border-radius: 200px; width: 100px; height: 100px; border: #fff solid 1px; padding: 8px;} .ifgesuch_content_sidetitle_left {padding: 0px 10px 0px 10px; text-transform: uppercase; letter-spacing: 2pt; text-align: left;} .ifgesuch_content_sidetitlesmall_left {font-size: 9px; letter-spacing: 1pt;} .ifgesuch_content_sidetext_left {margin-top: -30px; padding: 0px 0px 0px 120px; font-size: 12px; text-align: justify; letter-spacing: 0.5pt; line-height: 16px; color: var(--colfont_1);} .ifgesuch_content_sideflex_right {display: flex; align-items: center; margin: 20px 0px 0px 10px;} .ifgesuch_content_sidetitle_right {padding: 0px 10px 0px 10px; text-transform: uppercase; letter-spacing: 2pt; text-align: right; width: 100%;} .ifgesuch_content_sidetitlesmall_right {font-size: 9px; letter-spacing: 1pt;} .ifgesuch_content_sidetext_right {margin-top: -30px; padding: 0px 120px 0px 0px; font-size: 12px; text-align: justify; letter-spacing: 0.5pt; line-height: 16px;} </style>
<div class="ifgesuch_around">
<div class="ifgesuch_ava"><img src="https://lettersfromjane.de/imagesagony/gesuche/if_gesuch_img1.png" class="ifgesuch_avaimg"></div>
<div class="ifgesuch_content">
<div class="ifgesuch_content_title">ich suchte dich und fand nur mich
<div class="ifgesuch_content_title_line"></div></div>
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.
<div class="ifgesuch_content_facts"># XX Jahre # Gesellschaftsschicht # FC-Vorschlag</div>
<div class="ifgesuch_content_sideflex_left"><div class="ifgesuch_content_sideava_left">
<img src="https://lettersfromjane.de/imagesagony/gesuche/if_gesuch_img2.png" class="ifgesuch_content_sideavaimg"></div><div class="ifgesuch_content_sidetitle_left">NAME DES SUCHENDEN
<div class="ifgesuch_content_sidetitlesmall_left">SUCHT # XX Jahre # GESELLSCHAFTSSCHICHT</div></div></div>
<div class="ifgesuch_content_sidetext_left">
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.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
</div>
<div class="ifgesuch_content_sideflex_right"><div class="ifgesuch_content_sidetitle_right">Name des Suchenden
<div class="ifgesuch_content_sidetitlesmall_right">SUCHT # XX Jahre # GESELLSCHAFTSSCHICHT</div></div><div class="ifgesuch_content_sideava_right">
<img src="https://lettersfromjane.de/imagesagony/gesuche/if_gesuch_img2.png" class="ifgesuch_content_sideavaimg"></div></div>
<div class="ifgesuch_content_sidetext_right">
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.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
</div></div>
<div class="ifgesuch_content_title">aus welchen fängen muss ich dich befreien?
<div class="ifgesuch_content_title_line"></div></div>
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.
<div class="ifgesuch_linklist">
<div class="ifgesuch_link"><a href="https://lettersfromjane.de/">Forum</a></div>
<div class="ifgesuch_link"><a href="https://discord.com/invite/3mtzrjR">Discord</a></div>
<div class="ifgesuch_link"><a href="https://lettersfromjane.de/forumdisplay.php?fid=8">Gesuch</a></div>
</div>
</div>
