<!--- chitter chatter by onethird
thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
container background: #C8C8C8
chat background: #000000
online background, light part of borders: #ffffff
dark part of borders: #525252
chat text: white
text: black
user 1, textbox user: #FF0000
user 2: #13AC00
user 3: #000CFF
user 4: #FF00B6
--->
<div class="container p-1" style="max-width:700px; background:#C8C8C8; font-size:13px; font-family:georgia">
<div class="row no-gutters">
<!--- chat box --->
<div class="col-8" style="height:300px;">
<div class="card h-100 p-1 rounded-0 overflow-auto" style="border-top:3px solid #525252; border-left:3px solid #525252; border-right:2px solid #ffffff; border-bottom:2px solid #ffffff; background:#000000">
<!-------------------- CHATTING AREA --------------------->
<p class="my-1" style="font-size:15px; color:white;">***NOW CHATTING***</p>
<p class="m-0" style="color:white;">'username1', 'username2', 'username3' has entered the chat.</p>
<p class="m-0" style="color:white;"><span class="font-weight-bold pr-1" style="color:#FF0000">username1:</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="m-0" style="color:white;"><span class="font-weight-bold pr-1" style="color:#13AC00">username2:</span>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p class="m-0" style="color:white;"><span class="font-weight-bold pr-1" style="color:#000CFF">username3:</span>Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p class="m-0" style="color:white;"><span class="font-weight-bold pr-1" style="color:#FF00B6">username4:</span>are yall okay...</p>
<p class="m-0" style="color:white;">username1', 'username2', 'username3' has left the chat.</p>
<p class="my-1" style="font-size:15px; color:white;">***CHAT HAS ENDED***</p>
<!-------------------- CHATTING AREA ENDS ---------------->
</div>
</div>
<!--- online box --->
<div class="col-4" style="height:300px; padding-left:10px;">
<div class="card h-100 rounded-0 overflow-auto" style="border-top:3px solid #525252; border-left:3px solid #525252; border-right:2px solid #ffffff; border-bottom:2px solid #ffffff; background:#ffffff">
<h3 class="text-center" style="color:black;">ONLINE:</h3>
<!--- user 1 --->
<div class="row p-1 no-gutters">
<div class="col-2">
<div class="card rounded-0" style="width:35px; height:35px; border 2px solid black; background:url(https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_960_720.jpg); background-size:cover; background-position:center;"></div>
</div>
<div class="col-sm-10">
<a href="#" style="color:#FF0000;">
<p class="pt-2 p-1 font-weight-bold">username1</p>
</a>
</div>
</div>
<!--- user 2 --->
<div class="row p-1 no-gutters">
<div class="col-2">
<div class="card rounded-0" style="width:35px; height:35px; border 2px solid black; background:url(https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_960_720.jpg); background-size:cover; background-position:center;"></div>
</div>
<div class="col-sm-10">
<a href="#" style="color:#13AC00;">
<p class="pt-2 p-1 font-weight-bold">username2</p>
</a>
</div>
</div>
<!--- user 3 --->
<div class="row p-1 no-gutters">
<div class="col-2">
<div class="card rounded-0" style="width:35px; height:35px; border 2px solid black; background:url(https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_960_720.jpg); background-size:cover; background-position:center;"></div>
</div>
<div class="col-sm-10">
<a href="#" style="color:#000CFF;">
<p class="pt-2 p-1 font-weight-bold">username3</p>
</a>
</div>
</div>
<!--- user 4 --->
<div class="row p-1 no-gutters">
<div class="col-2">
<div class="card rounded-0" style="width:35px; height:35px; border 2px solid black; background:url(https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_960_720.jpg); background-size:cover; background-position:center;"></div>
</div>
<div class="col-sm-10">
<a href="#" style="color:#FF00B6;">
<p class="pt-2 p-1 font-weight-bold">username4</p>
</a>
</div>
</div>
</div>
</div>
</div>
<!--- textbox --->
<div class="row no-gutters mt-1">
<div class="col-10" style="height:30px; padding-right:5px;">
<div class="card h-100 rounded-0" style="border-top:3px solid #525252; border-left:3px solid #525252; border-right:2px solid #ffffff; border-bottom:2px solid #ffffff; background:#ffffff">
<p class="my-auto" style="color:black;">
<span class="font-weight-bold" style="color:#FF00B6;">USERNAME4:</span>
enter text here!</p>
</div>
</div>
<div class="col-2" style="height:30px;">
<div class="card h-100 rounded-0" style="border-top:3px solid #ffffff; border-left:3px solid #ffffff; border-right:2px solid #525252; border-bottom:2px solid #525252; background:#808080">
<p class="my-auto text-center" style="color:black;">Enter</p>
</div>
</div>
</div>
</div>
<!--- credit, do not remove --->
<div class="col-12 p-0 mt-1 text-right">
<a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird"><i class="fas fa-code fa-xs"></i></a>
</div>
