Gesuchsvorlage

Gesuchsvorlage

Wir werden hier eine kleine Vorlage rein stellen, doch ihr könnt euch in den Weiten der Coder umsehen und alles verwenden, was euch glücklich macht.
Ihr seid für euren Code selbst verantwortlich und wenn er nicht funktioniert, müsst ihr euch selbst darum kümmern.

titel

fly me to neverland

Gesucht wird XYZ

XZ Jahre alt ♣ Beruf ♣ sieht aus wie

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 f

Es sucht XYZ

XZ Jahre alt ♣ Beruf ♣ sieht aus wie

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 f

Vergangenheit / Zukunft

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 f

Der klägliche Rest

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 f

Code:

<div class="umss_box"><div class="umss_header"><div class="umss_main">titel</div>
    <div class="umss_subt">fly me to neverland</div></div>
  <div class="umss_such"><div class="umss_img" style="background-image:url('https://via.placeholder.com/100x150"></div>
    <div class="umss_text">
      <div class="umss_high">Gesucht wird XYZ </div>     
      <div class="umss_high2">  XZ Jahre alt &clubs; Beruf     &clubs; sieht aus wie</div>
      TEXT
    </div>
  </div>
  <div class="umss_such"><div class="umss_text">
      <div class="umss_high">Es sucht XYZ </div>     
      <div class="umss_high2">  XZ Jahre alt  &clubs; Beruf     &clubs; sieht aus wie</div>
      TEXT
    </div>
    <div class="umss_img" style="background-image:url('https://via.placeholder.com/100x150')"></div>
  </div>
  <div class="umss_such2">
    <div class="umss_text2">
      <div class="umss_high">Vergangenheit / Zukunft</div>
       TEXT
      </div>
  </div>
  <div class="umss_such2">
    <div class="umss_text2">
      <div class="umss_high">Der klägliche Rest</div>
        TEXT
</div></div></div>
<style>@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&family=Unica+One&family=Vidaloka&display=swap');:root{--umsb:#c7bab6;--umsc1:#b59882;--umsc3:#705d50;--umsc4:#b74034;--umsmf:'Vidaloka',serif;--umssf:'Source Sans Pro',sans-serif}.umss_text::-webkit-scrollbar{width:4px}.umss_text::-webkit-scrollbar-thumb{width:4px;background:var(--umscb);border-radius:5px}.umss_text2::-webkit-scrollbar{width:4px}.umss_text2::-webkit-scrollbar-thumb{width:4px;background:var(--umscb);border-radius:5px}.umss_box{width:520px;margin:auto;font-family:var(--umssf);font-size:12px}.umss_header{background:var(--umsc3);height:120px;color:var(--schrift)}.umss_main{font-family:var(--umsmf);font-size:30px;text-align:center;color:var(--umsb);line-height:90px}.umss_subt{font-family:var(--umssf);font-size:10px;text-align:center;color:var(--umsb)}.umss_such{background:var(--umsb);height:180px;width:500px;border:1px solid var(--umsc3);margin:5px;padding:5px}.umss_img{border:1px solid var(--umsc3);width:100px;height:150px;border-radius:10px;float:left;margin:15px 5px 5px 5px;background-size:cover}.umss_text{color:var(--umsc3);padding:5px;float:left;overflow:auto;width:370px;height:160px;text-align:justify}.umss_high{font-family:var(--umsmf);font-size:18px;font-weight:bolder}.umss_high2{color:var(--umsc4)}.umss_text2{color:var(--umsc3);padding:5px;float:left;overflow:auto;height:120px;text-align:justify}.umss_such2{background:var(--umsb);height:130px;width:500px;border:1px solid var(--umsc3);margin:5px;padding:5px}</style>

Wenn ihr die Palette der Gesuchten erweitern wollt, dann nehmt diesen Teil des Codes

Code:

<div class="umss_such">
    <div class="umss_img" style="background-image:url('https://via.placeholder.com/100x150"></div>
    <div class="umss_text">
      <div class="umss_high">Gesucht wird XYZ </div>     
      <div class="umss_high2">  XZ Jahre alt     &clubs; Beruf     &clubs; sieht aus wie</div>
    TEXT</div>
  </div>

und stellt ihn einfach noch mal rein, nach dem ersten Block ;)

lg das Team