Gesuchsvorlage
Die wundervolle Nilona aus dem Storming Gates hat uns erlaubt ihre schöne Vorlage auch als Standard zu nutzen. Daher wäre es auch schön, wenn ihr eben jenen Code für eure Gesuche nutzt. Wir haben das CSS auch bereits angepasst und den Credit - in Absprache - unsichtbar in diesem eingebaut. Dennoch ist es schön, wenn ihr kurz unter dem Template to Go einmal selbst Danke sagt. (Wer keinen SG Account hat, gibt einfach kurz Bescheid. Dann übernimmt dies das Team.)
Code:
<html>
<div class="miba-wrap">
<div class="miba-h1">dearly <span>depressed</span><br>and broken hearted</div>
<div class="miba-h2"><span>You are alive but are you living?</span></div>
<div class="miba-intro">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <b>At vero eos et accusam</b> 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.<br>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. <b>Lorem ipsum dolor sit amet,</b> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="miba-person">
<div class="miba-bild" style="background: linear-gradient(rgba(var(--miba-piccolor), 0.75),rgba(var(--miba-piccolor), 0.75)), url('https://via.placeholder.com/550x180') 50% 30%; background-size: cover;"><span>Der Suchende</span></div>
<div class="miba-title"><span>Are you complete or is something missing?</span></div>
<div class="miba-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <b>At vero eos et accusam</b> 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.<br>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. <b>Lorem ipsum dolor sit amet,</b> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <b>At vero eos et accusam</b> 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.<br>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. <b>Lorem ipsum dolor sit amet,</b> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<div class="miba-person">
<div class="miba-bild" style="background: linear-gradient(rgba(var(--miba-piccolor), 0.75),rgba(var(--miba-piccolor), 0.75)), url('https://via.placeholder.com/550x180') 50% 60%; background-size: cover;"><span>Die Gesuchte</span></div>
<div class="miba-title"><span>Are you complete or is something missing?</span></div>
<div class="miba-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <b>At vero eos et accusam</b> 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.<br>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. <b>Lorem ipsum dolor sit amet,</b> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <b>At vero eos et accusam</b> 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.<br>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. <b>Lorem ipsum dolor sit amet,</b> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</html>
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+TC:400,900|Open+Sans" rel="stylesheet">
<style type="text/css">:root { --miba-color: 71, 70, 70; --miba-piccolor: 198, 198, 198; --miba-width: 550px; } .miba-wrap { width: var(--miba-width); box-sizing: border-box; padding: 30px 30px 0 30px; background: #1c1717; margin: 0 auto; font-family: 'Open Sans'; font-size: 13px; color: #ccc; position: relative; overflow: hidden; } .miba-h1 { font-family: 'Noto Serif TC'; font-size: 35px; font-weight: 900; line-height: 35px; margin-bottom: 15px; } .miba-h1 span, .miba-intro b, .miba-title span, .miba-text b { padding: 0 5px; background-image: linear-gradient(to right, transparent 50%, rgba(var(--miba-color), 0.5) 50%); background-origin: 0; background-size: 200% 25%; background-repeat: repeat-x; background-position: 0 100%; background-position: -100% 82%; } .miba-h2 { margin-bottom: 40px; } .miba-h2 span { font-family: 'Noto Serif TC'; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; background: rgba(var(--miba-color), 0.3); padding: 5px 10px; } .miba-intro { font-size: 13px; text-align: justify; margin: 30px 0; line-height: 20px; } .miba-bild { width: var(--miba-width); height: 250px; position: relative; left: -30px; position: relative; } .miba-bild span { position: absolute; bottom: 15px; right: 0; background: rgba(var(--miba-color)); padding: 5px 48px 5px 10px; font-weight: bold; font-size: 9px; text-transform: uppercase; letter-spacing: 2px; } .miba-text { text-align: justify; margin-bottom: 30px; line-height: 20px; max-height: 300px; overflow: auto; padding-right: 15px; } .miba-text::-webkit-scrollbar { width: 3px; } .miba-text::-webkit-scrollbar-thumb { background: #efefef; } .miba-title { font-family: 'Noto Serif TC'; font-size: 16px; line-height: 18px; font-weight: 900; margin: 30px 0 15px 0; } .miba-credit { text-align: center; font-family: 'Fira Sans', sans-serif; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; margin: 0; padding-top: 5px; } / Vielen Dank an Nilonia @ Storming Gates für den tollen Code und die Erlaubnis zur Nutzung! /</style>