17.11.2023, 11:28
Gesuchsvorlage - Profi
Überschrift
Name | Alter | GesichtLorem 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.
Gesucht
Mr. X
Name | Alter | GesichtLorem 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.
Ms. X
Reserviert
Name | Alter | GesichtLorem 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.
Gefunden
Ms. Z
Name | Alter | GesichtLorem 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.
es sucht
Vergangenheit: 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,Zukunft: 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 Der Spieler im Hintergrund:justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Code:
<div class="mc">
<div class="mc_up">
<div class="mchl">Überschrift</div>
</div>
<div class="mcs1">
<div class="mcspic1"style="background-image:url('https://assets-global.website-files.com/62ee0bbe0c783a903ecc0ddb/6472b9173903396dec0f668a_Flaunt%2BMagazine%2B-%2Blewis%2Btan%2B-b.jpeg');filter: sepia(0.3);"></div>
<div class="mcs_txt"><b>Name | Alter | Gesicht</b>Lorem ipsum dolor sit amet, consetetur <i>sadipscing </i>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>
<div class="mcs_downl"><span style="color:var(--mcc2)">Gesucht</span></div>
<div class="mcs_downr">Mr. X</div>
</div>
<div class="mchlz"><div class="mchlz_1"><div class="mc_b1"></div>
<div class="mc_b2"></div>
<div class="mc_b3"></div></div></div>
<div class="mcs2">
<div class="mcs2_txt"><b>Name | Alter | Gesicht</b>Lorem ipsum dolor sit amet, consetetur <i>sadipscing </i>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>
<div class="mcs2_downl">Ms. X</div>
<div class="mcspic2" style="background-image:url('https://emma-stone.com/wp-content/uploads/2019/01/2019VOGUE.png');filter: sepia(0.3) grayscale(200%) brightness(1.25);"></div>
<div class="mcs2_downr"><span style="color:var(--mcc4)">Reserviert</span></div>
</div>
<div class="mchlz"><div class="mchlz_2"><div class="mc_b1"></div>
<div class="mc_b2"></div>
<div class="mc_b3"></div></div></div>
<div class="mcs1">
<div class="mcspic1"style="background-image:url('https://music-b26f.kxcdn.com/wp-content/uploads/2022/09/PPT-Gus-Black-3-cropped-770x470.jpg');filter: sepia(0.3) grayscale(200%) brightness(1.25);"></div>
<div class="mcs_txt"><b>Name | Alter | Gesicht</b>Lorem ipsum dolor sit amet, consetetur <i>sadipscing </i>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>
<div class="mcs_downl"><span style="color:var(--mcc3)">Gefunden</span></div>
<div class="mcs_downr">Ms. Z</div>
</div>
<div class="mchlz"><div class="mchlz_3"><div class="mc_b1"></div>
<div class="mc_b2"></div>
<div class="mc_b3"></div></div></div>
<div class="mcs2">
<div class="mcs2_txt"><b>Name | Alter | Gesicht</b>Lorem ipsum dolor sit amet, consetetur <i>sadipscing </i>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>
<div class="mcs2_downl">es sucht</div>
<div class="mcspic2" style="background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgaYf826kzoGJwpa7mhO-1I1xO3SPDO6OhJWdQZk_srcI-deYFPgdQUDLSdsTTn3V-kBw&usqp=CAU');filter: sepia(0.3) grayscale(200%) brightness(1.25);"></div>
<div class="mcs2_downr"><span style="color:var(--mcc4)"></span></div>
</div>
<div class="mchlz"><div class="mchlz_4">
<div class="mc_b1"></div>
<div class="mc_b2"></div>
<div class="mc_b3"></div> </div>
</div>
<div class="mcqa"><b>Vergangenheit:</b> 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,<b>Zukunft:</b> 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 <b>Der Spieler im Hintergrund:</b>justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="mccopy"><a href="https://storming-gates.de/member.php?action=profile&uid=779">© tao</a></div>
</div>
<style>@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&family=Shrikhand&display=swap');:root{--mcmf:'Shrikhand',serif;--mcsf:'Montserrat',sans-serif;--mcc1:#5e412f;/*dunkel*/--mcc2:#fcebb6;/*weiß*/--mcc21:rgb(252,235,182,0.7);--mcc22:rgb(252,235,182,0.1);--mcc3:#78c0a8;/*blau*/--mcc4:#f07818;/*orange*/--mcc5:#0f0906;/*schrift*/}.mc{background:var(--mcc1);width:500px;margin:auto;font-family:var(--mcsf);font-size:10px;padding:5px;color:var(--mcc5)}.mc b{background:var(--mcc4);margin:2px;padding:2px;font-weight:900}.mc i{background:var(--mcc3);margin:2px;padding:2px}.mcspic1{grid-area:1 / 1 / 3 / 2;width:280px;height:200px;background-size:cover}.mcspic2{grid-area:1 / 2 / 3 / 2;width:280px;height:200px;background-size:cover}.mcs2_txt::-webkit-scrollbar{width:6px}.mcs2_txt::-webkit-scrollbar-thumb{background:var(--mcc3)}.mcs2_txt::-webkit-scrollbar-track{background:var(--mcc2)}.mcs_txt::-webkit-scrollbar{width:6px}.mcs_txt::-webkit-scrollbar-thumb{background:var(--mcc3)}.mcs_txt::-webkit-scrollbar-track{background:var(--mcc2)}.mc_up{background:var(--mcc21);margin-bottom:10px}.mchl{font-family:var(--mcmf);font-size:64px;text-align:center;line-height:180px;color:var(--mcc1)}.mcs1{background:var(--mcc21);margin:5px 0;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,auto);grid-column-gap:0;grid-row-gap:0;padding:2px}.mcs_txt{grid-area:1 / 2 / 2 / 3;height:140px;overflow:auto;padding:2px;margin:2px;text-align:justify;line-height:18px}.mcs_downl{grid-area:2 / 1 / 3 / 2;z-index:1;font-family:var(--mcmf);font-size:32px;text-align:center;text-shadow:-5px 0 3px var(--mcc5)}.mcs_downr{grid-area:2 / 2 / 3 / 3;font-family:var(--mcmf);font-size:32px;text-align:center;color:var(--mcc1)}.mcs2{background:var(--mcc21);margin:5px 0;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,auto);grid-column-gap:0;grid-row-gap:0;padding:2px}.mcs2_txt{grid-area:1 / 1 / 2 / 2;height:140px;overflow:auto;padding:2px;margin:2px;text-align:justify;line-height:18px}.mcs2_downl{grid-area:2 / 1 / 3 / 2;font-family:var(--mcmf);font-size:32px;text-align:center;color:var(--mcc1)}.mcs2_downr{grid-area:2 / 2 / 3 / 3;z-index:1;font-family:var(--mcmf);font-size:32px;text-align:center;color:var(--mcc4);text-shadow:-5px 0 3px var(--mcc5)}.mchlz{height:30px}.mcqa{background:var(--mcc21);margin:5px 0;padding:8px;text-align:justify;line-height:18px}.mccopy{text-align:center}.mccopy a{text-decoration:none;color:var(--mcc21)}.mc_b1{background:var(--mcc2);width:30px;height:22px;transform:rotate(100deg);float:left}.mc_b2{background:var(--mcc3);width:30px;height:22px;transform:rotate(100deg);float:left}.mc_b3{background:var(--mcc4);width:30px;height:22px;transform:rotate(100deg);float:left}.mchlz_1{margin:15px 0 0 50px}.mchlz_2{margin:15px 0 0 150px}.mchlz_3{margin:15px 0 0 350px}.mchlz_4{margin:15px 0 0 250px}</style>
Wenn ihr diesen Code verwenden wollt, er ist ein wenig tricky... Also nichts für Anfänger.
Wie immer sind die Farben im :root hinterlegt. Ihr könnt sie gerne austauschen.
Code:
--mcc1:#5e412f;/*dunkel*/
--mcc2:#fcebb6;/*weiß*/
--mcc21:rgb(252,235,182,0.7);
--mcc22:rgb(252,235,182,0.1);
--mcc3:#78c0a8;/*blau*/
--mcc4:#f07818;/*orange*/
--mcc5:#0f0906;/*schrift*/
Wenn ihr jemanden gefunden habt, Reservieren wollt dann in diesem Teil die Zahl für die Farbe austauschen:
Code:
<span style="color:var(--mcc3)">Gefunden</span>
Um die Zwischenzeile ein zu fügen, diesen Code einfügen. Wenn ihr die 3 in mchlz_ ändert, ändern sich auch die Punkte (1-4)
Code:
<div class="mchlz"><div class="mchlz_3"><div class="mc_b1"></div>
<div class="mc_b2"></div>
<div class="mc_b3"></div></div></div>
Ihr wollt ein Kästchen hinzu?
Foto Links:
Code:
<div class="mcs1">
<div class="mcspic1"style="background-image:url('https://assets-global.website-files.com/62ee0bbe0c783a903ecc0ddb/6472b9173903396dec0f668a_Flaunt%2BMagazine%2B-%2Blewis%2Btan%2B-b.jpeg');filter: sepia(0.3);"></div>
<div class="mcs_txt"><b>Name | Alter | Gesicht</b>Lorem ipsum dolor sit amet, consetetur <i>sadipscing </i>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>
<div class="mcs_downl"><span style="color:var(--mcc2)">Gesucht</span></div>
<div class="mcs_downr">Mr. X</div>
</div>
Foto Rechts:
Code:
<div class="mcs2">
<div class="mcs2_txt"><b>Name | Alter | Gesicht</b>Lorem ipsum dolor sit amet, consetetur <i>sadipscing </i>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>
<div class="mcs2_downl">Ms. X</div>
<div class="mcspic2" style="background-image:url('https://emma-stone.com/wp-content/uploads/2019/01/2019VOGUE.png');filter: sepia(0.3) grayscale(200%) brightness(1.25);"></div>
<div class="mcs2_downr"><span style="color:var(--mcc4)">Reserviert</span></div>
</div>
Sooo kommen wir zu den Bildern...
Bei jedem Block ist das bild im style Tag eingefügt. Jedes Bild hat einen Filter mit dabei. Damit habe ich sie angepasst, dass sie schier gleich aussehen. Was genau welcher Filter kann und um ein wenig zu testen, hab ich hier eine Kleinigkeit vorbereitet Taos Foto Versuch