BOOTSTRAP VERSION:
<!---
BE AROUND ME (BS) / by cati/dogboy
NOTES
mobile friendly + boostrap colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container" style="background:none;max-width:900px;padding:10px 40px 0px;margin:30px auto 5px;">
<div class="row">
<!--- first column --->
<div class="col-lg-4 p-2">
<!--- main image --->
<div class="card p-3" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/28851169_oW6DqT0NfDvCNXz.png');background-size:cover;background-position:center;border-radius:25px;border:0px;box-shadow:1px 1px 6px #000000;height:455px;">
</div>
<!--- title card --->
<div class="card py-2 px-4 mt-3 bg-dark" style="border-radius:0px;border:0px;border-radius:15px;box-shadow:1px 1px 6px #000000;">
<a href="URLHERE" class="text-uppercase" style="color:#FFF;"><h3 style="font-weight:300;">title</h3></a>
<span class="font-italic text-center p-2" style="color:#FFF;letter-spacing:10px;">and</span>
<a href="URLHERE" class="text-uppercase" style="color:#FFF;"><h3 style="font-weight:300;" align="right">title</h3></a>
</div>
<!--- hearts --->
<p class="mt-3 justify-content-center">
<i class="far fa-heart text-warning" style="font-size:40px;"></i><i class="fas fa-heart mx-1 text-success" style="font-size:40px;"></i><i class="far fa-heart text-warning" style="font-size:40px;"></i><i class="fas fa-heart mx-1 text-success" style="font-size:40px;"></i><i class="far fa-heart text-warning" style="font-size:40px;"></i>
</p>
</div>
<!--- second column --->
<div class="col-lg-8 p-2">
<!--- quote box --->
<div class="card py-3 px-5 bg-dark" style="border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
<span class="font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;font-weight:300;"><i class="fas fa-quote-left" style="color:#FFFFFF" /> short quote from character 1</span>
<span class="font-italic text-right" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;font-weight:300;">response quote from character 2 <i class="fas fa-quote-right" style="color:#FFFFFF" /></span>
</div>
<!--- character 1 --->
<div class="row no-gutters mt-3">
<div class="col-lg-3">
<!--- icon --->
<img class="fr-rounded mx-auto d-flex" style="border:solid 5px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/28269824_lZt.png">
</div>
<div class="col-lg-9 my-auto p-3">
<!--- character 1 thoughts --->
<div class="card p-2 bg-warning" style="border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
<p class="m-2 text-center" style="color:#FFF;font-size:12px;"><i class="m-1 fa-lg fas fa-quote-left float-left" style="color:#FFF" />This box doesn't scroll, so keep it to 4-5 lines at maximum/ideal. It's supposed to be an anecdotal from the character, when you ask them about the other character!<i class="m-1 fa-lg fas fa-quote-right float-right" style="color:#FFF" /></p>
</div>
</div>
</div>
<!--- character 2 --->
<div class="row no-gutters mt-3">
<div class="col-lg-9 my-auto p-3">
<!--- character 2 thoughts --->
<div class="card p-2 bg-success" style="border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
<p class="m-2 text-center" style="color:#FFF;font-size:12px;"><i class="m-1 fa-lg fas fa-quote-left float-left" style="color:#FFF" />This box doesn't scroll, so keep it to 4-5 lines at maximum/ideal. It's supposed to be an anecdotal from the character, when you ask them about the other character! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac.<i class="m-1 fa-lg fas fa-quote-right float-right" style="color:#FFF" /></p>
</div>
</div>
<div class="col-lg-3">
<!--- icon --->
<img class="fr-rounded mx-auto d-flex" style="border:solid 5px;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/28836368_UC5.png">
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-lg-6 p-2">
<!--- relationship description --->
<div class="card p-3 bg-dark" style="border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
<p class="text-center" style="color:#FFF;height:158px;overflow:auto;font-size:12px;">A short description about their relationship. Can be about how they met, why they love each other so much, etc. This box scrolls, so you can go ham. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vie. Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="col-lg-6 p-2 my-auto">
<div class="card p-3 text-center bg-dark" style="border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
<!--- music player and playlist, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! --->
<span><iframe class="flex-fill" style="height:3em;width:3em;opacity:0;position:absolute;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/URLHERE"></iframe><i class="far fa-play-circle fa-spin fa-3x" style="animation-duration:10s;color:#FFF;"></i></span>
<div class="row mt-2">
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="9449443" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
CUSTOM COLORS:
<!---
BE AROUND ME (CC) / by cati/dogboy
NOTES
duo color: #AA7CB2
character 1 color: #B27C84
character 2 color: #7CB2AA
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container" style="background:none;max-width:900px;padding:10px 40px 0px;margin:30px auto 5px;">
<div class="row">
<!--- first column --->
<div class="col-lg-4 p-2">
<!--- main image --->
<div class="card p-3" style="background:url('https://f2.toyhou.se/file/f2-toyhou-se/images/28851169_oW6DqT0NfDvCNXz.png');background-size:cover;background-position:center;border-radius:25px;border:0px;box-shadow:1px 1px 6px #000000;height:455px;">
</div>
<!--- title card --->
<div class="card py-2 px-4 mt-3" style="background-color:#AA7CB2;border-radius:0px;border:0px;border-radius:15px;box-shadow:1px 1px 6px #000000;">
<a href="URLHERE" class="text-uppercase" style="color:#FFF;"><h3 style="font-weight:300;">TITLE</h3></a>
<span class="font-italic text-center p-2" style="color:#FFF;letter-spacing:10px;">and</span>
<a href="URLHERE" class="text-uppercase" style="color:#FFF;"><h3 style="font-weight:300;" align="right">TITLE</h3></a>
</div>
<!--- hearts --->
<p class="mt-3 justify-content-center">
<i class="far fa-heart" style="font-size:40px;color:#7CB2AA"></i><i class="fas fa-heart mx-1" style="font-size:40px;color:#B27C84"></i><i class="far fa-heart" style="font-size:40px;color:#7CB2AA"></i><i class="fas fa-heart mx-1" style="font-size:40px;color:#B27C84"></i><i class="far fa-heart" style="font-size:40px;color:#7CB2AA"></i>
</p>
</div>
<!--- second column --->
<div class="col-lg-8 p-2">
<!--- quote box --->
<div class="card py-3 px-5" style="background-color:#AA7CB2;border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
<span class="font-italic" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;font-weight:300;"><i class="fas fa-quote-left" style="color:#FFFFFF" />short quote from character 1</span>
<span class="font-italic text-right" style="color:#FFFFFF;font-size:20px;letter-spacing:2px;font-weight:300;">response quote from character 2 <i class="fas fa-quote-right" style="color:#FFFFFF" /></span>
</div>
<!--- character 1 --->
<div class="row no-gutters mt-3">
<div class="col-lg-3">
<!--- icon --->
<img class="fr-rounded mx-auto d-flex" style="border:solid 5px #B27C84;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/28269824_lZt.png">
</div>
<div class="col-lg-9 my-auto p-3">
<!--- character 1 thoughts --->
<div class="card p-2" style="background-color:#B27C84;border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
<p class="m-2 text-center" style="color:#FFF;font-size:12px;"><i class="m-1 fa-lg fas fa-quote-left float-left" style="color:#FFF" />This box doesn't scroll, so keep it to 4-5 lines at maximum/ideal. It's supposed to be an anecdotal from the character, when you ask them about the other character!<i class="m-1 fa-lg fas fa-quote-right float-right" style="color:#FFF" /></p>
</div>
</div>
</div>
<div class="row no-gutters mt-3">
<div class="col-lg-9 my-auto p-3">
<!--- character 2 thoughts --->
<div class="card p-2" style="background-color:#7CB2AA;border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
<p class="m-2 text-center" style="color:#FFF;font-size:12px;"><i class="m-1 fa-lg fas fa-quote-left float-left" style="color:#FFF" />This box doesn't scroll, so keep it to 4-5 lines at maximum/ideal. It's supposed to be an anecdotal from the character, when you ask them about the other character! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. <i class="m-1 fa-lg fas fa-quote-right float-right" style="color:#FFF" /></p>
</div>
</div>
<div class="col-lg-3">
<!--- icon --->
<img class="fr-rounded mx-auto d-flex" style="border:solid 5px #7CB2AA;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/28836368_UC5.png">
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-lg-6 p-2">
<!--- relationship description --->
<div class="card p-3" style="background-color:#AA7CB2;border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
<p class="text-center" style="color:#FFF;height:158px;overflow:auto;font-size:12px;">A short description about their relationship. Can be about how they met, why they love each other so much, etc. This box scrolls, so you can go ham. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vie. Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="col-lg-6 p-2 my-auto">
<div class="card p-3 text-center" style="background-color:#AA7CB2;border-radius:0px;border:0px;border-radius:25px;box-shadow:1px 1px 6px #000000;">
<!--- music player and playlist, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! --->
<span><iframe class="flex-fill" style="height:3em;width:3em;opacity:0;position:absolute;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/URLHERE"></iframe><i class="far fa-play-circle fa-spin fa-3x" style="animation-duration:10s;color:#FFF;"></i></span>
<div class="row mt-2">
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#FFFFFF;font-weight:300;letter-spacing:0.05em;font-size:12px;">song name / <i>artist</i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="9449443" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
