Code:
<llWA><top>Name1, Name2 (oder Chatname)<br /> Jannuary 01, 2017</top><llscroll><left>erste Nachricht von Name1 in left-tag <date>00:00</date></left>
<left2>zweite Nachricht von Name1 in left2-tag <date>00:00</date></left2>
<right>erste Nachricht von Name2 in right-tag <date>00:00</date></right>
<right2>zweite Nachricht von Name2 in right2-tag <date>00:00</date></right2></llscroll></llWA><llWAcopy>code by <a href="http://storming-gates.de/member.php?action=profile&uid=606">lunatic lass</a> • inspired by <a href="https://www.whatsapp.com/?l=de">whatsapp</a></llWAcopy><head><style>llWA {height: 850px; width: 450px; background: rgb(7,94,84) /*
HINTERGRUNDBILD: */ url('http://writeyourtale.bplaced.net/archive/pictures/Codebilder/whatsappHG1_(450x800).jpg') no-repeat bottom; border: 2px solid black; border-top-width: 15px; color: black; font-family: Verdana, sans-serif; font-size: 12px; line-height: 1; display: block; margin: auto;} llWA top {height: 39px; background: rgb(7,94,84); color: white; display: block; font-size: 14px; line-height: 1.4; padding: 6px 10px 5px;} llWA top::first-line {font-size: 20px; line-height: 1;} llWA llscroll {height: 790px; width: 450; color: black; display: block; margin: 5px 0px; overflow: auto; scrollbar-arrow-color: grey; scrollbar-base-color: silver; scrollbar-track-color: silver; scrollbar-face-color: grey;} llWA llscroll::-webkit-scrollbar {width: 6px;} llWA llscroll::-webkit-scrollbar-track {background: rgba(0,0,0,0)} llWA llscroll::-webkit-scrollbar-thumb {background: -o-linear-gradient(left, rgba(33,33,33,0) 5%, rgba(33,33,33,1) 15%, rgba(33,33,33,1) 40%, rgba(33,33,33,0) 50%); background: -ms-linear-gradient(left, rgba(33,33,33,0) 5%, rgba(33,33,33,1) 15%, rgba(33,33,33,1) 40%, rgba(33,33,33,0) 50%); background: -moz-linear-gradient(left, rgba(33,33,33,0) 5%, rgba(33,33,33,1) 15%, rgba(33,33,33,1) 40%, rgba(33,33,33,0) 50%); background: -webkit-linear-gradient(left, rgba(33,33,33,0) 5%, rgba(33,33,33,1) 15%, rgba(33,33,33,1) 40%, rgba(33,33,33,0) 50%); background: linear-gradient(left, rgba(33,33,33,0) 5%, rgba(33,33,33,1) 15%, rgba(33,33,33,1) 40%, rgba(33,33,33,0) 50%);} llWA left, llWA left2 {background: white; display: block; float: left; position: relative; clear: both; border-radius: 0px 5px 5px; margin: 5px 40px 0px 15px; padding: 3px 38px 3px 5px; -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75); box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);} llWA right, llWA right2 {background: rgb(225,255,199); display: block; float: right; position: relative; clear: both; border-radius: 5px 0px 5px 5px; margin: 5px 15px 0px 40px; padding: 3px 38px 3px 5px; -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75); box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75);} llWA left::before {content:"\A"; height: 1px; width: 1px; border-top: 7px solid white; border-left: 7px solid rgba(0,0,0,.0); position: absolute; top: 0px; left: -7px; } llWA right::after {content:"\A"; height: 1px; width: 1px; border-top: 7px solid rgb(225,255,199); border-right: 7px solid rgba(0,0,0,.0); position: absolute; top: 0px; right: -7px;} llWA left2 {margin: 3px 40px 0px 15px; border-radius: 5px;} llWA right2 {margin: 3px 15px 0px 40px; border-radius: 5px;} llWA date {color: rgb(154,154,154); font-size: 9px; position: absolute; right: 5px; bottom: 2px; clear: both;} llWA img {max-width: 250px !important; margin: 3px;} llWA a {color: -webkit-link !important; font-weight: normal !important; text-decoration: underline !important; text-shadow: none !important; text-transform: none !important;} llWAcopy {width: 450px; display: block; margin: auto; text-align: right;}</style></head>