BOOTSTRAP VERSION:
<!---
FLASH RELATIONS (BS) / by cati/dogboy
NOTES
mobile friendly + bootstrap colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<!--- background image --->
<div class="container p-3" style="background:url('https://images.unsplash.com/photo-1518895312237-a9e23508077d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1063&q=80');background-size:cover;background-position:center;max-width:800px;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-lg-4 justify-content-center">
<!--- image, vertical images work the best here! you might have to play with the height for the ideal look --->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/27763078_8ywlqvDdakbtTZX.gif" style="height:470px;">
</div>
<div class="col-lg-8">
<div class="card" style="height:105px;background:#FFFFFF;border-radius:5px;border:0px;overflow:auto;">
<!--- quote --->
<p class="text-center my-auto p-4 text-primary" style="letter-spacing:1px;font-size:21px;">
<i class="far fa-quote-left"/>
Quote from your character
<i class="far fa-quote-right"/></p>
</div>
<img src="https://cdn.hipwallpaper.com/i/12/49/mA4p2o.png" class="hidden-sm-down" style="transform:rotate(0deg);max-width:50px;clip-path: polygon(0% 0%, 100% 0%, 30% 70%, 40% 0%);">
<div class="card mx-4 my-2 p-3" style="border:0px;background-color:#FFF;height:320px;border-radius:5px;overflow:auto;">
<!--- character 1 --->
<div class="row no-gutters">
<div class="col-lg-4">
<img class="fr-rounded mx-auto d-flex" style="border:4px solid;height:130px;height:130px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27793382_uvh.png">
<h3 class="text-uppercase my-2 p-0" style="font-size:22px;letter-spacing:1px;font-weight:350;" align="center">
<a href="URLHERE">name</a></h3>
</div>
<div class="col-lg-8">
<p class="text-center p-2 text-primary" style="font-size:13px;letter-spacing:0.03em;height:170px;overflow:auto;"><i class="m-1 fas fa-quote-left float-left" />Character's thoughts towards the main character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.<i class="m-1 fas fa-quote-right float-right" /></p>
</div>
</div>
<hr class="bg-primary" style="width:95%;">
<!--- character 2 --->
<div class="row no-gutters">
<div class="col-lg-4">
<img class="fr-rounded mx-auto d-flex" style="border:4px solid;height:130px;height:130px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27687170_2nn.png">
<h3 class="text-uppercase my-2 p-0" style="font-size:22px;letter-spacing:1px;font-weight:350;" align="center">
<a href="URLHERE">name</a></h3>
</div>
<div class="col-lg-8">
<p class="text-center p-2 text-primary" style="font-size:13px;letter-spacing:0.03em;height:170px;overflow:auto;"><i class="m-1 fas fa-quote-left float-left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.<i class="m-1 fas fa-quote-right float-right" /></p>
</div>
</div>
<hr class="bg-primary" style="width:95%;">
<!--- character 3, if you'd like to add more characters, highlight from the beginning of character 2 to this line, and paste after "character 3 end" --->
<div class="row no-gutters">
<div class="col-lg-4">
<img class="fr-rounded mx-auto d-flex" style="border:4px solid;height:130px;height:130px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27683755_Rro.png">
<h3 class="text-uppercase my-2 p-0" style="font-size:22px;letter-spacing:1px;font-weight:350;" align="center">
<a href="URLHERE">name</a></h3>
</div>
<div class="col-lg-8">
<p class="text-center p-2 text-primary" style="font-size:13px;letter-spacing:0.03em;height:170px;overflow:auto;"><i class="m-1 fas fa-quote-left float-left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.<i class="m-1 fas fa-quote-right float-right" /></p>
</div>
</div>
<!--- character 3 end --->
</div>
</div>
</div>
</div>
<!--- credits, dont remove pls! --->
<div class="text-center text-muted" style="font-size:0.7em;letter-spacing:10px;">
<a href="URLHERE" class="text-muted"><span data-toggle="tooltip" title="background image by [ARTIST]"><i class="fas fa-image"></i></span></a> /
<a href="URLHERE" class="text-muted"><span data-toggle="tooltip" title="pagedoll by [ARTIST]"><i class="fas fa-male"></i></span></a> /
<a href="9498514" class="text-muted"><span data-toggle="tooltip" title="code by cati"><i class="fad fa-rainbow"></i></span></a>
</div>
CUSTOM COLORS VERSION:
<!---
FLASH RELATIONS (CC) / by cati/dogboy
NOTES
accent: #A82638
(use ctrl+f + replace for accent replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<!--- background image --->
<div class="container p-3" style="background:url('https://images.unsplash.com/photo-1518895312237-a9e23508077d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1063&q=80');background-size:cover;background-position:center;max-width:800px;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-lg-4 justify-content-center">
<!--- image, vertical images work the best here! you might have to play with the height for the ideal look --->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/27763078_8ywlqvDdakbtTZX.gif" style="height:470px;">
</div>
<div class="col-lg-8">
<div class="card" style="height:105px;background:#FFFFFF;border-radius:5px;border:0px;overflow:auto;">
<!--- quote --->
<p class="text-center my-auto p-4" style="letter-spacing:1px;color:#A82638;font-size:21px;">
<i class="far fa-quote-left" style="color:#A82638" />
Quote from your character
<i class="far fa-quote-right" style="color:#A82638" /></p>
</div>
<img src="https://cdn.hipwallpaper.com/i/12/49/mA4p2o.png" class="hidden-sm-down" style="transform:rotate(0deg);max-width:50px;clip-path: polygon(0% 0%, 100% 0%, 30% 70%, 40% 0%);">
<div class="card mx-4 my-2 p-3" style="border:0px;background-color:#FFF;height:320px;border-radius:5px;overflow:auto;">
<!--- character 1 --->
<div class="row no-gutters">
<div class="col-lg-4">
<img class="fr-rounded mx-auto d-flex" style="border:solid 4px #A82638;height:130px;height:130px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27793382_uvh.png">
<h3 class="text-uppercase my-2 p-0" style="color:#A82638;font-size:22px;letter-spacing:1px;font-weight:350;" align="center">
<a href="URLHERE" style="color:#A82638;">name</a></h3>
</div>
<div class="col-lg-8">
<p class="text-center p-2" style="color:#A82638;font-size:13px;letter-spacing:0.03em;height:170px;overflow:auto;"><i class="m-1 fas fa-quote-left float-left" style="color:#A82638" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.<i class="m-1 fas fa-quote-right float-right" style="color:#A82638" /></p>
</div>
</div>
<!--- character 2 --->
<hr style="background-color:#A82638;width:95%;">
<div class="row no-gutters">
<div class="col-lg-4">
<img class="fr-rounded mx-auto d-flex" style="border:solid 4px #A82638;height:130px;height:130px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27687170_2nn.png">
<h3 class="text-uppercase my-2 p-0" style="color:#A82638;font-size:22px;letter-spacing:1px;font-weight:350;" align="center">
<a href="URLHERE" style="color:#A82638;">name</a></h3>
</div>
<div class="col-lg-8">
<p class="text-center p-2" style="color:#A82638;font-size:13px;letter-spacing:0.03em;height:170px;overflow:auto;"><i class="m-1 fas fa-quote-left float-left" style="color:#A82638" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.<i class="m-1 fas fa-quote-right float-right" style="color:#A82638" /></p>
</div>
</div>
<!--- character 3 if you'd like to add more characters, highlight from the beginning of character 2 to this line, and paste after "character 3 end" --->
<hr style="background-color:#A82638;width:95%;">
<div class="row no-gutters">
<div class="col-lg-4">
<img class="fr-rounded mx-auto d-flex" style="border:solid 4px #A82638;height:130px;height:130px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27683755_Rro.png">
<h3 class="text-uppercase my-2 p-0" style="color:#A82638;font-size:22px;letter-spacing:1px;font-weight:350;" align="center">
<a href="URLHERE" style="color:#A82638;">name</a></h3>
</div>
<div class="col-lg-8">
<p class="text-center p-2" style="color:#A82638;font-size:13px;letter-spacing:0.03em;height:170px;overflow:auto;"><i class="m-1 fas fa-quote-left float-left" style="color:#A82638" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.<i class="m-1 fas fa-quote-right float-right" style="color:#A82638" /></p>
</div>
</div>
<!--- character 3 end --->
</div>
</div>
</div>
</div>
<!--- credits, dont remove pls! --->
<div class="text-center text-muted" style="font-size:0.7em;letter-spacing:10px;">
<a href="URLHERE" class="text-muted"><span data-toggle="tooltip" title="background image by [ARTIST]"><i class="fas fa-image"></i></span></a> /
<a href="URLHERE" class="text-muted"><span data-toggle="tooltip" title="pagedoll by [ARTIST]"><i class="fas fa-male"></i></span></a> /
<a href="9498514" class="text-muted"><span data-toggle="tooltip" title="code by cati"><i class="fad fa-rainbow"></i></span></a>
</div>
