<!-----
[F2U] Chit Chat - arkaingel
TOS & INFO: https://toyhou.se/18463664.-f2u-chit-chat
----
BG COLOR: #f3f3f3
ACCENT: #a8bfc1
TEXT: #000
----->
<div class="mx-auto" style="max-width:1000px">
<!------------------------------------------------
CHARACTER LEFT START
-------------------------------------------------->
<div class="row no-gutters mr-3 mb-4">
<div class="col-sm-3 align-items-center">
<div class="container-fluid mx-auto" style="background-color:#f3f3f3; height:150px; width:150px; border-radius:100%;
background-size:contain; background-position:center; background-repeat:no-repeat; background-image:
url(https://file.garden/ZYOzlMFgsgr29Y0h/TH%20Codes/-PLACEHOLDER/chitchat.gif)"></div>
<!------IMAGE(LINK)----->
</div>
<div class="col-sm-9 row no-gutters">
<div class="col-auto hidden-xs-down align-items-center">
<span style="display:block; border-right:20px solid #f3f3f3;
border-top:15px solid transparent; border-bottom:15px solid transparent;"></span>
</div>
<div class="col-12 hidden-sm-up justify-content-center mt-3">
<span style="display:block; border-bottom:20px solid #f3f3f3;
border-right:15px solid transparent; border-left:15px solid transparent;"></span>
</div>
<div class="col">
<div class="container-fluid align-items-center py-3 px-5" style="background-color:#f3f3f3; color:#000; min-height:150px; border-radius:1rem;">
<i class="fa-solid fa-quote-left" style="color:#a8bfc1; position:absolute; left:1.5em; top:1.5em"></i>
<i class="fa-solid fa-quote-right" style="color:#a8bfc1; position:absolute; right:1.5em; bottom:1.5em"></i>
<!--------------INTRO----->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</div>
</div>
<div class="col-12">
<a class="btn pull-right mt-n3 mr-n3" style="background-color:#a8bfc1; color:#000; font-variant:small-caps; position:relative; z-index:1"
href="#">
<!----------CHARACTER LINK----->
View Character <i class="fa-solid fa-solid fa-caret-right"></i>
</a>
</div>
</div>
</div><!-----CHARACTER LEFT END----->
<!------------------------------------------------
CHARACTER RIGHT START
-------------------------------------------------->
<div class="row no-gutters ml-3 mb-4">
<div class="col-sm-3 order-sm-2 align-items-center">
<div class="container-fluid mx-auto" style="background-color:#f3f3f3; height:150px; width:150px; border-radius:100%;
background-size:contain; background-position:center; background-repeat:no-repeat; background-image:
url(https://file.garden/ZYOzlMFgsgr29Y0h/TH%20Codes/-PLACEHOLDER/chitchat.gif)"></div>
<!------IMAGE(LINK)----->
</div>
<div class="col-sm-9 row no-gutters order-sm-1">
<div class="col-auto order-2 hidden-xs-down align-items-center">
<span style="display:block; border-left:20px solid #f3f3f3;
border-top:15px solid transparent; border-bottom:15px solid transparent;"></span>
</div>
<div class="col-12 hidden-sm-up justify-content-center mt-3">
<span style="display:block; border-bottom:20px solid #f3f3f3;
border-right:15px solid transparent; border-left:15px solid transparent;"></span>
</div>
<div class="col order-1">
<div class="container-fluid align-items-center py-3 px-5" style="background-color:#f3f3f3; color:#000; min-height:150px; border-radius:1rem;">
<i class="fa-solid fa-quote-left" style="color:#a8bfc1; position:absolute; left:1.5em; top:1.5em"></i>
<i class="fa-solid fa-quote-right" style="color:#a8bfc1; position:absolute; right:1.5em; bottom:1.5em"></i>
<!--------------INTRO----->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</div>
</div>
<div class="col-12 order-3">
<a class="btn pull-left mt-n3 ml-n3" style="background-color:#a8bfc1; color:#000; font-variant:small-caps; position:relative; z-index:1"
href="#">
<!----------CHARACTER LINK----->
View Character <i class="fa-solid fa-solid fa-caret-right"></i>
</a>
</div>
</div>
</div><!-----CHARACTER RIGHT END----->
<!------------------------------------------------
CHARACTER LEFT START
-------------------------------------------------->
<div class="row no-gutters mr-3 mb-4">
<div class="col-sm-3 align-items-center">
<div class="container-fluid mx-auto" style="background-color:#f3f3f3; height:150px; width:150px; border-radius:100%;
background-size:contain; background-position:center; background-repeat:no-repeat; background-image:
url(https://file.garden/ZYOzlMFgsgr29Y0h/TH%20Codes/-PLACEHOLDER/chitchat.gif)"></div>
<!------IMAGE(LINK)----->
</div>
<div class="col-sm-9 row no-gutters">
<div class="col-auto hidden-xs-down align-items-center">
<span style="display:block; border-right:20px solid #f3f3f3;
border-top:15px solid transparent; border-bottom:15px solid transparent;"></span>
</div>
<div class="col-12 hidden-sm-up justify-content-center mt-3">
<span style="display:block; border-bottom:20px solid #f3f3f3;
border-right:15px solid transparent; border-left:15px solid transparent;"></span>
</div>
<div class="col">
<div class="container-fluid align-items-center py-3 px-5" style="background-color:#f3f3f3; color:#000; min-height:150px; border-radius:1rem;">
<i class="fa-solid fa-quote-left" style="color:#a8bfc1; position:absolute; left:1.5em; top:1.5em"></i>
<i class="fa-solid fa-quote-right" style="color:#a8bfc1; position:absolute; right:1.5em; bottom:1.5em"></i>
<!--------------INTRO----->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
</div>
</div>
<div class="col-12">
<a class="btn pull-right mt-n3 mr-n3" style="background-color:#a8bfc1; color:#000; font-variant:small-caps; position:relative; z-index:1"
href="#">
<!----------CHARACTER LINK----->
View Character <i class="fa-solid fa-solid fa-caret-right"></i>
</a>
</div>
</div>
</div><!-----CHARACTER LEFT END----->
<!-----CREDIT - DO NOT REMOVE------------------------------------------------------------->
<div class="text-right mx-auto mt-2 faded" style="font-size:.75em">
<a href="https://toyhou.se/Arkaingel" title="HTML by Arkaingel" class="tooltipster text-muted faded small" style="text-decoration:none">
HTML BY ARKAINGEL
<span class="fa-stack" style="vertical-align: top;">
<i class="fa-solid fa-feather fa-stack-1x" style="font-size:.75em;"></i>
<i class="fa-light fa-brackets fa-stack-2x"></i>
</span>
</a>
</div>
</div>
