Code:
<link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,600,600i" rel="stylesheet"><style type="text/css">/* Pink-Ton 1: #5d6970, Pink-Ton 2: #5d6970, Hintergrundfarbe: #F3F3F3, Grau-Ton des Headerhintergrunds: #EBEBEB, Farbe der Trennlinien: #BBBBBB */ #pink_container { width: 500px; margin: auto; background-color: #F3F3F3; box-sizing: border-box; padding: 5px; border-radius: 5px; border-bottom: 5px solid #333; } #pink_container > .pink_textbox > b { color: #5d6970; font-size: inherit; font-family: "Roboto", sans-serif; letter-spacing: 0px; text-transform: none; text-decoration: none; font-style: normal; font-weight: 500; text-shadow: 1px 1px 1px #f8f8f8; } #pink_container > .pink_textbox > i { color: #B80653; font-size: inherit; font-family: "Roboto", sans-serif; letter-spacing: 0px; text-transform: none; text-decoration: none; font-style: italic; font-weight: 400; text-shadow: 1px 1px 1px #f8f8f8; } #pink_container > .pink_textbox > u { color: #000000; font-size: inherit; font-family: "Roboto", sans-serif; letter-spacing: 0px; text-transform: none; text-decoration: underline; font-style: normal; font-weight: 400; } #pink_container > .pink_header { background-color: #EBEBEB; width: 490px; height: auto; box-sizing: border-box; text-align: center; padding: 15px; } /* Große Überschriften */ #pink_container > .pink_header > .pink_headline { display: block; text-align: center; color: #000000; font-size: 26px; font-family: "Lato", sans-serif; letter-spacing: 8px; text-transform: uppercase; font-weight: 700; line-height: 32px; margin: 5px auto; } #pink_container > .pink_header > .pink_divider { height: 2px; background-color: #BBBBBB; box-shadow: inset 50px 0px 100px -50px #f3f3f3, inset -50px 0px 100px -50px #f3f3f3; width: 80%; margin: 10px auto; line-height: 20px; } /* Beschreibungen */ #pink_container > .pink_header > .pink_subline { display: block; text-align: center; color: #000000; font-size: 16px; font-family: "Roboto", sans-serif; letter-spacing: 0px; text-transform: none; font-weight: 400; line-height: 20px; } /* Pinke Container für Namen, Labels, etc. */ #pink_container > .pink_header > .pink_sectiontitle { display: inline-block; text-align: center; margin: 15px auto 10px; box-sizing: border-box; width: auto; height: auto; padding: 15px 25px; background-color: #5d6970; color: #ffffff; font-size: 12px; font-family: "Roboto", sans-serif; letter-spacing: 6px; text-transform: uppercase; font-weight: 400; line-height: 15px; border-radius: 5px; border-bottom: 3px solid #333; } #pink_container > .pink_textbox { width: 490px; height: auto; min-height: 108px; box-sizing: border-box; padding: 15px; text-align: justify; color: #000000; font-size: 11px; line-height: 15px; font-family: "Roboto", sans-serif; letter-spacing: 0px; text-transform: none; font-weight: 400; } /* Bilder */ #pink_container > .pink_textbox > .pink_img { width: 75px; /* Breite der Bilder im Gesuch */ height: 75px; /* Höhe der Bilder im Gesuch */ border-radius: 5px; border-bottom: 3px solid #333; } #pink_container > .pink_textbox > .pink_img.left { float: left; margin: 0px 15px 10px 0px; } #pink_container > .pink_textbox > .pink_img.right { float: right; margin: 0px 0px 10px 15px; } #pink_container > #pink_footer { height: 25px; width: 500px; margin: auto -5px -5px; background-color: #333; text-align: right; box-sizing: border-box; padding: 5px 10px; } #pink_footer a, #pink_footer a:active, #pink_footer a:hover { color: #F3F3F3; font-size: 11px; font-family: "Roboto", sans-serif; letter-spacing: 0px; text-transform: none; font-weight: 400; text-decoration: none; }</style><div id="pink_container"><div class="pink_header"><div class="pink_headline">Der Suchende</div><div class="pink_divider"></div><div class="pink_subline">Zum Suchenden!</div><div class="pink_sectiontitle">Name</div></div><div class="pink_textbox"><img src="https://via.placeholder.com/75" class="pink_img left">Erzähl uns, wer sucht!</div><div class="pink_header"><div class="pink_headline">Der Gesuchte</div><div class="pink_divider"></div><div class="pink_subline">Zum Gesuchten!</div><div class="pink_sectiontitle">Name</div></div><div class="pink_textbox"><img src="https://via.placeholder.com/75" class="pink_img right">Erzähl uns, wen du suchst!</div><div class="pink_header"><div class="pink_headline">Der Poster</div><div class="pink_divider"></div><div class="pink_subline">Name</div></div><div class="pink_textbox">Erzähle den Interessenten etwas über dein Postingverhalten!</div><div id="pink_footer"><a href="http://storming-gates.de/member.php?action=profile&uid=1295">by autumn leaves</7a></div></div>
