Gesuchsvorlage #2 - Druckversion

Rain falls slowly

Wichtiger Fakt Fakt Fakt Fakt

I've been watching it

Wichtiger Fakt Fakt Fakt Fakt

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. 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.

Code:

<div class="rainfalls">        

        <div class="rainfalls_wanted">

            <div class="rainfalls_wanted_head">Rain falls slowly</div>

            <div class="rainfalls_wanted_inhalt">

                <div class="rainfalls_wanted_inhalt_bild"><img src="https://via.placeholder.com/148x100" /></div>

                <div class="rainfalls_wanted_inhalt_text"><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></div>

            </div>

            <div class="rainfalls_wanted_facts"><fact><span>Wichtiger Fakt</span></fact> <fact>Fakt</fact> <fact>Fakt</fact> <fact>Fakt</fact></div>

        </div>        

        <div class="rainfalls_wanted">

            <div class="rainfalls_wanted_head">I've been watching it</div>

            <div class="rainfalls_wanted_inhalt">

                <div class="rainfalls_wanted_inhalt_text"><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></div>

                <div class="rainfalls_wanted_inhalt_bild"><img src="https://via.placeholder.com/148x100" /></div>

            </div>

            <div class="rainfalls_wanted_facts"><fact><span>Wichtiger Fakt</span></fact> <fact>Fakt</fact> <fact>Fakt</fact> <fact>Fakt</fact></div>

        </div>

        <div class="rainfalls_summary">

            <div class="rainfalls_summary_text"><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. 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></div>

        </div>

</div>

<div class="rainfalls_credit"><a href="https://storming-gates.de/member.php?action=profile&uid=1686" target="_blank">♥</a></div>



<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Euphoria+Script&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet"><style>:root { --rainfallshell: #317e61; --rainfallsmittel: #1e262b; --rainfallsdunkel: #1b2022; --rainfallsfontfarbe: #bbb; }.rainfalls { margin: auto; width: 500px; background: var(--rainfallsdunkel);box-sizing: border-box; padding: 15px 15px 0px 15px; color: var(--rainfallsfontfarbe); }.rainfalls_wanted:first-child { padding-top: 10px; }.rainfalls_wanted:last-child { padding-bottom: 10px; }.rainfalls_wanted { background: var(--rainfallsmittel); padding: 0px 10px; }.rainfalls_wanted_head { text-align: center;color: var(--rainfallshell);font-family: 'Euphoria Script', cursive; font-weight: 400;font-size: 50px; line-height: 40px; text-transform: lowercase; }.rainfalls_wanted_inhalt { display: flex; margin-top: -10px; }.rainfalls_wanted_inhalt_bild { padding: 15px; background: var(--rainfallshell); width: 180px; box-sizing: border-box; }/.rainfalls_wanted_inhalt_bild img { height: 100px; width: 148px; }.rainfalls_wanted_inhalt_bild:nth-child(odd) { margin-right: 6px; }.rainfalls_wanted_inhalt_bild:nth-child(even) { margin-left: 6px; }.rainfalls_wanted_inhalt_text {padding: 15px;background: var(--rainfallshell);width: 270px;box-sizing: border-box; }.rainfalls_wanted_inhalt_text > div {padding-right: 5px;overflow: auto;height: 100px; font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 12px; line-height: 1.2; -ms-overflow-style: none;scrollbar-width: none; }.rainfalls_wanted_inhalt_text > div::-webkit-scrollbar {display: none;}.rainfalls_wanted_facts { display: flex; }.rainfalls_wanted_facts fact { background: var(--rainfallshell); margin: 6px 3px; padding: 4px 5px 3px 5px; font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 10px; text-transform: uppercase; }.rainfalls_wanted_facts fact:first-child { margin-left: 0px; }.rainfalls_wanted_facts fact span { font-weight: 500; }.rainfalls_wanted_facts fact span::before { content: "» "; }.rainfalls_summary { padding: 10px;padding-top: 15px; background: var(--rainfallsmittel); }.rainfalls_summary_text { background: var(--rainfallshell);padding: 15px; }.rainfalls_summary_text > div { font-size: 12px; line-height: 1.2; font-family: 'Rubik', sans-serif; font-weight: 400; max-height: 200px; overflow: auto; -ms-overflow-style: none;scrollbar-width: none; }.rainfalls_summary_text > div::-webkit-scrollbar {display: none;}.rainfalls_credit { background: var(--rainfallsdunkel); width: 500px; margin: auto; text-align: center; font-size: 13px; color: var(--rainfallshell); }.rainfalls_credit a { font-size: 13px; color: var(--rainfallsfontfarbe) !important; }</style>